Wednesday, August 16, 2017

Cách tối ưu AMP cho blogspot gần đây có rất nhiều bạn yêu cầu mình chia sẻ thủ thuật này, đây là một thủ thuật khó không phải đơn giản chỉ cần cài đặt một vài plugin như wordpress.
AMP là gì? Những điều cần biết khi tối ưu AMP cho blogspot
AMP là gì? Những điều cần biết khi tối ưu AMP cho blogspot

AMP là gì?

AMP là một chuẩn được google chấp nhận cho website hay blogspot trên di động mà khi website hay blogspot đã tối ưu theo chuẩn này thì khi lướt trên thiết bị di động sẽ chạy cực nhanh. Nghe tới đây ai cũng giền hết cả rồi đúng không nào, đừng vội hãy nghe Azatemplate nói tiếp đây.

Đối với website như thế nào mình không biết NHƯNG khi tối ưu AMP cho blogspot thì việc khó nhất là không được dùng javascript bên ngoài cho nên những tiện ích có sử dụng javascript bắc buộc phải bị loại bỏ. Như thế bạn sẽ phải quay về thời nguyên thủy là không tất cả mọi thứ đều thủ công mà không thể tự động hóa bằng javascript cho các tiện ích như : thêm alt và title cho hình ảnh, bài viết liên quan, menu, slider ảnh, bán hàng thì có giỏ hàng, hiển thị sản phẩm ...

Khi quyết định tối ưu AMP cho blogspot của bạn thì trước tiên xem blog của bạn có làm được không, bạn có thể loại bỏ những tiện ích sử dụng javascript trên website của bạn, hoặc bạn có thể nghĩ đến việc tiện ích sử dụng javascrip của bạn chỉ cần chạy trên máy tính còn trên mobile thì không cần. Vì đơn giản AMP là chuẩn tối ưu blogspot của bạn trên di động mà thôi nhé.

Làm cách nào để tối ưu AMP cho blogspot của bạn?

Đầu tiên khi bắt đầu làm AMP cho blogspot thì bạn cần khai báo với google là website của bạn có AMP bằng cách sửa như sau :

- Sửa <html> thành <html amp="amp">

- Thay đoạn code này <meta name="viewport" content="width=device-width, initial-scale=1"> bằng đoạn code
<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 đoạn code sau trên thẻ </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'/>
Như vậy bạn đã tiến hành khai báo xong với google là website của bạn có AMP bay giờ bạn chỉ cần sử dụng công cụ kiểm tra AMP để biết website của bạn cần chỉnh sửa gì tại link https://search.google.com/test/amp?hl=vi  về cơ bản khi kiểm tra tại đây bạn cần chỉnh sửa như sau:

- Loại bỏ tất cả javascrip bên ngoài mà chỉ sử dụng javascript từ https://cdn.ampproject.org
- Tất cả CSS trên blog của bạn gôm lại chung trong 1 thẻ style là <style amp-custom='amp-custom'> </style> loại bỏ tất cả thẻ style khác.
- Ngoài ra các thẻ ad, embed, img, pixel, audio và video sẽ thay đổi amp-ad, amp-embed, amp-img, amp-pixel, amp-audiovà amp-video.

Tới đây các bạn có thể kiểm tra blogspot của các bạn đã tối ưu hoàn hảo AMP chưa bằng công cụ trên, nếu còn báo lỗi hãy làm theo hướng dẫn. Chúc các bạn thành công Azatemplate có thể giải đáp thắc mắc nếu các bạn đang gặp lỗi nào đó không biêt khắc phục thì hãy để lại bình luận bên dưới. Cảm ơn.

AMP là gì? Những điều cần biết khi tối ưu AMP cho blogspot

Bài viết liên quan