最近は、Googleのモバイルファーストインデックス（MFI）の開始宣言をされている事
に伴いAMP対応がより求められる事が予想されます。
現在はSEO効果はなく、
スマートフォンで検索した際に、
記事のサムネールが表示され誘導率が上がる事が期待できます。
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へのインパクトは大きくないため
検索結果を意識したページのみへ実装が
効果的かと考えています。