Kiến thức cơ bản về Accelerated Mobile Pages

1. Tổng quan

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách tạo Accelerated Mobile Pages (AMP). Để đạt được điều này, bạn sẽ triển khai một trang web đơn giản về tin bài tuân thủ các quy cách của AMP, đồng thời kết hợp một số tính năng web điển hình thường dùng trên các trang web tin tức dành cho thiết bị di động.

Kiến thức bạn sẽ học được

• Cách AMP cải thiện trải nghiệm người dùng của web dành cho thiết bị di động.
• Nền tảng của một trang web AMP.
• Giới hạn của AMP.
• Cách thành phần web của AMP giải quyết các vấn đề thường gặp trên trang web tin tức.
• Cách xác thực AMP.
• Cách chuẩn bị trang AMP cho Google Tìm kiếm.

Bạn cần có

• Mã mẫu
• Python (tốt nhất là 2.7) hoặc tiện ích Chrome 200 OK Web Server
• Chrome (hoặc một trình duyệt tương đương có thể kiểm tra bảng điều khiển JavaScript)
• Trình soạn thảo mã (ví dụ: Atom, Sublime, Notepad++)

2. Nhận mã mẫu

Bạn có thể tải tất cả mã mẫu xuống máy tính:

Tải tệp Zip xuống

...hoặc sao chép kho lưu trữ GitHub từ dòng lệnh:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

Bạn sẽ tải một tệp ZIP xuống. Tệp này chứa một số tệp tài nguyên mẫu và trang article.html ban đầu.

Giải nén thư mục rồi chuyển đến thư mục đó thông qua dòng lệnh trên máy tính.

3. Chạy trang mẫu

Để kiểm thử trang mẫu, chúng ta cần truy cập vào các tệp từ một máy chủ web. Có một số cách để tạo máy chủ web cục bộ tạm thời cho mục đích kiểm thử. Trong lớp học lập trình này, chúng tôi sẽ cung cấp hướng dẫn cho 3 lựa chọn có sẵn:

• Ứng dụng "Web Server for Chrome" của Google Chrome – Đây là phương pháp được đề xuất vì đây là giải pháp đơn giản và đa nền tảng nhất hiện có. Lưu ý: phương pháp này yêu cầu bạn cài đặt Google Chrome.
• Lưu trữ Firebase – Một lựa chọn thay thế nếu bạn cũng muốn khám phá nền tảng lưu trữ tài sản tĩnh mới của chúng tôi "Lưu trữ Firebase". Được bật SSL theo mặc định.
• Máy chủ HTTP Python cục bộ – Cần có quyền truy cập vào dòng lệnh.

Lưu ý: Bạn nên sử dụng HTTPS trong môi trường sản xuất. HTTPS mang lại nhiều lợi ích ngoài vấn đề bảo mật, trong đó có SEO. Bạn có thể đọc thêm về chủ đề này tại đây.

Cách 1: Web Server for Chrome

Bạn có thể tìm thấy ứng dụng "Web Server for Chrome" tại đường liên kết này trên Cửa hàng Chrome trực tuyến.

Sau khi cài đặt Ứng dụng Chrome, bạn phải trỏ ứng dụng đến một thư mục cụ thể thông qua nút "Chọn thư mục". Đối với lớp học lập trình này, bạn nên chọn thư mục nơi bạn giải nén các tệp ví dụ của lớp học lập trình.

Ngoài ra, bạn nên đánh dấu vào lựa chọn "Tự động hiện index.html" và đặt cổng thành "8000". Bạn sẽ cần khởi động lại máy chủ web để các thay đổi này có hiệu lực.

Truy cập vào URL này thông qua:

http://localhost:8000/article.html

Nếu tải thành công URL ở trên, bạn có thể chuyển sang bước tiếp theo.

Cách 2: Lưu trữ Firebase

Nếu muốn khám phá dịch vụ lưu trữ web tĩnh mới của Firebase, bạn có thể làm theo hướng dẫn tại đây để triển khai trang web AMP của mình vào một URL Lưu trữ Firebase.

Lưu trữ Firebase là một nhà cung cấp dịch vụ lưu trữ tĩnh mà bạn có thể sử dụng để nhanh chóng triển khai và lưu trữ một trang web tĩnh cùng các thành phần của trang web đó, bao gồm cả tệp HTML, CSS và JavaScript. Người dùng được hưởng lợi từ việc giảm độ trễ vì nội dung tĩnh được lưu vào bộ nhớ đệm trong mạng phân phối nội dung (CDN) với các điểm hiện diện (PoP) trên khắp thế giới.

Cuối cùng, tính năng Lưu trữ Firebase luôn được phân phát qua SSL, vì vậy, tính năng này rất phù hợp với AMP và web nói chung. Nếu bạn chỉ quan tâm đến việc tập trung vào AMP thì chỉ cần bỏ qua lựa chọn này.

Cách 3: Máy chủ HTTP Python

Nếu không sử dụng Chrome hoặc gặp khó khăn khi cài đặt tiện ích của Chrome, bạn cũng có thể sử dụng Python từ dòng lệnh để khởi động một máy chủ web cục bộ.

Để chạy máy chủ HTTP tích hợp của Python qua dòng lệnh, chỉ cần thực thi lệnh sau:

python -m SimpleHTTPServer

Và truy cập vào URL này:

http://localhost:8000/article.html

4. Tạo một trang HTML thông thường

Trong tệp zip đã tải xuống, bạn sẽ thấy một tệp có tên là article.html. Đây là bài viết mà chúng ta đang tạo một trang tương đương ở định dạng AMP.

Sao chép mã từ mẫu article.html rồi dán vào một tệp mới. Lưu tệp này dưới dạng article.amp.html.

Lưu ý: Bạn không bắt buộc phải đặt tên cho tệp AMP là .amp.html. Trên thực tế, tệp AMP có thể có bất kỳ đuôi nào bạn muốn. Các nhà xuất bản thường phân biệt trang AMP với phiên bản chính tắc bằng cách sử dụng các tham số trong URL. Ví dụ: http://publisher.com/article.html?amp

Lúc này, tệp article.amp.html của bạn sẽ có dạng như sau:

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

Đây là một trang đơn giản có chủ ý với các phần tử tin bài tĩnh thông thường: CSS, JavaScript và thẻ hình ảnh.

Phiên bản AMP của bài viết hiện chỉ là bản sao của bài viết gốc. Hãy chuyển đổi thành AMP. Để bắt đầu, chúng ta sẽ thêm tệp thư viện JavaScript AMP và xem những lỗi xuất hiện khi trình xác thực AMP được bật.

Để thêm thư viện AMP, hãy thêm dòng này vào cuối thẻ <head>:

<script async src="https://cdn.ampproject.org/v0.js"></script>

Bây giờ, hãy tải trang article.amp.html mới vào trình duyệt thông qua đường liên kết sau và mở Play Console trong Chrome thông qua Menu > More Tools > Developer Tools:

Bây giờ, hãy kiểm tra đầu ra JavaScript trong bảng điều khiển dành cho nhà phát triển. Đảm bảo bạn đã chọn thẻ Bảng điều khiển:

Bạn sẽ thấy nhật ký này xuất hiện:

Powered by AMP ⚡ HTML

Bây giờ, để bật trình xác thực AMP, hãy thêm giá trị nhận dạng đoạn này vào URL của bạn:

#development=1

Ví dụ:

http://localhost:8000/article.amp.html#development=1

Bạn có thể cần phải làm mới trang theo cách thủ công trong trình duyệt. Bạn có thể làm mới trang theo cách thủ công trong trình duyệt bằng cách nhấn vào nút này:

Bạn sẽ nhận được một số lỗi xác thực:

Mặc dù AMP là viết tắt của Accelerated Mobile Pages (Trang di động tăng tốc), nhưng bạn có thể dùng AMP để tạo các trang thích ứng hiển thị tốt trên mọi kích thước màn hình. Để biết thêm thông tin, hãy xem phần Thiết kế web đáp ứng trên trang web Google Developers.

Để mô phỏng trải nghiệm trên thiết bị di động trong Công cụ cho nhà phát triển Chrome. Nhấp vào biểu tượng thiết bị điện thoại di động tại đây:

Bây giờ, hãy chọn một thiết bị di động (ví dụ: "Pixel 2") trong trình đơn này:

Bạn sẽ thấy độ phân giải mô phỏng trên thiết bị di động trong trình duyệt của mình, chẳng hạn như:

Giờ thì chúng ta đã sẵn sàng bắt đầu! Hãy xem xét từng lỗi xác thực và cách các lỗi này liên quan đến AMP.

5. Giải quyết lỗi xác thực

Bắt buộc phải có bộ ký tự

Chúng ta sẽ bắt đầu bằng cách khắc phục lỗi sau:

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

Để hiển thị văn bản chính xác, AMP yêu cầu bạn phải đặt bộ ký tự cho trang. Đây cũng phải là phần tử con đầu tiên của thẻ head. Lý do là để tránh diễn giải lại nội dung đã được thêm trước thẻ charset meta.

Thêm mã sau làm dòng đầu tiên của thẻ head:

<meta charset="utf-8" />  

Lưu tệp, tải lại trang và kiểm tra để đảm bảo lỗi này không còn xuất hiện nữa.

Các tệp AMP phải có thẻ <link rel=canonical>.​​​

Mỗi tài liệu AMP đều phải có một đường liên kết tham chiếu đến trang chính tắc. Vì vậy, hãy thêm đường liên kết đến bài viết gốc của chúng ta.

Hãy thêm mã sau bên dưới thẻ <meta charset="utf-8" />:

<link rel="canonical" href="/article.html">

Lưu ý quan trọng: Bạn có thể tạo một trang AMP độc lập (tức là trang không có trang chuẩn). Trong trường hợp này, bạn vẫn phải có đường liên kết chuẩn, nhưng đường liên kết đó phải trỏ đến chính bài viết AMP:

<link rel="canonical" href="/article.amp.html">

Bây giờ, hãy khởi động lại máy chủ web nếu cần và tải lại trang. Mặc dù vẫn còn nhiều lỗi cần khắc phục, nhưng lỗi "Tệp AMP phải có thẻ <link rel=canonical>" không còn xuất hiện nữa.

Thuộc tính AMP bắt buộc

AMP yêu cầu một thuộc tính trên phần tử HTML gốc của một trang để khai báo trang đó là tài liệu AMP:

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

Bạn chỉ cần thêm thuộc tính ⚡ vào thẻ <html> như sau:

<!doctype html>
<html ⚡ lang="en">
  <head>
...

Bây giờ, hãy tải lại trang và kiểm tra để đảm bảo cả hai lỗi đều đã biến mất.

Lưu ý: Mặc dù ⚡ là phương pháp được đề xuất, nhưng bạn cũng có thể sử dụng thuộc tính amp thay cho thuộc tính ⚡. Vì vậy, mã đánh dấu sẽ là:

<!doctype html>

<html amp lang="en">

<head>

...

Khung nhìn bắt buộc

Tiếp theo, chúng ta sẽ giải quyết lỗi sau:

The mandatory tag 'meta name=viewport' is missing or incorrect.

AMP yêu cầu bạn xác định width và minimum-scale cho khung hiển thị. Bạn phải xác định các giá trị này lần lượt là device-width và 1. Khung hiển thị là một thẻ phổ biến có trong <head> của trang HTML.

Cách tốt nhất để khắc phục là thêm đoạn mã HTML sau vào thẻ <head>. Thêm thẻ meta sau:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="canonical" href="/article.html">

    <!-- The following is the meta tag and viewport information we must add to the page: -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

...

Đây là các giá trị hợp lệ duy nhất cho width và minimum-scale trong AMP. Bạn không bắt buộc phải xác định initial-scale nhưng đây là một thành phần thường thấy trong quá trình phát triển web di động và bạn nên sử dụng. Bạn có thể đọc thêm về khung nhìn và thiết kế đáp ứng tại đây.

Như trước đây, hãy tải lại trang và kiểm tra xem lỗi đã biến mất hay chưa.

Biểu định kiểu bên ngoài

Lỗi sau đây liên quan đến việc chúng tôi sử dụng biểu định kiểu:

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

Cụ thể, vấn đề này đang báo lỗi về thẻ đường liên kết đến biểu định kiểu sau đây trong thẻ <head> của chúng tôi:

<link href="base.css" rel="stylesheet" />

Vấn đề là đây là một tham chiếu đến bảng định kiểu bên ngoài. Trong AMP, để giữ thời gian tải tài liệu nhanh nhất có thể, nhà phát triển không được phép thêm biểu định kiểu bên ngoài. Thay vào đó, tất cả các quy tắc biểu định kiểu phải được đưa vào cùng dòng trong tài liệu AMP.

Do đó, hãy xoá thẻ liên kết trong <head> và thay thế thẻ đó bằng một thẻ nội tuyến, chẳng hạn như thẻ sau:

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

Bạn nên sao chép trực tiếp nội dung của thẻ kiểu từ tệp base.css trong thư mục dự án. Thuộc tính amp-custom trên thẻ style là bắt buộc.

Một lần nữa, hãy tải lại trang và kiểm tra xem lỗi biểu định kiểu đã biến mất hay chưa.

Lưu ý: Bạn không chỉ phải sử dụng kiểu nội tuyến mà còn phải tuân thủ giới hạn kích thước tệp là 50 kilobyte cho tất cả thông tin về kiểu. Bạn nên sử dụng các trình tiền xử lý CSS như SASS và giảm thiểu CSS trước khi nội tuyến CSS trong các trang của mình.

Quan trọng: Bạn chỉ có thể có một thẻ kiểu trong toàn bộ tài liệu AMP. Nếu có một số biểu định kiểu bên ngoài được các bài viết của bạn tham chiếu, bạn sẽ cần đối chiếu các biểu định kiểu này thành một bộ quy tắc duy nhất. Đọc trang tài liệu này để biết thêm thông tin về những quy tắc CSS hợp lệ trong tài liệu AMP.

JavaScript của bên thứ ba

Mặc dù bạn có thể sửa đổi biểu định kiểu tương đối dễ dàng bằng AMP thông qua tính năng nội tuyến, nhưng điều này không đúng với JavaScript.

The tag 'script' is disallowed except in specific forms.

Trong AMP, bạn không được phép sử dụng tập lệnh do người dùng tạo. Bạn chỉ được phép sử dụng tập lệnh trong AMP nếu tập lệnh đó tuân thủ 2 yêu cầu chính sau đây:

• Tất cả JavaScript phải không đồng bộ, tức là phải có thuộc tính async trong thẻ tập lệnh.
• Bạn chỉ có thể thêm thư viện AMP và các thành phần AMP.

Điều này sẽ loại bỏ hiệu quả việc sử dụng tất cả JavaScript của bên thứ ba. Có một trường hợp ngoại lệ là bạn có thể sử dụng JavaScript của bên thứ ba trong iframe.

Hãy thử mở tệp base.js bên ngoài. Bạn thấy gì? Tệp này không được chứa bất kỳ mã JavaScript nào và chỉ chứa một nhận xét thông tin như sau:

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files.

*/

Vì tệp JavaScript bên ngoài này không phải là một thành phần chức năng của trang web, nên chúng ta có thể xoá hoàn toàn tham chiếu này mà không ảnh hưởng đến trang web.

Xoá tham chiếu JavaScript bên ngoài sau đây khỏi tài liệu của bạn:

<script type="text/javascript" src="base.js"></script>

Bây giờ, hãy tải lại trang và kiểm tra xem lỗi tập lệnh đã biến mất hay chưa.

Lưu ý quan trọng: Việc đưa JavaScript vào thông qua iframe nên được coi là biện pháp cuối cùng. Bất cứ khi nào có thể, bạn nên thay thế chức năng JavaScript bằng cách sử dụng các thành phần AMP tích hợp. Chúng ta sẽ khám phá thành phần AMP đầu tiên trong phần tiếp theo.

Lưu ý: Trường hợp ngoại lệ duy nhất đối với tập lệnh do người dùng tạo là khi thuộc tính loại là application/ld+json hoặc application/json. Các thuộc tính này được dùng để thêm siêu dữ liệu vào trang và định cấu hình các thành phần AMP. Các tập lệnh không thực thi khác có thể được thêm trong tương lai.

Mã nguyên mẫu CSS của AMP

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

Các lỗi tiếp theo đề cập đến 2 thẻ bị thiếu trong thẻ <head>. Mọi tài liệu AMP đều phải có các thẻ sau:

<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>

Thêm đoạn mã trên vào cuối thẻ <head> của tài liệu.

Thẻ đầu tiên khiến nội dung của trang không hiển thị cho đến khi thư viện JavaScript AMP cập nhật thẻ body để hiển thị lại sau khi nội dung của trang sẵn sàng kết xuất. AMP làm như vậy để ngăn nội dung của trang xuất hiện khi chưa được tạo kiểu. Điều này đảm bảo rằng trải nghiệm người dùng thực sự diễn ra tức thì vì nội dung của trang xuất hiện cùng một lúc và mọi thứ trong màn hình đầu tiên đều được kết xuất cùng nhau. Thẻ thứ hai sẽ đảo ngược logic này nếu JavaScript bị tắt trong trình duyệt.

Thẻ amp-img

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

AMP có một thành phần web được thiết kế riêng để thay thế thẻ hình ảnh, được gọi là amp-img:

<amp-img src="mountains.jpg"></amp-img>

Hãy thử thêm thẻ amp-img ở trên rồi chạy lại trình xác thực. Bạn sẽ nhận được một số lỗi mới:

AMP-IMG# Layout not supported for: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

Tại sao amp-img lại kích hoạt một lỗi khác? Vì amp-img không phải là một lựa chọn thay thế trực tiếp cho thẻ HTML img truyền thống. Bạn phải đáp ứng thêm các yêu cầu khi sử dụng amp-img.

Hệ thống bố cục

Lỗi này cho biết rằng amp-img không hỗ trợ loại bố cục "container". Một trong những khái niệm quan trọng nhất trong thiết kế của AMP là việc tập trung vào giảm lượng DOM reflow cần thiết để hiển thị các trang web của nó.

Để giảm việc bố cục lại DOM, AMP bao gồm một hệ thống bố cục để đảm bảo bố cục của trang càng cố định càng tốt ngay từ đầu trong vòng đời tải xuống và kết xuất trang.

Hệ thống bố cục cho phép định vị và điều chỉnh tỷ lệ các phần tử trên một trang theo nhiều cách – kích thước cố định, thiết kế đáp ứng, chiều cao cố định và nhiều cách khác.

Trong trường hợp này, hệ thống bố cục đã suy luận loại bố cục cho amp-img là loại container. Tuy nhiên, loại vùng chứa là dành cho những phần tử chứa các phần tử con và không tương thích với thẻ amp-img. Đây là lý do gây ra lỗi này.

Tại sao loại vùng chứa được suy luận? Vì chúng tôi không chỉ định thuộc tính chiều cao cho thẻ amp-img. Trong HTML, bạn có thể giảm tình trạng bố cục lại bằng cách luôn chỉ định chiều rộng và chiều cao cố định cho các phần tử trên một trang. Trong AMP, bạn nên xác định chiều rộng và chiều cao cho các phần tử amp-img vì điều này cho phép AMP hiểu được tỷ lệ khung hình của phần tử.

Đặt chiều rộng và chiều cao như sau:

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

Làm mới trang và kiểm tra trình xác thực – bạn sẽ không thấy lỗi nào nữa! Tuy nhiên, hình ảnh này trông không đẹp vì được đặt ở vị trí không phù hợp trên trang. Thật tuyệt nếu chúng ta có thể điều chỉnh tỷ lệ hình ảnh để hình ảnh thích ứng, trải dài và vừa với trang bất kể kích thước màn hình.

Điều đáng ngạc nhiên là việc xác định chiều rộng và chiều cao không giới hạn phần tử ở một kích thước hoàn toàn cố định. Hệ thống bố cục AMP có thể định vị và điều chỉnh tỷ lệ phần tử theo nhiều cách bằng cách biết tỷ lệ khung hình của phần tử đó – thuộc tính bố cục thông báo cho AMP biết cách bạn muốn phần tử được định vị và điều chỉnh tỷ lệ.

Bằng cách đặt thuộc tính bố cục thành responsive, chúng ta có thể đạt được điều này:

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

Voila! Hình ảnh của chúng ta có tỷ lệ khung hình chính xác và lấp đầy chiều rộng của màn hình một cách thích ứng.

Thành công!

Giờ đây, tài liệu AMP của bạn sẽ có dạng như sau:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <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>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>  
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

Làm mới trang rồi xem đầu ra của bảng điều khiển. Bạn sẽ thấy thông báo sau:

AMP validation successful.

Câu hỏi thường gặp

• Quy trình chỉnh lại luồng DOM là gì?
• Nếu bạn không xác định thuộc tính bố cục thì sao?
• Nếu chiều rộng và chiều cao không được xác định thì sao?

6. URL chính tắc, siêu dữ liệu và tìm kiếm

Một phần của sáng kiến mới về AMP là việc làm nổi bật các tài liệu AMP hợp lệ trong giao diện kết quả tìm kiếm của Google trong một giao diện băng chuyền mới. Giao diện này mang lại trải nghiệm người dùng tốt hơn cho những người tìm kiếm bài viết trên web. Để có trải nghiệm tốt nhất, các trang được đưa vào phải đáp ứng một số tiêu chí ngoài việc vượt qua trình xác thực AMP.

Bước này cung cấp thông tin tổng quan về toàn bộ các yêu cầu.

Liên kết trang chính tắc và tài liệu AMP

AMP hướng đến việc giúp web chạy nhanh hơn và mặc dù dự án này tập trung nhiều hơn vào nội dung tĩnh trong những ngày đầu, nhưng việc bổ sung các thành phần như amp-bind giúp AMP phù hợp với nhiều loại trang web, chẳng hạn như nhà xuất bản tin tức, trang web thương mại điện tử, trang web du lịch, blog và các trang web khác.

Tuy nhiên, bạn cần nắm được toàn bộ phạm vi về cách AMP nên nằm trong cấu trúc của một trang web. Mặc dù có thể dùng AMP để tạo toàn bộ trang web, nhưng nhiều nhà xuất bản vẫn muốn sử dụng AMP theo phương pháp kết hợp, trong đó các tài liệu AMP được tạo để đi kèm với các bài viết HTML thông thường mà nhà xuất bản sẽ lưu trữ trên trang web của họ.

Lưu ý: Để biết thêm thông tin về cách sử dụng AMP để xây dựng toàn bộ trang web (còn gọi là trang web AMP chính tắc), hãy nhớ xem lớp học lập trình"Trang AMP chính tắc đẹp mắt và giàu tính tương tác".

Liên kết chuẩn trong các trang HTML thông thường là một kỹ thuật phổ biến để khai báo trang nào nên được coi là trang ưu tiên khi nhiều trang có cùng nội dung. Vì có thể tạo tài liệu AMP để có sẵn cùng với các trang bài viết truyền thống của một trang web, nên chúng ta nên coi các trang HTML truyền thống là các trang "chính tắc".

Chúng tôi đã thực hiện bước đầu tiên để đạt được điều này trong tài liệu AMP bằng cách đưa thẻ liên kết vào <head> quay lại trang chính tắc:

<link rel="canonical" href="/article.html">

Bước tiếp theo là liên kết bài viết chính tắc với trang AMP. Bạn có thể thực hiện việc này bằng cách thêm thẻ <link rel="amphtml"> vào phần <head> của bài viết chuẩn.

Thêm đoạn mã sau vào phần <head> của tệp article.html:

<link rel="amphtml" href="/article.amp.html">

Sơ đồ sau đây minh hoạ hướng của thẻ liên kết:

Bạn cần thiết lập mối liên kết hai chiều này để trình thu thập thông tin của Google Tìm kiếm hiểu được mối quan hệ giữa tài liệu chuẩn HTML thông thường và tài liệu AMP của chúng tôi. Nếu bạn không cung cấp đường liên kết nào, thì trình thu thập dữ liệu sẽ không nhất thiết phải biết bài viết nào là "phiên bản AMP" của tài liệu HTML thông thường. Bằng cách cung cấp rõ ràng những đường liên kết này, chúng tôi đảm bảo không có sự mơ hồ!

Siêu dữ liệu công cụ tìm kiếm Schema.org

Một yêu cầu khác để các tài liệu AMP xuất hiện trong giao diện băng chuyền mới là phải tuân thủ quy cách Siêu dữ liệu của công cụ tìm kiếm của Schema.org. Siêu dữ liệu này được đưa vào thẻ <head> của tài liệu thông qua thẻ tập lệnh loại application/ld+json.

Thêm mã sau vào cuối phần <head> của tài liệu AMP:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

Tải lại trang trong trình duyệt và kiểm tra kỹ để đảm bảo không có lỗi Xác thực AMP nào xuất hiện.

Giờ đây, hãy mở Công cụ xác thực dữ liệu có cấu trúc trong một cửa sổ trình duyệt mới rồi nhấp vào "Kiểm tra mã đánh dấu của tôi". Sau đó, hãy chọn thẻ "Đoạn mã", sao chép toàn bộ mã nguồn từ trang AMP của bạn rồi dán vào bảng trình chỉnh sửa văn bản của công cụ xác thực, sau đó nhấp vào "Chạy kiểm thử":

Bạn sẽ thấy nội dung như sau trên trang:

Quan trọng: Hãy đảm bảo rằng văn bản màu xanh lục "Không có vấn đề" xuất hiện. Chỉ những trang AMP vượt qua quy trình xác thực này mới xuất hiện trong băng chuyền AMP.

Lưu ý: Nội dung phải luôn giống nhau. Đối với bài viết tin tức, hãy sử dụng loại "NewsArticle". Tiêu đề phải khớp với tiêu đề của bài viết. Hình ảnh đề cập đến hình ảnh chính của bài viết.

Sau đây là các yêu cầu chính để xuất hiện trong băng chuyền mới của Google Tìm kiếm cho các bài viết tin tức sử dụng AMP:

1. Đảm bảo tài liệu AMP của bạn được xác thực.
2. Tham chiếu tài liệu AMP từ trang HTML truyền thống thông qua thẻ <link> và ngược lại.
3. Thêm thẻ Siêu dữ liệu của công cụ tìm kiếm ở trên.

Đọc thêm thông tin về tính năng khám phá trang.

7. Xin chúc mừng!

Bạn đã hoàn tất lớp học lập trình này và khám phá thành công nhiều khái niệm cơ bản về tài liệu AMP.

Hy vọng rằng bạn không chỉ hiểu cách triển khai các khái niệm và tính năng này trong tài liệu AMP mà còn hiểu lý do AMP được thiết kế theo cách này.

Sau đây là một số chủ đề và đường liên kết khác mà bạn có thể muốn khám phá để nâng cao kỹ năng của mình hơn nữa!

• Tất cả thông tin về tính năng Khám phá trang
• Thẻ HTML không được phép
• Quy tắc và ảnh động CSS bị hạn chế
• Thông tin khác về iFrame
• CDN của AMP
• Danh sách các thành phần AMP hiện có