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

AMP HTML là gì

26 Tháng Hai, 2016
Xem với phiên bản Google AMP

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.

image

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

image

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

 

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

lamvt

Lamvt - 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ệ: D4J hoặc ĐT: 0169981 Năm Hai Ba Hai

Post by:admin

Bài viết liên quan

Chính sách của Google Adsence năm 2017
Chào mừng các bạn đến với buổi tọa đàm trực tuyến do Google Adsence tổ chức ngày hôm nay Mình xin tự giới thiệu mình là Vân là chuyên viên về mảng tối ưu hóa doanh thu cho tài khoản...
Học SEO miễn phí với Lamvt là thế đấy
Bạn đã biết gì về SEO, nghề SEO như thế nào? Đơn giản lên google tìm kiếm sau đó sẽ đến trung tâm để học. Và đọng lại trong tâm trí, SEO là phải đi thật nhiều link, có thật...
Top 7 Marketing Online sẽ Thống trị 2017
Năm 2016 là một năm tuyệt vời đối với ngành marketing online và sự phát triển của nó sẽ vẫn tiếp tục diễn ra rất nhanh chóng. Dù chưa phải những ngày cuối năm, cận kề kề thời khắc giao...
TOP 5 Xu thế mới của SEO 2017
Chào các Seoers, thời gian trôi nhanh quá phải không các bạn!, SEO năm 2016 đã có những biến động nhỏ trong đó đặc biệt chú ý tới thuật toán Pengiun LifeTime đã khiến giới SEO Việt Nam chao đảo....
5 Bước để Viết bài chuẩn SEO
Viết bài đăng blog cũng khá giống với việc lái xe, bạn có thể học về luật giao thông (hoặc đọc các bài báo hướng dẫn làm thế nào để viết một bài blog thật hay) hàng tháng trời, nhưng...
360 Điều cần biết về SEO từ OnPage đến OffPage
Nhiều bạn hỏi tại sao lại SEO? Tôi nói rằng muốn kiếm nhiều tiền hơn. Sao lại nhiều hơn? Có một câu thành ngữ để trả lời cho câu hỏi này “Nếu khách hàng không tìm thấy bạn, họ sẽ thấy...
108 Điều cần hiểu về SEO Onpage OffPage
SEO Onpage là gì, Offpage là gì? Sau bài viết về khái niệm SEO là gì? chúng ta đã vô tình nghe qua về hai thuật ngữ cơ bản của SEO đó là OnPage và OffPage, tuy nhiên bản chất...
SEO on page là gì, SEO off page là gì?
Ở bài viết trước chúng ta đã hiểu về SEO , hiểu khái niệm “như thế nào là SEO “ người làm SEO cần làm gì để đạt được mục tiêu của mình. Ở bài viết này tôi sẽ giới...
SEO On-page và SEO Off-page từ góc nhìn Xã hội học
SEO On-page và SEO Off-page là gì? Ở bài viết “SEO là gì?”, các bạn đã cùng tôi làm rõ thuật ngữ SEO cùng đặc tính, vai trò cũng như các cách thức SEO. Ở bài viết này, chúng ta...
SEO ONPAGE VÀ SEO OFF PAGE LÀ GÌ
Seo onpage Mọi người luôn hỏi tôi rằng điều gì quan trọng nhất trong seo, tôi sẽ trả lời đó là: seo onpage. Để hiểu thế nào là seo onpage xin mời các bạn đọc bài viết này. Ở đây,...