AMP là gì?
AMP (trước đây được biết đến với tên gọi Accelerated Mobile Pages) là một framework HTML mã nguồn mở giúp tạo ra các trang web tối ưu tải nhanh trên di động.
Vì vậy, một trang AMP thực chất là phiên bản cắt giảm của một trang web thông thường.
Và nó có thể nhìn như thế này:
Google đã dẫn đầu dự án mã nguồn mở này để cạnh tranh với Facebook Instant Articles và Apple News.
Cả hai cho phép nhà xuất bản tạo nội dung tải nhanh và dễ tiêu thụ.
Google lần đầu tiên phục vụ trang AMP trong kết quả tìm kiếm di động vào năm 2016. Và chúng bị giới hạn trong một phần “Các Tin Tức Nổi Bật” ở đầu SERP.
Như thế này:
Ban đầu, nó được thiết kế cho nhà xuất bản tin tức. Nhưng sau đó đã mở rộng để bao gồm tất cả các loại trang web.
AMP hoạt động như thế nào?
Khung làm việc AMP bao gồm ba thành phần cơ bản:
AMP HTML
AMP HTML là HTML với một số hạn chế để đảm bảo các trang web tải nhanh. Nó loại bỏ hoặc sửa đổi một số phần tử và thuộc tính có thể làm chậm trang web.
Một file HTML đơn giản có thể nhìn như thế này:
Về cơ bản, tài liệu AMP HTML phải:
<!doctype html> (để gửi thông tin đến trình duyệt về loại tài liệu dự kiến)<html ⚡> hoặc <html amp> ở cấp độ cao nhất (để chỉ định đó là một trang AMP HTML)<head> và <body> (để xác định nội dung của tài liệu, tức là tiêu đề, đoạn văn, hình ảnh, liên kết, bảng, v.v.)<link rel="canonical" href="URL"> (để chỉ định phiên bản HTML thông thường của trang hoặc liên kết đến chính nó nếu không có trang thông thường)<meta charset="utf-8"> (để chỉ định mã hóa ký tự)<meta name="viewport" content="width=device-width"> (để chỉ cho trình duyệt cách điều khiển kích thước của trang)<script async src="https://cdn.ampproject.org/v0.js"></script> (để thêm các tiện ích mở rộng vào thư viện cơ bản)head > style[amp-boilerplate] và noscript > style[amp-boilerplate]) trong thẻ headAMP JavaScript
JavaScript rất khó khăn vì quá nhiều JS có thể làm chậm và không phản hồi trang web.
Tất cả đều rất quan trọng đối với trải nghiệm của người đọc.
AMP Cache
AMP Cache là một mạng phân phối nội dung (CDN) dựa trên proxy, trước khi được yêu cầu bởi người dùng, nó sẽ được tải trước và hiển thị trước các trang AMP.
Và điều này thay đổi cách tải trang web.
Tại sao?
Bởi vì nó cho phép trang web của bạn tải nhiều phần từ các máy chủ khác nhau cùng một lúc. Và nó cũng cho phép khách truy cập tải trang web của bạn từ máy chủ gần họ nhất.
Nghĩa là trang web của bạn tải rất nhanh cho nhiều người hơn.
Và hiện tại có hai nhà cung cấp chính của AMP Cache:
Những nền tảng này lưu trữ các trang của bạn khi bạn sử dụng định dạng AMP.
Ví dụ, nhà cung cấp bộ nhớ cache có thể phát hiện trang AMP của bạn qua thẻ <html ⚡> hoặc <html amp> và lưu trữ nội dung của nó.
Hoặc một nhà xuất bản có thể thêm trang vào AMP Cache (chỉ áp dụng cho Google AMP Cache).
Các nền tảng khác có thể truy cập các trang AMP trong bộ nhớ cache qua URL của chúng.
Ví dụ, nếu bạn thêm /amp vào cuối bất kỳ câu chuyện tin tức nào trên The Guardian, bạn sẽ thấy phiên bản AMP.
Như thế này:
Mẹo nhỏ: Nếu bạn không chắc liệu trang web của bạn có trang AMP hay không, bạn có thể kiểm tra bằng Công cụ Kiểm tra Trang Web của Semrush.
Bắt đầu bằng cách thêm tên miền của bạn và nhấp vào “Bắt đầu Kiểm tra”.
Sau đó, truy cập tab “Thống kê” trong bảng điều khiển của bạn và bạn sẽ thấy một dòng nói “Liên kết AMP”.
Như thế này:
Lợi ích và hạn chế của trang AMP là gì?
Mặc dù AMP có thể cải thiện hiệu suất và trải nghiệm người dùng của trang, nó cũng có một số hạn chế.
Hãy xem xét những ưu và nhược điểm của trang AMP:
Ưu điểm của AMP
Hạn chế của AMP
Cách thiết lập AMP trên trang web của bạn
Bạn có thể tạo trang AMP bằng cách tuân thủ đánh dấu HTML hoặc bằng cách sử dụng một hệ thống quản lý nội dung (CMS) (qua một plugin hoặc chức năng tùy chỉnh).
Tạo Trang AMP HTML của Bạn
Mã cơ bản
Để bắt đầu, đây là mã đánh dấu của một trang AMP cơ bản:
<!doctype html><html amp lang=”vi”><head><meta charset=”utf-8″><script async src=”https://cdn.ampproject.org/v0.js”></script><title>Xin chào, AMPs</title><link rel=”canonical” href=”https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/”><meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″><style amp-boilerplate>body{ -webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{ -webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript></head><body><h1 id=”hello”>Hello AMPHTML World!</h1></body></html>
Như bạn có thể thấy, nội dung của thân trang là đơn giản, nhưng có mã nguồn bổ sung trong thẻ head.
Mẹo: sử dụng “sân chơi” của AMP để thử và thực hành với mã nguồn.
Thêm ảnh
Nếu bạn muốn thêm ảnh, bạn cần thay thế thẻ HTML thông thường bằng thẻ AMP tương ứng.
Trong trường hợp này, thẻ <amp-img> thay vì <img>.
Để thử nghiệm, sao chép và dán đoạn mã sau vào <body> của trang web của bạn.
<amp-img src=”https://source.unsplash.com/random/600×400″ width=”600″ height=”400″></amp-img>
Thêm kiểu dáng
Bước tiếp theo là thêm kiểu dáng.
Bất kỳ kiểu dáng nào phải được thực hiện bằng cách sử dụng các thuộc tính CSS. Nhưng AMP chỉ cho phép tất cả CSS được bao gồm trong một thẻ tùy chỉnh, được gọi là <style amp-custom> trong thẻ head của tài liệu.
Ví dụ, hãy thử thêm kiểu dáng sau vào trang web của bạn:
<style amp-custom>h1 {margin: 1rem;} body {background-color: green;}</style>
JavaScript
AMP cho phép JavaScript tùy chỉnh thông qua thành phần <amp-script>.
Nó cho phép bạn viết và chạy tùy chỉnh JS một cách đảm bảo hiệu suất của AMP. Và xây dựng các trang nhanh chóng mà không cần viết mã JavaScript hoặc sử dụng thư viện bên ngoài.
Để biết thêm thông tin chi tiết, hãy đọc hướng dẫn của AMP về việc sử dụng JavaScript tùy chỉnh và làm theo hướng dẫn AMP JS để bắt đầu.
Xem xét và xác nhận
Một trang AMP hợp lệ có nghĩa là nó tuân theo các nguyên tắc nghiêm ngặt đảm bảo nó đủ điều kiện để được lưu trữ và tạo trải nghiệm người dùng tuyệt vời.
Trước khi xác nhận trang AMP của bạn, hãy đảm bảo bạn tuân thủ những nguyên tắc tốt nhất sau:
Và khi bạn sẵn sàng xem xét, sử dụng Công cụ Kiểm tra AMP để đảm bảo trang của bạn đáp ứng tất cả các yêu cầu.
Để biết thêm hướng dẫn chi tiết, hãy xem hướng dẫn chính thức của AMP để xác nhận các trang AMP.
Tạo Trang AMP của Bạn Với CMS
Nếu bạn quản lý nội dung của mình thông qua CMS, bạn có thể sử dụng Drupal, Joomla hoặc WordPress.
Ví dụ, hãy xem nó trông như thế nào khi sử dụng AMP cho WP.
Sau khi kích hoạt plugin trên WordPress, bạn có thể bắt đầu tạo Trang Mobile tăng tốc.
Bắt đầu bằng cách thêm một trang hoặc bài viết mới.
Sau đó, nhấp vào “Bắt đầu Trình tạo Trang AMP”.
Bạn có thể chọn sử dụng các bố cục được xây sẵn hoặc xây dựng riêng của mình bằng cách kéo và thả các phần tử.
Sau đó, nhấp vào biểu tượng bánh răng để chỉnh sửa các phần tử của trang của bạn.
Và lưu lại từng mô-đun khi bạn đi qua.
Sau khi bạn xuất bản trang, bạn sẽ thấy phiên bản AMP của trang bằng cách thêm “amp” vào cuối URL của trang web của bạn.
Theo dõi và cải thiện các trang AMP của bạn
Một trong những cách tốt nhất để theo dõi và cải thiện các trang AMP của bạn là định kỳ kiểm tra nội dung trang web của bạn. Điều này sẽ giúp theo dõi bất kỳ vấn đề HTML, mẫu và vấn đề về kiểu dáng và bố cục nào.
Bắt đầu bằng cách chạy trang web của bạn qua công cụ Kiểm tra Trang Web của chúng tôi.
Mẹo: Tạo tài khoản Semrush miễn phí và lập chỉ mục lên đến 100 URL của bất kỳ tên miền, phân nhánh hoặc thư mục con nào.
Sau khi lập chỉ mục trang web của bạn, truy cập vào tab “Thống kê”. Bạn sẽ thấy các vấn đề trong hàng được ghi là “Liên kết AMP”.
Công cụ sẽ kiểm tra hơn 40 lỗi phổ biến nhất liên quan đến các trang AMP. Và cho bạn biết cách khắc phục chúng.
Giải quyết bất kỳ vấn đề nào càng sớm càng tốt. Chúng có thể ảnh hưởng đến cách các công cụ tìm kiếm phục vụ nội dung của bạn cho người tìm kiếm.
Nguồn tham khảo: https://www.semrush.com/blog/amp-pages/
