この記事は最終更新日から7年以上経過しているため正確ではないかもしれません

WordPressで簡単にAMP対応をする

投稿日：2017年09月05日

まだあまり盛り上がってる感はないですが、AMPという仕組みがあります。
どんなものかというと、専用の記述でページを作ることでGoogleにキャッシュされアクセス時に独自のレイアウトでコンテンツを表示するというシステムです。

モバイルでの表示速度は遅ければ遅いほど離脱率が高くなると言われています。
そこで2016年頃からGoogleでAMPという仕組みがスタートしました。

独自にキャッシュされるため素早いアクセスが可能になる一方で、AMP用に専用の記述をした別ページを用意したり、レンダリング前に事前計算する必要があるようなJSや、遅延しそうなCSSは読み込まないなど制限もあります。

例えば、情報サイトやコーポレートサイトには向いてますが、インタラクティブなサイトやプロモーションサイトには向いてないと思います。

詳しいことはAMP – Google公式を参照することをおすすめします。

さて、本題のWordPressでAMPを実現する簡単な方法になります。

WordPressプラグイン

AMPで検索すればいくつかでますので好みのプラグインを使うと良いです。
当サイトではAccelerated Mobile Pagesを利用しているのでこのプラグインで説明します。

※設定画面

デザインの設定

あらかじめ幾つかのデザインテンプレートが用意されています。

amp_design

View More AMP Themesでテンプレートを増やすことができます(有料)。
Drag & Drop Post Builderで実際の画面をエミュレートしながら調整できます。

※AMP > デザインと進んだ画面

順序や表示非表示を直感的に変更できます。

こんな感じで設定するだけなので、簡単にWordPressサイトをAMP対応することができます。

Getting Startedメニューの説明

このプラグインは細かく設定できます。

General

専用のロゴ画像設定とパーマリンクのAMP用リライト設定。

Homepage

フロントページに関する設定。
(特定のページをフロントページにする際に使用)

Page Builder

シングルページの投稿画面で各種ウィジェットを使えるようにするかどうかの設定。

Design

AMP用のテーマを設定。

Single

シングルページの設定。
SNSアイコンやNext/Prevなどの表示非表示。

広告の設定。
トップページとシングルページで計6箇所の挿入箇所があり、それぞれ瀬底可能。
Google Adseseのみだと思われる

Social

SNSシェアの個別表示非表示設定

SEO

descriptionなどのmetaタグを挿入するかどうかの設定。
ONにしておいたほうが良い。

Analytics

Googleタグマネージャーやその他のアナリティクス設定。

Structured Data

構造化データのロゴをアップロードするらしい。
よくわからない。

Contact Form

特定のフォームプラグインを有効化するかどうかの設定。

Notifications

サイトにメッセージを通知する設定。

Comments

コメントの設定。
Facebookのコメント機能なども可能。

Transition Panel

規定文字列を任意のテキストに変更。

Facebook Instant Articles

Facebookページへの投稿？
Instant Articlesのことだと思われる。

Hide AMP Bulk Tools

非表示にするページやカテゴリの設定

Advance Settings

アーカイブページの表示
モバイルからのアクセスはすべてAMPページへリダイレクト(Mobile Redirection)
RTLのサポート
AMPではないページのリンク表示
ヘッダー・フッターをHTMLで追加

各メニューに関するサムネイル付き公式ガイドも参考にすると良い。

注意事項

当サイトのようにcodepenを埋め込んでいるものに関しては、テキストになってしまうのでMobile RedirectionをONにしてると不都合があったりする。
※codepenはpタグで埋め込まれているため

<p class="codepen" data-height="780" data-theme-id="0" data-slug-hash="BZJvgJ" data-default-tab="css,result" data-animations="run" data-editable="" data-embed-version="2">
See the Pen <a href="https://codepen.io/artprojectteam/pen/BZJvgJ/">属性セレクタや疑似要素を使う</a> by Nobuyuki Kondo (<a href="https://codepen.io/artprojectteam">@artprojectteam</a>) on <a href="https://codepen.io">CodePen</a>.0</p>

検索結果画面

実際にcsv json 変換で検索した際にモバイルでは下記のように結果が表示されます。

実際のページは下記のように表示されます。

特にAMPの知識がなくてもAMP対応が完了しました。
もし、情報を提供しているなどあれば検討してみると良いですが、クライアントの場合はAMPにすることのメリットデメリット、できることできないことを必ず納得してもらうことが必要です。
(AMPでバリバリアニメーションしたいなどは無理ですので)

TECH BOX