wordpressで運用しているコンテンツをamp対応にするのは難しそうと感じていませんか?

ampの重要性を理解しつつも、複雑そうで手をつけられていないという人に朗報です。wordpressでampを設定する手順は、ポイントさえ押さえていれば意外と簡単にできるものです。

設定時に起こりうる問題を把握しておくことで、対応策も事前に準備することができます。ampに対応する必要性を感じているのであれば、早めに取り組むに越したことはありません。

そこで今回は、wordpressでamp対応の設定をする際の手順についてお伝えします。

amp対応することのメリット

amp化を設定する手順を知る前に、まずはamp対応したときに得ることのできるメリットについて確認しておきましょう。

ampって何?

ampは「Accelerated Mobile Pages」の略称で、その名の通り、モバイル端末でのページ表示の高速化を目指した取り組みやその技術のことです。

ampの詳細については、次のページをご覧ください。

【参考サイト:Googleが推奨する雷マークのamp表示ってどんな仕組み?

ページ表示が高速になる以外にもメリットはある?

モバイル端末でのページ表示が高速化し、モバイルユーザーの満足度を上げることができるというのは、amp対応によって得られるもっとも分かりやすいメリットです。しかし、amp対応によって得られるメリットはこれだけではありません。それ以外のメリットについても把握しておきましょう。

ページ離脱率が減る

モバイル端末でWEBページを見る際、少しでも読み込みが遅いと感じると、それだけの理由でページを離脱してしまうことがあります。AMP対応により、読み込み時間に対する不満が解消され、ページ離脱率の減少につながります

WEBサイト訪問者が増える

つながりやすいページは、ユーザーからの好感度が高くなります。好感度が高いページにはリピーターが集まります。口コミでの評価などの効果にも波及し、必然的にWEBサイトの訪問者が増えていきます。

間接的なSEO効果が得られる

訪問者が多いWEBページは、ユーザーの利便性が高いと評価されます。AMP化することで、検索順位が上がるといった直接的SEO効果はいまのところ確認できませんが、高評価を受けることにより、検索順位が上がり、間接的なSEO効果を得ることができます。

wordpressでamp化する手順

wordpressを使ってブログなどのオウンドメディアを運用している人も多いでしょう。wordpressはWEB初心者でも使用しやすいツールですが、自分でamp化するとなると、話は別でしょう。難易度が高すぎると感じてしまうのも当然です。

とはいえ、そのまま放置しておける問題でもありません。今回はAutomatticとWordPressが開発した公式プラグインを使って、wordpressでamp化するための手順について確認しておきましょう。

手順1:wordpressにampプラグインをインストール

wordpressの管理画面で「amp」のプラグインを検索してインストールします。インストールできたら、プラグインを有効化します。

amp-for-wordpress【参照URL:wordpress.orgプラグイン|AMP for wordpress

有効化したことにより、AMP HTMLの表示がされているかをテストします。記事をひとつ選び、URLの末尾に「amp/」をつけてみましょう。アクセスしてAMP対応ページが表示されれば問題ありません。

手順2:ソースエラーのチェック

ampページが表示されることを確認したら、HTMLのエラーなどが起きていないか確認します。末尾につけた「amp/」の後ろに「#development=1」を追加して、Developer Toolsのconsoleのチェックログをみてみましょう。「AMP validation successful.」というログが出力されればOKです。

問題がある場合には、エラー表示がでます。表示内容はエラーによって異なりますが、自分では解決できないエラーメッセージが表示されているときには、amp対応に詳しい人を頼った方がいいでしょう

手順3:Google アナリティクスとの連携

プラグインによってamp化したwordpressページは、プラグイン専用のテンプレートが適用されるため、amp化する前のデザインページで使用していたGoogle アナリティクスには反映されません。トラッキングを確認するためには、連携させる必要があります。

amp専用のテンプレートにトラッキングタグを設定することで、アナリティクス上で統計が可能となります。正確な統計データを計測するためにも連携させておくことをおすすめします。

手順4:デザインのカスタマイズ

プラグインで設定しただけのampページは標準のテンプレートで表示されるため、単調になりがちです。デザインのカスタマイズをしたい場合には、CSSを追加することもできます。その際はamp対応のエラーがでないように注意しましょう。

簡単なデザインであれば、「Facebook Instant Articles & Google AMP Pages by PageFrog」というプラグインで変更することができます。CSSの設定などに慣れていない人は試してみましょう。

pagefrog【参照URL:wordpress.org| Facebook Instant Articles & Google AMP Pages by PageFrog

amp対応で起きうる問題点とその対応策

プラグインでの設定が終了して無事amp化できたと安心していると、GoogleのSearchConsoleにampページのエラーの修正依頼が届くことがあります。エラーの指摘を受けた項目は中身を確認し、ひとつひとつ解消していく必要があります。

エラーになりやすい項目とその対策についてピックアップしました。これらは、できればエラー通知を受け取る前に対応しておきたいところです。

画像の挿入

ampページに画像を挿入する場合には、「amp-img要素」を使う必要があります。また、gifアニメを使用する場合には、別に「amp-anim拡張コンポーネント」を使わなければいけないので注意しましょう。

amp-img要素のlayout属性を指定していなければ、画像に設定されているwidth(幅)とheight(高さ)の数値どおりに固定表示されますが、layout=”responsive”を指定していると、意図していないのに、画像の幅に応じて、自動的に引き伸ばされて表示されることがあります。
自動的な伸縮を防ぎたい場合には、CSSでmax-width(最大幅)を設定しておきましょう

【参照URL:AMPプロジェクト|amp-img

SNSシェアボタンの設定

wordpressで運用しているブログなどには、記事を拡散するためにTwwiterやFaceBookなどのSNSシェアボタンを設置しているケースも多いでしょう。ampページの場合、SNSシェアボタンを設置するためには、「amp-social-share要素」を使って設置しなければなりません。SNSボタンによる拡散を妨げないよう、必ず対応しましょう

【参照URL:AMPプロジェクト|amp-social-share

さて、今回はwordpressのコンテンツをamp化する手順についてお伝えしましたが、いかがでしたでしょうか。デザインなどにこだわりがある場合は、それほど簡単にはいきませんが、初期設定だけであれば、wordpressページをamp化することはそれほど難しいものではありません。
モバイルユーザーの取り込みを検討している人や、モバイル端末での読み込み速度を原因とするページ離脱を防ぎたい人は、amp対応によってその問題が解決するかもしれません。まずは初期設定から取り組んでみるのもひとつの手段です。

wordpressページを簡単にamp対応するならプラグインをインストール

  • amp対応によってモバイルユーザーの訪問数を増やす
  • wordpressページをより簡単にamp化するにはampプラグインを使う
  • amp対応によるエラーがでたら、ひとつずつ検証が必要
  • ページデザインを変更するときはエラーに要注意
  • エラーの原因になりやすいのはamp対応でない要素が含まれているとき

CSSなどに詳しくなく、自分で設定することが難しいと感じている人は、まずはプラグインによる設定を試してみましょう。プラグインによる設定であれば、CSSの知識がなくても対応できます。ただし、エラー項目を解消しきれないときには、専門家の力を借りる必要があります。詳しい人に相談しながら、エラーのないamp化対応ページを作成していきましょう。