Trang chủ » Di động » 10 thành phần trang di động tăng tốc quan trọng (AMP) bạn nên biết
10 thành phần trang di động tăng tốc quan trọng (AMP) bạn nên biết
Trang di động được tăng tốc hoặc là 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 và 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 thông qua thời gian chạy riêng của nó.
Điều này đòi hỏi bạn không thể sử dụng bất kỳ JavaScript tùy chỉnh (do tác giả viết hoặc bên thứ ba) hoặc bất kỳ yếu tố HTML nào liên quan đến tài nguyê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à thực tiễn hoạt động tốt nhất, AMP có Thành phần cụ thể bạn có thể sử dụng thay cho các yếu tố loại trừ này.
Các thành phần AMP là thẻ HTML cụ thể. Chúng hoạt động tương tự như các thẻ HTML thông thường: chúng có các thẻ mở và đóng, thuộc tính và hầu hết chúng có thể được tạo kiểu bằng CSS. Họ có thể dễ dàng nhận ra, vì họ luôn luôn bắt đầu với amp- tiếp đầu ngữ.
Có hai loại Thành phần AMP: được xây dựng trong và mở rộng Các thành phần.
Các thành phần AMP tích hợp
Được xây dựng được tích hợp sẵn trong 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ế nhãn trong các tài liệu HTML AMP. Bạn cần thêm src và alt thuộc tính giống như khi bạn làm việc với thường xuyên thành phần.
cũng có hai thuộc tính bắt buộc khác: bạn luôn cần phải chỉ định la chiều rộng và Chiều cao thuộc tính trong các giá trị pixel nguyên, vì điều này cho phép thời gian chạy AMP tính toán bố trí trước.
Nếu bạn muốn làm cho hình ảnh phản ứng, thêm layout = "responsive" thuộc tính. Các bố trí thuộc tính 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ố trí AMP).
Bạn cũng có thể sử dụng srcset thuộc tính trên gắn thẻ chỉ định các hình ảnh khác nhau cho các khung nhìn khác nhau và mật độ pixel. Nó hoạt động tương tự như với hình ảnh không phải AMP.
2. video amp
có thể được sử dụng để trực tiếp nhúng video HTML trong các tài liệu HTML AMP. Nó thay thế trong tập tin AMP. Các nhãn tải video lười biếng để tối ưu hóa hiệu suất.
Nguồn của video phải được phục vụ qua giao thức HTTPS. Bạn được yêu cầu thêm chiều rộng và Chiều cao các thuộc tính, giống như với thành phần.
Các Thẻ có nhiều thuộc tính tùy chọn, chẳng hạn như tự chạy 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 HTML5 hỗ trợ
Nếu bạn muốn, bạn cũng có thể thêm video dự phòng đối với người dùng có trình duyệt không hỗ trợ video HTML5, sử dụng dự phòng thuộc tính và Thẻ HTML.
Trình duyệt của bạn không hỗ trợ video HTML5.
3. quảng cáo và amp-nhúng
cung cấp cho bạn hộp cát iframe trong đó bạn có thể hiển thị quảng cáo của bạn. Bạn phải phục vụ quảng cáo của bạn thông 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 cung cấp. Thay vào đó, thời gian chạy AMP thực thi JavaScript của mạng đã cho bên trong hộp cát. Bạn chỉ cần xác định mạng bạn sử dụng, và thêm dữ liệu của bạn.
Các thành phần yêu cầu bạn phải thêm kích thước của quảng cáo sử dụng chiều rộng và Chiều cao thuộc tính.
Bạn có thể xác định mạng quảng cáo bạn sử dụng với kiểu thuộc tính. Xem danh sách các mạng quảng cáo được hỗ trợ.
Mỗi mạng quảng cáo có một dữ liệu-* thuộc tính bạn cũng cần thêm. Để xem cái nào bạn cần, nhấp vào mạng quảng cáo của bạn trong danh sách trên.
là bí danh của , tài liệu không nói nhiều về nó ngoài việc nó có thể được sử dụng thay vì khi đó chính xác hơn về mặt ngữ nghĩa. Vì Google hứa sẽ phát triển các thành phần AMP liên quan đến quảng cáo theo thời gian, điều này có thể thay đổi trong tương lai.
4. pixel-pixel
Với , bạn có thể thêm một pixel theo dõi đến các tài liệu HTML AMP của bạn để số lượt xem trang. Nó chỉ có một thuộc tính, bắt buộc src thuộc tính, trong đó bạn cần phải chỉ định URL thuộc pixel theo dõi.
Các thẻ 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 từng ấn tượng.
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 thành phần.
Các thành phần AMP mở rộng
Là 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 luôn cần nhập chúng bên trong phần 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. âm thanh amp
thay thế Thẻ HTML5 và làm cho nó có thể nhúng trực tiếp các tệp âm thanh HTML5 trong các trang AMP.
Để sử dụng nó, bạn bắt buộc phải chỉ định src, chiều rộng và Chiều cao các thuộc tính và bạn cũng có thể thêm ba thuộc tính tùy chọn: tự chạy, vòng lặp và tắt tiếng.
Nó cũng có thể là một ý tưởng tốt để thêm tập tin âm thanh dự phòng cho người dùng có trình duyệt không hỗ trợ HTML5. Bạn có thể làm điều này bằng cách sử dụng dự phòng thuộc tính và thẻ, giống như với đã nói ở trên thành phần.
Các Thành phần AMP hỗ trợ các định dạng âm thanh giống như Thẻ HTML5.
Trình duyệt của bạn không hỗ trợ âm thanh HTML5.
Để sử dụng , bao gồm các tập lệnh sau trong phần tài liệu AMP của bạn:
6. amp-iframe
hiển thị iframe trong tài liệu AMP. đã được thực hiện để bảo mật hơn so với các iframe HTML thông thường. Vì vậy, họ là hộp cát theo mặc định.
Có một số quy tắc liên quan đến bạn phải tuân theo để vượt qua xác nhận.
Bạn phải xác định chiều rộng, Chiều cao, và hộp cát thuộc tính. Các hộp cát Theo mặc định, thuộc tính trống, nhưng bạn có thể cung cấp cho nó các giá trị khác nhau để sửa đổi hành vi của iframe, ví dụsandbox = "cho phép tập lệnh"cho phép iframe chạy JavaScript. Bạn cũng có thể sử dụng các thuộc tính của iframe tiêu chuẩn.
Trong khi kích thước của được xác định trước bởi chiều rộng và Chiều cao thuộc tính, có một cách để thay đổi kích thước nó trong thời gian chạy. Để sử dụng thành phần, thêm tập lệnh sau vào trang AMP của bạn:
7. amp-accordion
Hiệp định tạo thành một mẫu UI 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. làm cho nó có thể nhanh chóng thêm accordion đến các trang AMP.
Các phần của accordion phải sử dụng Thẻ HTML5 và cần phải là trẻ em trực tiếp của nhãn.
Mỗi phần phải có hai con trực tiếp:
một cho tiêu đề
một cho nội dung (nội dung cũng có thể là một hình ảnh)
Sử dụng mở rộng thuộc tính trên bất kỳ phần nào bạn muốn mở rộng theo mặc định.
Phần 1
Nội dung của Phần 1
Mục 2
Nội dung của Phần 2
Mục 3
Hình ảnh cho Phần 3
Để sử dụng thành phần trong tài liệu AMP của bạn, bao gồm tập lệnh sau:
số 8. hộp đèn amp
thêm một hộp đèn đến các yếu tố khác nhau (trong hầu hết các trường hợp, hình ảnh) trên Trang di động được tăng tốc.
Khi người dùng tương tác với phần tử, ví dụ như chạm vào nó, hộp đèn mở rộng và lấp đầy toàn bộ khung nhìn. Bạn cần phải thêm một nút hoặc điều khiển khác mà người dùng có thể nhấn vào.
Lưu ý rằng hộp đèn amp chỉ có thể được sử dụng với không hiển thị bố trí.
Để sử dụng thành phần, bạn cần nhập nó với mã sau đây:
9. băng chuyền
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 yếu tố tương tự (hình ảnh thường xuyên nhất) dọc theo trục ngang. Kết quả AMP cũng được trình bày theo định dạng băng chuyền trong Google Tìm kiếm.
Các thành phần cho phép bạn thêm băng chuyền vào trang web của bạn. Các trẻ em trực tiếp của thành phần sẽ được coi là các mặt hàng 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 thuộc tính.
Bạn có thể sử dụng tùy chọn kiểu thuộc tính để xác định Làm thế nào để hiển thị các mục băng chuyền. Nếu kiểu thuộc tính lấy "băng chuyền" giá trị, các mục sẽ được hiển thị như một dải liên tục (đây là mặc định), trong khi "slide" giá trị sẽ hiển thị các mục ở định dạng slide.
Các Thẻ cũng có các thuộc tính tùy chọn khác có thể giúp bạn điều chỉnh kết quả.
Trong ví dụ dưới đây, lưu ý rằng cả băng chuyền và tất cả các mặt hàng của nó sử dụng tương tự chiều rộng và Chiều cao giá trị.
Các thành phần yêu cầu bổ sung tập lệnh sau:
10. phân tích amp
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:
Số lượt xem
Nhấp chuột neo
Hẹn giờ
Cuộn
Để sử dụng , bạn cần phải thêm một đối tượng cấu hình JSON bên trong
Thêm đoạn script sau vào phần trang AMP HTML của bạn để nhập thành phần:
Từ cuối cùng
Trong bài đăng này, chúng tôi đã xem xét tất cả các thành phần AMP tích hợp và một số thành phần mở rộng. Vì Trang di động được tăng tốc vẫn còn mới, nhiều thứ có thể thay đổi trong tương lai, do đó, đáng để theo dõi tài liệu trên Github hoặc trên trang web AMP chính thức.
Vì các thành phần AMP này là nguồn mở, bạn cũng có thể đóng góp cho sự phát triển, thậm chí tạo thành phần của riêng bạn. Nếu bạn muốn xem một trang AMP hoàn chỉnh trông như thế nào với các thành phần khác nhau, bạn có thể xem một vài ví dụ trên Github.
