Hướng dẫn đầy đủ để thử nghiệm các trang di động nhanh của bạn

Google đã khởi chạy các trang di động tăng tốc - đơn giản gọi là  AMP  - để duyệt web trên điện thoại di động nhanh hơn.

AMP cho phép bạn xếp hạng cao hơn trong kết quả tìm kiếm trên thiết bị di động. Tuy nhiên, chỉ các trang AMP hợp lệ đủ điều kiện được hiển thị trong kết quả tìm kiếm.

Thử nghiệm AMP đúng cách là cực kỳ quan trọng để loại bỏ bất kỳ lỗi hoặc cảnh báo nào và làm cho các trang của bạn được lập chỉ mục bởi Google.

Hướng dẫn này sẽ giúp bạn hiểu được loại lỗi AMP và cách bạn có thể khắc phục chúng.

Xác định và sửa lỗi AMP trong giai đoạn phát triển

Dưới đây là một số công cụ hữu ích khi sửa lỗi AMP của bạn:

1. Các công cụ phát triển trình duyệt

• Thực hiện theo các bước dưới đây để bắt đầu:
• Mở trang AMP trong trình duyệt của bạn.
• Thêm "# development = 1" vào URL, ví dụ: http: // localhost: 8000 / example.amp.html # development = 1.

2. Trình mở rộng trình duyệt AMP Validator

Tải xuống tiện ích mở rộng trình duyệt AMP Validator dành cho Chrome và duyệt các trang trên trang web của bạn.

Plugin này sẽ tự động kiểm tra từng trang để xác nhận AMP.

Nó sẽ chuyển sang màu xanh lá cây nếu trang vượt qua xác nhận AMP hoặc chuyển sang màu đỏ nếu trang không thực hiện bài kiểm tra.

3. Xác nhận Web AMP

Với sự trợ giúp của trình xác nhận AMP , bạn có thể trực tiếp dán mã nguồn của bạn và kiểm tra các lỗi có thể xảy ra.

Công cụ này sẽ cho bạn biết trạng thái xác nhận bằng cách hiển thị PASS hoặc FAIL.

Khi bạn đã khắc phục tất cả các lỗi AMP trong giai đoạn phát triển, bạn có thể tải chúng lên máy chủ chính.

Kiểm tra lại tính hợp lệ của các trang AMP Sau khi Bạn Tải lên chúng trên Máy chủ Chính

Sau khi bạn tải lên các trang trên máy chủ, hãy kiểm tra lại tính hợp lệ của các trang này bằng sự trợ giúp của công cụ kiểm tra AMP của Google .

Theo dõi các trang AMP thường xuyên qua Search Console

Một khi bạn đã xác nhận và tải lên các trang AMP trên máy chủ chính, các trang sẽ bắt đầu hiển thị trong kết quả tìm kiếm của Google. Bây giờ, đã đến lúc phải thường xuyên theo dõi các trang với sự trợ giúp của Google Search Console . Có một số lỗi mà bạn không thể tìm thấy trong giai đoạn phát triển và các lỗi này chỉ được xác định sau khi Google thu thập thông tin và lập chỉ mục trang web của bạn.

Hãy thảo luận làm thế nào chúng ta có thể xác định và sửa các lỗi như vậy.

Xác định lỗi trong các trang AMP sử dụng Google Search Console

Bạn có thể tìm công cụ này trong Search Console> Hình thức Tìm kiếm> Các trang Di động Tăng tốc.

Tại đây, bạn sẽ tìm thấy tất cả lỗi AMP hoặc cảnh báo mà Google có thể đã xác định trên trang web của bạn. Một báo cáo mẫu được chia sẻ dưới đây:

Khi bạn đã xác định được URL nào đang có vấn đề, bước tiếp theo là khắc phục chúng.

Lỗi AMP thường gặp & Cách khắc phục

1. Lỗi không phù hợp nội dung

Lỗi này xảy ra khi có sự khác biệt giữa AMP và trang web theo kinh điển.

Làm thế nào để Fix It

Đảm bảo rằng AMP của bạn đang tham chiếu đến trang web hợp quy chuẩn. Định dạng chính xác được cung cấp dưới đây:

Thêm các mục sau vào trang không phải AMP:

< link rel = "amphtml" href = "https://www.example.com/url/to/amp/document.html">

Và điều này đến trang AMP:

< link rel = "canonical" href = "https://www.example.com/url/to/full/document.html">

2. Thiếu lỗi video nhúng

Lỗi này được phát hiện khi trang AMP thiếu một video được hiển thị trong trang kinh điển.

Làm thế nào để Fix It

Đảm bảo rằng bạn không có hai URL khác nhau trỏ tới cùng một video. URL của video phải giống nhau trong cả hai phiên bản AMP và phiên bản chuẩn.

3. Lỗi thuộc tính Không hợp lệ

Lỗi này xảy ra khi thẻ HTML có thuộc tính có giá trị không được phép.

Làm thế nào để Fix It

Kiểm tra đặc tả AMP HTML và sửa giá trị thuộc tính cho một cái gì đó hợp lệ. Nhiều lần thuộc tính bắt buộc là một HTTPS bị mất tích.

4. Lỗi thuộc tính bị cấm

Lỗi này xảy ra khi bạn đang sử dụng thuộc tính không được phép.

Làm thế nào để Fix It

Kiểm tra các thuộc tính được hỗ trợ cho mỗi thẻ và sửa một thuộc tính không được phép.

5. Thẻ Bắt buộc Thiếu

Lỗi này được xác định khi trang bị thiếu bất kỳ thẻ bắt buộc nào.

Các thẻ sau phải có mặt trong tất cả các trang AMP:
<! doctype html>
<html amp> hoặc <html>
<head>
<link rel = "canonical" href = "$ SOME_URL">
<meta charset = "utf-8">
<meta name = "viewport" content = "...">
<style amp-boilerplate> body {-webkit-animation: -sau khi bắt đầu bước 8s (1, kết thúc) 0s 1 bình thường cả hai; -moz-animation: -bắt đầu 8s bước (1, kết thúc) 0s 1 bình thường cả hai; -ms-animation: -amp-start 8s steps (1, end) 0s 1 bình thường cả hai, hoạt hình: -amp-bắt đầu 8s bước (1, kết thúc) 0s 1 bình thường cả hai @ @ webkit-keyframes -amp-start { {visibility: hidden} to {visibility: visible}} @ - moz-keyframes -amp-start {từ {visibility: hidden} đến {visibility: visible}} @ - ms-keyframes -amp-start {from {visibility: hidden } đến {visibility: visible}} @ - o-keyframes -amp-start {từ {visibility: hidden} đến {visibility: visible}} keyframes -amp-start {từ {visibility: hidden} đến {visibility: visible} } </ style> <noscript> <style amp-boilerplate> body {-webkit-hoạt hình: không có gì; -moz-animation: không có gì; -ms-animation: không có gì, hoạt hình: none} </ style> </ noscript>
< / noscript> tập lệnh async src = "https: // cdn.ampproject.org/v0.js "> </ script>
<body>

Làm thế nào để Fix It
Nếu bạn đang thiếu bất kỳ thẻ nào ở trên, hãy đảm bảo thêm nó để thoát khỏi lỗi này.