Hướng dẫn triển khai AMP trên Blogspot

AMP (Accelerated Mobile Pages) là một dự án của Google hỗ trợ tăng tốc độ load trang trên di động các trang AMP đã được xác thực được lưu trong bộ nhớ cache AMP của Google và điều này cho phép tải trang nhanh hơn đem đến trải nghiệm tuyệt vời cho người dùng.

Hướng dẫn triển khai AMP trên Blogspot
Hướng dẫn triển khai AMP trên Blogspot

Định dạng AMP được hỗ trợ bởi nhiều nền tảng, như Google Tìm kiếm. Nếu một trang web được liệt kê trong kết quả tìm kiếm của Google có phiên bản AMP hợp lệ, Tìm kiếm có thể hướng người dùng trên thiết bị di động đến AMP trong bộ nhớ cache.

Trong bài viết hôm nay longanit sẽ hướng dẫn các bạn cách để chúng ta thêm AMP vào Blogspot chỉ vài thao tác đơn giản.

Bước 1: Đăng nhập vào Bogger - Chủ đề - Chỉnh sửa HTML tìm thẻ <html> ở phần đầu tiên và thay đổi nó thành

<html amp='amp'>
Tiếp theo copy đoạn code 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 2: Copy đoạn code này phía sau thẻ viewport
<link expr:href='data:blog.url' rel='canonical'/>
Bước 3: Tiếp tục tìm đến thẻ đóng </head> . Copy toàn bộ đoạn code bên dưới đặt ở phía trên nó
<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-anim
ation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
Chú ý: Khi bạn chỉnh sửa các code liên quan đến hình ảnh bạn có thể dùng code phía dưới theo chuẩn AMP
 <amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>
Chúc các bạn thành công!

Nhận xét

Được xem nhiều nhất

Uconvert miễn phí cho Office 2003, 2007, 2010, 2013

Sửa lỗi không move or copy được sheet của Excel

Download OneKey Ghost v14.5.8.215 GPT (UEFI)

Sửa lỗi con trỏ chuột bị quay vòng vòng Windows 7/8

Hướng dẫn mở PORT Modem GPON H646EW Viettel