作成にあたっていろいろ調べたときのメモ。詳細はAMPの公式サイトを見てください。 Google 公式ページ公式ブログ

作成の注意点

AMPの記事は元の記事と同じように見える必要がある。モバイルできれいに見えること
元の記事と同じ内容であること。ただし、AMPページからHTMLの詳細な元ページ（重複するコンテンツ内容）へ誘導するような使い方はNG。あくまでAMPページ内でコンテンツが完結していること
AMPページのファイルがクロールできるようになっていること（robot.txtの設定）
スキーマ内のURLはすべて絶対URLで指定する
ロゴの大きさは600×60以内、ファイル形式はJPG、PNG、GIF
AMPページから元記事にリンクする指定をいれる場合 [canonical]指定
元記事からAMPページへの対応するリンクをいれる場合 [amphtml]指定
構造化データ内で指定した画像の幅は1200px必要

AMPページの作り方は上の公式のチュートリアルを見た方がいいと思います。Googleで検索したときに、一番上にサムネイルつきのカード型でカルーセル表示する内容で作りたいと思い、そのメモ書きです。

１．チュートリアルのAMP HTML ページを作成する、のとおりに必須マークアップの内容を作成します。

カルーセル表示にするには構造化データで指定します。構造化データは公式でサンプルを用意してくれています。ここではarticle-json-ld.amp.html　のサンプルを使います。構造化データは下記ようなコードになります。

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "mainEntityOfPage": "http://example.ampproject.org/article-metadata.html",
    "headline": "Lorem Ipsum",
    "datePublished": "1907-05-05T12:02:41Z",
    "dateModified": "1907-05-05T12:02:41Z",
    "description": "The Catiline Orations continue to begule engineers and designers alike -- but can it stand the test of time?",
    "author": {
      "@type": "Person",
      "name": "Jordan M Adler"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Google",
      "logo": {
        "@type": "ImageObject",
        "url": "http://cdn.ampproject.org/logo.jpg",
        "width": 600,
        "height": 60
      }
    },
    "image": {
      "@type": "ImageObject",
      "url": "http://cdn.ampproject.org/leader.jpg",
      "height": 2000,
      "width": 1200  //1200以上を指定　※
    }
  }
</script>

※Googleの検索結果でニュース記事などのカルーセル表示される画像について、 2/13の Google のデベロッパー向けサイトにおいて構造化データ内で指定した画像の幅を696pxから1200pxに変更しました。最良の結果を得るには、縦横比16×9,4×3,1×1の複数の高解像度画像（幅と高さを掛け合わせたときに最小800,000ピクセル）をそれぞれ用意してくださいと書いています。

２．イメージを含める

<amp-img>タグで画像を挿入します。レスポンシブ対応する場合は ?layout=”responsive”を指定すると画像の幅はコンテナ要素の幅になり、高さは自動調整されます。

３．体裁とレイアウトを変更する

CSSの指定です。チュートリアルのとおりにheadタグ内に

<style amp-custom>
  amp-img {
    margin: 0.5em;
  }
  body {
    max-width: 900px;
  }
</style>

使用できないスタイルがあるので、これらを指定しないようにします。

４．プレビュー確認と検証方法

作成したAMPページが正しいかどうか検証します。チュートリアルに書いてあるように python -m SimpleHTTPServerでローカルのウェブサーバーを起動して

ブラウザで対象ページを開く。
URL に「#development=1」を追加して、http://localhost:8000/released.amp.html#development=1 のようにする。
Chrome DevTools のコンソールを開いて、検証エラーを確認する。で検証します。

問題がなければ AMP validation successful.とコンソールに表示されます。

構造化データの検証は構造化データ（Schema.org）テストツールを使います。マークアップエラーを確認したり、検索結果に表示されるカードをプレビューしたりできます。構造化データテストツール

これに作成したコードをコピペすると構造化データをチェックしてくれます。

「logo.height の値が無効です。」のエラーが表示され、ロゴの寸法は600×60を超えてはいけないということを思い出して修正しました。

最終的に下記のコードのようになりました。

<!doctype html>
<html amp lang="jp">
  <head>
    <meta charset="utf-8">
    <title>AMPサンプルコード</title>
    <link rel="canonical" href="https://sample.com/amp_sample.amp.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <!-- JSON-LD  -->
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle", //ニュース記事である指定
        "headline": "AMPサンプルページ タイトル", //記事見出し文。必須。ページタイトルと同じ
        "mainEntityOfPage": {
          "@type":"WebPage",
          "@id":"https://sample.com/amp_sample.amp.html"   //必須 ページのcanonical先URLを記述
        },
        "datePublished": "2018-02-07T12:02:41Z",      //記事作成日
        "dateModified": "2018-02-08T09:42:18+09:00",  //記事更新日
        "author": { //必須
          "@type": "Person",
          "name": "記事の発行者氏名"
        },
        "image": {  //Google検索ページで表示される画像
          "@type": "ImageObject", //アイキャッチ画像の指定
          "url": "https://sample.com/thumb.jpg",  //アイキャッチ画像のURL　ここで指定した画像はページ内にも表示させる必用あり URLの絶対指定
          "height": 34,
          "width": 253
        },
        "publisher": {  
          "@type": "Organization",
          "name": "記事発行者名", //記事発行元の名称
          "logo": { //WEBサイトのロゴ
            "@type": "ImageObject",
            "url": "https://sample.com/img/logo.png",  //ロゴの画像のURL 実際のドメインでないとエラー
            "height": 34, //ロゴの高さ
            "width": 253  //ロゴの幅
          }
        },
        "description": "記事の概要説明文。"  //記事の概要説明文。 
      }
    </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>
    <style amp-custom>
    *{
      margin: 0;
      padding: 0;
    }
    amp-img.grey-placeholder {
    background-color: grey;
    }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
<!--コンテンツ-->
 
<div class="amp-logo"><amp-img src="http://localhost:8000/htdocs/images/logo.png" alt="ロゴ" width="253" height="34"></amp-img></div>
 
<section>
<div class="topics-detail-title">
  <div class="box"><span class="date">2018.01.24</span></div>
  <h1>AMPサンプルページ タイトル</h1>
</div>
<div class="catch">
  <amp-img src="http://localhost:8000/htdocs/images/thumb.jpg" alt="アイキャッチ" width="335" height="225" layout="responsive"></amp-img>
</div>
 
<div class="content">
<p>適当な文章をいれました。</p>
<p>画像のサイズの指定に注意。</p>
 
 
</div>
 
</section>
  </body>
</html>

FLASK

検索

AMPについて調べた

作成の注意点

１．チュートリアルのAMP HTML ページを作成する、のとおりに必須マークアップの内容を作成します。

２．イメージを含める

３．体裁とレイアウトを変更する

４．プレビュー確認と検証方法