Tối ưu Blogspot/Blogger chuẩn AMP
trong
SEO Onpage
AMP là gì?
AMP (Accelerated Mobile Pages) là một dự án được Google hậu thuẩn với mục tiêu thúc đẩy tốc độ trên thiết bị di động. Nói một cách đơn giản hơn. AMP là một cách xây dựng với nội dung trang web tĩnh cho phép các trang web có thể tải và load ( trước khi render trong tìm kiếm của Google) nhanh hơn nhiều so với HTML thông thường.
Trong quá trình mổ xẻ các template chuẩn AMP và 2 trang phân tích tối ưu AMP là: https://www.ampproject.org/ và https://search.google.com/search-console/amp mình thu lượm được một số thay đổi như sau.
Mình sẽ tiếp tục thu thập và cập nhật thêm thông tin về AMP đối với nền tảng Blogger để tối ưu trong thời gian tới để gởi đến các bạn!!!
Lưu ý: Đây không phải là tất cả mọi thứ để tối ưu Blogger/Blogspot chuẩn AMP vì mình còn đang nghiên cứu thêm.
AMP được sử dụng như thế nào?
Google sẽ sử dụng AMP để giúp bạn nhanh chóng tải nội dung bài viết trên các thiết bị di động mà không cần người dùng phải click thông qua một trang web để xem nội dung. Các trang có cài đặt phiên bản AMP hợp lệ sẽ được hiển thị trong các kết quả di động như một Slider (thanh cuộn) ở phía trên phần ưu tiên hơn còn lại của các kết quả cho một chủ đề tìm kiếm cụ thể cụ thể, do đó Web của bạn sẽ được chú ý hơn và người dung sẽ ưu ái lựa chọn trang của bạn hơn và rất tốt cho SEO.
AMP gồm ba phần khác nhau bao gồm AMP HTML, AMP JS và AMP CACHE:
Đầu tiên các bạn backup template của mình lại để đề phòng sự cố
1. AMP HTML :
Là ngôn ngữ đánh dấu thẻ tùy chỉnh. Nếu bạn đã quen thuộc với HTML cơ bản rồi thì mình không giải thích gì thêm.
Trong cấu trúc HTML sẻ thay đổi như sau, chẳng hạn như thẻ ad, embed, img, pixel, audio và video sẽ thay đổi amp-ad, amp-embed, amp-img, amp-pixel, amp-audiovà amp-video.
Ví Dụ
Đối với Html :
Đối với Html :
<amp-img src="aaaa.jpg" height="400" width="800"></amp-img>
Đối với CSS : img thay bằng amp-img.
amp-img { background-color: #ccc }
Khai báo Logo AMP trên công cụ tìm kiếm bằng thẻ meta sau:
<link expr:href='data:blog.url' rel='amphtml'/>
Đó là thẻ khai báo web sử dụng AMP trên công cụ tìm kiếm, nó sẻ hiển thị logo AMP trên Mobile khi bạn Search.
Thay <html> thành <html amp='amp'>
Xóa các code sau:
Chèn code sau trên </head>
Thay tất cả code sau
<style> chuyển sang <style amp-custom='amp-custom'>
Tuy nhiên mình cũng không khuyến kích bạn thực hiện vì tương đối khá vất vả và tốn rất nhiều thời gian. Thay vào đó hãy tìm các template blogger mới nhất bây giờ đã hỗ trợ chuẩn AMP rồi nhé.
Chúc bạn thành công!
<meta name="viewport" content="width=device-width, initial-scale=1">Chèn code sau dưới thẻ <head>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/><meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/><meta content='blogger' name='generator'/><link expr:href='data:blog.url' rel='amphtml'/><link href='http://www.blogger.com/openid-server.g' rel='openid.server'/><link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
2. AMP JS :
Nó là một khung JavaScript ( AMP Javascript Library ) cho các trang di động. Chức năng của nó là cho phép tải web bằng một cú click ( nhanh chóng ). Đặc biệt làm cho các nguồn tài nguyên như các trang, video, hình ảnh động, các khung là đồng bộ. Cần lưu ý rằng một JavaScript bên ngoài không được phép của AMP.Chèn code sau trên </head>
<style amp-boilerplate='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='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><script async='async' src='https://cdn.ampproject.org/v0.js'/><script async='async' custom-element='amp-sidebar' src='https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'/><script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/><script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/><script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/><script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/><script async='async' custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'/><script async='async' custom-element='amp-list' src='https://cdn.ampproject.org/v0/amp-list-0.1.js'/><script async='async' custom-template='amp-mustache' src='https://cdn.ampproject.org/v0/amp-mustache-0.1.js'/><script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'/><script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/><script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
<style> chuyển sang <style amp-custom='amp-custom'>
3. Google AMP Cache : (đang nghiên cứu)
là một phân phối nội dung dựa trên mạng để cung cấp tất cả các tài liệu AMP.sehingga cải thiện hiệu suất trang tự động. Khi sử dụng Google AMP Cache, sau đó tất cả các tài liệu như các file js và hình ảnh sẽ load từ cùng một nguồn gốc trong HTTP 2.0Tuy nhiên mình cũng không khuyến kích bạn thực hiện vì tương đối khá vất vả và tốn rất nhiều thời gian. Thay vào đó hãy tìm các template blogger mới nhất bây giờ đã hỗ trợ chuẩn AMP rồi nhé.
Chúc bạn thành công!
