Những ngày gần đây, giới SEOer lại cồn cào với 1 công nghệ mới toanh của Google, mang tên AMP. Vậy AMP là gì, AMP có ảnh hưởng gì đến SEO hay không? Cách sử dụng AMP ra sao? Sơ nét về AMP APM viết tắt của Accelerated Pages Mobile hiểu là trang dành cho thiết bị di động được tăng tốc. Trang dành cho thiết bị di động được tăng tốc (AMP) là một sáng kiến mã nguồn mở để làm cho các trang web tải nhanh và có giao diện đẹp trên thiết bị di động, thậm chí khi mạng chậm. Ra mắt các trang di động tăng tốc trong các kết quả tìm kiếm của Google dường như đã bắt đầu sớm hơn một ngày so với dự kiến . Nhờ có mã nguồn mở nên AMP giúp các trang web tải nhanh hơn ngay cả khi mạng di động bị chậm, lag. Bên cạnh đó, giao diện của các website trên AMP cũng bắt mắt và thân thiện hơn so với trước đây. Sử dụng AMP ra sao? Để sử dụng AMP, thực hiện các bước sau: Bước 1 chuẩn code AMP cho webReplace image references with images sized to the viewer’s viewport: Inline images that are visible above the fold.: Inline CSS variables.Preload extended components.Minify HTML and CSS.Ví dụ:Mã:<!doctype html> <html ⚡> <head> <meta charset="utf-8"> <title>Sample document</title> <link rel="canonical" href="./regular-html-version.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-custom> h1 {color: red} </style> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Article headline", "image": [ "thumbnail1.jpg" ], "datePublished": "2015-02-05T08:00:00+08:00" } </script> <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> <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> <h1>Sample document</h1> <p> Some text <amp-img src=sample.jpg width=300 height=300></amp-img> </p> <amp-ad width=300 height=250 type="a9" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302"> </amp-ad> </body> </html>Bước 2: nếu bạn có web đã chuẩn AMP hoặc chưa chuẩn thì chèn code sau: Đã Chuẩn AMPMã:<link rel="amphtml" href="https://www.example.com/url/to/amp-version.html" />Chưa chuẩn AMPMã:<link rel="canonical" href="https://www.example.com/url/to/regular-html-version.html" />Nguồn:Mã:https://www.ampproject.org https://www.ampproject.org/docs/reference/spec.htmlTóm lại với công nghệ AMP sẽ giúp người dùng hiển thị tốt các kết quả trên Google khi truy cập mạng yếu. Tuy nhiên, điều này đồng nghĩa. web của bạn phải cải thiện tốc độ đáng kể so với trước đây. Đây cũng là 1 nhân tốt quyết định key của bạn có đạt Top k đó nha..hì hì...Bài viết được dịch nên hơi lủng củng....
Cám ơn bạn đã chia sẻ, nhưng có thể hướng dẫn kỹ hơn về phần sử dụng AMP không, mình nhìn thấy mơ hồ quá.
chuẩn rồi. cái này trong code để tăng tốc độ website. thân thiện với ng dùng trên cả giao diện đi động và máy tính. nến css, nén js , tối ưu hóa hình ảnh và nén html
Ad làm 1 bài viết về hướng dẫn sử dụng AMP này đi. Hướng dẫn cho cả blogspot vs wordpress nữa. Được như thế ae cảm tạ ad rất nhiều
Công nghệ của bạn rất hay nhưng có vẻ hơi mới, mình cũng là Coder gà mờ nên chưa hiểu rõ lắm. Dù sao cái này phổ biến trong tương lai thì sẽ có lợi cho người dùng
