Hướng dẫn để chuyển đổi một web page sang AMP

(Thegioiseo) - Google đã thông báo rằng tốc độ trang web sẽ là một yếu tố xếp hạng tìm kiếm. Sau đó, họ tuyên bố rằng mobile friendly cũng là một yếu tố xếp hạng và có thể là một trong những yếu tố quan trọng hơn. Sau cùng là sự gia tăng ngày càng lớn về số lượng người dùng truy cập một phần hoặc hoàn toàn thông qua các thiết bị di động, vì vậy nếu không có một trang mobile friendly thì khả năng cao bạn sẽ bị cắt giảm lưu lượng truy cập.

​

Bây giờ, hai điều này đang được kết hợp. Chúng tôi đã chỉ ra rằng 40% hoặc nhiều hơn số lượng người truy cập web sẽ từ bỏ trang web của bạn nếu phải mất nhiều hơn khoảng 3s để tải. Nếu nhiều hơn, bạn sẽ mất lưu lượng truy cập lớn hơn.

Trong khi điều này đã được phổ biến cho các trang web trong một thời gian dài, mọi người không nhất thiết phải áp dụng nó vào trình duyệt di động. Các trang web desktop là lớn và nhanh đối với hầu hết các trình duyệt. Chắc chắn rằng một số người vẫn có DSL siêu chậm, tốc độ trang web được giới hạn bởi việc tiếp nhận.

Tuy nhiên, các trang web di động có xu hướng mất nhiều thời gian để tải. Suy cho cùng, các mạng di động thậm chí 4G hoặc 5G hoặc 7G hoặc bất cứ thương hiệu nào họ đã giới hạn thông lượng và tốc độ tải xuống. Họ cũng không xử lý các kết nối đa máy chủ, có nghĩa là nội dung và kịch bản đặt trên CDN có thể khiến vấn đề trở nên trầm trọng hơn trong việc sử dụng nhiều domain để phục vụ nội dung. Quảng cáo cũng là một yếu tố lớn, nhiều dịch vụ quảng cáo di động không quan tâm đến tốc độ và một số các trang web - chẳng hạn như mạng lưới Wikia - nội dung mà bạn muốn xem sẽ xuất hiện trong vòng 5 phút là việc bình thường. Script cũng là một vấn đề với các thiết bị di động ít có khả năng đối phó với các kịch bản kém.

Giải pháp cho toàn bộ vấn đề này được cung cấp bởi Google nhưng nó không nhất thiết là giải pháp lý tưởng cho tất cả mọi người.

Giải pháp

Giải pháp là AMP hay còn gọi là Accelerated Mobile Pages. AMP hoặc AMP Project là một sáng kiến được tài trợ và được thúc đẩy bởi Google và được hỗ trợ bởi các công ty khác bao gồm DoubleClick, OutBrain, Adobe, Quantcast, LinkedIn, Reddit, WordPress, Vimeo và nhiều hơn nữa. Đây là một sáng kiến mở nhằm chuẩn hóa nhanh trên các trang web.

​

Script là rất hiếm và tối thiểu nội dung phải được phục vụ trực tiếp, định dạng được xử lý bởi lệnh HTML như color=”blue” và đa phương tiện là một giấc mơ. Sau đó, có một sự thúc đẩy để nâng cao HTML và chuẩn hóa một số khía cạnh của trang web. Đây là cách chúng ta nhận được những thứ như CSS để thay thế các thông số HTML phiền phức. Đó là cách chúng ta thúc đẩy thành các kịch bản chuẩn, CSS3, HTML 5 và các chuẩn cho các trang web.

Bạn cũng có thể nhớ một số sáng kiến "thất bại". Những nỗ lực trước đó của Google để thêm chuẩn vào web là Schema.org, nó là những hoạt động và có hiệu quả nhưng nó không phải là một lợi ích hữu hữu hình cho hầu hết các trang web.

AMP đồng thời thích và không thích tất cả những điều này. Đó là một sự thúc đẩy để chuẩn hóa các trang web trong một mô hình mới nhưng có rất nhiều giá trị đằng sau nó. Đó là một cách để tạo hoặc xây dựng lại một trang web từ dưới lên để phục vụ nó cho điện thoại di động và quan trọng hơn là phục vụ nội dung rất nhanh. Ý tưởng là để người dùng di động có thể được phục vụ nội dung ngay lập tức hoặc ngay khi có thể đem lại cho họ trải nghiệm tốt hơn.

Tất nhiên điều này là tốt cho kinh doanh. Nó không chỉ giúp bạn tránh được sự sụt giảm về lưu lượng truy cập mà nó còn giúp bạn chuẩn bị cho mình những kế hoạch trong tương lai. Tháng 12 năm ngoái, Google gợi ý rằng việc sử dụng AMP có thể là một yếu tố xếp hạng, điều mà họ không bao giờ làm với Schema hoặc bất kỳ sáng kiến nào khác. Điều đó là rất tuyệt vời và nếu nó xảy ra, bạn cần phải sửa lại trang web của bạn càng sớm càng tốt.

AMP làm việc như thế nào?

AMP không thay thế trang web hiện tại của bạn. Hãy suy nghĩ về nó theo một cách tương tự như cách một trang web di động đã làm việc trước khi thiết kế responsive đến. Một trang web trên www.m.website.com là một trang hoàn toàn khác với một trang www.website.com với cùng một nội dung, rút gọn cho người dùng di động.

AMP làm việc theo một cách tương tự, nó bao gồm 2-3 thành phần:

- AMP HTML. Đây là một tập hợp con của HTML mà bạn được phép sử dụng. Nó hạn chế việc sử dụng các lệnh và mã không làm việc, làm việc kém, hoặc làm chậm trên các thiết bị di động. Bạn có thể đọc thêm tại đây. Bạn cũng được giới hạn trong một phiên bản của CSS.

- AMP JS. AMP HTML là một tập hợp con của HTML được thiết kế để sử dụng nhanh trên điện thoại di động, AMP JS là một tập hợp con của JavaScript. Đó là một thư viện JS cụ thể mà bạn có thể sử dụng để viết kịch bản của bạn. Ví dụ, nó đòi hỏi nội dung từ một nguồn bên ngoài - như một CDN - được tải không đồng bộ.

- AMP CDN. Đây là một mạng lưới phân bổ nội dung và bộ nhớ cache được cung cấp bởi Google, sử dụng tài nguyên máy tính. Nó lưu trữ nội dung AMP và tạo ra một số cải tiến hiệu suất tự động. Bạn có thể đặt bất kỳ hoặc tất cả các nội dung AMP trên nó, bao gồm cả các tập tin HTML, bất kỳ tập tin JS, và tất cả các hình ảnh. Nếu máy chủ web của bạn đủ nhanh, bạn không cần phải sử dụng AMP CDN của Google nếu bạn không muốn.

Dưới đây là một ví dụ. Bài viết này từ The Guardian là một trang HTML bình thường, theo Pingdom, nó mất gần 5s để tải đầy đủ mặc dù rất nhiều trong số đó là tải quảng cáo và nội dung Twitter được nhúng. Thời gian để tải nội dung thực sự là ngắn hơn nhiều. Bạn có thể thêm /amp vào cuối Guardian URL bất kỳ để xem phiên bản điện thoại di động theo cách này. Theo Pingdom, việc kiểm tra tốc độ cho bài viết này là 886 mili giây. Nó có 53 yêu cầu và kích thước trang là 482kb, trái ngược với phiên bản desktop, nó có 248 yêu cầu và kích thước trang là 2.3MB. Bạn có thể nhìn thấy sự khác biệt ngay lập tức.

​

Một điều cần lưu ý là bạn vẫn có thể phục vụ quảng cáo trên các trang AMP của bạn, bạn chỉ cần sử dụng quảng cáo AMP-formatted thông qua những nền tảng AMP. Rất nhiều các mạng quảng cáo lớn hỗ trợ AMP ở mức độ khác nhau nhưng nếu bạn có một giải pháp quảng cáo tùy chọn, bạn sẽ cần phải làm việc với một nhà phát triển để code nó đúng trong AMP và để nó được thêm vào danh sách AMP được hỗ trợ.

Có một vài khuyết điểm để sử dụng AMP. Bạn phải xác nhận trang AMP trước khi bạn có thể sử dụng nó. Bạn cũng phải tải font tùy chọn, khai báo kích thước hình ảnh và một vài code khác.

Chuyển đổi sang AMP

Trước hết, nếu bạn không phải là một nhà phát triển, lời khuyên của tôi là liên hệ với một nhà phát triển. AMP là phức tạp và hạn chế, nó sẽ có lợi cho bạn nếu bạn tìm được một người quen thuộc với hệ thống để giúp bạn và chạy một cách nhanh chóng. Nó không hoàn toàn giống như học một ngôn ngữ lập trình mới.

Cách đơn giản nhất là tạo một phiên bản hoàn toàn mới của trang web, một loại bản sao, tái thực hiện cho các trang web của bạn trong AMP. Trang desktop của bạn sẽ không thay đổi nhưng người sử dụng điện thoại di động sẽ được hướng dẫn đến các phiên bản AMP thay cho máy tính để bàn hoặc một phiên bản di động. Nếu bạn đã sử dụng một thiết kế responsive, đừng lo lắng; bạn có thể giữ nó và phiên bản AMP của nó sẽ không có xung đột.

Nếu bạn sử dụng WordPress, cách đơn giản nhất là thực thi AMP. Tất cả những gì bạn phải làm là tải plugin AMP WordPress. Plugin này được cập nhật vào mỗi thứ 5, có nghĩa là plugin của bạn sẽ bị lỗi thời một cách rất nhanh chóng. Bạn sẽ muốn cập nhật các plugin một cách thường xuyên mặc dù không nhất thiết phải làm điều đó mỗi tuần.

​

Khi plugin được cài đặt, bạn có thể kiểm tra xem liệu các trang AMP của bạn có làm việc hay không bằng cách thêm /amp vào cuối URL của bạn . Hoặc, nếu bạn không có permalinks, bạn có thể thêm ?amp=1 vào cuối để kiểm tra.

Bạn vẫn phải xác nhận các trang AMP của bạn và để làm điều đó, bạn cần phải sử dụng validator chính thức. Bạn có thể tìm thấy các tùy chọn khác nhau - dòng lệnh, giao diện web, phát triển giao diện điều khiển…cũng như các tài liệu hướng dẫn sử dụng và sửa chữa các sai sót.

Điều gì sẽ xảy ra nếu bạn không phải là người dùng WordPress mà lại là một nhà phát triển? Trong trường hợp đó, cách tốt nhất để bắt đầu là một hướng dẫn AMP cơ bản, nó sẽ giúp bạn làm việc theo cách của bạn thông qua việc tạo ra một trang AMP-ready HTML. Nó sẽ đi qua các chi tiết cụ thể về HTML và CSS mà bạn có thể và không thể sử dụng cũng như các thủ thuật bao gồm hình ảnh và phương tiện truyền thông xã hội và sửa đổi các mẫu AMP cơ bản. Ở phía bên trái của trang đó bạn cũng sẽ thấy hướng dẫn khác bao gồm cách sử dụng iframe, cách sử dụng nội dung của bên thứ 3 và cách để phân tích cấu hình cho các trang AMP. Tất cả điều này đều khá quan trọng.

​

Nếu bạn muốn sử dụng form, bạn có thể chọn vào kênh AMP developer ở đây. Bạn cần phải chuyển đổi vào amp-forms. Điều này sẽ cho phép bạn sử dụng các tham số AMP form dựa vào kinh nghiệm. Thật tiếc là chúng sẽ không làm việc cho người dùng của bạn trừ khi họ cũng lựa chọn giống bạn. Đó chỉ là một cách giải quyết cho việc tạo ra các trang dạng AMP-ready khi tính năng mẫu được phát triển thử nghiệm.

Bạn có nên quan tâm đến AMP?

Câu hỏi lớn nhất ở cuối bài viết này là bạn có nên quan tâm hoặc nhảy vào để sử dụng AMP. Nếu không sử dụng AMP sẽ không làm tổn thương bạn nhưng nếu bạn sử dụng nó, nó sẽ giúp bạn.

Dưới đây là một số hướng dẫn để xem nếu nó là một cái gì đó bạn nên đầu tư thời gian, tiền bạc để thực hiện.

Câu hỏi chính là liệu có nên có một phiên bản di động cho trang web của bạn? Nếu có thì bạn sẽ không cần phải quan tâm AMP. Ngay bây giờ, AMP chỉ có lợi cho thứ hạng tìm kiếm của một trang web bởi nó là một cách để tăng tốc cho một trang web và làm cho nó sẵn sàng. Cho dù bạn làm điều đó với AMP hay với mã riêng của bạn cũng không quan trọng, miễn là người dùng di động có thể xem và tải nhanh cho tất cả người dùng.

Bạn có phải là người đầu tiên đang sử dụng marketing video và phương tiện truyền thông xã hội trong phân khúc của bạn? Nếu vậy, bằng mọi cách hãy thâm nhập vào AMP. Có lẽ nó sẽ không có ảnh hưởng tức thì, ít nhất là không nếu trang web của bạn tải nhanh nhưng nó giúp bạn chuẩn bị cho ngày khi mà Google quyết định AMP là một yếu tố xếp hạng của riêng họ.

Cuối cùng, bạn có quan tâm đến điện thoại di động? Chắc chắn có một số trang web như thương hiệu B2B và các trang web bị ném lên với mục đích thông tin chứ không phải là mục đích thương mại mà không thực sự quan tâm đến người dùng di động. Nếu bạn không và sẽ không bao giờ quan tâm đến điện thoại di động, hãy đi trước và bỏ qua AMP hoặc ít nhất là chờ đợi và xem nó trở ra như thế nào.

Ghi nguồn www.thegioiseo.com khi đăng tải lại bài viết này.
Link: Hướng dẫn để chuyển đổi một web page sang AMP.​

Đổi thôi ) Hy vọng sẽ tạo dc 1 làn gió mới cho web, thanks admin!!!

Hjx không phải chuyên code nên đọc mơ hồ ghê, để kêu cha code vào đọc bài này mới được

hic hic mình gà mờ đọc không thông mấy

em đọc chẳng hiểu gì, web e thuê 1 đơn vị làm web làm, seo thì e tự seo, đụng tới mấy phần này không biết sao mà làm hic hix

Nến website của bạn đang sử dụng nền tảng Wordpress thì vài thao tác là có AMP rồi. Tải plugin về là nó tự động active chế độ này, nếu bạn muốn custom một vài điểm trên giao diện như thêm Logo tùy chỉnh, màu button thì phải biết code một chút.

Blogger có làm dc không vậy bác

Làm blog chắc cũng được nhưng phải đòi hỏi biết code mới làm được, mình thấy nhiều người tìm những theme phù hợp cho chạy mobile như vậy cũng là cách hiệu quả nếu không thể sửa dc code.

mh làm mà nó lỗi tùm lum hết khó quá định ngâm cứu mà sợ mất time nữa

Mình cứ tùy biến sang dạng responsive cho chắc ăn , mình mù code

nếu đoán ko lầm thì trang tinhte cũng vừa chuyển qua dc 1 vài ngày

Dạng này đòi hỏi SEOer phải biết code , SEOer bây giờ chỉ chăm chăm SEO là chính chứ chỉnh đi chỉnh lại mấy ai biết

nghe nhức đầu quá à, không hiểu gì hết trơn ( huhuh chắc thất nghiệp với cái ngành này

Giờ seo chia thành 2 mảnh mobi và pc rồi nên anh em nào muốn tối ưu cho mobile thì làm ngay đi nào!

Cái này web dạng tin tức thì dễ triển khai.
Kiểu website nhạc hoặc chức năng tương tác người dùng thì khá là khoai.
Nói chung mình đánh giá cái này tất yếu hơn cái vụ https kia.
Sớm muộn gì cũng phải tìm cách lên thôi

Giờ google ra 1 loạt các chia sẻ cải tiến cho website để từ đó đánh giá xếp hạng như: tốc độ load, tối ưu thiết bị di động, cài đặt truy cập an toàn https. Làm seo giờ không đơn giản, vì đơn giản không phải ai làm seo cũng biết về code

Hay quá, việc hướng sang chuẩn cấu trúc amp, cảm giác như kiểu liều lĩnh khám phá một thung lung vậy =)) không rõ các bác có thấy như e không, cảm thấy nó rất dồi dào tài nguyên

Mình là developper mà đọc còn không hiểu luôn mà hốn gì các bác

mơ hồ quá mn ơi

Trên wordpress mình thấy có hỗ trợ nhiều pulgin về AMP sử dụng khá hiệu quả. Bạn nào làm wordpress thì ghé qua chổ anh Thạch Phạm xem thêm nhé ! Khá đầy đủ và chi tiết đấy.