男が満足するときBlog

小さな満足の積み重ねが大きな結果につながる

WordPressサイトへAMP導入の手順

time 公開:2019/12/21 refresh
WordPressサイトへAMP導入の手順

WebページをAMP化することについては、すでに導入済みの方などから様々な評価がなされています。

今回、WordPressを使用したWebサイトをAMP化するにあたって、事前に確認しておきたいポイントや導入の手順、AMP化による効果やSearchConsoleのエラー対応など。実際にAMPを導入してみて分かったことについてま簡単にとめてみました。

WordPressにAMPを導入すると、従来の投稿ページのほかに同じページ内容で読み込みの軽いAMP対応のページが動的に生成されます。

一つのコンテンツに対し同じ内容のページがAMP用に複製され元のページに対してのcanonicalタグ付加されるといった仕組みです。

広告

事前に確認しておきたいこと

WebサイトをAMP化するとテーマにより指定されたスタイルシートが適用されなくなりデザインが地味になってしまうなどのほか、scriptが使用できなくなることにより反映されなくなる機能があるようです。

こうした事前に確認しておきたいAMPの注意点を書き出してみると次のような内容になります。

・使用するプラグインを予め決めておく
・導入後にすぐアクセス解析の設定を済ますべき
・scriptの使用が制限される
・CSSはAMP用に別途用意する必要がある
・動画やマップの埋め込みなどは修正が必要
・導入後は何等かのエラーがでる

利用しているテーマや既存のプラグインの影響によりほかにも修正が必要になる不具合の発生があるかもしれませんが、当サイトのAMP化によって確認できた注意点を簡単にまとめると以上の6点になります。

当サイトではこれらの対策については調べれば簡単に解決が見つかるものでした。

AMPの導入手順

次に、当サイトで実施したAMP導入手順についてです。

実際にプラグインを有効にした後に気づいたのは、AMP化の後にAMPページにアクセスが来ているかどうかを確認するためにアクセス解析の設定を優先して進めることにしました。

プラグインのインストール

現在、WordPressでAMPを導入する際に利用できるプラグインは複数ありますが、初回の導入にはAMP Project Contributors(Automatic社)が開発したプラグイン「AMP」を使うことにしました。

理由は、Googleが共同開発に加わっているという情報からです。

ほかのプラグインのほうが機能が豊富だったり、AMP対応テーマを使ったほうがデザイン性が良かったりといったことがあるようですが、とりあえず基本路線から入ってみようと考えた次第です。

使用したバージョンは1.4.1です。

インストール方法は通常のWordPressプラグインと同様。インストール後にAMPプラグインを有効にします。

その後、設定画面から固定ページのチェックを外し固定ページはAMP化しないようにしました。

ここで、投稿ページのチェックも外してしまえばプラグインは有効にしてもAMPページは作成されないことになります。

プラグインの設定画面のほか、個々の投稿ページの編集画面でもページごとにAMPを非対応にさせることは可能です。

また、AMPプラグインでは子テーマのディレクトリにAMPプラグインのテンプレートをカスタマイズするためのファイル(拡張子がphpのファイル群)を置くことが可能なので、プラグインのディレクトリからフォルダごとまとめてコピーしました。

Googleアナリティクスの設定

Googleアナリティクスの設定は、AMPプラグインのテンプレートカスタマイズ用に子テーマ内に作成した「html-start.php」内へ記述しています。

内(</head>の手前)にアナリティクス用のscriptを使用する旨の記述をします。

トラッキングIDを含めたアナリティクスのコードは、同じhtml-start.phpの最終行に追加しました。

<head>タグ内の編集

AMP採用したページではJavascriptが使えないのでカスタムスクリプトを使う場合の記述を<head>タグ内に書き込む必要がありますが、「amp iframe」の利用などはプラグインが行ってくれるようで現状ではスクリプトの記述はGoogleアナリティクスだけになっています。

AMP化後のエラー対応

プラグインによるAMP導入が済めば、URLの末尾に「/amp」を付加するなどしてAMPページの閲覧が可能になります。

しかし、個人のブログなどページ数が多ければ目視での検証は困難で、確認できなかったエラーはGoogleSearchConsoleからメールで知らせが届くことになります。

AMPが有効になった後は、GoogleSearchConsole(登録済みの場合)が自動でAMPが設定されたことを検知しエラーも検出してくれる仕組みです。

動画やマップの修正

通常、ページ内へ埋め込んだ動画やマップはAMP化に伴いタグの修正が必要になりますが、WordPressではプラグインが自動で修正してくれるようです。

ただし、当サイトでは埋め込みサイズの指定等で自動修正ができない部分でエラーが発生し修正が必要でした。

アイキャッチが小さすぎ

SearchConsoleが検知したAMPのエラーで最も多かったのが、アイキャッチ画像が小さすぎるというものでした。

AMP化後のエラー対応

プラグインによるAMP導入が済めば、URLの末尾に「/amp」(使用するテーマやプラグインによって異なる)を付加するなどしてAMPページの閲覧が可能になります。

個人のブログなどページ数が多ければ目視での検証は困難で、確認できなかったエラーはGoogleSearchConsoleからメールで知らせが届くことになります。

AMPが有効になった後は、GoogleSearchConsole(登録済みの場合)が自動でAMPが設定されたことを検知しエラーも検出してくれる仕組みです。

エラーの種類によっては、該当するAMPページのインデックスが見送られることになります。

動画やマップの修正

通常、ページ内へ埋め込んだ動画やマップはAMP化に伴いタグの修正が必要になりますが、WordPressではプラグインが自動で修正してくれるようです。

ただし、当サイトでは埋め込みサイズの指定など自動修正がで効かない部分でエラーが発生し修正が必要でした。

アイキャッチが小さすぎ

SearchConsoleが検知したAMPのエラーで最も多かったのが、アイキャッチ画像が小さすぎるというもの。

もともとページの先頭に大きなアイキャッチ画像を配置するのが好きでなかったのでアイキャッチの表示は関連記事の一覧に表示させるだけにしていたため小さい画像で間に合わせていたのが多かったことから、これを大きなサイズの画像へ変更するのに時間を割くことになりました。

AMP導入後のエラー修正はこれが一番大変でした。

その他のエラー

ほかに予想外のエラーでは、h2見出しを使用していないページでのみエラーが発生したのがあります。

当サイトでは最初のh2見出しの直前に広告を挿入する設定をしていて、AMPプラグインがほとんどのページにある広告用のスクリプトをAMP対応のためなんらか処理を加えていたようですが、このページの場合はh2見出しがないという例外を正常に処理できなかったと思われます。

もともと、見出しを挿入しても不自然ではないページでしたのでh2見出しをページに追加し他のページと同じ環境を整えた後はエラーは改善されています。

WordPressをAMP化したことによる効果

プラグインによりWordPressサイトをAMP化して数日後から、AMPページへのアクセスが増加してくるとともに全体のPVも底上げされる状況になりましたが、これはAMP導入による効果というより新規にページを複数追加したときにクローラが多く巡回したときと同じ作用ではないかと思われます。

AMP化直後のPV数の増加がそのまま継続されるかどうかは、やはりコンテンツの質次第といったところでしょう。

また、最終的にAMP化したすべてのページが検索エンジンにインデクスされるまでは少なくても1か月以上はかかるのではと思われます。

PV数が元通りに安定してくる頃には元のページよりAMPページへのアクセスが若干多くなり、今までアクセス解析で確認できていたスマホユーザーはAMPページ、PCユーザーは従来と同じページへアクセスといった割合に落ち着いてきます。

気になるAMP導入の是非については、一般のサイト管理者の価値観もそろそろ定着してくる頃ではないでしょうか。

実際にAMP化をしてみての感想ですが、最近は自分が他の調べ事のためにスマホ検索を利用すると上位のページにAMPページが増えているのが分かります。AMPの導入を敬遠し今後も見合わせるという意思が固いというのでなければ、そろそろAMP導入の方法や効果についての下調べを済ませておいてよいのではと感じます。

サイト情報

カウンタ



アーカイブ