Thủ Thuật - Thiết Lập AMP đầy đủ cho Blog

Ngày:24/07/2017  
Hiện nay blogger ngày càng phát triển. Phần lớn Mục đích chính trong việc viết blog là để SEO. Trong khi SEO là một công việc đòi hỏi kỹ năng rất nhiều mà đôi cánh để gia tăng thứ hạng cho web của bạn phụ thuộc vào tốc độ load trang của blog chúng ta. Google giới thiệu cấu hình AMP cho các blogger. Bạn đang sử dụng blogspot? Đây là giải pháp hướng dẫn thiết lập amp trên Blogger. 

Amp là gì: -

Amp có nghĩa là Các trang Di động được Tăng tốc. Nó giúp cải thiện tốc độ load trang ngay cả khi người dùng đang sử dụng mạng Internet băng thông yếu, điều này rất quan trọng trong việc na7ng cao thứ hạng của trang web. Google giới thiệu AMP với mục đích tối ưu hóa trang web di động cho các nhà xuất bản.


Lợi ích của AMP:  Tải trang AMP nhanh hơn 80% so với trang không có cùng tính năng. Nó giúp cải thiện thứ hạng tìm kiếm.
Giảm tỷ lệ thoát.
Trải nghiệm người dùng tốt nhất khi internet chậm.
Trải nghiệm quảng cáo người dùng tốt nhất.

THIẾT LẬP AMP TRÊN BLOGSPOT BLOGGER NHƯ THẾ NÀO?

BƯỚC 1: 
Vào phần chỉnh sửa HTML trong phần Chủ Đề của Blog
Thay thế thẻ    <html>   bằng Code bên dưới:
<html amp='amp'>

BƯỚC 2:
Thiết lập thẻ Meta , bằng cách thêm đoạn mã bên dưới sau thẻ <head>

<meta charset= ' utf-8'>
<meta name='viewport' content='width=device-width,minimum-scale=1,initial-scale=1'>

BƯỚC 3:
Thiết lập thẻ canonical tag cho blog của bạn . thêm link canonical giống thẻ này :  

<link rel=”canonical” href=”http://example.blogspot.in/article-metadata.html” /> mục đích là để trỏ về chính nó.

Copy và dán đường link sau thẻ viewport tag

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


BƯỚC 4: Copy và dán đoạn mã này sau thẻ đóng </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>


BƯỚC 5: thay đổi các thẻ Img của các bạn bằng đoạn thẻ sau

<amp-img src='AmpImage.jpg' alt='amp-img' height='500 ' width='500'></amp-img>


****
AMP rất quan trọng đối với các trang điện thoại.thiết lập AMP trên blogspot theo hướng dẫn này là đầy đủ. Có nhiều nhận xét khác nhau về tính hiệu quả và khuyết điểm của nó,  nhưng cũng có người thực hiện tính năng này đã giúp cải thiện lưu lượng truy cập trên công cụ tìm kiếm và có được thứ hạng tốt trong kết quả tìm kiếm. AMP không hỗ trợ quảng cáo nhưng đơn giản để hiển thị quảng cáo trên các trang AMP vì vậy đừng lo lắng.

Chúc các bạn thành công.
Nguyễn Thế Anh
www.Zcomity.com

Nhấn nút " Like " hoặc " Share " bên dưới bài viết là ủng hộ nhóm chúng tôi cung cấp nhiều thông tin hơn.