ワードプレスにAMPを導入する手順とメリット＆デメリット
今日はY氏（@neverchange1414）のWEB最適化。
今、巷で何かと噂のAMPはご存知だろうか？
正式名称は「Accelerated Mobile Pages」
Googleも推奨している、ネット界で話題のAMP（アンプ）。
今日はそんなAMPの導入、そして導入したことで変化したこと！
素晴らしい！と、感じたこと。
導入すべきだぜ！って言いたくなる理由。
それらを書いていこうと思う。
まずはAMPってなんですか？
この単語を聞いたことのない方なら不思議に思うだろう。
一体全体AMPって何？
まずはそこからお話を。
Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである[1]。また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である。
まずはそこからお話を。
とか、格好良く言ってしまったけどウィキから抜粋。
つまり、ページ速度が爆速になるよ！っていう仕様。
仕組みは単純で、無駄なものを省いたページ構成。
シンプル・イズ・ベスト！っていう見た目と中身。
今や大手ニュースサイトのほとんどがこのAMPを導入している。
AMP対応させると、スマホで検索した時の検索結果の表示にも違いが出る。
必ずしもこの画像のように表示されるとは限らないが、画像つきのAMP文字つきで検索結果の上部に表示される。
AMPが認知され、AMPの利点をユーザが理解した時、この検索結果のAMPラベルの意味合いは大きい効果になると思う。
そして、僕達の様なブログを書いている人が使っているワードプレス。
最近になってAMPを導入しているワードプレスサイトがかなり増えた。
それだけ良いもの！っていう理由か！？
はたまた話題に乗っかてみました！的な理由なのか！？
そこで、実際に導入してみての感想などを書いていこうと思う。
その前に、
AMP導入の意義
AMPを導入するメリットは何と言ってもページ読み込み速度の速さ！
本来はブログって記事を読んでもらうことだから、AMPなんかなくても爆速レベルにページ読み込みが早い！
そう言えるくらいのページ構成で十分なんだけど、やれ広告やら、やれ関連記事やら、やれCTAやら、やれサイドバーのコンテンツやら、
そういった装飾コンテンツが多くなり、ブログなのに、超大型ECサイトの様にコンテンツで溢れかえっている。
しかし、個人ブログレベルを超え、収益化を目的にするブログなら致し方ない部分もうなずける。
しかし、クッソ重いな〜もうこのページ見るのや〜っめた！
そんな事件も至る所で発生している事実。
ミニマムリストという言葉が流行っている中で、どれだけスリム化できるか。
そこを追求するのも悪くない。
ということで、このAMPは僕らブログを書くユーザーにも必須だと感じる。
ワードプレスでAMPを導入する手順
ワードプレスは本当に便利なCMSで、プラグインを使用してAMP対応をすることができる！
なんて便利なんだろう。
圧倒的感謝！
プラグインで実装できるものは、プラグインなしでも実装できる。
しかし、ブログを書くことがメインの方の為、初心者でも導入しやすいプラグインバージョンをご紹介する。
やるべき流れはこんな感じ。
1 プラグインを導入
↓
2 とりあえず有効化
↓
3 同時にAMP用のAnalyticsのプロパティを作成
↓
4 有効化したプラグインの設定
↓
5 AMP用にAnalyticsやアドセンスの設定
ざっくりこんな感じ。
では早速、プラグインを導入！
プラグイン新規追加
↓
検索ボックスに「AMP」
↓
出てきた中から黄緑で囲んだプラグイン2つをインストール。
[aside type=”warning”]ここで紹介するのは、ワードプレスにAMPを導入する手順＆方法の1つにしかすぎないので、他にもやり方はたくさんある。このやり方が120％だとは言えないので、自己責任で(_ _)[/aside]
プラグインAMPの設定手順
まずはこちらからなんだけど、
このプラグインは有効化するだけでオッケー！
これだけで一応AMPの設定は完了している。
試しに自分のブログ記事のURL語尾に /amp とつけて欲しい。
AMP対応された自分の記事ページがみれるはず！
ただし！
これだけだと何とも簡素なページ感は否めない。
有効化するだけのプラグインなので、カスタマイズもできない。
これがプラグインで実装した場合の大きな穴。
やっちまったか！？
あまりにもページが質素すぎて見えない不安を覚えるのも無理はない。
そう！AMPを導入すると、本体テーマのファイルは読み込まれない。
記事本文の部分だけを読み込み、それ以外はAMPのプラグインからCSSなどでコーディングされる仕組み。
個々のサイトのデザインなどはフル無視で、こんな感じになる。
AMPのデメリット1
本体のスクリプトやCSSは読み込まれない！！！！
同じプラグインでAMP対応しているブログはどれも一緒。
個性も何もあったもんじゃねえ！
AMPのデメリット2
ウィジェットなどの部分もAMPには反映されない！
反映されるのは記事コンテンツ部分のみ！
AnalyticsやアドセンスもAMP対応が必要！？
これはAMPページで利用したい場合のみなんだけど、利用したい場合は各々設定をしないといけない。
詳しくは別記事で書く予定。
なんか爆速らしいけど、デメリット多いしやめとくか？
そうなる前にこの続きも読んで欲しい。
AMPページに色々追加できる方法
読者の方のブログでプラグイン「Yoast SEO」
上記を導入している方はこちらも一緒にインストール。
「Glue for Yoast SEO & AMP」
このプラグインを導入することで、
ほんの少しだけデザインを変えたり、色を変えたりできる。
有効化するとAMP項目が出てくるので、
そこからカスタマイズ。
上部にあるタブからそれぞれ設定が可能。
まぁほんの気持ち程度なんだけどね。
できればもっとカスタマイズしたい！
できるだけオリジナルサイトに近づけたい！
そういう方の場合は、上級者対応にはなるが、
AMPプラグインのファイルを直接いじる。
例えばAMPプラグインには、
こんな感じでファイルが存在する。
記事ページは下から二つ目の「amp/templates/single.php 」だし、
CSSは一番下の「amp/templates/style.php」
責任は取れないので自己責任でやって欲しい。
ただ記事コンテンツの部分の装飾をしているCSS。
これらをAMPで導入するだけなら、本体から適用したいCSSを「amp/templates/style.php」にコピペで可能。
もっと激しいカスタマイズなんかは無理なのか！？
大丈夫。
前置きが長くなったが、最初にもう1つプラグインを入れたのを覚えているだろうか？
「AMP FOR WP – Accelerated Mobile Pages」
このプラグインを併用することで、結構なカスタマイズが可能。
AMPページのカスタマイズ
「AMP FOR WP – Accelerated Mobile Pages」
このプラグインを有効化すると、
ワードプレス管理画面の左サイド下に「AMP」項目が追加されている。
プロ版もあるがブログ運営なら無償版で十分。
AMP管理画面に入ると様々なカスタマイズが簡単に設定可能。
例えば、
1 ロゴの設定
2 custom CSSの追加
3 各ソーシャル設定
4 AMP用アドセンスの自動設定＆挿入
5 AMP用Analyticsタグの自動設定＆挿入
6 コメント機能
などなど。
十分だよ！ってくらいの機能は一通り完備。
設定項目が結構多いので細部は割愛するが、ワードプレス運営者なら管理画面を見れば概ね理解できるはず。
これで簡素なAMPページからオリジナルに近づいた！
ページのシンプル度合いは相変わらずだが、ソーシャルボタンや関連記事を表示することもできる。
僕はこの記事を書いている段階では入れていないが、アドセンスも可能。
ちなみにアドセンスは6パターンの配置から選択可能。
もちろん6パターン全部導入も出来るが、それは是非やめて頂きたい。
タイトルがあり、本文があり、適度な広告があり、関連記事があり、ソーシャルボタンがある。
十分だと思う。
このプラグインは3パターンからデザインが選べるので、お好きなものをチョイスすれば大丈夫。
もっともっと、オリジナルに近づけたい！
オリジナルとほぼ一緒にしたい！
そうなるとプラグインでは少し難しい。
ここでは簡単なカスタマイズを紹介したが、大手サイトのようにオリジナルページに近い形を作ることもできる。
こちらはブログでの説明だと、10万文字くらいになるので割愛。
どうしてもって方は個人レベルで相談にのります。
僕が大好きなブロガーの方なんかは、ほぼオリジナルに近い。
その分、表示速度は遅くはなっているが、オリジナルページよりは断然早い。
参考に
スマホで見て下さいね！
AMP導入を推奨するパターン
ページ速度を早め、余計なものを排除し、ユーザービリティを重要視したい！
グーグル推奨なので、いずれはSEOにも有利になる。
検索結果の表示にもAMPの場合は変化があるので、検索からの流入を増やしたい！
うちのサイトは検索からの流入が多いので、そのユーザーのPV＆滞在時間を増やしたい！
そういう考えなら絶対に導入すべき！！
離脱率を少なくし、直帰率を下げ、PVを増やす。
それが広告の表示回数アップにも繋がり、収益も上がる。
これはもう本人の考え方次第かも！？
まとめ
今回は今話題のAMPについて。
大手ニュースサイトなども利用していることから、実際にスマホで話題のニュースキーワードを検索してみよう！
検索結果上部にカルーセル方式でAMP対応記事一覧が出てくる。
実際に大手サイトのAMPページなども見て、自分自身でユーザー目線に立ってみるのもありだと思う。
今日は初心者のための導入編＋カスタマイズ編。
次回はAnalytics、アドセンスのAMP対応について書きますね。