Accelerated Mobile Pages hoặc AMP là sáng kiến ​​của Google để làm cho web di động nhanh hơn. Để đạt được mục tiêu này, các tiêu chuẩn AMP hạn chế cách bạn có thể sử dụng HTML, CSS và JavaScript cũng như quản lý việc tải các tài nguyên bên ngoài, chẳng hạn như hình ảnh, video và quảng cáo.

Điều này dẫn đến việc bạn không thể sử dụng bất kỳ JavaScript tùy chỉnh nào (do tác giả viết hoặc bên thứ ba) hoặc bất kỳ phần tử HTML nào liên quan đến tài nguyên, chẳng hạn như hình ảnh và video trong tài liệu AMP của bạn.

Để thu hẹp khoảng cách giữa nhu cầu của người dùng và các phương pháp hoạt động tốt nhất, AMP có các Thành phần cụ thể mà bạn có thể sử dụng thay cho các thành phần bị loại trừ này.

Thành phần AMP là các thẻ HTML cụ thể. Chúng hoạt động tương tự như các thẻ HTML thông thường: chúng có thẻ mở và thẻ đóng, thuộc tính và hầu hết chúng đều có thể như vậy. Có thể dễ dàng nhận ra chúng, vì chúng luôn bắt đầu bằng tiền tố amp-.

Có hai loại Thành phần AMP: Thành phần tích hợp và Thành phần.

Hướng dẫn cho người mới bắt đầu về các trang trên thiết bị di động được tăng tốc (AMP)

Hướng dẫn cho người mới bắt đầu về các trang trên thiết bị di động được tăng tốc (AMP)

Tích hợp sẵn được tích hợp vào thời gian chạy JavaScript của AMP, vì vậy bạn không cần phải bao gồm chúng một cách riêng biệt.

1. amp-img

thay thế trong tài liệu HTML AMP. Bạn cần thêm src và alt giống như khi bạn làm việc với phần tử thông thường.

cũng có hai thuộc tính bắt buộc khác: bạn luôn cần chỉ định chiều rộng và chiều cao trong các giá trị pixel số nguyên, vì điều này cho phép thời gian chạy AMP tính toán trước bố cục.

Nếu bạn muốn làm cho hình ảnh đáp ứng, hãy thêm bố cục = ”đáp ứng”. bố cục kiểm soát bố cục trong tài liệu AMP và nó có thể được thêm vào bất kỳ Thành phần AMP nào (tìm hiểu thêm về điều này trên Hệ thống bố cục AMP).

  <amp-img src="https://www.driveria.net/blog/important-amp-components/img.jpg" width="350" height="200"
    layout="responsive" alt="My Image">
</amp-img>
 

Bạn cũng có thể sử dụng srcset trên để chỉ định các hình ảnh khác nhau cho các chế độ xem và mật độ pixel khác nhau. Nó giống như với hình ảnh không phải AMP.

2. amp-video

Nguồn của video phải được phân phát qua giao thức HTTPS. Bạn bắt buộc phải thêm chiều rộng và chiều cao, giống như với thành phần .

có nhiều, chẳng hạn như tự động phát và áp phích mà bạn có thể chỉ định để tinh chỉnh cách hiển thị video HTML5 của bạn.

hỗ trợ mp4, webm, ogg và tất cả các định dạng khác được hỗ trợ bởi thẻ

Nếu muốn, bạn cũng có thể thêm video dự phòng cho người dùng có trình duyệt không hỗ trợ video HTML5 bằng cách sử dụng và thẻ HTML.

  <amp-video width="350" height="250"
  src="https://example.com/video.mp4" layout="responsive" autoplay>
  <div fallback>
    <p>Your browser doesn't support HTML5 videos.</p>
  </div>
  <source type="video/mp4" src="myvideo.mp4">
  <source type="video/webm" src="myvideo.webm">
</amp-video>
 

cung cấp cho bạn hộp cát iframe để bạn có thể hiển thị quảng cáo của mình. Bạn phải phân phát quảng cáo của mình qua giao thức HTTPS.

Bạn không thể tự chạy các tập lệnh do mạng quảng cáo của mình cung cấp. Thay vào đó, thời gian chạy AMP thực thi JavaScript của mạng nhất định bên trong hộp cát. Bạn chỉ cần chỉ định mạng nào bạn sử dụng và thêm dữ liệu của mình.

Thành phần yêu cầu bạn thêm các kích thước của quảng cáo bằng chiều rộng và chiều cao.

Bạn có thể xác định loại mạng quảng cáo bạn sử dụng. Nhìn thấy .

Mỗi mạng quảng cáo có dữ liệu riêng của nó- * bạn cũng cần thêm. Để xem bạn cần cái nào, hãy nhấp vào mạng quảng cáo của bạn trong danh sách trên.

  <amp-ad width="300" height="250"
    layout="responsive" type="adsense"
    data-ad-client="ca-pub-2005682797531342"
    data-ad-slot="7046626912">
</amp-ad>
 
4. amp-pixel

Với , bạn có thể thêm pixel theo dõi vào tài liệu HTML AMP của mình để đếm lượt xem trang. Nó chỉ có một thuộc tính, src bắt buộc, trong đó bạn cần chỉ định URL thuộc về pixel theo dõi.

cho phép thay thế URL tiêu chuẩn, có nghĩa là bạn có thể tạo một giá trị URL ngẫu nhiên để theo dõi mỗi lần hiển thị.

Xem Hướng dẫn thay thế URL của AMP nếu bạn muốn sử dụng thành phần này. Lưu ý rằng bạn không thể tạo kiểu cho thành phần .

  <amp-pixel src="https://example.com/pixel?RANDOM"></amp-pixel>
 

Vì các thành phần AMP mở rộng không phải là một phần của thời gian chạy JavaScript, bạn luôn cần nhập chúng vào của trang AMP mà bạn muốn sử dụng chúng.

Lưu ý: các phiên bản thành phần có thể thay đổi trong tương lai, vì vậy đừng quên kiểm tra phiên bản hiện tại trong tài liệu.

5. amp-âm thanh

Để sử dụng nó, bạn phải chỉ định src, width và height và bạn cũng có thể thêm: autoplay, loop và mute.

Cũng có thể là một ý tưởng hay khi thêm các tệp âm thanh dự phòng cho người dùng có trình duyệt không hỗ trợ HTML5. Bạn có thể thực hiện việc này bằng cách sử dụng dự phòng và, giống như với thành phần đã nói ở trên.

Thành phần AMP hỗ trợ các định dạng âm thanh giống như thẻ

  <amp-audio width="200" height="100"
  src="https://example.com/audio.mp3">
  <div fallback>
    <p>Your browser doesn't support HTML5 audio.</p>
  </div>
  <source type="audio/mpeg" src="mysong.mp3">
  <source type="audio/ogg" src="mysong.ogg">
</amp-audio>
 

Để sử dụng , hãy đưa tập lệnh sau vào của tài liệu AMP của bạn:

  <script async custom-element="amp-audio"
    src="https://cdn.ampproject.org/v0/amp-audio-0.1.js">
</script>
 
6. amp-iframe

hiển thị iframe trong tài liệu AMP. đã được tạo ra để an toàn hơn iframe HTML thông thường. Do đó chúng được.

Có bạn phải làm theo để vượt qua xác thực.

Cách xác thực các trang trên thiết bị di động được tăng tốc (AMP)

Bạn phải chỉ định chiều rộng, chiều cao và. sandbox trống theo mặc định, nhưng bạn có thể cung cấp cho nó các giá trị khác nhau để sửa đổi hoạt động của iframe, đối với instancesandbox = ”allow-scripts” cho phép iframe chạy JavaScript. Bạn có thể dùng .

  <amp-iframe width="350" height="250"
     layout="responsive"
     sandbox="allow-scripts allow-same-origin"
     allowfullscreen
     src="https://example.com/iframe">
 </amp-iframe>
 

Mặc dù kích thước của được xác định trước theo chiều rộng và chiều cao, nhưng vẫn có một cách để thực hiện. Để sử dụng thành phần , hãy thêm tập lệnh sau vào trang AMP của bạn:

  <script async custom-element="amp-iframe"
    src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>
 
7. amp-accordion

Các tập hợp tạo thành một mẫu giao diện người dùng thường xuyên trong thiết kế di động, vì chúng tiết kiệm không gian, nhưng vẫn hiển thị nội dung theo cách có thể truy cập được. giúp bạn có thể nhanh chóng thêm đàn accordion vào các trang AMP.

Các phần của đàn accordion phải sử dụng thẻ HTML5

và phải là phần tử con trực tiếp của .

Mỗi phần phải có hai con trực tiếp:

  1. một cho tiêu đề
  2. một cho nội dung (nội dung cũng có thể là một hình ảnh)

Sử dụng trên bất kỳ phần nào bạn muốn mở rộng theo mặc định.

  <amp-accordion>
  <section expanded>
    <h3>Section 1</h3>
    <div>Content of Section 1</div>
  </section>
  <section>
    <h3>Section 2</h3> 
     <p>Content of Section 2</p>
  </section>
  <section>
    <h3>Section 3</h3>
    <figure>
      <amp-img src="https://www.driveria.net/blog/important-amp-components/image.jpg" width="350" height="200"
          layout="responsive" alt="Image for Section 3">
      </amp-img> 
       <figcaption>Image for Section 3</figcaption>
    </figure>
  </section>
</amp-accordion>
 

Để sử dụng thành phần trong tài liệu AMP của bạn, hãy bao gồm tập lệnh sau:

  <script async custom-element="amp-accordion"
    src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
</script>
 
số 8. amp-lightbox

thêm hộp đèn vào các phần tử khác nhau (trong hầu hết các trường hợp là hình ảnh) trên Accelerated Mobile Pages.

Khi người dùng tương tác với phần tử, chẳng hạn như chạm vào phần tử đó, hộp đèn sẽ mở rộng và lấp đầy toàn bộ khung nhìn. Bạn cần thêm một nút hoặc một điều khiển khác mà người dùng có thể nhấn vào.

Lưu ý rằng amp-lightbox chỉ có thể được sử dụng với bố cục hiển thị nút.

  <button on="tap:mylightbox" role="button" tabindex="0">
  Expand
</button> 

 <amp-lightbox  layout="nodisplay">
  <div  on="tap:mylightbox.close"
      role="button" tabindex="0">
      <amp-img src="https://www.driveria.net/blog/important-amp-components/full-image.jpg" width="375" height="667"
      on="tap:my-lightbox.close">
  </div>
</amp-lightbox>
 

Để sử dụng thành phần , bạn cần nhập thành phần đó bằng mã sau:

  <script async custom-element="amp-lightbox"
    src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>
 
9. amp-carousel

Băng chuyền thường được sử dụng trong thiết kế di động, vì chúng cho phép hiển thị nhiều phần tử tương tự (thường là hình ảnh) dọc theo trục ngang. Kết quả AMP cũng được hiển thị ở định dạng băng chuyền trong Google Tìm kiếm.

Thành phần cho phép bạn thêm băng chuyền vào trang web của mình. con trực tiếp của thành phần sẽ được coi là các mục của băng chuyền. Bạn phải xác định kích thước của băng chuyền với chiều rộng và chiều cao.

Bạn có thể sử dụng loại tùy chọn để xác định cách hiển thị các mục trong băng chuyền. Nếu loại có “băng chuyền”, các mục sẽ được hiển thị dưới dạng dải liên tục (đây là mặc định), trong khi “trang trình bày” sẽ hiển thị các mục ở định dạng trang trình bày.

cũng có thể giúp bạn tinh chỉnh kết quả.

Trong ví dụ bên dưới, hãy lưu ý rằng cả băng chuyền và tất cả các mục của nó đều sử dụng cùng chiều rộng và chiều cao.

  <amp-carousel width="300" height="400" layout="responsive"
  type="slides">
  <amp-img src="https://www.driveria.net/blog/important-amp-components/image1.jpg" width="300" height="400"></amp-img>
  <amp-img src="image2.jpg" width="300" height="400"></amp-img>
  <amp-img src="image3.jpg" width="300" height="400"></amp-img>
</amp-carousel>
 

Thành phần yêu cầu thêm tập lệnh sau:

  <script async custom-element="amp-carousel"
    src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>
 
10. amp-analytics

có thể được sử dụng để thu thập dữ liệu phân tích trên các trang AMP. Hiện tại, hỗ trợ bốn loại sự kiện theo dõi, tuy nhiên, điều này có thể thay đổi trong tương lai:

  1. Số lần xem trang
  2. Nhấp chuột neo
  3. Hẹn giờ
  4. Cuộn

Để sử dụng , bạn cần thêm đối tượng cấu hình JSON bên trong