検索順位を上げるためにサイトのAMP対応を検討するも、プラグインのインストール以外にも難しい設定が必要なことを知り、二の足を踏んでいる方も多いのではないでしょうか。
まだ数は少ないものの、AMPに対応したWord Pressのテーマも登場し、徐々にハードルが低くなるのを感じますが、大絶賛するほど簡単にサイトをAMP化できる訳ではありません。
そこで今回は、AMP対応を謳うWord Pressの有料テーマであるTHE THORに切り替えた後に発生した、ショートコードの入れ替えやAMP自動広告を表示させるためのカスタマイズなど、正規AMP化させるまでの長い道のりについて紹介します。
魔法ではないAMP対応有料テーマ
AMP対応済みという魔法の言葉に釣られて有料テーマを購入したものの、実際にテーマを切り替えた後に訪れるのは、検索順位の上昇という幸運ではなく、ページが表示されないなどの不具合に対する処理でした。
更に、THE THORはAMP広告に対応しているもののAMP自動広告は非対応で、収益を大幅に減らしてしまう可能性のある仕様のため、テーマ切り替えから１ヶ月近くAMP化しませんでした。
テーマ変更の不具合対応
今まで使用していたアルバトロスというテーマには、関連記事を表示させるショートコードが標準で使用できたので多数設定していたのですが、THE THORでは利用できないのでコードの書き換えが必要となりました。
THE THORのバージョンアップで解決しましたが、テーマ切り替え当初はサイトカードを設定すると、サーバが応答しなくなりページが表示されなくなるという不具合がありました。
これはどのテーマにも言えることですが、Word Pressのテーマを変更することで発生する不具合は付きものなので、新テーマの機能がきちんと動作するのかテスト環境で確認する必要があります。
THE THORには不具合報告や次期バージョンアップ内容を知ることのできるフォーラムがありますが、会員専用のパスコードが設定されているため、購入前に確認することができないのが残念です。
THE THORに搭載されている膨大な機能は魅力的ですが、その機能がきちんと動作しなければ意味がないので、テーマ購入前でも不具合情報を確認できるように公開して欲しいものです。
結局、関連記事を表示させるコードをGoogle検索してfunction.phpに書き込んで対処したのですが、その後のバージョンアップで修正された後にもショートコードを全て書き換えました。
今回のショートコードの書き換えはSearch Regexという便利なプラグインが使用できましたが、もし手動でコードの差し替えを何度もしていたらかなりの時間を浪費することになります。
全アイキャッチを16:9に変更
その次に対処したのがGoogle Search Consoleに表示される、「推奨サイズより大きい画像を指定してください」というメッセージで、500ページを超える記事のアイキャッチを全て修正するのはかなり根気が必要です。
いくらWord PressのテーマがAMPに対応していても、記事内で使用している画像やCSSがAMPに対応していなければ意味がないので、上記のエラーが表示される場合は修正作業が必要となります。
AMPに対応させるためのアイキャッチサイズにはルールがあるのですが、当サイトでは横が1,200pxの縦が675pxという縦横の比率が10:6になる寸法を採用することにしました。
今まで使用していたアイキャッチの画像は、横が680pxで縦が375pxという拡大すると明らかに画像がぼやけてしまうサイズですが、オリジナルの画像を全てトリミングするのは非現実的です。
一度全てのアイキャッチ画像をPhotoshop Elementsで拡大し、自動でぼかしを軽減させることで対処しましたが、特にアクセス数の多い記事や使用に耐えられない画像はオリジナル画像を再トリミングしました。
理想は全てのアイキャッチを美しい画像にすることですが、アクセス数の少ないページまで対処していたら作業が終わらないので、手を抜ける部分があれば積極的に手を抜くのがおすすめです。
アイキャッチに設定していた画像は記事内でも使用しているので、ファイルを上書きせずに16:9にリサイズした画像を別名でアップして、アイキャッチを手動で張り替える作業だけで２週間近くかかりました。
商品リンクプラグインを変更
アイキャッチのリサイズをした後は、商品リンクを貼るプラグインの変更で、一時的にWPアソシエイトポストR2からAmazon純正のAssociate Link Builderに切り替えることにしました。
WPアソシエイトポストR2は、とても便利で優秀なプラグインですが、THE THORのテーマに切り替えるタイミングではAMP対応のCSSが設定できないため、苦肉の策としてプラグインの変更です。
WPアソシエイトポストR2とAssociates Link Builderのショートコードは互換性がないため、手動で全てのコードを貼り替えることにしたのですが、過去に公開した記事の無駄な商品リンクの多さに驚きました。
AMP対応のために商品リンクの差し替え作業はとても大変な作業でしたが、サイト公開当初の記事を見直すことを実感できたので、サイトのAMP化は悪いことばかりではないようです。
Associate Link Builderに用意されている商品リンクのデザインは決して良いものではないので、カスタマイズしたCSSを自分で設定する必要があるのですが、この作業も結構苦労しました。
Associate Link BuilderのCSSは検索すれば参考になる例がいくつもありますが、THE THORの非AMPページでも表示が崩れたり、Google Search Consoleに警告が表示されたりします。
スマートフォンの非AMPページで画像が表示されない問題は自力でクリアしましたが、AMPページの囲み罫線やリンクボタンが表示されない問題は、今も未解決でこれから対応します。
本来なら商品リンクを表示問題を優先して修正したいのですが、500ページ以上のページをAMP化させるための作業で記事を全くアップできていないので、後回しにすることにしました。
Word Pressのテーマを変更したことでサイトへのアクセス数が劇的に減少したので、今は商品リンクの改善よりもアクセス数の復活に向けて、記事の作成や修正を優先的に行う段階と判断しました。
Associate Link BuilderのAMP対応
AMPページにAssociate Link Builderを使用した商品リンクを入れてみたものの、レイアウトが崩れたりグーグルサーチコンソールにエラーが表示されたりして最初はかなり大変でした。
- タグ「amp-img」の属性「srcset」に URL がありません。
- タグ「amp-img」の属性「src」に URL がありません。
こちらのAMPエラーは、商品リンクに画像が設定されていない場合に起きるのですが、コードを挿入した当時はイメージ画像が設定されていても、商品販売側が設定変更するとこの様に警告されます。
商品リンクのレイアウトが崩れる問題は、Associate Link Builderのテンプレートで設定したCSSはAMPページに適用されないので、single-amp.phpファイルに直接記述することで解決しました。
Associate Link Builderのバージョンアップ後に、何故かプラグインに設定したテンプレートのCSSが消えてしまい、ページにelement.scriptが勝手に挿入され余計な空白ができるようになりました。
そこはAssociate Link Builderの使用しているテンプレートにCSSを追加することで解決しましたが、AMPページに影響しないという思い込みがあり、解決するまでかなりの時間がかかりました。
AMP自動広告に自力で対応
AMP対応有料テーマTHE THORにAMP自動広告を表示させるべく、検索した情報を頼りに色々設定してみましたが、いつまでも反映されないのでAMP化を１ヶ月近く見送りました。
全アイキャッチの差し替えや商品リンクの問題を解消させるためにかなりの時間を要したのもありますが、まさかAMP自動広告の対応で時間をとられるとはテーマ購入時には予想していませんでした。
PCや通常のスマートフォンページに表示される自動広告なら、テーマカスタマイズの高度な設定にある自由入力エリアにAdsenseのコードを入れれば反映されますが、AMP自動広告は反映されません。
AMPテストページで確認できるAMP HTMLのソースや、通常のアドレスに?type=AMPを追加して表示されたページのソースを確認しても、自由入力エリアに追加したコードは含まれていないのがわかります。
どうやら、THE THORの高度な設定の自由入力エリアは、PCや非AMPモバイルページ専用のもので、AMPのページには反映されない仕様らしいので、single-amp.phpに直接記述することにしました。
THE THORの機能説明に非AMP専用と入れるか、AMP対応テーマを謳う以上はAMPページ用の自由入力エリアがあるべきだと思いますが、テーマ購入当時のバージョンにはありませんでした。
AMP自動広告の場合はsingle-amp.phpの</head>真上にステップ２のコードを記述し、ステップ３のコードを<body <?php body_class(); ?>>の下に追加しました。
最近になり自動広告の仕様が変更され、もしかすると同じコードを埋め込むことで通常ページとAMP両方に自動広告が表示されるかもしれませんが、検証していませんので現時点では不明です。
AMP化の目的を明確に
記事数の少ないサイトであれば、画像の修正やショートコードの差し替えが少ないのでAMPに対応したテーマを購入するのは構いませんが、ボリュームが多く収益の高いサイトを運用する方は、よく考えてからテーマを購入してください。
ボリュームの多いサイトをAMP仕様に変更するのは、根気だけでなくコードの書き換えも必要になるだけでなく、テーマを変更することでアクセスが劇的に減少することがあります。
一時的に収益が減るだけであれば我慢できるかもしれませんが、一度落ちたアクセス数が必ず復活するとは限りませんので、サイトをAMP化する目的を明確にしてからの方がおすすめです。
幸いことに、このサイトのAMP化をすることで、無効な商品リンクの整理ができましたし、質の低い記事の見直しを決意することができたので、THE THORのテーマを購入して良かったと思います。
ただ、サイトを真にAMP化をするにはCSSやPHPをカスタマイズする知識や検証力が必要なので、ソースコードを読めない人はAMPを無効にすることをおすすめします。
THE THORに限らず、有料テーマの販売目的で大絶賛している解説サイトがいくつもありますが、明らかに本番環境で実践していない説明もあるので、全ての情報を鵜呑みにしてはいけません。
お金を出す以上、良い情報だけでなく悪い情報にも目を通して有料テーマを購入しないと、失敗したり後悔するので必ず不具合やクレームなどの情報も検索することをおすすめします。
THE THOR変更後に発生したエラー
最後に、THE THORのAMP機能を有効にした際に、Google Search Consoleに発生したエラーや警告メッセージと、その対処方法についていくつか紹介することにします。
- 拡張機能「amp-auto-ads」がこのページで検出されましたが、使用されていません。この拡張機能を削除してください。
- 推奨サイズより大きい画像を指定してください。
- 404ページの増加。
拡張機能amp-auto-adsを削除してくださいの警告メッセージはTHE THORの問題ではなく、AMP自動広告を設定するためにsingle-amp.phpにAdsenseコードを追加したことにより発生しました。
AMP自動広告のステップ２とステップ３のコードを追加する必要があるのに対し、動作確認のためにステップ２のコードのみsingle-amp.phpに追加したのが原因です。
single-amp.phpファイルのbodyタグ直下に、Google AdsenseのAMP自動広告ステップ３のコードを追記することで解消されますが、テーマ側でAMP自動広告を設定できるように改善されることを期待します。
推奨サイズより大きい画像を指定してくださいの警告メッセージは、アイキャッチの画像サイズを横1,200px縦675pxにすることで解消しますので、地道に画像のリサイズと差し替えをしてください。
今回発生した404ページの増加はAMPと関係あるものではなく、関連記事のショートコードをフルパスで設定せずに、記事IDを指定したことにより発生したトラブルです。
以前使用していたアルバトロスのテーマが、関連記事を設定する際に記事IDを入力したので、試しにTHE THORでも同じく記事IDを設定したのですが、一部の記事で正常に動作していたのでURLを入力しませんでした。
そこでSearch Regexでアドレスを修正したのですが、置換ミスで不要な記号まで追加してしまい不具合が発生したので、バックアップや十分なテストをした上でショートコードを置換してください。
最後に、THE THORのテーマはデザインが良く機能が豊富で総合的に満足していますが、サポートがボランティア頼りなことや回答も親切とは言えないので、初心者におすすめなテーマとは言えません。
現時点のTHE THORは、少なくとも自分でGoogle検索してCSSやPHPなどの修正をできる人に向いているテーマだと思うので、サイトを公開したばかりの初心者は急いで購入する必要はありません。
今後のバージョンアップでAMP自動広告の機能追加がされたり、商品リンクプラグインのAMP対応など環境が整備されてからでも遅くはないと思いますので、それまでアイキャッチの最適化をして待つのがおすすめです。