AMP là gì? Hướng dẫn chi tiết cách tạo Google AMP từ A-Z

Hiện nay, chúng ta nhận thấy rằng quá trình tối ưu website trên thiết bị di động là điều rất quan trọng. Vì vậy, “AMP là gì” sẽ không phải là cụm từ quá xa lạ đối với bạn và tôi. Cài đặt AMP nhằm tăng tăng tỷ lệ click tới trang (CTR tăng) và tăng trải nghiệm người dùng trên di động đã là điều cần phải thực hiện.

Nhưng:

• AMP là gì? Nó mang lại hiệu quả ra sao?
• Cách tạo AMP như thế nào?

Thì không ai cho bạn câu trả lời chính xác nhất. Hiểu được điều đó, trong nội dung chia sẻ này tôi đã trình bày những nội dung quan trọng, đi từ cơ bản đến nâng cao giúp bạn hình dung và triển khai tốt nhất.

Bài viết cùng chủ đề:

• Google Pagespeed Insights là gì? Cách cải thiện điểm tốc độ tải trang
• 20 Tool kiểm tra tốc độ Web miễn phí cực chính xác
• 5 Cách loại bỏ các tài nguyên chặn hiển thị tốt nhất 2020

Bắt đầu tìm hiểu ngay nào!

Bạn có biết, những năm gần đây, số lượng người sử dụng điện thoại di động (Mobile) trên Internet đã vượt qua số lượng người sử dụng máy tính bàn (Desktop).

Tuy nhiên, theo dữ liệu của Google và SOASTA:

Có đến 40% người dùng sẽ rời khỏi trang nếu thời gian tải trang mất hơn 3 giây.

Đó là thời gian mà bạn cần phải điều chỉnh, kiểm tra để nội dung của mình có thể đến tay người dùng. Nếu trang web của bạn không có được thời gian tải nhanh như vậy, tức là bạn đã đánh mất 40% khách hàng tiềm năng. Lúc này, điều bạn cần đến là AMP.

AMP được tạo dựng với sự cộng tác của hàng nghìn nhà phát triển, nhà xuất bản, kiểm tra trang web, công ty phân phối và công ty công nghệ. Ngoài ra, bạn có thể tìm hiểu rõ hơn về AMP tại video dưới đây:

Google AMP có ảnh hưởng thế nào đến với SEO?

Website có AMP giúp trang đẩy nhanh thời gian lập chỉ mục, nâng cao trải nghiệm của người dùng và tăng độ tin cậy hơn đối với người dùng.

Google áp dụng một mức tiêu chuẩn cho tất cả URL để lập chỉ mục. Google cũng đánh giá cao website nào có tốc độ tải nhanh, sử dụng công nghệ nhằm nâng cao trải nghiệm người dùng. Các trang AMP được Google xếp hạng và đánh giá cao, nhất là trên thiết bị di động nhờ lợi thế về tốc độ tải trang. Đây là điều hợp với xu hướng phát triển hiện nay, khi mọi người sử dụng thiết bị di động phổ biến.

AMP Plugin hoạt động như thế nào?

AMP giúp trang hiển thị tối ưu HTML, tốc độ tải trang của các trang này nhanh hơn vì đã loại bỏ HTML Code Tag Manager – nguyên nhân làm chậm trang. Các Script sẽ không hiển thị trong AMP nếu là trang Mobile có JavaScript.

Một số lưu ý về AMP Plugin:

• Với AMP thì bạn phải sử dụng CSS phiên bản Streamlined.
• Bạn phải Validate đúng cách thì các Site AMP mới có thể hoạt động.
• Tình trạng Lazy Loading khi bạn chỉ dùng thư viện JavaScript mà AMP cung cấp.
• Forms không thể dùng vì không được cho phép trên các trang AMP Plugin.
• Bạn nên điều chỉnh lại chiều rộng và chiều cao để tránh các hình bị biến dạng.

Nếu bạn muốn tăng trải nghiệm tốt hơn thì bạn hãy tải một số Fonts Custom theo một cách riêng.

Nếu như bạn muốn trình chiếu video trên trang của mình thì có thể sử dụng Extension AMP Approved. Ngoài ra, để cải thiện trang mobile thì điều quan trọng là cải thiện Readability và Speed.

Cấu trúc của Google AMP có 3 loại:

• AMP HTML: Là tập hợp con của HTML, có Properties và các Tag tùy chỉnh, tuy nhiên nó còn nhiều hạn chế. Nếu bạn đã quen với HTML cơ bản thì khi Adapt các trang sẵn có với AMP HTML sẽ không quá phức tạp.
• AMP JS: Là Framework JavaScript dành cho trang Mobile, nó sẽ quản lý Resource Handling và không đồng bộ Loading. Lưu ý AMP không cho phép bên thứ ba như JavaScript.
• AMP CDN (Content Delivery Network): Nó sẽ tạo một số tối ưu hóa hiệu suất và đánh dấu Cache các trang được kích hoạt AMP.

Hướng dẫn kiểm tra Google AMP 

Kiểm tra hợp lệ

Để kiểm tra mức độ hợp lệ của Google AMP bạn truy cập đường link https://search.google.com/test/amp. Sau đó copy và dán URL bạn muốn kiểm ra vào và chọn Test URL. Kết quả trả về màu xanh lá cây và thông báo “Valid AMP” thì nghĩa là trang AMP hợp lệ.

Kiểm tra tốc độ tải trang

Có một số công cụ hữu ích sẽ giúp bạn kiểm tra tốc độ trang của mình để điều chỉnh:

• Google PageSpeed Insights: Công cụ sẽ phân tích các khía cạnh của trang trong đó bao gồm tốc độ tải trang trên thiết bị di động và máy tính. Sau đó sẽ đưa ra các đề xuất giúp cải thiện thời gian tải trang.
• Think with Google (Test my site): Copy và dán URL, domain của web vào ô text, chọn Test sau đó chờ Google quét và kiểm tra các thông số liên quan . Kết quả trả về cho bạn biết tốc độ tải trang trên 3G và 4G.
• Dotcom Monitor: Tiếp tục là công cụ sẽ phân tích toàn diện trang web của bạn, như số lượng yêu cầu HTTP, thời gian tải trang,…Ngoài ra nó sẽ kiểm tra tốc độ load trang trên các trình duyệt khác nhau như Firefox, Chrome, Safari,…Bạn còn được test server web, kiểm tra hosting web có nằm trong blacklist spam hay không và nhiều phân tích hữu ích khác.

HTML AMP

HTML AMP về cơ bản chính là HTML với một số hạn chế để hỗ trợ hiệu suất cao hơn.

Dưới đây là ví dụ cho một tệp HTML AMP đơn giản:

Hầu hết các thẻ tag trong HTML là loại tag HTML bình thường. Tuy nhiên, một số tag sẽ được thay thế bằng loại tag dành riêng cho AMP. Những tag này được gọi là thành phần HTML AMP, chúng sẽ hỗ trợ cho các thẻ thường được triển khai một cách hiệu quả hơn.

Các trang AMP thường được phát hiện bởi các công cụ tìm kiếm hoặc các nền tảng liên quan khác thông qua tag HTML.

Bạn có thể chọn cả hai phiên bản bao gồm và không bao gồm AMP cho trang web của bạn hoặc chỉ chọn mỗi phiên bản AMP đều được.

JavaScript AMP (JS)

Thư viện JS AMP sẽ đảm bảo cho các trang web AMP được ưu tiên nhanh chóng. Thư viện này sẽ triển khai tất cả các phương pháp gia tăng hiệu suất của AMP như CSS nội tuyến (Inline CSS) và kích hoạt phông chữ bổ sung.

Các phương pháp liên quan này sẽ quản lý việc tải tài nguyên và cung cấp đến bạn những tag HTML thành phần để đảm bảo hiển thị trang nhanh chóng.

JS AMP khiến cho các tài nguyên đến từ bên ngoài trở nên không đồng bộ, nhờ đó không có gì trên trang có thể chặn việc hiển thị.

JS cũng sử dụng các kỹ thuật hiệu suất khác như thuộc tính Sandbox của Iframes, tính toán kiểm tra trước bố cục của phần tử trang trước khi các tài nguyên được tải và vô hiệu hóa các bộ chọn CSS (CSS Selector) cồng kềnh, chậm chạp.

Cache sẽ tìm nạp các trang HTML AMP, lưu vào bộ nhớ và cải thiện hiệu suất tải trang một cách tự động.

Để tối ưu quá trình duyệt tài liệu của bộ nhớ đệm AMP, tất cả các tệp JS và hình ảnh trong cùng một nguồn cần sử dụng HTTP/2.0

AMP Cache đi kèm với hệ thống xác thực tích hợp (Built-in Validation System). Hệ thống này sẽ xác nhận khi một trang có thể chạy và không phụ thuộc vào các tác động bên ngoài (những tác động có khả năng liên quan đến chậm tốc độ tải trang).

Hệ thống xác thực này dựa trên một loạt các xác nhận để xác định việc đánh dấu những trang đáp ứng các thông số kỹ thuật HTML AMP.

Ngoài ra còn có một phiên bản bổ sung của hệ thống xác thực, phiên bản này có thể ghi các lỗi xác thực trực tiếp vào bảng điều khiển của trình duyệt khi trang được hiển thị. Từ đó cho phép bạn xem và kiểm tra những thay đổi phức tạp trong code của mình (những thay đổi này có thể ảnh hưởng đến hiệu suất và UX).

Các lợi ích và hạn chế của AMP

AMP đảm bảo cho các trang web của bạn được cải thiện tải nhanh hơn bằng cách sử dụng HTML AM. Từ đó nâng cao UX người dùng nhằm giữ họ ở lại trang lâu hơn.

Thực tế, theo thông tin từ Gary Illyes (nhà phân tích xu hướng quản trị website của Google):

Thời gian tải trung bình của các trang AMP là 1 giây – nhanh hơn 4 lần so với những trang HTML chuẩn bình thường.

Để các bạn có thể có cái nhìn chi tiết hơn về những gì mình có thể nhận được khi cài đặt AMP, hãy cùng tìm hiểu những lợi ích và hạn chế của AMP.

Lợi ích của AMP

Khi trang web dành cho di động được cải thiện nhanh hơn, trải nghiệm người dùng và KPI cũng sẽ tự động cải thiện theo.

Nhờ việc tính năng load web nhanh chóng, bạn có thể cung cấp quá trình tải web nhanh và ổn định cho người dùng của mình trên tất cả các thiết bị và nền tảng liên quan như Google, LinkedIn và Bing.

AMP mang lại những lợi ích sau cho các trang dành cho di động:

Hạn chế của AMP

Cách tạo các trang AMP với Instapage

Tạo trang AMP có thể khá khó khăn cho những người không am hiểu về cấu trúc HTML. Tuy nhiên, chúng ta hoàn toàn có thể sử dụng các công cụ bên ngoài để thực hiện.

Sau đây là cách tạo trang AMP với Instapage.

Bước 1: Tạo trang mới

Bạn lựa chọn tính năng AMP Page trong phần lựa chọn Create New Page của Instapage

Trong màn hình tiếp theo, bạn chỉ cần điền tên trang web của bạn là được nhé. Instapage cho phép bạn xây dựng trang AMP từ đầu nên chúng không yêu cầu bạn phải chọn Template như cách xây dựng trang AMP tiêu chuẩn thông thường.

Bước 2: Thêm phần tử vào trang

Instapage không hiển thị Timer và cấu trúc HTML, những công cụ này không xuất hiện trên thanh toolbar

Vì AMP không hỗ trợ HTML / CSS hay JavaScript, nên bạn sẽ không tìm thấy các cài đặt đó trong trình tạo AMP Instapage.

Tuy nhiên, bạn sẽ vẫn thấy một số tùy chọn khác như sau:

AMP landing pages sau nhấp chuột có giới hạn là 75KB. Mỗi tiện ích trong trình tạo AMP của Instapage đều mang số KB nhất định.

Khi bạn tạo trang AMP này, trình xác thực sẽ hoạt động nền để đảm bảo trang AMP của bạn không vượt quá con số 75KB này.

Nếu bạn đạt đến 80% giới hạn, bản cảnh báo bên dưới sẽ hiện ra cuối màn hình:

Bước 3: Tạo biến thể A/B test

Nhấp vào “Create an A/B Test” và thêm một biến thể mới hoặc nhập biến thể của riêng bạn

Đối với những biến thể này, bạn có thể sao chép, tạm dừng, đổi tên, chuyển hoặc xóa nó bất kỳ lúc nào.

Bước 4: Xác thực

Khi bạn tạo dựng trang AMP và đạt đến giới hạn 75KB, một chỉ báo sẽ xuất hiện như hình bên dưới để bạn xác nhận xác thực trang.

Nếu trang vẫn nằm trong giới hạn có thể chấp nhận và vượt qua được xác thực, bạn sẽ thấy thông báo bên dưới hiện lên màn hình:

Sau khi hoàn thành, bạn nhấp vào Publish

Bước 5: Publish

WordPress và các miền tùy chỉnh (custom domain) đều có thể Publish các trang AMP landing pages sau nhấp chuột.

Bạn có thể áp dụng một trong hai phương pháp sau khi nhấp vào nút Publish tùy thuộc vào việc bạn có sử dụng WordPress hay không.

Nếu bạn dùng WordPress, hãy cài đặt và đăng nhập vào Plugin của Instapage trên website của mình. Sau đó publish trang AMP landing page vào WordPress.

Nếu bạn dùng domain, hãy nhập tên miền và miền phụ của mình.

Ngay sau khi trang vào hoạt động, bạn sẽ thấy biểu tượng AMP hình sấm sét bên cạnh trang trong Dashboard.

Cách cài đặt AMP cho website 

Để cải thiện trang web, tăng mức độ thân thiện và trải nghiệm với người dùng, việc áp dụng AMP là rất cần thiết. Sau đây là các bước cài đặt AMP đơn giản cho trang web.

Cấu trúc HTML AMP

Yêu cầu để có thể cài AMP là web của bạn phải sử dụng giao thức HTTPS với các điều kiện cần thiết sau:

• <!doctype html> : tiêu chuẩn HTML
• Chứa thẻ <html ⚡> hoặc <html amp> : Để xác định nội dung có định dạng AMP.
• Chứa các thẻ <head> và <body>
• Chứa thẻ <meta charset=”utf-8″> là thẻ con đầu tiên thuộc thẻ <head>
• Chứa thẻ <script async src=”https://cdn.ampproject.org/v0.js”></script>. Đây là thẻ con thứ 2 thuộc thẻ <head>
• Chứa thẻ <link rel=”canonical” href=”$SOME_URL” /> bên trong <head>
• Chứa thẻ <meta name=”viewport” content=”width=device-width,minimum-scale=1″> bên trong thẻ <head>: Quy định chế độ xem tương ứng trên thiết bị di động

• Chứa đoạn mã boilerplate AMP trong thẻ <head>
• Lưu trữ AMP trên URL

Việc lưu trữ sử dụng Google AMP trên một URL sẽ phù hợp với người dùng. Ví dụ với trang tiêu chuẩn https://example.com/subfolder/this-is-an-example.html. Bạn sẽ lưu trữ trang AMP với URL là amp.example.com/subfolder/this-is-an-example.html hoặc example.com/subfolder/this-is-an-example-amp.html. Khi người dùng click vào chắc chắn URL sẽ hiển thị trang web chính của bạn.

Làm AMP thân thiện với người dùng

Nếu trang của bạn có cả phiên bản AMP và không AMP hãy thêm các thẻ html sau:

Đối với trang không phải AMP hãy tham chiếu đến phiên bản AMP của trang để trên Google hoặc các nền tảng khác.

Trên trang AMP, thêm văn bản để tham chiếu phiên bản có phải tiêu chuẩn của AMP không.

Đối với AMP độc lập – những trang không phải phiên bản AMP, trang AMP phải chỉ định chính nó làm phiên bản tiêu chuẩn.

Hãy lập chỉ mục cho các trang AMP độc lập nếu có thể tìm thấy chúng và đảm bảo rằng các trang AMP độc lập được liên kết với các trang được liệt kê trong sơ đồ sitemap.xml của bạn hoặc được lập chỉ mục khác.

Kiểm tra tính hợp lệ trang AMP

Như đã hướng dẫn bạn hãy truy cập vào Google Search Console và xem tính hợp lệ và tương thích của trang AMP của mình. Hãy đảm bảo thường xuyên kiểm tra để sớm phát hiện ra các lỗi và khắc phục chúng.

Cách cài đặt AMP cho WordPress 

Bạn có thể dễ dàng cài đặt plugin AMP miễn phí, sau đây là 4 bước để cài đặt:

Bước 1: Chọn WordPress Dashboard >> Plugins >> Add New.

Bước 2: Tìm kiếm “AMP for WordPress”.

Bước 3: Click “Install” để cài đặt.

Bước 4: Sau khi cài đặt xong chuyển đến tab Appearance và đến với AMP.

Bạn có thể điều chỉnh nhiều tùy chọn khác nhau trên trang AMP theo ý thích ví dụ như “Tab Design” cho phép điều chỉnh text của site, background,… hay “Tab General” để điều chỉnh sử dụng AMP cho post nào,…

Cách AMP mang đến hiệu quả cho website doanh nghiệp

Kể từ khi ra vào năm 2016, trong vòng 2 năm, 25 triệu tên miền đã xuất bản hơn 4 tỷ trang AMP.

Không chỉ số lượng trang AMP tăng lên mà tốc độ tải trang cũng tăng lên, thời gian trung bình để một trang AMP tải từ kết quả tìm kiếm của Google giờ đây chưa đến nửa giây.

Một số ví dụ về các doanh nghiệp thành công với sự hỗ trợ của dự án AMP có thể kể đến các yếu tố như sau:

Gizmodo tăng traffic, tốc độ tải trang và lượt hiển thị nhờ AMP

Gizmodo là một blog tập trung vào tính năng trải nghiệm người dùng. Với một nửa lưu lượng truy cập là từ các thiết bị di động, trang này luôn đảm bảo rằng trang web họ nhanh và rõ ràng.

Vì thế, từ tháng 5, 2016 Gizmodo đã xuất bản hơn 24.000 trang AMP và nhận được 100 nghìn lượt truy cập vào các trang này hàng ngày.

AMP đã hỗ trợ cho các trang Gizmodo trên thiết bị di động load nhanh hơn gấp 3 lần so với trang web thông thường. Có đến hơn 80% lưu lượng truy cập của Gizmodo đến từ các trang AMP là lưu lượng truy cập mới. Thêm vào đó, blog đã tăng 50% số lần hiển thị trên mỗi lần xem trang trên AMP.

TransUnion tăng chuyển đổi với AMP

Thỉnh thoảng TransUnion từng gặp sự cố tải chậm trang trên thiết bị di động, điều này đã khiến tỷ lệ thoát trang cao hơn và tỷ lệ chuyển đổi trên thiết bị di động thấp hơn so với tỷ lệ chuyển đổi trên máy tính để bàn.

TransUnion bắt đầu sử dụng AMP với hy vọng sẽ thay đổi được chỉ số chuyển đổi này. Vì trang web của họ đã thân thiện với thiết bị di động nên TransUnion không cần thiết kế lại yếu tố nội dung – họ đã trực tuyến với các trang có AMP chỉ sau một tuần.

Các trang AMP này tải chỉ trong 1.6 giây trên kết nối 3G (các trang không AMP tải mất đến 7.1 giây). Những trang AMP bắt đầu đem lại nhiều chuyển đổi hơn (hơn 3%) và tỉ lệ thoát giảm đến 26%. Số liệu cũng cho thấy người dùng đã ưu tiên thêm 2,5 lần thời gian trên trang web so với lúc trước.

Chính việc triển khai các trang có AMP đã cung cấp cho users trải nghiệm di động nhanh hơn. Nhờ đó giảm vấn đề tỷ lệ thoát và tăng chuyển đổi cho TransUnion.

Khi thu hút khách truy cập trên thiết bị di động, việc áp dụng các trang AMP sẽ mang lại cho bạn xác suất tương tác và chuyển đổi cao nhất.

Trong phần tiếp theo, chúng ta sẽ tìm hiểu về tầm quan trọng của landing pages AMP sau nhấp chuột và cách kết nối chúng.

Tại sao nên tạo AMP Landing Pages thay vì Landing Pages?

TransUnion là một vấn đề điển hình cho việc các trang tải nhanh sẽ có tỉ lệ thoát thấp hơn và chuyển đổi cao hơn.

Cách tốt nhất để tạo ra các trang tải nhanh là ứng dụng AMP.

Landing pages cũng không ngoại lệ, để đảm bảo user experience di động không bị hạn chế ở các website, AMP Framework đã giới thiệu các trang quảng cáo landing pages AMP sau nhấp chuột đến người dùng.

Các trang này được hỗ trợ bằng cấu trúc HTML AMP. Chúng tải cực kỳ nhanh, trong vòng chưa đầy một giây. Trong khi đó, người dùng có thể mất đến 7 giây chờ đợi tải nếu web bạn áp dụng landing pages thông thường.

Việc được đưa đến landing pages nhanh chóng sẽ đem lại cho người truy cập sự thoải mái cũng như đem đến cho doanh nghiệp nhiều lợi ích hơn vì:

• Người dùng sẽ dễ dàng chấp nhận việc nhấp vào quảng cáo hơn vì họ biết nó sẽ không tốn nhiều thời gian
• Tăng tương tác của người dùng nhờ tỉ lệ thoát giảm và chuyển đổi tăng

Việc sử dụng AMP landing pages có rất nhiều lợi ích, sự thay đổi này chắc chắn sẽ đem lại thay đổi tích cực cho chỉ số ROI cho việc kinh doanh của bạn. Vậy còn chần chờ gì nữa nhỉ?

Một số câu hỏi thường gặp về AMP

AMP chỉ dùng cho mã nguồn wordpress đúng không?

Không, AMP có khả năng tương thích tốt với mã nguồn wordpress nên dễ dàng cài đặt và sử dụng. Khi bạn muốn website của mình sử dụng mã nguồn khác thì vẫn hoàn toàn có thể xây dựng AMP tương thích với website.

Các trang AMP chỉ hoạt động trên thiết bị di động đúng không?

Không, AMP có thể được xây dựng trên tất cả các loại thiết bị tùy thuộc vào trang bạn thiết kế thích ứng. Bạn có thể tự tạo các trang AMP phù hợp với thiết bị hiển thị bạn mong muốn.

AMP hiển thị như thế nào trên máy tính?

AMP hiển thị như nhau trên mọi thiết bị, nếu bạn xây dựng AMP hỗ trợ tất cả các chức năng thì bạn có thể xem xét tạo các trang dưới dạng AMP độc lập, nó sẽ hỗ trợ khách truy cập trên cả thiết bị di động và máy tính cùng một trang. Tuy nhiên, AMP trên máy sẽ không hiển thị kèm theo các tính năng liên quan đến tìm kiếm trên Google tìm kiếm.

Tại sao các tính năng liên quan đến AMP của tôi không xuất hiện trên máy tính bảng hoặc máy tính?

Có vài tính năng liên quan đến AMP trên Google chỉ hoạt động trên thiết bị di động, mặc dù AMP hoạt động trên nhiều loại thiết bị nhưng kế hoạch phát triển AMP hiện nay vẫn chỉ nhắm đến nền tảng di động.

Tại sao trang AMP của tôi không có lỗi nhưng không xuất hiện trên kết quả tìm kiếm?

Hãy kiểm tra lỗi trên trang AMP của bạn bằng công dụ Google Console hoặc dùng cú pháp site: URL có AMP của bạn, hãy kiểm tra và tối ưu trang của bạn. Vì ngoài yếu tố tốc độ tải trang, Google còn dựa vào nhiều yếu tố khác như CTR, On time,… để xếp hạng thứ hạng website.

Kết luận

Trang web của bạn trên di động có tỉ lệ thoát cao và mức độ tương tác thấp do tốc độ tải trang chậm chạp, vậy thì đừng ngần ngại cài đặt ngay trang AMP

Chúng là giải pháp tuyệt vời để bạn tối ưu hóa, tăng tốc độ tải cho trang nhằm đem đến cho người dùng những trải nghiệm đáng hài lòng.

Các trang sau khi ứng dụng AMP sẽ có khả năng load nhanh và mượt mà hơn rất nhiều. Hãy bắt tay vào thử nghiệm đi nhé. Chúc các bạn thành công và tạo ra được nhiều chuyển đổi tốt hơn cho website của mình!