2017.06.02

AMP HTMLと記述の基本ルール

目的が明確になり、対象ページも決まり、モバイルサイトへの導線設計が明確になったら実際のAMPページの実装になります。AMPでは表示を高速化させるために、HTML、CSS、JavaScriptの記述に制限を設けており、具体的には以下のような原則があります。

 

  • CSSはインラインで記載
  • JavaScriptは非同期スクリプトのみ利用が許可
  • イメージ、広告、iframeなどの外部リソースはHTML内でサイズを規定
  • サードパーティーのJavaScriptはiframe内部でのみ使用可能
  •  

    上記原則に従ったAMP HTMLのサンプルを見てみましょう。

    <!doctype html>
    <html >
    <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.com/hello-amp.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <script type="application/ld+json">
    {
    @context: "http://schema.org",
    @type: "NewsArticle",
    headline: "Open-source framework for publishing content",
    datePublished: "2015-10-07T12:02:41Z",
    image: ["logo.jpg"]
    }
    </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>
    </head>
    <body>
    <h1>Welcome to the mobile web</h1>???<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
    </body>
    </html>
    

    見て頂くと分かりますが基本的にはHTMLです。AMP用にプロパティとカスタムタグが定義されており、CSSはプロパティに従ってインラインで記述し、イメージにはカスタムタグを使用する必要があるといった記述方式になります。

    AMP特有のHTMLの記述が正しいかどうかを確認するために、Google Search Console内において有効性チェックをするツールが提供されています。

    AMP Test – Google Search Console

    https://search.google.com/search-console/amp

     

    カルーセル表示と構造化データ

    AMP HTMLにはもうひとつ特徴があります。アイキャッチ画像はどれか、タイトルは何かといったJSON-LD情報を記載することによって、Googleの検索結果にカルーセルで表示させることができます。

     

    下が実際にAMP HTML内に記載されているJSON-LD情報です。

    <script type="application/ld+json">
    {
    @context: "http://schema.org",
    @type: "NewsArticle",
    mainEntityOfPage: "http://www.tokyo-np.co.jp/s/article/201612300100.html",
    headline: "NASA、新たに2天体発見 彗星か「地球に接近中」",
    datePublished: "2016-12-30T17:01:00+00:00",
    dateModified: "2016-12-30T17:03:23+09:00",
    description: "米航空宇宙局(NASA)は29日、太陽の周りを回る彗星と…",
    author: {
    @type: "Person",
    name: "東京新聞 TOKYO Web"
    },
    publisher: {
    @type: "Organization",
    name: "東京新聞 TOKYO Web",
    logo: {
    @type: "ImageObject",
    url: "http://www.tokyo-np.co.jp/image/head_logo.gif",
    width: "245",
    height: "23"
    }
    },
    image: {
    @type: "ImageObject",
    url: "http://www.tokyo-np.co.jp/img/logo_social.png",
    width: "400",
    height: "400"
    }
    }
    

    繰り返しになってしまいますが、JSON-LD情報はValidation対象から外れており必須ではなく、Google検索結果のAMPカルーセルに表示をさせたい場合のみに必要になります。

    ただし、ニュースサイト等でAMPカルーセル表示を行いたい場合には、気をつけてもらいたいのは以下の項目です。

    datePublished: 記事が配信された日時
    dateModified: 記事が更新された日時

    この情報によって、ニュース公開後変更が加えられた場合の更新に利用されています。

    一覧にもどる

    いますぐ、Rabbitを使ってAMP対応しましょう!

    話を聞いてみる!
    rabbitキャプチャ