 |
| 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">Bước 2: Copy đoạn code này phía sau thẻ viewport
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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ó
<styleChú ý: 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-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>
<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>Chúc các bạn thành công!
Không có nhận xét nào:
Đăng nhận xét