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

AMP HTML là gì

26 Tháng Hai, 2016890 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ủ đề

10 mẹo làm việc thông minh và hiệu quả
Bạn đang cảm thấy áp lực trong công việc? Ngày qua ngày những áp lực đó đang làm bạn cảm thấy mệt mỏi? Dưới đây là 10 mẹo giúp bạn vượt qua những áp lực trong công việc và làm...
05 điều cấm kỵ trong quảng cáo facebook
Trong bài trước tôi đã hướng dẫn các bạn cách nhắm mục tiêu để quảng cáo trên Facebook có hiệu quả. Bài này tôi sẽ cho các bạn biết một số điều không nên làm trong quảng cáo  facebook. Như...
Bootstrap Inputs bootstrap (phần 1)
Trong bài trước chúng ta đã cùng nhau tìm hiểu về Bootstrap Form, những class hữu ích giúp bạn dễ dàng tùy chỉnh phong cách Form theo ý bạn. Xem Thêm: Bootstrap Form – Biểu mẫu Bootstrap Trong bài này,...
Thẻ span và thẻ div trong HTML
Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm vào đoạn văn nhưng không làm thay đổi thuộc tính cũng như hiển thị của đoạn văn đó. Vì vậy...
Dịch vụ Tối ưu Website
Dịch vụ tối ưu website, Tăng tốc Website của bạn, Tối ưu hóa hiệu suất của trang web luôn là vấn đề được ưu tiên hàng đầu đối với các nhà kinh doanh online, nhất là trong bối cảnh cạnh...