徹底解説!WordPressでAMP対応+カスタマイズする方法

2023.07.08
2023.07.08

みなさんこんにちは!エンジニアの高澤です! 今回はWordPressでのAMPの実装方法について解説したいと思います。

AMPはSEO対策において一つの施作として見逃すことのできない仕組みになります。

当記事ではこのAMPについて解説させていただき、AMPとは?からメリット、また、実務で使えるWordPressにおける具体的な実装方法、注意点などを詳しく解説させていただいております。

よろしければぜひ当記事をご利用いただき、AMPに関して理解を深めてください!

AMPとは

AMP(Accelerated Mobile Pages)とは、モバイルページを高速表示化させることを目的にGoogleが中心となって開発が進められているフレームワークです。どうやらTwitterも開発に協力しているみたいです。

AMPというフレームワークを利用して作成したAMPページを用意することによって、ウェブサイトに対してさまざまなメリットをもたらします。 以下にメリットについて解説いたしますので、ご自身のウェブサイトやプロジェクトの実務などでAMP対応を検討しなければならなくなった場合には、ぜひご確認ください。

AMPのメリット

AMPによるメリットはいくつかありますが、大きく2点あるかと思います。 それは「ページの表示高速化できる」と「流入数が増えSEO評価向上につながる可能性がある」です。
それぞれ解説いたします。

ページの表示高速化できる

サイトをAMP対応させたときにページの表示高速化がまず大きなメリットかと思います。

高速化できる理由にはいくつかありまして、下記の要素によって高速化を可能にしております。

  • AMPページがGoogleのサーバーにキャッシュされる
  • AMP HTMLやAMP JSなど独自のAMPコンポーネントを使用する
  • テキストコンテンツのずれを防止します
  • コンテンツの優先読み込み
  • 不要なデータの読み込み防止

それぞれ解説いたします。

AMPページがGoogleのサーバーにキャッシュされる

AMPページとして公開した記事ページは、Googleのサーバーにキャッシュされます。

要するに、事前にGoogleのサーバーにAMPページの情報を保存しておくことで、実際に自然検索などの検索結果に表示された記事リンクをクリックしたときに、読み込むという動作がほとんど感じられず瞬時に表示されるような高速な動きを実現できます。

AMP HTMLやAMP JSなど独自のAMPコンポーネントを使用する

AMPコンポーネントとは、通常のHTMLのようなタグ形式のようなコードのことをいいます。

AMPという仕組みの中で専用のAMP HTMLとAMP JSというコンポーネントが用意されており、これらを使ってAMPページを実装することになります。

逆にいうと通常のJavaScriptは一切使用できず、また一部のHTMLも使用できないという制限があります。 高速化の理由の一部として、この制限があって表示高速化を実現させているともいえます。

テキストコンテンツのずれを防止します

ブラウザでページを読み込んだときにHTMLページでは読み込みに時間がかかるとテキストデータが先に読み込まれて表示され、画像やビデオ、広告などのメディアデータが後から表示されます。

この時によくある現象として、メディアデータがが表示されるたびにそのメディアデータの高さ分だけテキストデータの表示位置がずれるため、閲覧ユーザーのストレスになってしまう問題があるかと思います。

AMPではこの問題を解決する仕組みとして、あらかじめメディアデータの高さなど表示スペースを確保するため、テキストデータのずれがないようにしてくれます。

コンテンツの優先読み込み

AMPページを最初にアクセスしたとき、表示させている範囲のコンテンツを最優先で読み込まて、逆に範囲外のコンテンツは必要に応じて順次読み込まれる仕組みになっております。

そのため、通信環境の悪い環境下でも閲覧ユーザーは必要な情報を素早く得ることができます。

不要なデータの読み込み防止

通常のHTMLページでは全てのHTMLデータ(コンテンツデータ)を読み込むという特徴があります。

このときにモバイルでページを表示させたときにPCでは表示されていたサイドバーをモバイルではdisplay:none;などで非表示対応させるなどの実装がしばしばあるかと思いますが、このモバイルで非表示にしたときのHTMLデータも読み込まれてしまい不要な通信が発生してしまうという問題がありました。

AMPページではこの非表示にしたHTMLデータを読み込むまず、不要なデータ通信を防ぐことができます。

自然検索時にリッチカード形式で表示される

AMPページ化することの大きなメリットのもう一つ目として、モバイル端末使用時に自然検索時に検索結果に表示される形式として、モバイル検索時に下図のようなリッチカード形式で表示される可能性が高くなります。

リッチカード形式は通常の自然検索結果の一覧の表示よりも画像とタイトルのカード形式で表示され内容がわかりやすく目につきやすいため、クリック率はかなり高くなると予想されます。

流入数が増えSEO評価向上につながる可能性がある

すでに前述させていただいた通り、AMP対応することによってページの高速化や検索結果の表示の形式にひと工夫加えたりすることが可能となります。

高速化に関してはほぼページを読み込む動作が無いのでユーザーに対してストレスなく閲覧できることと、リッチカード形式により自然検索結果時にパッと目に入る位置に表示され、かつサムネイル画像とタイトルのカード形式表示の可能性が高まり内容がわかりやすくなるなどの有利な点があるため、ユーザー閲覧数は増えページ価値が高まりSEO評価の向上につながります。

AMPのデメリット(注意点)

AMPによるデメリットもあります。

AMP対応させるための実装が必要

AMP対応させるには、対応させるための実装が必要になります。

実装に関してはHTMLやCSS、JavaScriptの知識はもちろん、AMPのフレームワークとしての専用の言語、AMP HTMLやAMP JSなどの知識も必要になりエンジニア領域になってくるため、ウェブ担当者の方やディレクターの方、個人ブログ運営者の方などは専門業者に相談するのも良いかもしれません。

ただ、もしWordPressをお使いであれば「AMP」というプラグインがありますのでプログラミング知識なしでAMPの対応することは可能です。 ですが、高度にカスタマイズするとなればやはり知識・技術が必要になってくるためご注意ください。

AMPコンポーネントについて

AMPコンポーネントとは、AMP独自のタグであるAMP HTMLやAMP JSのことをいいます。 AMPコンポーネントを使用することで、高速な表示読み込みと優れたユーザーエクスペリエンスを実現することができます。

以下にそれぞれの特徴を解説いたします。

AMP HTMLとは

AMP HTMLとは、AMP独自のマークアップ言語です。 高速な読み込みとパフォーマンスを実現するために設計されており、一部の制約や独自の機能がありさまざまな特徴があります。

以下が特徴になります。

独自のタグと属性を使う

AMP HTMLでは、独自のHTMLに似た「タグ」を使用してAMPページを実装します。 独自のタグと合わせて「属性」も独自のものが用意されており、HTMLのタグのように記述して柔軟にコードを書くことが可能です。

制約されているHTMLタグがある

AMP HTMLは特定の制約されたHTMLタグのみが使用できるようになっています。 これにより、AMPページの高速な読み込みとパフォーマンス、またセキュリティが向上する仕組みになっています。

例えば、<img>タグは<amp-img>タグに置き換えられ、画像の遅延読み込みやサイズの最適化が自動で行われます。

タグにはコンポーネントという性質がある

AMP HTMLでは、AMPプロジェクトによって提供される多くのAMPコンポーネントが組み込まれています。 例えばアコーディオンの動きは<amp-accordion>タグ、スライドの動きなどは<amp-carousel>タグを使用することによって、JavaScriptなどの記述なしですぐに動きを実装できてしまいます。

非同期読み込みとプリロード

AMP HTMLでは、非同期なリソースの読み込みとプリロードがサポートされています。 AMPページではを表示させている範囲の必要なページの箇所のみを最優先で読み込み、パフォーマンスを最適化します。

また、プリロード機能によりリンクがクリックされる前にページの事前読み込みが行われます。

AMP JSとは

AMP HTMLの各コンポーネントを使用するために提供される独自のJavaScriptライブラリです。

例えば<amp-accordion>タグを使用する場合、headタグ内に下記のscriptタグが必要です。

jQueryの本体ライブラリを読み込ませるイメージと同じです。 各コンポーネントごとに必要であれば必ずこのライブラリを読み込むためのscriptタグを追加しなければコンポーネントは動きません。

これがWordPressで使用する場合、下記のようにfunctions.phpにライブラリを読み込むための記述が必要になります。

AMP JSのライブラリ読み込みURLの確認方法

ライブラリの読み込みURLを確認するときは各コンポーネントが掲載されている公式のページの各コンポーネントの詳細ページからご確認ください。

WordPressでAMP対応させる方法

WordPressでAMP対応させる方法は大きく2点あります。

それは「PHPプログラミングなどで自分で実装する方法」と「AMPプラグインを利用する方法」の2つです。

どちらもメリットもあればデメリットもあるかと思いますが、筆者としては、後者のAMPプラグインを利用する方法をおすすめいたします。

その理由は、AMPプラグインを利用すれば非常に簡単にAMPページを生成でき、管理もプラグインの方でやってくれて効率的で、かつ専用のテンプレートタグやフックが用意されており柔軟にカスタマイズすることができるからです。

AMPプラグインについてはこの後詳細に解説いたします。

AMPプラグインについて

WordPressでAMP対応することができる「AMP」というプラグインを解説したいと思います。

このプラグインは、WordPress本体を開発しているAutomattic社をはじめ、多くのコントリビューターによって開発されております。

AMPプラグインの公式ドキュメントはこちら、WordPressの公式プラグインページはこちらになります。

AMPプラグイン専用のテンプレートタグについて

AMPプラグインには専用のテンプレートタグ(関数)があります。 必要な場面があれば条件分岐系のタグなどが用意されているため、実装時にご利用ください。

AMPプラグインにおける関数に関する公式情報は、AMPプラグイン公式ドキュメント|関数についてからご確認ください。

AMPプラグイン専用のフックについて

AMPプラグインには専用のフックもあります。 どちらかというと専用のフックの方が専用の関数やクラスなどより使用する頻度は多いかと思います。

AMPプラグインにおける独自のフックに関する公式情報は、AMPプラグイン公式ドキュメント|フックについてからご確認ください。

その他AMPプラグイン専用のメソットやクラスもある

関数やフック以外にも専用のクラスなど用意されております。 必要であればご利用ください。

AMPプラグインにおけるメソットに関する公式情報は、AMPプラグイン公式ドキュメント|メソットについて、AMPプラグインのクラスに関する公式情報は、AMPプラグイン公式ドキュメント|クラスについてをご確認ください。

生成したAMPページを独自にカスタマイズする方法

それではいよいよ実際にAMPページのカスタマイズについて、解説していきたいと思います! 当記事では、AMPページを自由にカスタマイズできるところまで解説いたしますので、実務で十分ご活用いただけるかと思います。

プラグインのインストールと有効化

まずはAMPプラグインをインストールしていきます。 管理画面左メニューの「プラグイン」から「新規追加」をクリックしていただき、検索バーに「AMP」と入力してください。

すると検索結果に下記のような「AMP」というプラグインが表示されますので、「今すぐインストール」をクリックして、「有効化」をクリックしてください。

有効化したあとは、下図のようにプラグイン管理画面の一覧に追加され、管理画面左メニューに「AMP」という項目が追加されます。

AMP管理画面を開くと下図のような画面が開かれ、AMPに関する設定が可能です。

AMPページの確認

プラグインをインストールしたら、AMPページが自動生成されますので早速確認してみましょう!

管理画面左メニューの「投稿」から適当に記事ページを表示してください。 もし記事がない場合は適当で大丈夫ですので記事を作成していただき、記事ページを表示させてください。

記事ページを表示させたら、ブラウザのURL入力バーにカーソルを当てていただき、URLの末尾に「/amp/」と追加してから再度アクセスしてください。 すると、プラグイン側で自動生成したAMP対応された記事ページ(AMPページ)が表示されるかと思います。

ページの見た目はAMPプラグインのデフォルトのテンプレートデザインとなっています。 当記事ではこれからこのテンプレートの見た目部分などをカスタマイズしていきます。

自動生成されたページのURLはデフォルトでは「/amp/」が「?amp=1」に変換されますが、この設定を下図のように管理画面から変更できます。

実際にブラウザの自然検索の際はこのURLの設定でAMPページが表示されます。

筆者的にはパスの接尾語:「/amp/」が一番スマートでわかりやすいので、この設定にしていただくことがおすすめです。

テーマファイル内にフォルダと「single.php」と「style.php」を作成する

次はテーマファイル内に「amp」というフォルダを一つ作り、そのフォルダ内に「single.php」と「style.php」を作成してください。

上記のようなイメージになります。

今回のポイント

style.cssではなくstyle.phpです!

ampフォルダ内に2つファイルを作成していただきますが、よくあるミスとしてスタイル用のファイルをstyle.phpをstyle.cssファイル名でCSSファイルを作成してしまうことがあるかと思います。

正しくはstyle.phpというファイル名でPHPファイルを作成してください!

理由は、AMPの基本構文コードの中で下記のように<style amp-custom></style>という<style amp-custom>コンポーネントで包む形でstyle.phpを出力するからです。

そのため、PHPファイルの中にCSSをそのまま記述するので少し違和感を感じるかもしれませんが、style.phpに書かれたCSSがそのまま<style amp-custom></style>の中で出力されるため、CSSとして機能します。

作成したsingle.phpを反映させるためのPHPを記述する

 

下記コードをfunctions.phpにコピー&ペーストしてください。

AMP HTMLの基本コードを記述する

 

下記コードを/amp/single.phpにコピー&ペーストしてください。

スタイルシートでAMPページをデザインする

 

下記コードを/amp/single.phpにコピー&ペーストしてください。

タイトルや本文、カテゴリーなどを表示する

 

タイトルを出力するテンプレートタグ

 

下記コードを/amp/single.phpにコピー&ペーストしてください。

本文を出力するテンプレートタグ

 

下記コードを/amp/single.phpにコピー&ペーストしてください。

投稿日・更新日を出力するテンプレートタグ

 

下記コードを/amp/single.phpにコピー&ペーストしてください。

カテゴリーを出力するテンプレートタグ

 

下記コードを/amp/single.phpにコピー&ペーストしてください。

タグを出力するテンプレートタグ

 

下記コードを/amp/single.phpにコピー&ペーストしてください。

画像(メディア)を表示する

 

下記コードを/amp/single.phpにコピー&ペーストしてください。

ナビゲーションを実装する

 

下記コードを/amp/single.phpにコピー&ペーストしてください。

下記コードにfunctions.phpにコピー&ペーストしてください。

下記コードにfunctions.phpにコピー&ペーストしてください。

style.phpにCSSを記述してデザインする

最後にCSSでページのデザインをデザインしていきたいと思います。

ここで、これまでの解説した内容を反映させたコードを掲載させていただきます。

下記コードはsingle.phpの内容です。

下記コードはfunctions.phpコードです。

AMPをカスタム投稿タイプに対応させる方法

カスタム投稿タイプに対してもAMP対応させたい場合があるかと思います。 下記のコードをfunctions.phpにコピー&ペーストしていただければ、カスタム投稿タイプにも機能を反映することができます。

使い方は簡単で、コードの中の【カスタム投稿タイプ名】の部分にカスタム投稿タイプ名(デフォルト機能の「投稿」でいうところの「post」、固定ページでいうところの「page」)に入れ替えて反映してください。

AMP対応できているかチェックする方法

最後に実装したAMPページが検索エンジン上で正常にAMP対応化されているかを確認できるツールがあります。 こちらのツールからURLもしくはソースコードを入力していただき確認することができます。 ツールについてはGoogleのAMPチェックツールをご確認ください。

問題なければ「AMPページは有効です」と表示されます。

プラグインを使用せずAMPページを作成する場合

WordPressのAMPプラグインを使わずにAMPページを実装する場合、AMP HTMLで必須とされている設定をすべて手動で記述して対応する必要があります。

このときに AMPの公式サイトに掲載されている設定ページを参考にしていただけると簡単に実装することができます。

まとめ

当記事ではWordPressでAMP対応する方法と独自にAMPページをカスタマイズする方法を解説いたしました。 AMP対応することは多くのメリットがある反面、実装に少々工数がかかったりする部分があったりします。

ですが、WordPressにおいて簡単にAMP対応する方法として「AMP」というプラグインがあり、効率的に記事ページをAMPページ化することができるとともに割と自由にカスタマイズすることができるので、もしAMP対応化を検討しているいる方がいらっしゃいましたらぜひ当記事をご活用ください。

2023.07.08
WordPress開発・運用チーム

WordPressを使ったWebサイト制作を得意とする株式会社セルリアのWeb制作チーム。ご要望に合わせ、長く利用頂きやすいホームページをご一緒に制作いたします。集客、Webマーケティングについても貴社のご要望に合わせた形でご提案いたします。また、高度なカスタマイズ、プラグイン開発にも対応可能です。お問い合わせフォームよりお気軽にご相談ください。

こちらの記事を読んだ方におすすめ