AMP対応ページの作り方

AMPとは

AMPはグーグルが始めたモバイルでの表示を早くするための対策。

3秒以上サイトの表示に時間がかかると、４０％の人が離脱してしまうという結果が出ているようですが、現状かなりのサイトが3秒以上読み込み速度がかかります。

そこで高速の読み込みを可能にするAMP JS ライブラリをgoogleが開発。

AMP専用の HTMLでサイトを作ることで超高速表示が可能になり、さらにgoogle検索結果でも見やすく表示される可能性があります。

SEOに直接の関係はないと今のところgoogleはいっていますが、ページ速度やユーザビリティといった点では関係ありますし、今後はどうなるかわかりませんので対応しておくに越したことはないと思います。

ただ対応していないタグや動作などもたくさんあり、すべてのサイトに対応できるわけではありませんし、適さないサイトもあります。

デザインなどはかなり制限されますが、シンプルで見やすいサイトが一番なんではないかな？と私は思います。

対応できるページは対応しておくといいですね。

AMP HTMLでページを作ってみよう！

実際に作ってみましょう。

以下は標準のAMP HTML

<!doctype html>
<html amp lang="ja">
	<head>
		<meta charset="utf-8">
		<link rel="canonical" href="オリジナルページのURLまたはこのページしかない場合はこのページのURL">
		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
		<title>ページタイトル</title>
		
<!--		以下はこのページの情報を掲載。-->
		<script type="application/ld+json">
			{
				"@context": "http://schema.org",
				"@type": "NewsArticle",
				"headline": "ページタイトル",
				"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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
	</head>
	<body>
		<h1>AMPサイトにようこそ!!</h1>
	</body>
</html>

参考サイト：　https://www.ampproject.org/ja/docs/get_started/create/basic_markup

の部分の書き方

“@context”: “http://schema.org”,　//こちらは必須ではないが、AMPに対応しているサイトが表示されるgoogleの検索結果のAMPニュースカル―セルに表示させたいときは必須。

“@type”: “NewsArticle”,　//こちらはどんなページなのか記載

NewsArticle　　Recipe　　Review　　VideoObject

CSSやjavaの外部ファイル読み込みは不可.

HTML内に<style amp-custom>　</style>　内に書き込む。

禁止事項

style属性
img
video
audio
iframe
base
frame
frameset
object
param
applet
embed
form
input
textarea
select
option
は使用不可　以下の書き方に変更

<img> ↓

<amp-img layout="responsive"  width="800" height="540" src="画像URL" alt="画像代替テキスト"></amp-img>

height とwidth は必須

その他<amp-img>で使える要素

画面サイズに合わせて画像サイズを変換

layout="responsive"

画像のサイズを固定

layout="fixed"

高さを固定

layout="fixed height"

親要素のサイズに合わせる　（height とwidthは指定しない）

layout="fill"

画面サイズに合わせて画像を変更

以下画面サイズ４８０px以下ならs.jpg 800px以下ならm.jpg 980px以下ならl.jpg　を指定

srcset="/s.jpg 480w,
	/m.jpg 800w,
	/l.jpg 980w"

attribution=”著作権情報の記載”

その他も以下で紹介の拡張機能などで代用可能。

AMP HTML 拡張機能

まだまだできないことが多いですが、少しづつ便利な機能が追加されています。

参考：　https://github.com/ampproject/amphtml/tree/master/extensions

ifream

https://ampbyexample.com/components/amp-iframe/

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

<amp-iframe width="500"
      height="281"
      layout="responsive"
      sandbox="allow-scripts allow-same-origin allow-popups"
      allowfullscreen
      frameborder="0"
      src="https://player.vimeo.com/video/140261016">
    <amp-img layout="fill"
        src="https://i.vimeocdn.com/video/536538454_640.webp"
        placeholder></amp-img>
  </amp-iframe>

googlemap

<amp-iframe width="600"
      height="400"
      layout="responsive"
      sandbox="allow-scripts allow-same-origin allow-popups"
      frameborder="0"
      src="https://www.google.com/maps/embed/v1/place?q=place_id:[ここにplce-IDを記載]&key=[ここにはご自身のAPI keyを記載]">
  </amp-iframe>

※　src　のURL内のplace_id は　https://developers.google.com/places/place-id?hl=ja　より取得

APL key は　https://developers.google.com/maps/documentation/javascript/?hl=ja　ここから取得。

youtube

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

<amp-youtube
 	data-videoid="※動画のIDを記載"
 	width="800"
 	height="450"
 	layout="responsive"></amp-youtube>

※動画のIDは動画のURLの一番後ろの部分　https://www.youtube.com/watch?v=nMXmLwXxhSE　の場合　nMXmLwXxhSE

必須項目：　data-videoid、width、height、layout

layoutは画像の時と一緒

画面サイズに合わせて動画サイズを変換

autoplay　で自動再生

layout="responsive"

動画のサイズを固定

layout="fixed"

動画の高さを固定

layout="fixed height"

親要素のサイズに合わせる　（height とwidthは指定しない）

layout="fill"

ナビゲーション等に使えるサイドバー

 <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

<button on='tap:sidebar.toggle'>Toggle sidebar</button>
<button on='tap:sidebar.toggle'>Toggle sidebar</button>
<button on='tap:sidebar.toggle'>Toggle sidebar</button>
 <amp-sidebar id='sidebar'
      layout="nodisplay"
      side="right">
    <amp-img class='amp-close-image'
        src="/img/ic_close_black_18dp_2x.png"
        width="20"
        height="20"
        alt="close sidebar"
        on="tap:sidebar.close"
        role="button"
        tabindex="0"></amp-img>
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
      <li> Nav item 1</li>
      <li>
        <amp-fit-text width="220"
            height="20"
            layout="responsive"
            max-font-size="24">
          Nav item 2 - <amp-fit-text>
        </amp-fit-text>
      </li>
      <li>
        <amp-fit-text width="220"
            height="20"
            layout="responsive"
            max-font-size="24">
          Nav item 3 - <amp-fit-text> longer text
        </amp-fit-text>
      </li>
      <li> Nav item 4 - Image
        <amp-img class='amp-sidebar-image'
            src="/img/favicon.png"
            width="20"
            height="20"
            alt="an image"></amp-img>
      </li>
      <li> Nav item 5</li>
      <li> Nav item 6</li>
    </ul>
  </amp-sidebar>

ライトボックス

https://ampbyexample.com/components/amp-lightbox/

<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

<button on="tap:my-lightbox"
      role="button"
      tabindex="0">
    Open lightbox
  </button>

<amp-lightbox id="my-lightbox"
      layout="nodisplay">
    <div class="lightbox"
        on="tap:my-lightbox.close"
        role="button"
        tabindex="0">
      <h1>Hello World!</h1>
    </div>
  </amp-lightbox>

アコーディオン

https://ampbyexample.com/components/amp-accordion/

 <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

<style amp-custom>
  section[expanded] .show-more {
    display: none;
  }
  section:not([expanded]) .show-less {
    display: none;
  }
  .nested-accordion h4 {
    font-size: 14px;
    background-color: #ddd;
  }
</style>

<amp-accordion>
    <section expanded>
      <h4>Section 1</h4>
      <p>Bunch of awesome content.</p>
    </section>
    <section>
      <h4>Section 2</h4>
      <div>Bunch of even more awesome content. This time in a
        <code>&lt;div&gt;</code>.</div>
    </section>
    <section>
      <h4>Section 3</h4>
      <figure>
        <amp-img src="/img/amp.jpg"
            width="1080"
            height="610"
            layout="responsive"
            alt="an image"></amp-img>
        <figcaption>Images work as well.</figcaption>
      </figure>
    </section>
  </amp-accordion>

アコーディオンの中にさらにアコーディオン

<amp-accordion>
    <section>
      <h4>Section 1</h4>
      <p>Bunch of content.</p>
    </section>
    <section>
      <h4>Section 2</h4>
      <amp-accordion class="nested-accordion">
        <section>
          <h4>Nested Section 2.1</h4>
          <p>Bunch of content.</p>
        </section>
        <section>
          <h4>Nested Section 2.2</h4>
          <p>Bunch of more content.</p>
        </section>
      </amp-accordion>
    </section>
  </amp-accordion>

動画

https://ampbyexample.com/components/amp-video/

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

<amp-video width="480"
  height="270"
  src="/video/tokyo.mp4"
  poster="/img/tokyo.jpg"
  layout="responsive"
  controls>
  <div fallback>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
  <source type="video/mp4"
    src="/video/tokyo.mp4">
  <source type="video/webm"
    src="/video/tokyo.webm">
</amp-video>

アニメーションGIF

https://ampbyexample.com/components/amp-anim/

<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>

<amp-anim width=245
      height=300
      src="/img/gopher.gif"
      alt="an animation"
      attribution="The Go gopher was designed by Reneee French and is licensed under CC 3.0 attributions.">
  </amp-anim>

ログインユーザーのみ記事の表示

https://ampbyexample.com/components/amp-access/

フォーム

https://ampbyexample.com/components/amp-form/

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

<style amp-custom>
  form.amp-form-submit-success [submit-success],
  form.amp-form-submit-error [submit-error]{
    margin-top: 16px;
  }
  form.amp-form-submit-success [submit-success] {
    color: green;
  }
  form.amp-form-submit-error [submit-error] {
    color: red;
  }
  form.amp-form-submit-success.hide-inputs > input {
    display: none
  }
  .horizontal-display {
    display: flex;
    align-items: center;
  }
  .other-input {
    margin: 0 16px;
  }
  </style>

検索フォーム

 <form method="GET"
      action="https://ampbyexample.com/components/amp-form/submit-form"
      target="_top">
    <input type="search"
        class="data-input"
        placeholder="Search..."
        name="googlesearch">
    <input type="submit"
        value="OK"
        class="button button-primary other-input">
  </form>

お問合せフォーム

 <form method="GET"
      action="https://ampbyexample.com/components/amp-form/submit-form"
      target="_top">
    <input type="search"
        class="data-input"
        placeholder="Search..."
        name="googlesearch">
    <input type="submit"
        value="OK"
        class="button button-primary other-input">
  </form>

オーディオ

https://ampbyexample.com/components/amp-audio/

 <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

<amp-audio width="auto"
      height="50"
      src="https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3">
    <div fallback>
      <p>Your browser doesn’t support HTML5 audio</p>
    </div>
  </amp-audio>

カル―セル

https://ampbyexample.com/components/amp-carousel/

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

<amp-carousel width="400"
      height="300"
      layout="responsive"
      type="slides">
    <div>
      <div class="blue-box"></div>
      This is a blue box.
    </div>
    <div>
      <div class="red-box"></div>
      This is a red box.
    </div>
    <div>
      <div class="green-box"></div>
      This is a green box.
    </div>
  </amp-carousel>

カル―セルと画像ギャラリー

上よりこちらのほうが便利かも？

https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/

Facebookの投稿やビデオを表示

<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>

<amp-facebook width="552"
      height="303"
      layout="responsive"
      data-href="https://www.facebook.com/zuck/posts/10102593740125791">
  </amp-facebook>

インストグラムを表示

https://ampbyexample.com/components/amp-instagram/

<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>

<amp-instagram data-shortcode="1totVhIFXl"
      width="1"
      height="1"
      layout="responsive">
  </amp-instagram>

Twitter を表示

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

 <amp-twitter width="375"
      height="472"
      layout="responsive"
      data-tweetid="638793490521001985">
  </amp-twitter>

<amp-twitter width="390"
      height="330"
      layout="responsive"
      data-tweetid="585110598171631616"
      data-cards="hidden">
  </amp-twitter>

Vine表示

 <script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>

<amp-vine width="1"
      height="1"
      layout=responsive
      data-vineid="MdKjXez002d">
  </amp-vine>

SNSシェアボタン表示

 <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
<link rel="canonical" href="https://ampbyexample.com/components/amp-social-share/">

<div>
    <amp-social-share type="twitter"
        width="60"
        height="44"> </amp-social-share>
    <amp-social-share type="gplus"
        width="60"
        height="44"></amp-social-share>
    <amp-social-share type="email"
        width="60"
        height="44"></amp-social-share>
    <amp-social-share type="pinterest"
        width="60"
        height="44"></amp-social-share>
    <amp-social-share type="linkedin"
        width="60"
        height="44"></amp-social-share>
    <amp-social-share type="facebook"
        width="60"
        height="44"
        data-param-app_id="254325784911610"></amp-social-share>
  </div>

googleアナリティクスの設定

<head>内に以下記載

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

<body>内に以下記載

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

※　UA-XXXXX-Y　は自分のgoogleアカウントに置き換える

イベントトラッキングの測定を含めた例

<body>内の記載を以下に変更

<amp-analytics type="googleanalytics" id="analytics1">
  <script type="application/json">
  {
    "vars": {
      "account": "UA-XXXXX-Y"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      },
      "trackEvent": {
        "selector": "#event-test",
        "on": "click",
        "request": "event",
        "vars": {
          "eventCategory": "ui-components",
          "eventAction": "click"
        }
      }
    }
  }
  </script>
  </amp-analytics>

この場合、クリックを計測したい場所に　id=”event-test” 　を指定

<span id="event-test" class="box">
    Click here to generate an event
  </span>

参照：　https://developers.google.com/analytics/devguides/collection/amp-analytics/

AMP HTMLの間違いがないかチェックする

AMP HTMLのページのURLの最後に　#development=1　をつけてサイトを開く

又は　https://validator.ampproject.org/　こちらの検証ツールを利用する

AMPエラーの対象方法

エラー①

タグ「amp-sidebar」の親タグは「div」ですが、「body」のみ使用できます。

対処法
body　直下に　amp-sidebar　を設置する

ホームページとデザインの会社
株式会社ジェイプラン