#22 Tối ưu Blogspot/Blogger chuẩn AMP


người khác đã thích bài này

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 : 
<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:
<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'/>
Thêm vào dưới <head>
<script async='async' src="https://cdn.ampproject.org/v0.js"></script>

<link expr:href='data:blog.url' rel='canonical'/>

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'/>

Thay tất cả thẻ <style>:
<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.0

 


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!
Dẫn nguồn về Toilaquantri.com nếu bạn có xuất bản lại nội dung từ Website này!


ĐĂNG KÍ


Không có nhận xét nào:

Không Spam Link dưới mọi hình thức.

ĐĂNG KÍ RSS

Tiếp tục


Bạn quên địa chỉ email?

Bản tin RSS Feeds sẽ được gởi đến email của bạn.


GIỚI THIỆU


HUỲNH PHỤNG
▪ Là 1 chuyên gia setup SEO Systems : Blogger
▪ Hiện công tác Cty Marketing TM - DichvuSEO.INFO
▪ Dịch vụ SEO tổng thể | Lập kế hoạch SEO | Setup hệ thống SEO chuyên nghiệp.

KẾT NỐI & CHIA SẺ



Liên Hệ
  • Thời gian làm việc từ T2-T7 (9h-21h)
  • Văn Phòng: 98 Nguyễn Văn Lượng, Gò Vấp, TPHCM
  • (+84) 932.913.631
  • Haiphungmarketing@gmail.com
  • Huỳnh Phụng Blogger FanPage

  • TÀI KHOẢN

    Số Tài Khoản ACB

    Số TK: 214 081 769
    Họ Tên: Huynh Hai Phung
    Ngân hàng ACB Tân Bình (Ngân hàng Á Châu Tân Bình)
    Thông tin chuyển khoản: (Tên KH + Số tiền chuyển + Nội dung dịch vụ)

    STK VietComBank

    Số TK: 0721 0006 096 05
    Họ Tên: Huynh Hai Phung
    Ngân hàng VCB Bình Thạnh TPHCM
    Thông tin chuyển khoản: (Tên KH + Số tiền chuyển + Nội dung dịch vụ)