【WordPress】プラグインだけでAMPを導入する方法

先月末のHTTPS化に続き、AMPを導入しました。

AMPとはAccelerated Mobile Pagesの略称で、スマホなどのモバイル端末でウェブサイトを高速表示するための取り組みです。GoogleとTwitterで共同開発しています。

AMPがどのような仕組みで高速化されるかというと、ウェブページをGoogleやTwitterのサーバーでキャッシュすることによって高速化を図ります。通常は、サイトがおいているサーバーからHTMLデータを読み込むので、どうしても時間がかかるのです。

大手ニュースサイトは軒並みAMPコンテンツの提供を開始しているので、当サイトもAMPを導入することにしました。
今のところ、AMPの導入と、Googleのランキングアルゴリズムに相関関係はありませんが、サイトの表示速度が早ければユーザーの利便性は上がります。

この記事では、プラグインだけでAMPを導入する方法についてお伝えします。

AMPを導入するメリット
プラグインだけでAMP化する
AMP
Facebook Instant Articles & Google AMP Pages by PageFrog
AMPエラーに対応する
アクセス解析
今後のAMP

AMPを導入するメリット

AMPを導入するメリットは、2つあります。

サイトの表示が高速化すること。サイトに訪れてくれるユーザーの利便性が上がります。
検索結果トップページのカルーセルに表示されること。通常トップページに来ないようなビッグワードでも、カルーセルに表示されることがあります。

※2020年5月現在、AMP対応しただけでカルーセルに表示されることはありません。

AMPカルーセルに掲載されるには、AMPに対応したコンテンツにしなければなりません。

schema.orgで構造化マークアップ

AMPに対応するには、構造化マークアップをします。schema.orgを記述することで、モバイル検索の際に、AMPカルーセルに表示されます。今のところニュースやブログのような記事だけです。

```
schema.org/Article
```
```
schema.org/NewsArticle
```
```
schema.org/BlogPosting
```

構造化データの仕様はGoogleで公開しています。

プラグインだけでAMP化する

構造化マークアップを1つ1つ行うのは大変ですが、Wordpressでサイト運営しているなら、2つのプラグインのインストールだけで簡単に導入できます。

AMP
Facebook Instant Articles & Google AMP Pages by PageFrog

それではやり方を見ていきましょう。

AMP

AMPプラグインをインストールします。

インストールして有効化するだけでAMP化できます。

1つ注意点があって、設定を変更する必要はないのですが、Rewriteルールをフラッシュさせないと正常に動作しません。

設定 → パーマリンク設定 → 変更を保存を押してください。

AMP化されたかチェック

URLの最後に amp を付ければAMPページにアクセス可能です。

https://example.com/hoge/amp

AMPコンテンツのバリデーションチェック

AMPコンテンツとして、HTMLが有効かどうかを確認するには、 AMPページのURLの末尾に「#development=1」を付けます。

https://example.com/hoge/amp/#development=1

Chromeデベロッパーツールで検証します。
Chromeデベロッパーツールは、Macなら「command」「option」「i」、Windowsなら「F12」をクリックします。

Consoleを開いて「AMP validation successfull.」と表示されればOK。この時点でエラーが出たら、Chromeデベロッパーツールでエラーを1つ1つ潰していくことになります。Wordpressファイルの修正が必要になります。

Facebook Instant Articles & Google AMP Pages by PageFrog

AMPプラグインでエラーが出ずに表示できたら、Facebook Instant Articles & Google AMP Pages by PageFrog（以下PageFrog）をインストールします。

AMPのインストールでとりあえずAMP化は可能ですが、スタイルの修正やGoogle Analyticeを入れるには、プラグインのファイルを直接編集することになります。ファイルの直接編集を行うと、プラグインのアップデートで元に戻ってしまいます。アップデート毎に修正するのは面倒なので、PageFrogを導入しましょう。管理画面から簡単にスタイルの修正ができるようになります。