ブログをAMP対応にした。やったことをご紹介。

みなさん、こんばんは。たけしゃん(@_tkshan)です。

今年中にやろうと気長に思っていましたが、とっとと終わらせようと思い立ち本ブログをAMP対応にしました。

昨今、Google検索してもAMPという言葉はちょいちょい出てきます。
僕自身も何気なく、AMP対応ページを読んでいたわけです。

なんせ表示が早いですからねぇ。
スマホで何か調べものをしていると便利なのです。

そうやって使っているうちに…
「これ、早めに対応しないと時代に置いていかれるな…」と感じ。

訳も分からないところから、色々調べ始めたわけです。

幸い、僕の使っているテーマ「Humming Bird」だと作者の方やユーザーの方が色々と紹介してくれてました。ほんとありがとう。

そんなわけで参考にしたページややったことを紹介していきます。

1. AMPとは

まずはAMPの説明から。

AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のこと。

-SEO HACKSより-

へぇ~、Googleは何となくわかっていたけどTwitterと共同開発しているんですね。

AMP対応ページはGoogle側に保存され、キャッシュ表示されるという仕組みらしいですね。
確かにイチイチページを読み込まないから、そら早い。

そして、AMP対応するためには厳格なルール設定がされており、ルールを守るとデータ量も大分減ります。

AMP対応サイトの表示速度は通常サイトの4倍と赤い人を上回る倍率ですが、表示してみると4倍以上に感じるほど体感差があります。

といっても、サイト運営者には頭を抱える問題が…。

それはAMP対応するとサイトが正しく表示されなくなってしまうことです。

デザインとかが崩れてしまうので、工夫や対応が必要なってしまうのです。

2. AMPプラグインで対応

便利な世の中になったものです。
まさかのAMPもプラグインで一発対応が可能という。

WordPressを使用されている方はWP用プラグイン『AMP』を使えば対応可能です。

ダッシュボード内メニューの「プラグイン」からインストールして有効化すればよいだけというお手軽さ。

有効化させた後はURLの最後に「/amp」とつければ対応ページが表示されます。
おー、すごい。

…だがしかし、これだけでは終わらないのがAMP。
対応ページを表示させてみると、わかりますがデザインが崩れてしまいます。

また、ものすごく味気ないページ。
ここから、いくつか設定変更していくのです。

3. 設定変更

設定変更といっても、僕は正直なところCSS系の知識は疎いです。
そんなわけで、参考にさせてもらったページの紹介がメイン。

しかし、まだまだ対応に追われており個人ページで完全対応している人は中々いないようですね。

3-1. Googleアナリティクス

どうやら、AMP対応ページは別途設定をしないとGoogleアナリティクスで集計されないようです。
AMP対応するとPV数が減ってしまうのも悲しいので対応を行いましょう。

参考にさせていただきましたのは、いつも読ませていただいています「ブログマーケッターJUNICHI」さんのページ。

AMP導入でPVが下がった!?そんな事ないGoogleアナリティクスにカウントされてないだけ!

わかりやすい。ソースも記載してくれているので、簡単に対応できますね。

3-2. Googleアドセンス

アドセンスもAMP対応ページ用に設定しないと表示されないようです。
JUNICHIさんのページだと2つコードを貼り付け手法が紹介されていましたが、簡単な方法としては下記の記事を参考にしましょう。

AMP用ページを超簡単に作成するWPプラグインの組み合わせ/ISCEL

上記の記載通りに設定して無事、アドセンスは表示されました。
表示されるまで一定時間かかります。新規アドセンス設定する時と同じ感じ。

ただし、上記のプラグインでは設置できるアドセンスは記事下に1つだけ。

複数設置したい、またはタイトル下など他の位置にもつけたい人はプラグインを使わずにこちらの記事を参照にAMP用のsingle.phpにAMP用アドセンスコードを追記します。

僕も1つだけだとクリック率は上がっても収益が下がっちゃうので2つ設置するためにプラグインではなくPHPファイルを書き換えました。

ちなみにウィジェットは機能しませんので、ウィジェットで一括設定などはできません。残念。

3-3. デザイン(OPEC CAGEテーマ使用者限定)

最後はデザイン。
AMP対応にするとCSS設定して綺麗に整えたもの、ほとんどが無効化されてしまうので味気ないページになります。

しかし、有料テーマを使用されている方は作者さんがCSS設定を記載してくれていることがあります。

僕の使用している「Humming Bird」も作者さんが記載をしてくれています。

プラグイン「AMP」で吹き出しデザイン用CSSを適用する方法

AMPプラグインで記事下にSNSボタンを追加する方法

一番欲しい関連記事のCSSですが、現在検証中だそうです。
関連記事があると、まずは一通り揃うので非常に助かりますね。

OPEN CAGEの方にはそのうち、AMPに最適化したテーマなども期待したいところです。



4. 終わりに

AMP対応させてみましたが、まだまだ不完全な状態です。
少しずつ、対応させていこうと思いますが、勇み足だったのかもなぁとも思案中。

Google検索にも反映されており、表示速度も格段に速くなるので利便性や話題性を考えると即対応させるべきです。

かといって関連記事などもなく、デザインも簡素すぎてページ内での利便性は劣ります。そんなページを表示させるか悩みどころです。

企業やプロブロガーの方はいち早い対応をすべきですが、一般ブロガーはまだ非対応でいいんではないかとも感じますね。

僕自身はAMP対応ページを作ったし、難しいデザインも使っていないことから関連記事が出ない以外はまあ、大丈夫だから表示はさせる方向です。

少しずつ、改良していってAMP対応ページでも十分な利便性を確保できるように努めたいところです。

ABOUTこの記事をかいた人

たけしゃん

アコースティックギターによる弾き語りを中心に音楽を愛するアラサーのサラリーマン。20代はギターを片手にシンガーソングライターとして東京都内で音楽活動に精励。
30代になって音楽と仕事(サラリーマン)の両立を模索中。