Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

AMP HTML là gì

4/5 - (4 bình chọn)

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

 

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Trong chiến lược tiếp thị toàn diện và hiệu quả, có rất nhiều nhân tố được các chủ doanh nghiệp...
    24 giây trước
  2. Trong các thành phần tạo nên một website thì giao diện là một yếu tố rất quan trọng. Giao diện ảnh...
    11 giây trước
  3. Hàng năm, Google thường tung ra khá nhiều những thay đổi lớn và trong khi đó, số cập nhật lớn...
    24 giây trước
  4. Liên kết nội bộ không những giúp người đọc có thêm thông tin trên Website của bạn mà nó còn...
    12 giây trước
  5. Tại sao bạn nên tạo dấu tích xám (tích xanh) Facebook? Làm thế nào trang kinh doanh Facebook nhận được dấu...
    1 giây trước
  6. Bạn đã bao giờ có ý định xây dựng một cửa hàng Amazon affiliate sử dụng WordPress chưa? Một Amazon...
    4 giây trước
  7. Nghiên cứu từ khóa cho thông tin là chủ đề đã và đang được đề cập hàng nghìn lần trên...
    15 giây trước
  8. Bạn đang tìm kiếm một công việc liên quan đến SEO? Bạn đang tìm một việc làm thêm tại nhà...
    6 giây trước
  9. Thiết kế Landing Page Trung tâm đào tạo lái xe ô tô Sao Bắc Việt phải thật sang trọng, đẹp...
    17 giây trước
  10. Làm thế nào để khắc phục lỗi sự cố CLS: cao hơn 0,25 trên thiết bị di động? CLS là...
    16 giây trước