Tạo trang html amp

04 Tháng Chín

Tạo trang html amp

thuongdq Accelerated Mobile Pages 0 Bình luận

Amp là phiên đành cho di động của website được viết dựa trên quy định riêng của google và dữ liệu được lưu trữ trên cache của google.

Dưới đây là cấu trúc cơ bản của 1 trang amp

<!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">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>Welcome to the mobile web</h1>
  </body>
</html>

Nội dung nằm trong cặp thẻ body cho đến hiện nay vẫn còn rất là đơn giản nhưng bên cạnh đó nội dung nằm cặp thẻ head lại được bổ sung rất nhiều. Có nhiều thành phần trong cặp thẻ head bắt buộc phải có đối với 1 trang amp mà chúng ta cần phải làm rõ chức năng của chúng trước khi tạo ra.

Nên sử dụng giao thức https trong việc trang amp. Mặc dù giao thức https không phải là bắt buộc đối với amp vì các thành phần cơ bản của website như nội dung bài, hình ảnh, font chữ đều không yêu cầu dùng https mà chỉ cần http là được. Tuy nhiên cũng có những nội dung yêu cầu bạn phải dùng https thì mới có thể xem được trên các trang amp như video, iframe,… Để đảm bảo các trang AMP của bạn tận dụng tối đa tất cả các tính năng AMP, hãy sử dụng giao thức HTTPS. Bạn có thể tìm hiểu thêm về HTTPS trong “Tại sao vấn đề HTTPS”.

Sử dụng AMP Boilerplate Generator để tạo nhanh ra các trang amp bằng cách sinh mã code tự động

Những thẻ bắt buộc phải có trong trang amp html

Thẻ

Mô tả
Bắt đầu tài liệu với thẻ  <!doctype html> doctype. Tiêu chuẩn cho HTML.
Thẻ cấp cao nhất chứa toàn bộ nội dung của trang <html ⚡>
(Khai báo là <html amp> cũng được chấp nhận).		 Xác định nội dung của trang là amp
Cặp thẻ  <head> và <body> Là các cặp thẻ nguyên gốc trong html và không có cặp thẻ thay thế trong amp. Vì thế vẫn sử dụng nguyên cặp thẻ này trong các trang amp tương tự như trang html
<meta charset=”utf-8″> là thẻ con đầu tiên được khai báo nằm trong và trên cùng của thẻ <head>. Xác định mã hóa của trang (Bộ giải mã ngôn ngữ)
Nội dung gắn trong thẻ <script async src=”https://cdn.ampproject.org/v0.js”></script> là 1 thành phần con nằm trong thẻ <head> . Để trang có thể hoạt động tốt nhất bạn nên đưa nội dung thẻ trên vào trang ngay khi khởi tạo trang <head>. Khai báo thư viện AMP JS.
Nội dung thẻ  <link rel=”canonical” href=”$SOME_URL”> nằm trong cặp thẻ <head>. Biến $SOME_URL Dùng để khai báo đến trang html tương ứng của trang amp hiện tại.
Tương tự như html nội dung của thẻ này  <meta name=”viewport” content=”width=device-width,minimum-scale=1″> nằm trong cặp thẻ  <head> . Nội dung của chúng cũng có thể chứa giá trị initial-scale=1. Chỉ định phiên kích thước hiển thị cho trang. Xem thêm tại Create Responsive AMP Pages.
Thẻ AMP boilerplate code nằm trong cặp thẻ <head>. CSS boilerplate khởi tạo ẩn nội dung của trang cho đến khi AMP JS được tải về.

Tùy chọn dữ liệu dạng meta (metadata)

Ngoài các yêu cầu về dữ liệu cơ bản ra. Thì trong tài liệu amp cũng yêu cầu về định nghĩa Schema.org ở trong cặp thẻ <head>. đây không phải là một yêu cầu bắt buộc đối với AMP, nhưng đó là một yêu cầu để phân phối nội dung của bạn ở một số nơi nhất định (ví dụ: trong Google Tìm kiếm top stories carousel).

Bạn có thể tìm hiểu thêm tại đây:

Post Views: 6.228

Leave a Reply