WordPressのプラグインを使用する

AMPを実装する際に手取り早いのがプラグイン
https://ja.wordpress.org/plugins/amp/
を使用する方法になります。

プラグインをインストールして、"有効"にする事で
使用開始できます。

これにより、記事のURLの後ろに
ampを追加する事で、
http://example.com/xxx/xxx/amp

ampページを表示させる事が可能です。
記事ページにも

<link rel="amphtml" href="http://example.com/xxx/xxx/amp" />

amphtmlの記述が自動的に挿入されます。

ただし、デザインがプラグインで用意されたデザインになり
ユニークなページにならないため、
このままでは使用が難しいです。

オリジナルデザインへ変更

wp-content/plugins/amp/templates

featured-image.php
meta-comments-link.php
meta-time.php
meta-author.php
meta-taxonomy.php
header-bar.php
footer.php
style.php
single.php

WordPressで設定されているテンプレートは
一切適用されていない状態ですので、
上記のみを改修する事で
オリジナルデザインの適用が可能です。

single.php

がベースのソースが記載されてるため、まずは、
こちらの改修を行います。

style.php

AMPではcssの通常のインクルードができないため、
こちらに記載する事になります。

注意点

使用できるcssの容量は50,000 バイトと決められていため
記事ページにのみ必要なcssを抽出する必要があります。

Chrome の開発ツールを使用する事で、
不要箇所を特定する事が可能のようです。

また、抽出後、
https://syncer.jp/css-minifier
圧縮サイトから圧縮したり、
Gulpのgulp-clean-cssなどから
圧縮を行う必要があります。

また、オリジナルで追加する画像には、
img
タグの
amp-img
への自動変換は行われないため、
自分で変換するする必要があります。

参考

変更後は

http://example.com/xxx/xxx/amp/#development=1

のように

# development=1

を追加し、Chromeの開発ツール > Console
より検証を行う事が可能です。

AMP validation successful.

と表示されていれば正しく実装がされている事になります。

解析タグの実装

AMPではJSの実装ができないので
そのまま、Googleの解析タグを貼り付けるとエラーになってしまいます。

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

ヘッダー内に上記のタグを設定

<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解析のサイトで発行された値へ変更
をする事で、実装が可能です。

また、別途

イベントトラッキング
ソーシャルインタラクション

などの解析を行うことも可能です。

参考

ソーシャル

ソーシャル関係
こちらも特別のタグが用意されているため、
AMP用のタグを使う必要があります。

<amp-social-share type="email"></amp-social-share>
<amp-social-share type="facebook"
    data-param-app_id="254325784911610"></amp-social-share>
<amp-social-share type="gplus"></amp-social-share>
<amp-social-share type="linkedin"></amp-social-share>
<amp-social-share type="pinterest"
    data-param-media="https://ampbyexample.com/img/amp.jpg"></amp-social-share>
<amp-social-share type="tumblr"></amp-social-share>
<amp-social-share type="twitter"></amp-social-share>
<amp-social-share type="whatsapp"></amp-social-share>

参考

Google Search Console

実装後は、Google Search Consoleに
サイトを登録して

検索の見え方 > Accelerated Mobile Pages

より検証を行う事が可能です。

構造化データテストツール

Googleの構造化データテストを行うと、
JSON-LDの
publisherのlogoが指定がされていないと
怒られてしまいます。

WordPressの管理画面で
外観 > カスタマイズ > サイトのアイコン指定

にて画像を設定をすると、
publisherのlogoが設定する事が可能です。

テーマによっては、設定されない事もあるようですので、
その場合は、function.phpから指定してあげる事になります。
設定方法は以下を参考にしました。

参考

構造化データテストツール

使ってみて

記事ページだけに特化する場合は、
WordPressを使っている場合は、
そこまで難しくなく実装ができた印象でした。

ただし、JSが使用できないため、
簡素化する箇所が発生したり、
CSSの容量制限もあるため、
記事ページだけに必要なCSSを精査するのが面倒でした。

モーダルや、カルーセル用に独自のJSが用意されていたり
全ページ(レスポンシブ)の対応などとなってくると、
表現が限られてくるため、
現状としては、SEOへのインパクトは大きくないため
検索結果を意識したページのみへ実装が
効果的かと考えています。