販促レポート：＜WordPress＞ワードプレスで企業サイト制作｜AMP対応編

販促レポート

2018/04/12　ワードプレス

＜WordPress＞ワードプレスで企業サイト制作｜AMP対応編

企業サイトで収益を伸ばすならブログソフトのワードプレスが断然おすすめ。使えるプラグイン（オプション機能）も豊富で、何といっても無料で操作も簡単。今回は、SEOやモバイル検索で超重要な要素、AMPについて徹底解説いたします。

AMPとはいったい何だろう？
＜WordPress＞ワードプレスで企業サイト制作｜AMP対応編

AMPとは、Accelerated Mobile Pagesの略で、Googleが2015年に発表したモバイルページの高速表示を目的としたオープンソースプロジェクトです。

「AMP HTML」というオープンソースを使えば、サイトの読み込み時間を大幅に短縮することができます。2016年6月時点で、GoogleがインデックスしたAMP対応済ページは1億2,500万といわれています。
参考：www.slideshare.net

AMPは、通常リンクをクリックしてからHTMLを読み込みページ表示されるところを、ウェブページのHTMLをあらかじめGoogleにキャッシュ（一時保存）させておくことで、読み込み時間を大幅に削減しています。

ただし、検索ボックスにキャッシュURLが表示されてしまう問題点があります。この点に関しては、Googleが推進するAMP Projectが「Web Packaging」という技術によってオリジナルドメインを表示させることができると発表しています。正式な導入時期は未定です。

AMPに対応するメリットとデメリット
＜WordPress＞ワードプレスで企業サイト制作｜AMP対応編

AMPに対応することで得られるメリットはたくさんありますが、概ね以下が代表的なものになります。

トップニュース枠にカルーセル表示される
AMP対応していると、優先的にGoogleのモバイル検索結果の上部「トップニュース枠」にカルーセル表示されます。視認性が高まるため、クリック率、インプレッションの向上が期待できます。ただし、必ず表示されるわけではありません。

モバイルページの読み込みが早くなる
最大のメリットは、モバイルページの読み込みが早くなることです。Googleはモバイルの表示速度をモバイル検索の順位評価に反映させる「スピードアップデート」を2018年7月から導入すると発表しており、今後はSEOにも大きな影響を与えそうです。

AMPマークが表示される
2016年10月から、Googleのモバイルの検索結果において「AMPマーク」が表示されるようになりました。トップニュース枠同様、より多くのユーザーの注意を引くことができ、クリック率、インプレッションの向上が期待できます。

＝＝＝＝＝

一方で、わずかながらAMP対応のデメリットもあります。

hタグやSNSボタンなどが表示されなくなる
AMPには、独自の「AMP HTML」という規格があるため、既存ページのhタグやSNSボタン、関連記事が表示されず、表示崩れを起こす場合があります。また、Java Scriptの使用も制限されるため、サイトの一部機能が正常に作動しなくなる恐れがあります。

コードの管理が2重になる
上で述べたように、「AMP HTML」というコードが必要になるため、既存のHTMLとAMP HTMLの二つのコードを管理する必要があります。また、AMP HTMLでは利用できない、制限されているタグも多く、cssの記述方式にも制限があり注意が必要です。

ワードプレスサイトのAMP設定手順
＜WordPress＞ワードプレスで企業サイト制作｜AMP対応編

ワードプレスで構築された企業サイトのAMP設定はすごく簡単。今回は、プラグインを使った手順をご説明します。

手順1．プラグイン「AMP」をインストールする
プラグイン「AMP」をインストールし有効化します。これでAMP対応は完了ですが、この設定だけではモバイルからの訪問者に対し、自動的に表示をAMPページに切り替えることはできません。本文（テキスト）以外の要素もほとんど表示されない状態になっています。
プラグイン：AMP for WordPress｜WordPress プラグイン

手順2．AMPページのデザインをカスタマイズする
「AMP for WP – Accelerated Mobile Pages」というプラグインを使うと、ロゴの設定、カスタムCSSの追加、SNSボタン設定とかなり細かい部分までカスタマイズできます。また、AMP用のアナリティクスタグの設定も行うことができます。
プラグイン：AMP for WP – Accelerated Mobile Pages｜WordPress プラグイン

手順3．Googleアナリティクスで新しいプロパティを作成する
AMPのアクセス数を計測するには、Googleアナリティクスで新しいプロパティを作成する必要があります。作成すると、新しいトラッキングコードを取得できるので、さきほどのプラグイン「AMP for WP」の「Analytics」という項目に取得したコードを入力しましょう。続いて確認作業です。

手順4．「AMPテスト」でチェックする
チェックしたいAMPページのURLを入力すると、有効なAMPページか判断してくれます。特に問題がなければ「有効なAMPページです」と表示されます。設定が間違っている場合は、修正する必要のある問題点が表示されます。
参考：AMPテスト｜search.google.com

手順5．「構造化データテストツール」でチェックする
構造化データテストツールでは、正しくHTMLがマークアップされているかチェックすることができます。もし、エラーが表示されている場合は、トップニュースへのカルーセル表示がされない可能性が高くなります。修正しておきましょう。
参考：構造化データテストツール｜search.google.com

手順6．Search Consoleでエラーを確認する
Search Console の[検索の見え方]から[Accelerated Mobile Pages]という項目を表示し、エラーの有無を確認しましょう。問題のURLとエラーの概要は表示されますが、詳細は分かりません。詳細はChromeの右クリックメニュー[検証]からデベロッパーツールに入り、 [console]の項目から確認しましょう。

AMP対応をしたのにインデックスされていない、正しく表示されていないとなれば、設定した意味がありません。設定が完了したら、必ずエラーチェックを行いましょう。

AMPの設定で覚えておきたい注意点
＜WordPress＞ワードプレスで企業サイト制作｜AMP対応編

前段では、AMPの設定手順について解説しました。最後に、ここでは設定における注意点をお伝えしたいと思います。

メリットとデメリットを事前に知る
表示速度が向上するなどメリットも大きいですが、表示崩れによるUIの低下、管理コストや手間の増加といったデメリットも考えておかないといけません。現状のサイトのデザインやアクセス数などを鑑みて導入を検討してみてください。

AMPページが検索結果に必ず表示されると限らない
グーグルの検索結果に、通常のページ、AMPページのどちらが表示されるかはアルゴリズム次第で、必ずAMPページが表示されるとは限りません。もちろん、正しい設定を行っていれば表示される可能性はグンと高まります。

AMPのURLを変更した場合は、リダイレクト設定が必要
AMP対応の運用を「プラグイン」から「テーマ」に変えた場合、末尾のampを含むURLが変わる場合があります。変更前のURLは検索結果や閲覧者のブックマークに残ったままになるので、元URLから新URLへリダイレクト設定を行う必要があります。

いかがでしたか？
今回はAMP対応について解説いたしました。AMPはまだ新しい規格で導入しているサイトもさほど多くありませんが、今後SEOにおいて非常に重要なテーマになることは間違いありません。ぜひ、この機会に導入を検討してみてください。サイト制作について最初からおさらいしたい場合は、バックナンバーをどうぞ。

＜ライタープロフィール＞

担当ライター：ryusuke
WordPressサイト制作／Web集客の専門家。大手広告代理店にて、百貨店や出版社のリスティング広告運用を担当。その後独立、広告代理店で培ったSEOやデータ分析の知見を活かし、個人メディアを運営する傍らフリーのコンテンツライターとして活動中。執筆テーマは、集客やマーケティングなどビジネス関連、グルメや音楽関連。
公式ブログ
 公式フェイスブック

販促レポートは、特集記事や販売促進コラム、オフィスでの問題解決など、皆さんのビジネスに少しでも役立つ情報をお届け。編集長の弊社代表と様々な分野で活躍する若手ライター陣によって、2008年より地道に運営されております。

★このページを友達に伝えよう：

FOLLOW @pqnavi

Follow @pqnavi

LIKE @pqnavicom