WordPress でAMPの実装方法　現場からの声


最近は、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
への自動変換は行われないため、
自分で変換するする必要があります。

##### 参考
https://syncer.jp/Web/AMP/Component/amp-img/

変更後は

```
http://example.com/xxx/xxx/amp/#development=1
```
のように

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

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

## 解析タグの実装

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

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

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

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

また、別途

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

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

##### 参考
https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=ja


## ソーシャル

ソーシャル関係
こちらも特別のタグが用意されているため、
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>
```


##### 参考
https://ampbyexample.com/components/amp-social-share/


## Google Search Console

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

- 検索の見え方 > Accelerated Mobile Pages

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

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

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

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

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

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

##### 参考
http://daipresents.com/2016/wp-amp/

##### 構造化データ テストツール
https://search.google.com/structured-data/testing-tool/u/0/?hl=ja

## 使ってみて

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

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

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