AMP là gì
AMP hay còn gọi là Accelerated Mobile Pages là một mã nguồn HTML mở giúp các website chạy hơn trên thiết bị di động. Vì vậy, một trang AMP về cơ bản là một phiên bản rút gọn của một trang web thông thường.
AMP hoạt động như thế nào
AMP hoạt động bằng cách tách các website từ các phần thiết yếu nhất của chúng và lưu trữ phiên bản trong bộ nhớ cache trên các máy chủ của Google, điều này cho phép chúng phân phối nội dung gần như ngay lập tức.
-
JavaScript AMP
-
AMP Cache
AMP HTML là HTML có một số hạn chế nhất định để đảm bảo các trang tải nhanh. Nó loại bỏ hoặc sửa đổi một số thành phần và thuộc tính có thể làm chậm website.
Về cơ bản, tài liệu HTML AMP phải:
Để gửi thông tin tới trình duyệt về loại tài liệu mong đợi phải bắt đầu với <!doctype html>
Bao gồm cấp cao nhất <html > hoặc <html amp>
Để xác định nội dung của tài liệu, tức là tiêu đề, đoạn văn, hình ảnh, siêu liên kết, bảng, v.v: bao gồm <head> và <body>
Cho biết phiên bản HTML chính xác của trang hoặc để liên kết với chính nó nếu không có trang trùng lặp khác tồn tại: <link rel="canonical" href="URL">
Bao gồm một <meta charset="utf-8"> (để chỉ định mã hóa ký tự)
Hướng dẫn cho trình duyệt về cách kiểm soát kích thước: <meta name="viewport" content="width=device-width">
Thêm tiện ích mở rộng vào thư viện cơ sở: <script async src="https://cdn.ampproject.org/v0.js"><script>
Bao gồm mã soạn sẵn AMP ( head > style[amp-boilerplate]và noscript > style[amp-boilerplate]) trong thẻ head
AMP dành cho ai?
Nhiều nhà quản trị web phân vân rằng liệu AMP có xứng đáng không? Câu trả lời này tùy theo nhiều lý do. tuy nhiên sau đây là một số trường hợp bạn có thể chọn sử dụng AMP:
- Bạn gặp khó khăn trong việc tăng tốc độ tải trang trên thiết bị di động dù đã thử hết các cách tối ưu khác.
- Phần lớn lưu lượng truy cập website đến từ các thiết bị di động
Ưu điểm của aMP
Thời gian tải trang nhanh hơn
AMP giúp các trang web phân phối nội dung nhanh hơn bằng cách loại bỏ các yếu tố không cần thiết. Điều này rất quan trọng vì ngày càng có nhiều người trên thế giới dựa vào các thiết bị di động để truy cập internet.
Thứ hạng tìm kiếm cao hơn
Mặc dù AMP chưa bao giờ là một yếu tố xếp hạng, nhưng tốc độ tải trang thì có. Điều này có nghĩa là các trang của bạn tải nhanh hơn có thể cải thiện thứ hạng của Google.
dễ tùy chỉnh trên WordPress
Sử dụng một plugin đơn giản là bạn có thể thực hiện.
Cải thiện trải nghiệm người dùng trên di động
Đem lại trải nghiệm tốt hơn vì không phải chờ đợi
Nhược điểm của aMP
Không còn hiển thị
Google không còn hiển thị biểu tượng huy hiệu AMP để biểu thị nội dung AMP
khó để triển khai nếu bạn không có WordPress
Nếu không có hỗ trợ plugin wordpress thì để tạo trang AMP, bạn cần có kinh nghiệm viết mã và sự trợ giúp từ nhà phát triển của mình.
Giảm doanh thu quảng cáo
Ít quảng cáo hơn hiển thị trên các trang AMP, điều này rất tốt cho tốc độ nhưng không quá tốt nếu đó là nguồn thu nhập chính của bạn.
Ít kiểm soát hơn đối với nội dung và thiết kế
AMP loại bỏ rất nhiều yếu tố “không cần thiết”, nhưng điều đó có thể bao gồm các tính năng để xây dựng thương hiệu và hướng lưu lượng truy cập đến các trang khác.
Hạn chế thu thập khách hàng tiềm năng
AMP cũng loại bỏ các biểu mẫu thu thập khách hàng tiềm năng và nội dung có thể tải xuống, làm giảm khả năng thu thập thông tin khách hàng tiềm năng của website.
Hạn chế chia sẻ trên mạng xã hội
Các nút chia sẻ trên mạng xã hội của bạn thậm chí có thể không hiển thị chính xác vì phần lớn chúng được phát triển bằng JavaScript.
Tạo trang AMP HTML của bạn
Để bắt đầu, đây là phần markup của trang AMP cơ bản
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, 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>
Nếu muốn thêm hình ả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, <amp-img> thẻ thay vì <img>.
Để kiểm tra, hãy sao chép và dán đoạn mã sau vào <body> của trang của bạn.
<amp-img src="https://source.unsplash.com/random/600x400" width="600"
height="400"></amp-img>
Các phương pháp hay nhất về AMP
Tạo trang AMP của bạn bằng 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.
Đối với wordpress thì sau khi kích hoạt plugin trên WordPress, bạn có thể bắt đầu tạo trang AMP của mình.
Thêm một trang mới hoặc bài viết mới.
Chọn “ Bắt đầu Trình tạo trang AMP ”: Bạn có thể chọn sử dụng bố cục dựng sẵn hoặc tạo bố cục của riêng mình bằng cách sử dụng các thao tác kéo và thả.
Chấp vào biểu tượng bánh răng để chỉnh sửa các yếu tố trên trang của bạn.
Lưu từng yếu tố khi bạn thực hiện
Xuất bản: Sau khi xuất bản, bạn sẽ thấy phiên bản AMP bằng cách thêm “amp” vào cuối URL đó
Câu hỏi thường gặp về AMP
AMP loại bỏ các yếu tố không quan trọng của trang bằng cách xóa nhiều quảng cáo, biểu đồ, video và hoạt ảnh, đồng thời lưu trữ một phiên bản của trang trên máy chủ của Google. Khi người dùng nhấp vào liên kết AMP, Google sẽ cung cấp nội dung được lưu trong bộ nhớ cache gần như ngay lập tức.
Nếu bạn sử dụng WordPress, hãy sử dụng plugin AMP. Nếu bạn không sử dụng WordPress, bạn sẽ cần sự trợ giúp của developer nếu bạn không có kinh nghiệm viết mã.
Chúng không hữu ích như trước đây. Các trang web lớn hơn dường như đang rời bỏ AMP và Google đã xóa biểu tượng AMP khỏi kết quả tìm kiếm.
Có khá nhiều. AMP có thể làm giảm doanh thu và lưu lượng truy cập các quảng cáo, đồng thời khiến việc lấy dữ liệu phân tích về khách truy cập trang web trở nên khó khăn hơn.
AMP không cần thiết cho SEO. Tối ưu hóa cho tốc độ trang và trải nghiệm di động có thể được thực hiện theo nhiều cách không nhất thiết bạn phải dùng AMP. Tuy nhiên, AMP có thể hữu ích trong một số trường hợp nhất định, nhưng không nên được coi là phương pháp hay nhất về SEO.
Nếu đang sử dụng các trang AMP và không phải AMP, bạn không phải thêm các trang AMP vào sơ đồ trang web XML của mình. Rel="amphtml" cung cấp đủ tín hiệu để Google khám phá các trang AMP theo John Mueller của Google.
