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以下。

Report abuse