Google hiện đang triển khai các trang di động được tăng tốc trong các kết quả tìm kiếm trên thiết bị di động, nhưng làm cách nào bạn có thể thực hiện hành động này? Nhà báo Paul Shapiro giải thích cách bạn có thể đánh dấu trang di động của mình để có trải nghiệm người dùng di động tốt hơn. Dự án Accelerated Mobile Pages (AMP) của Google đang được ra mắt hôm nay. Bạn đã sẵn sàng cho nó? Trong bài viết này, tôi sẽ cung cấp cho bạn một cái nhìn tổng quan và cho bạn thấy làm thế nào để bắt đầu tạo AMP cho website. AMP là gì? Tháng 10 vừa qua, Google đã công bố Accelerated Mobile Pages (AMP), một khuôn khổ rất dễ tiếp cận để tạo trang web tải nhanh trên thiết bị di động. Sáng kiến nguồn mở được thiết kế để cho phép nhà xuất bản dễ dàng cải thiện tốc độ (và do đó, trải nghiệm người dùng) cho độc giả di động của họ mà không bị mất bất kỳ doanh thu quảng cáo nào mà họ có thể dựa vào. Mặc dù các nhà phát triển có kinh nghiệm thường có thể đạt được các kết quả tương tự thông qua tối ưu hóa hiệu suất chuyên sâu, các nhà xuất bản thường bỏ qua điều này do các ràng buộc tài nguyên. AMP cho phép các tối ưu hóa này dễ dàng đạt được mà không làm thay đổi trải nghiệm web di động chính. Ngoài ra còn có thêm lợi ích của việc sử dụng trong tương lai của Google và các công ty công nghệ web nổi bật khác, những người đang khuyến khích việc sử dụng nó bằng cách tích hợp nó vào nền tảng tương ứng của họ. AMP hoạt động như thế nào? Về cơ bản để tạo trang web di động AMP bao gồm ba phần cơ bản: HTML AMP: Một tập hợp con HTML, ngôn ngữ đánh dấu này có một số thẻ và thuộc tính tùy chỉnh và nhiều hạn chế. Nhưng nếu bạn quen thuộc với HTML thông thường, bạn sẽ không gặp khó khăn khi điều chỉnh các trang hiện tại sang HTML AMP. Để biết thêm chi tiết về cách nó khác với HTML cơ bản, hãy xem danh sách đánh dấu bắt buộc của AMP Project mà trang HTML AMP của bạn “phải” có. AMP JS: Một khung JavaScript cho các trang di động. Đối với hầu hết các phần, nó quản lý việc xử lý tài nguyên và tải không đồng bộ. Cần lưu ý rằng JavaScript của bên thứ ba không được phép với AMP. AMP CDN: Mạng phân phối nội dung tùy chọn, nó sẽ đưa các trang hỗ trợ AMP của bạn, lưu vào bộ nhớ cache và tự động thực hiện một số tối ưu hóa hiệu suất. Bạn sẽ tạo AMP trang web của bạn như thế nào? Để bắt đầu, bạn sẽ phải duy trì ít nhất hai phiên bản của bất kỳ trang bài viết nào: Phiên bản gốc của trang bài viết của bạn mà người dùng thường sẽ thấy và phiên bản AMP của trang đó. Vì AMP không cho phép những thứ như phần tử biểu mẫu và JavaScript của bên thứ ba, bạn có thể sẽ không có biểu mẫu khách hàng tiềm năng, nhận xét trên trang và một số yếu tố khác mà bạn có thể sử dụng để có trên trang của mình trong triển khai chuẩn. Nó cũng có khả năng là bạn sẽ phải viết lại code trang web của bạn để phù hợp với các hạn chế. Ví dụ: tất cả CSS trong AMP phải nằm trong dòng và nhỏ hơn 50KB. Do tải trọng mạnh mẽ của phông chữ tùy chỉnh, chúng phải được tải bằng cách sử dụng phần mở rộng amp-font đặc biệt, để kiểm soát tốt hơn việc tải. Đa phương tiện phải được xử lý đặc biệt. Ví dụ: hình ảnh cần sử dụng phần tử amp-img tùy chỉnh và phải bao gồm chiều rộng và chiều cao rõ ràng. (Khi chuyển đổi trang web cũ thành mẫu AMP, điều này có thể là một khó khăn nếu các thuộc tính chiều rộng và chiều cao chưa được sử dụng). Ngoài ra, nếu hình ảnh của bạn là GIF động, bạn cần phải sử dụng thành phần mở rộng amp-animation riêng biệt . Giống như hình ảnh, có một thẻ tùy chỉnh phải được sử dụng để nhúng video được lưu trữ cục bộ qua HTML5, được gọi là amp-video. Tuy nhiên, để nhúng video trên YouTube – phần lớn video trên web là có một thành phần mở rộng riêng biệt, amp-youtube . Ngoài ra còn có hỗ trợ cho những thứ như trình chiếu qua amp-carousel và lightbox hình ảnh thông qua amp-hình ảnh-lightbox, cũng như phương tiện truyền thông xã hội nhúng cho Twitter, Instagram, Facebook, Pinterest và Vine thông qua các thành phần mở rộng của riêng họ . Các thẻ này và các thành phần mở rộng không khó sử dụng; họ chỉ yêu cầu một số kế hoạch trong thiết kế trang web của bạn. Để Google (và các công nghệ khác hỗ trợ Dự án AMP) phát hiện phiên bản AMP của bài viết của bạn, bạn sẽ cần phải sửa đổi phiên bản gốc của trang bài viết. Trang bài viết gốc phải bao gồm thẻ sau, về cơ bản là thẻ chuẩn cho các trang AMP: <link rel="amphtml" href="http://www.example.com/blog-post/amp/"> Các trang AMP Discovery cũng đề cập rằng một số nền tảng hỗ trợ AMP sẽ đòi hỏi Schema.org dữ liệu meta để xác định loại nội dung của trang. (Hiện tại, “bài viết”, “công thức”, “đánh giá” và “video” được liệt kê dưới dạng ví dụ về loại trang trên GitHub.) Hơn nữa, nó cũng chỉ ra rằng dữ liệu meta Schema.org “là một yêu cầu để làm cho nội dung của bạn đủ điều kiện xuất hiện trong bản demo băng chuyền tin tức của Google Tìm kiếm.” Vì vậy, nếu bạn đang cố gắng để có được lợi ích trong tương lai từ Google bằng cách triển khai AMP, chắc chắn rằng schema của bạn phải đúng! Làm cách nào có thể Kiếm tiền bằng quảng cáo trong AMP? Sự gia tăng của các trình chặn quảng cáo đã khiến các nhà xuất bản khó kiếm tiền từ trang web của họ. Đối với một số người dùng, việc cải thiện thời gian tải trang web là một động lực để sử dụng trình chặn quảng cáo, có thể hỗ trợ trong việc cải thiện tốc độ duyệt web. AMP có thể được xem là phản hồi cho vấn đề này, với dự án nêu rõ: Mục tiêu của Dự án trang trên thiết bị di động được tăng tốc là đảm bảo kiếm tiền từ quảng cáo hiệu quả trên web di động trong khi tiếp cận phương pháp tập trung vào người dùng. Với bối cảnh đó, mục tiêu là cung cấp hỗ trợ cho một phạm vi toàn diện các định dạng quảng cáo, mạng quảng cáo và công nghệ trong Accelerated Mobile Pages. Do đó, một số mạng quảng cáo phổ biến nhất hiện đang sử dụng thành phần mở rộng amp-ad (với khả năng tương thích cao hơn): Amazon A9 AdReactor Google Adsense AOL AdTech Google Doubleclick Flite Taboola Adform DotAndAds plista Smart AdServer Yieldmo Nếu bạn muốn xem kĩ hơn, các ví dụ cho mỗi mạng quảng cáo được cung cấp trong các tệp .md trên trang GitHub của AMP . Nếu việc kiếm tiền của bạn phức tạp hơn – sử dụng thanh toán hoặc đăng ký – cũng có sẵn tài liệu để triển khai nó trong AMP , bằng cách sử dụng tiện ích “AMP Access”. AMP có thể Analytics không? Vâng. Trên thực tế, Analytics trong AMP rất thông minh. Để ngăn nhiều mã theo dõi phân tích làm chậm trang web, họ đã triển khai theo triết lý “đo lường một lần, báo cáo cho nhiều người”. Có hai đường dẫn để bật chức năng phân tích với AMP cho trang web của bạn: Yếu tố Amp-Pixel: Đây là một thẻ đơn giản có thể được sử dụng để đếm lượt xem trang dưới dạng pixel theo dõi điển hình, bằng cách sử dụng yêu cầu GET. Có một số biến có thể được truyền qua nó, chẳng hạn như DOCUMENT_REFERRER và Title. Thành phần mở rộng Amp-Analytics: Nâng cao hơn một chút so với amp-pixel. Đó có thể là những gì bạn sẽ sử dụng để triển khai phân tích trên trang web của mình bởi vì nó cho phép có cấu hình lớn hơn cho tương tác phân tích. Nếu bạn không sử dụng Google Analytics, thì Analytics amp là cách để tiếp cận. Bạn sẽ cần phải thêm thư viện JavaScript cần thiết vào <head> và sau đó cấu hình nó thông qua một số đánh dấu JSON trong phần <body> của trang của bạn. Nếu bạn quan tâm đến Google Analytics trong AMP, hãy xem phần AMP Analytics của Google trên trang dành cho nhà phát triển của họ . Nó có một số ví dụ về triển khai. AMP sẽ trông như thế nào trên Google? Google đã cung cấp bản trình diễn về tính năng AMP trông như thế nào trong SERP. Bạn có thể dùng thử bằng cách điều hướng đến g.co/ampdemo trên điện thoại di động của bạn (hoặc mô phỏng nó trong Công cụ dành cho nhà phát triển Chrome). Sau đó, tìm kiếm thứ gì đó. Bạn sẽ thấy một băng chuyền hướng lên trên cùng với các bài viết AMP. Click vào một bài và nó sẽ cho một đoạn thông tin đọc nhúng trong SERP. Bạn có thể vuốt sang phải hoặc sang trái để đọc một bài viết hỗ trợ AMP khác. Đó là trải nghiệm khác với việc chỉ cần điều hướng đến trang AMP của nhà xuất bản. Một số nhà xuất bản lớn có thể được tìm thấy trong bản demo, chẳng hạn như The Guardian ( ví dụ trang AMP ). Làm cách nào để bắt đầu với AMP trong WordPress? Một trong những cách dễ nhất để làm AMP ngay bây giờ là triển khai nó trên một trang web WordPress. Một plugin chính thức đang được phát triển bởi WordPress, và nó thường xuyên được cập nhật trên GitHub. Bước 1: Cài đặt Plugin WordPress chính thức Để bắt đầu, hãy truy cập trang GitHub amp-wp và nhấp vào nút “Download ZIP”. Bạn có thể cài đặt nó trên trang WordPress của bạn giống như bất kỳ plugin WordPress nào khác. Khi nó được cài đặt, bạn chỉ cần thêm “/amp/” vào một trang bài viết (hoặc, nếu bạn không có permalinks đẹp, bạn có thể nối thêm “?Amp=1”). Note: Bạn cũng có thể cài nó trong kho plugins của wordpress với tên AMP for WordPress , hoặc một plugins mới toanh với nhiều tính năng trả phí khác như AMP for WP – Accelerated Mobile Pages Bước 2: Xác thực và chỉnh sửa Cuối cùng, Google Search Console sẽ chọn lên phiên bản AMP của bài viết của bạn thông qua thẻ rel = ”amphtml” được plugin thêm vào, cho phép dễ dàng xác thực hàng loạt bài viết. Vấn đề duy nhất với nó, theo kinh nghiệm của tôi cho đến nay, là nó không phát hiện những thay đổi rất nhanh chóng. Nếu bạn sửa chữa một cái gì đó, sự điều chỉnh có thể không hiển thị trong nhiều ngày. Tôi khuyên bạn nên sử dụng kết hợp quy trình xác thực của Search Console và Chrome. Để sử dụng quy trình xác thực Chrome, hãy truy cập một trong các trang AMP của bạn trong Chrome và nối thêm “#development=1” vào cuối URL. Nhấn Control + Shift + I để mở Công cụ dành cho nhà phát triển Chrome và chuyển sang Bảng điều khiển. Bạn có thể cần phải làm mới trang, nhưng một khi bạn thực hiện, nó sẽ thông báo “AMP validation successful.” hoặc cung cấp cho bạn danh sách các vấn đề cần khắc phục. Nhiều khả năng, chỉ cần cài đặt plugin WordPress sẽ không đủ và bạn sẽ phải trải qua và xác thực tất cả các trang bạn muốn hưởng lợi từ Trang trên thiết bị di động được tăng tốc. Tùy thuộc vào cách bài viết của bạn được định dạng, bạn có thể cần thực hiện một số thay đổi để các trang AMP xác thực. Các vấn đề phổ biến nhất mà cá nhân tôi gặp phải là xác định thuộc tính chiều cao và chiều rộng cho hình ảnh và sửa các mã nhúng YouTube cũ không sử dụng https. Bước 3: Get Schema Markup để xác thực Như đã đề cập trước đây, điều quan trọng là phải có đánh dấu dữ liệu hợp lệ trên các trang AMP của bạn. Để kiểm tra các trang của bạn để đánh dấu hợp lệ, bạn có thể sử dụng Công cụ kiểm tra dữ liệu có cấu trúc của Google . Tôi có một số vấn đề với WordPress không hiển thị logo của nhà xuất bản và cần phải thực hiện sửa đổi sau đối với plugin. Chỉnh sửa tệp class-amp-post-template.php , qua FTP hoặc trong Bảng điều khiển WordPress của bạn (đi tới Plugins> Editor và sau đó chọn “AMP”) và thay đổi: if ( $site_icon_url ) { $metadata['publisher']['logo'] = array( '@type' => 'ImageObject', 'url' => $site_icon_url, 'height' => self::SITE_ICON_SIZE, 'width' => self::SITE_ICON_SIZE, ); } thành: $metadata['publisher']['logo'] = array( '@type' => 'ImageObject', 'url' => 'http://domain.com/wp-content/uploads/logo-60.png', 'height' => 60, 'width' => 170, ); Đảm bảo thay thế URL bằng đường dẫn đến logo của nhà xuất bản của riêng bạn và chỉ định chiều cao và chiều rộng tính bằng pixel. Bạn có thể tìm thông tin cho đánh dấu có liên quan tại đây , trong đó chỉ định rằng “logo lý tưởng chính xác cao 60px với chiều rộng <= 600px”. Bước 4: Bắt Google Analytics làm việc với plugin WordPress AMP Plugin AMP WordPress không cho phép amp-Analytics, nhưng nó khá đơn giản để kích hoạt. Để cho plugin AMP WordPress làm việc với Google Analytics, hãy chỉnh sửa tệp amp-post-template-actions.php (tệp khác từ tệp được đề cập trước đó), qua FTP hoặc trong Bảng điều khiển WordPress của bạn (đi tới Plugins> Editor và sau đó chọn “AMP”) và thêm thông tin sau vào cuối: add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' ); function amp_post_template_add_analytics_js( $amp_template ) { $post_id = $amp_template->get( 'post_id' ); ?> <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> <?php } add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' ); function xyz_amp_add_analytics( $amp_template ) { $post_id = $amp_template->get( 'post_id' ); ?> <amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics> <?php } Đảm bảo bạn thay đổi UA-XXXXX-Y bằng ID thuộc tính Google Analytics trang web của bạn. Bây giờ, hãy xác thực lại các trang AMP của bạn và bạn phải có thiết lập AMP cơ bản với theo dõi được bật cho trang web WordPress của mình. Phần kết luận Bạn có phải là nhà xuất bản không? Nếu vậy, bạn cần phải bắt đầu nghĩ về Accelerated Mobile Pages. Công nghệ mới thú vị đang đến. Bạn đã tạo được trang AMP? Hãy cho tôi biết bằng việc để lại bình luận bên dưới nhé.
