Tìm hiểu công nghệ AMP và cách sử dụng AMP để đạt TOP Key

Thảo luận trong 'Thủ Thuật SEO - SEO Tip' bắt đầu bởi npd.fpt, 25/2/16.

  1. npd.fpt

    npd.fpt Well-Known Member

    Bài viết:
    46
    Đã thích:
    20
    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 web
    • Replace 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 AMP
    Mã:
    <link rel="amphtml" href="https://www.example.com/url/to/amp-version.html" />
    Chưa chuẩn AMP
    Mã:
    <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.html
    Tó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....
     
    Đang tải...
    MozSeo thích bài này.
  2. itseo1994

    itseo1994 Well-Known Member

    Bài viết:
    75
    Đã thích:
    5
    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á.
     
  3. npd.fpt

    npd.fpt Well-Known Member

    Bài viết:
    46
    Đã thích:
    20
    AMP có 2 loại, 1 cái là web mình chuẩn AMP, còn lại là k chuẩn. nếu bạn chưa chuẩn có thể sử dụng :
    Mã:
    <link rel="canonical" href="https://www.example.com/url/to/regular-html-version.html" />
     
  4. thanhtanland

    thanhtanland Active Member

    Bài viết:
    39
    Đã thích:
    3
    Cái này blogspot cũng làm được pk ?
     
  5. npd.fpt

    npd.fpt Well-Known Member

    Bài viết:
    46
    Đã thích:
    20
    đúng rồi bạn
     
  6. liemnt

    liemnt Member

    Bài viết:
    14
    Đã thích:
    2
    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
     
    npd.fpt thích bài này.
  7. vanphuong12

    vanphuong12 Well-Known Member

    Bài viết:
    58
    Đã thích:
    6
    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 :)
     
  8. nguoidoi893

    nguoidoi893 Well-Known Member

    Bài viết:
    55
    Đã thích:
    5
    thế ad cho hỏi làm sao để biết web mình đã chuẩn AMP chưa?
     
  9. chinhnguyen31011989

    chinhnguyen31011989 Well-Known Member

    Bài viết:
    51
    Đã thích:
    2
    Thủ thuật này mới đấy, nhưng đoạn code kia chèn vào đâu đc nhỉ?
     
  10. vantienart

    vantienart Well-Known Member

    Bài viết:
    113
    Đã thích:
    16
    Hôm trước vào webmaster có thấy nhưng chưa hiểu lắm để làm sao áp dụng cho website được.
     
Đang tải...
Đang tải...