AMPページに対応させるとき注意すべき4つのポイント【実体験】

最近はブログを含めて、ウェブページをスマートフォンから見る人が非常に増えています。

そのため、ウェブページはスマートフォンから閲覧されるということを意識して作る必要があります。

そんなとき、簡単にスマートフォン用のページを生成してくれるのがAMPです。

私も使用しているテーマである「Cocoon」を使うと、設定画面のボタン１つでAMP化ができるので非常に簡単です。
（他のテーマでもAMP化させるプラグインを使えば簡単にできます）

しかし、このAMP化、実は注意が必要で、何も考えずAMP化してしまうと後悔することになります。

実際に後悔することになった私が、そうならないための4つのポイントについて解説していきます。

そもそもAMPとは？

AMPとは、Accelerated Mobile Pagesのことで、モバイルでのウェブページの表示を高速化するフレームワーク（手法）のことです。

AMPのページは、Googleのサーバにキャッシュとして保存され、検索ページから呼び出されると、その保存したキャッシュを表示します。

AMPを使うメリット

Googleのキャッシュを使って表示するため、ウェブページの読み込み速度がかなり早くなります。
（公式の発表では、通常の約4倍の速度で読み込まれます）

また、Googleのキャッシュを使っての表示になるため、こちら側のサーバへの負荷も軽くなります。

こう見るといいことばかりに見えますが、実は問題点もあります。

実際に起こった4つの問題

そう思って、AMPの設定を有効化していました。
多分このブログを始めた頃にです。

しかし、つい先日ふと気になって自分のサイトをスマホから見てみました。
いつもスマホから確認する際は、直接URLを打ち込んでたのですが、今回はGoogleからキーワードで検索をしてみたのです。

そして、そのとき初めて表示がおかしくなっていることに気付きました。

具体的には、

これらの4つです。

つまり、ブログを始めた頃から、ずっと表示のおかしいまま運営してきたことになります。
これはショックでした・・・。

それぞれについて詳しくお話していきます。

ヘッダーの表示が変

ウェブページが表示されて、まず一番に目にするヘッダーがこのような表示になっていました。

実際は、ロゴの部分は透過画像を使っていて、背景が見えるようになっているのですが、AMPページだとこのように真っ黒に表示されていました。

せっかくサイトに来てもらっても、こんなヘッダーだと
 

って思われてしまう可能性が非常に高いです。

広告がうまく表示されない

Google Adsense広告はこのような表示で、Adの部分がずっとぐるぐる回っていました。

また、バナーもこのように表示が崩れていました。

Adsense広告は、恐らくこの状態だと機能していなくて、広告が表示された扱いになりません。
そのため、どれだけアクセスが増えても収益には繋がらなくなってしまいます。
また、バナーの場合もこのような表示だと誰もクリックしようとは思いませんよね。

つまり、収益にかなりの影響が発生してしまいます。

メニューが表示されない

スマートフォンから見たときは、このようなフッターメニューを表示させるようにしています。

しかし、AMPページだと、このメニューが表示されません。

フッターメニューが表示さないと、プロフィールやカテゴリーなどを見ることができませんので、サイトの巡回がされなくなります。

せっかく見に来てもらったので、他のコンテンツも見て欲しいのに、この状態だとそのページだけで終わってしまいます。

一部表示が崩れる

Amazonなどの商品リンクに「Rinker」というプラグインを使っていたのですが、そのRinkerの表示がこのように崩れていました。

これを見ただけじゃ何の表示かわかりませんよね。

このように、SEO的にも収益的にも、かなりの影響があります。

対策方法は？

このようにならないための対策としては、AMP化しても問題ないサイト構築にすることです。

今回の4つのうち、それぞれについて見ていきましょう。

【ヘッダー】
透過画像を使わないなど、ヘッダーのデザインを見直す必要があります。
ロゴの部分に画像を使っていなければ、このような事態になることはありません。

【広告】
Google Adsense広告は、AMP用の設定をしないとうまく表示ができないようです。

Google Adsenseのページの左のメニューから、「広告」→「サマリー」をクリックし、

こちらをクリックします。

すると、AMPページ用のスクリプトが表示されるので、ステップ1とステップ2の2種類のスクリプトを貼り付けます。

この作業を行わないと、私のように広告がうまく表示されないので注意です。

バナーについては、都度確認が必要です。

【メニュー】
フッターメニューだけでなく、サイドメニューも表示されなくなるようなので、メニューを使わない設計にする必要があります。

例えば、コンテンツの下にプロフィールやカテゴリなどのリンクを付けるなどです。

【Rinkerの表示】
こちらは表示が崩れないプラグインを使う必要があります。

例えば、もしもアフィリエイトの「かんたんリンク」を使えば、Rinkerほどおしゃれではありませんが、似たようなリンクを作成することができます。

 
このように、AMP機能を有効化する際には、これら4つのことを対策して、実際に問題がないことを確認することを忘れないようにしましょう。

まとめ：AMPページを有効化させるときは4つの確認を忘れない

AMP化すると、確かに速度が上がり、ユーザビリティの向上に繋がり、その結果SEO的にいいものとされています。

しかし、そのせいでデザインが崩れて見づらくなったり、操作性が悪くなってしまうせいで直帰率が上がってしまうなど、本末転倒になってしまいます。

ただAMP化すればいい訳ではなく、その前に

最低限これらの4つについては、AMPページから確認することを忘れないようにしましょう。

ポイントなのは、スマホから直接URLを打ち込んだり、サイト名で検索してページを見てもAMPページは表示されないので、Googleからキーワードで検索する必要があるので、注意してください。