Danh mục: Hướng dẫn học HTML, CSS, Thủ thuật SEO

AMP HTML là gì

26 Tháng Hai, 20161222 Lượt xem
Xem với phiên bản Google AMP, Vinhomes Thăng Long, Mua bán Piano, cửa nhôm xingfa
AMP HTML là gì
5 (100%) 1 vote

AMP HTML là viết tắt của Accelerated Mobile Pages một dự án mã nguồn mở được sự hậu thuẫn và ủng hộ mạnh mẽ bởi Google. Thiết kế web với AMP sẽ khiến trang web của bạn cải thiện đáng kể tốc độ load trang trên các thiết bị di động đặc biệt khi bạn dùng kết nối 3G hoặc ở những vùng có tốc độ đường truyền yếu.

AMP HTML là gì image-3

Công nghệ thiết kế web với AMP HTML vẫn dựa trên nguyên lý code web trước đây nhưng có thêm một số thuộc tính cho một số phần trong HTML, CSS và Javascript ví dụ cơ bản AMP HTML như sau:

<!doctype html>
<html ⚡>
<head>
<meta charset=”utf-8″>
<link rel=”canonical” href=”hello-world.html” >
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
<style 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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
</head>
<body>Hello World!</body>
</html>

Dự án mã nguồn mở này được công bố vào ngày 7/10/2015 và nhanh chóng được sự cổ vũ và áp dụng mạnh mẽ bởi hàng ngàn website trên thế giới, trong đó đặc biệt là Twitter, WordPress và nhiều các website lớn khác. Google cũng sẽ chính thức công bố việc sử dụng công nghệ thiết kế web AMP HTML như một tín hiệu nhận diện website tốt và chuẩn SEO google, đồng thời sẽ giới thiệu với các webmaster công cụ validator là công cụ kiểm tra xem website của bạn đã chuẩn AMP HTML chưa dự kiến 24/02/2016 sẽ công bố.

Nếu bạn là coder WordPress Theme thì cần quan tâm đến vấn đề này để tiếp cận với các kiến thức mới.

Điều kiện cần thiết phải có đối với website chuẩn AMP HTML:

  • Mở đầu với doctype html <!doctype html>
  • Tiếp đến HTML tag có chít thay đổi <html ⚡> hoặc <html amp>
  • Tất nhiên vẫn sử dụng thẻ head và body như định dạng html thông thường vẫn dùng
  • <link rel=”canonical” href=”$SOME_URL” /> đây vẫn là html thông thường mà bạn vẫn dùng
  • <meta charset=”utf-8″> ở đây yêu cầu đích xác là utf-8
  • <meta name=”viewport” content=”width=device-width,minimum-scale=1″> thẻ này cho thấy sự tương thích với thiết bị di động và khuyến cáo nên dùng thêm  initial-scale=1
  • Phải chứa thẻ <script async src=”https://cdn.ampproject.org/v0.js”></script> đặt trong thẻ head
  • Phải chứa một đoạn code đặc biệt của AMP trong thẻ head

Một số thay đổi cơ bản trong các thẻ HTML thông thường so với AMP HTML:

  • Thẻ img sẽ được thay bằng amp-img
  • Thẻ video sẽ được thay bằng amp-video

AMP HTML là gì image-2

Chúng tôi chỉ nêu ra vài thay đổi cơ bản còn cụ thể về các thay đổi này sẽ được chúng tôi trình bày ở bài viết: So sánh sự khác biệt giữa HTML và AMP HTML

 

About Vũ Thành Lâm

AMP HTML là gì 6c99874f75cccd390c6e4303a3653bda?s=100&r=gLamvt - Tên thật là Vũ Thành Lâm năm sinh 197x tại xã Đại Đồng - huyện Thạch Thất - Hà Tây quê lụa
Yêu Joomla, thích WordPress và đam mê SEO
Từng là GMOD của cộng đồng Joomla Việt, Admin của Thế giới SEO, thành viên tích cực trong Group WordPress Hà Nội
Liên hệ ĐT: 0169981 Năm Hai Ba Hai

Bài viết mới nhất

Tin được quan tâm

Bài viết cùng chủ đề

Ibmeduca.org: Viện Kinh Thánh truyền giáo
Ibmeduca.org là website của Viện Kinh Thánh truyền giáo  Trang web được thiết kế trên nền tảng mã nguồn SEO tốt nhất đó là hệ quản trị nội dung sử dụng Responsive Bootstrap version mới nhất, tăng tốc độ load một...
3 Cách tăng lượng truy cập Website giúp SEO lên Top Google
Bất cứ ai làm kinh doanh trên cũng muốn website của mình có được lưu lượng truy cập cao giúp tăng doanh thu đồng thời cũng giúp cho việc SEO lên Top Google. Điều đó có nghĩa là bạn muốn mỗi...
36 cách tối ưu hóa chiến dịch Google AdWords
Để trang web của bạn có được vị trí tốt trên bảng xếp hạng, bạn nên tối ưu hoá các chiến dịch Google AdWords vì vậy ở bài viết này tôi sẽ đưa ra danh sách các tối ưu hóa...
Kiếm 1.4 triệu USD Với Google AdSense và Facebook một cách đơn giản
Google AdSense và quảng cáo Facebook có giúp bạn kiếm ra tiền, tăng thu nhập cho một doanh nghiệp? Điều đó hoàn toàn có thể xảy ra nhé. Tôi sẽ chỉ cho bạn cách tôi đã kiếm được hơn $ 1.4...
Google Adwords và SEO: Lựa chọn nào tốt nhất cho chiến dịch Marketing?
Google Adwords và SEO là những thành phần chính của Công cụ tìm kiếm tiếp thị (SEM) và là một trong số những công cụ hiệu quả nhất cho bạn khi bạn muốn chạy chiến dịch tiếp thị thông qua...