AMP対応

【参考ページ】

AMPとは~対応HTMLを作ってみてわかったこと~

ドキュメント – AMP

超簡単!schema.orgはJSON-LDで書こう

schema.org 日本語訳

AMPに対応した記事の構造化データの仕様

schema.org 2.0が正式公開、CarボキャブラリやmainEntityOfPageプロパティの追加など

AMP対応ページがフォームに対応。メールアドレス登録など可能に!

AMPをワードプレスにプラグイン無しで設定する方法

AMP HTMLの拡張コンポーネントとAMP対応ページのデバッグ

AMP HTML必須項目

<!doctype html>
<html amp lang="ja">
  <head>
    <meta charset="utf-8">
    <!-- AMP JS library -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <!-- amp-formコンポーネント -->
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="通常ページのURL">
    <!-- 表示領域指定 -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <!-- 構造化マークアップ -->
    <script type="application/ld+json">
      {

"@context": "http://schema.org",

"@type": "Article",

"mainEntityOfPage": "主エンティティのURL(推奨)",

"headline": "見出し文(110文字まで)",

"datePublished": "1907-05-05T12:02:41Z",

"dateModified": "1907-05-05T12:02:41Z",

"description": "説明文(推奨)",

"author": {

"@type": "Person",

"name": "Jordan M Adler"

},

"publisher": {

"@type": "Organization",

"name": "Google",

"logo": {

"@type": "ImageObject",

"url": "ロゴ画像のパス",

"width": 600,

"height": 60

}

},

"image": {

"@type": "ImageObject",

"url": "アイキャッチ画像のパス",

"height": 2000,

"width": 800

}

        ]
      }
    </script>
    <!-- AMP定型文 -->
    <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>
  </body>
</html>

AMP HTMLと通常のHTMLとの違い

head部分

  • AMP JSの実行が必要です。なお、AMPでは、自前のJavaScriptは実行できません。
  • amp-formなど、必要に応じで拡張コンポーネントの実行。
  • 表示領域(viewport)の指定
  • 構造化マークアップ
  • AMP定型文(amp-boilerplate)(AMPで使用するCSSアニメーションの指定)

body部分

  • img: <amp-img></amp-img>を使用する。閉じタグ必要。幅(width)と高さ(height)の指定必須。
  • iframe:amp-iframeを使用する。
  • form:headでamp-formコンポーネントを実行していれば使用できる。

CSS

  • link rel=で読み込めないので、head内に<style amp-custom>を用いて直接記述する。
  • 50KB以内(大体2500行以下)
  • !important使用不可

WordPressにおけるAMP対応

header.phpとsingular.php内で、AMPページと通常ページを出し分ける。

通常ページへのlinkタグの挿入

通常ページにAMPページのURLを指定したlinkタグを挿入する。このタグがないとインデックスされないので必須。

<link rel="amphtml" href="AMPページのURL">

投稿日時と更新日時の出力

投稿日時と更新日時は、WordPressの関数を使って出力する。

"datePublished": "<?php echo get_the_date('c'); ?>",
"dateModified": "<?php echo get_the_modified_date('c'); ?>",

imgタグの置換

AMPページではimgタグが使えないので、amp-imgタグに置換する。

Googleアナリティクス

JavaeScriptが使えないので、画像を使う。

<amp-pixel src="https://ssl.google-analytics.com/collect?v=1&amp;tid=UA-12345678-1&amp;t=pageview&amp;cid=$RANDOM&amp;dt=$TITLE&amp;dl=$CANONICAL_URL&amp;z=$RANDOM"></amp-pixel>
/*
 * Required parameters:
 * v = API version number (currently 1)
 * tid = Google Analytics property identifier (UA-12345678-1)
 * t = hit type
 * cid = client id (you should implement this via cookie etc.)
 * z = random string to bypass caching (amphtml generates this to $RANDOM variable)
 *
 * Some nice to have parameters:
 * dt = document title ($TITLE)
 * dl = document location ($CANONICAL_URL)
 *
 * References:
 * https://github.com/ampproject/amphtml/blob/master/builtins/amp-pixel.md
 * https://developers.google.com/analytics/devguides/collection/protocol/v1/reference
 */

wp_head()とwp_footer()

ampページでは読み込まない。

アイキャッチ画像

幅696px以上。高さ指定なし。

ロゴ画像

幅600px、高さ60px以下。