前ページでは、Cocoonテーマ変更時の自分なりの手順を備忘録として書きましたが、このページではAMPページのチェックやその他のチェック事項を備忘録として綴ります。
AMPページのチェック
当ブログでは通常ページの他、モバイル端末用にAMPページ対応しています。
よって、そのチェックおよびメンテナンスもしなければなりません。
これも、WordPressテーマを変更したことによって、いろいろ苦戦しました。
AMPページについて
AMPページはまだまだあまり認知されていないようですが、当ブログでは２～３年前には導入していました。
AMPとは、Accelerated Mobile Pages の略で、モバイル表示を高速化するためのHTMLフレームワークだそうで、詳細の公式ページはこちらです。
2015年に誕生し、2016年頃から使われるようになりました。
スマホでGoogle検索すると、下図の様なロゴが表示されるとAMP対応しているサイトです。
（※パソコンで検索しても出ません。スマホのみです。）
モバイルGoogle検索結果によるAMPマーク表示
ちょっと小さくて分かり難いかも知れません。知りたい方は公式ページを見ればすぐ分かります。
そう言えば、電子工作やプログラミングHow to界隈のモバイル検索結果を見ると、AMP対応しているサイトはあまり見かけませんね。
まぁ、AMP対応したからと言って、検索順位が上がるとは言い難いですし、まだまだ不便なことが多いので、しばらくはAMP化を急ぐ必要も無いと思います。
AMP対応すると、GoogleやBingなどでは外部の専用サーバーにキャッシュされ、更に高速表示されるようになります。
キャッシュされると、元のサイトのアドレスとは異なるURLとなって検索結果に表示されます。
例えば、当ブログの以下のAMP記事URLがあります。
https://www.mgo-tec.com/arduino-core-esp32-install?amp=1
それが、AMPキャッシュに登録されると、検索結果には以下のようなURLになります。
https://www.google.co.jp/amp/s/www.mgo-tec.com/arduino-core-esp32-install%3famp=1
これは変に解釈すると、「なりすまし」サイトとか、コピーサイトのように思われるかもしれませんね。
しかし、れっきとしたGoogleにキャッシュされた私のAMPサイトです。
AMPサイトというものを知らない方々にとっては勘違いされやすいですね。
この辺がAMPがあまり普及しない要因かも知れません。
（※実は、Cocoonテーマは独自でAMPキャッシュしていて、これがAMPサイトを修正する時に結構ハマリポイントです。これについては後で詳しく述べます。）
サイトのAMP化については、Googleが通知連絡で散々推奨して来たため、当ブログでも早めに対応しましたが、始まった当初は殆ど使い物にならないくらい表示が崩れまくりでしたし、CSSも殆ど継承できず、ページネーション（ページ分割）もできなかったので、私は何度もAMP化を試しては辞めることを繰り返していました。
でも、最近、WordPressのGoogle公式AMPプラグインを使うと、通常ページを自動でAMPページに変換してくれて、しかも通常ページとほとんど同じ見た目になっていて、とても良い感じに進化しています。
ただ、ソースコードのシンタックスハイライト表示が通常ページのように表示されないのが残念ですね。
私の様なプログラミングソースコードを表示させることが多い場合、AMP化を敬遠するのもよくわかります。
また、JavaScriptなどの埋め込み要素はAMPに変換してくれないので、そういう記事はAMP非対応にチェックを入れて回避しました。
このブログでは、通常ページとAMPページを共存させていますが、Googleの推奨では全てAMPページにした方が良いそうです。
ですが、私の場合はスクリプトを置く場合もあるし、ソースコードを載せることがとても多いので、しばらくは通常ページとAMPページを共存させるしかないと思っています。
さて、AMP化するためのプラグインの使用についてですが、幸いなことに、Cocoonテーマ自体がAMP対応していたので、Google公式のAMPプラグインは不要になりました。
正直なところ、これに関してはGoogle公式の方が優れている気がしますが、今の所問題無いので、CocoonのAMP化で一本化することにしました。
CocoonのAMPページURL末尾は「?amp=1」だった
Google公式AMPプラグインの場合、AMPページのURLは通常ページに ?amp を加えるだけで済みましたが、Cocoonの場合は、?amp=1 になっていました。
また、自動でAMPページがインデックスされるようにタグが組まれていたので、ヘッダ部分に新たにコードを追加したり、リダイレクトさせるような対策は不要でした。
ただ、AMPページのURLが変わったので、早めにGoogleにサイトマップを送信して、クローラが巡回するように促す必要がありました。
AMPページのページネーションリンクは非AMPという問題
AMPページの移行は特に問題無かったのですが、ページネーション（ページ分割）している記事は、次のページへのリンクが非AMPになっていました。
これはCocoonのフォーラムで問題点を指摘する案件かと思ったのですが、2019年3月にGoogleがページネーションのHTMLメタタグのサポートを終了したので、私の勝手な推測として、AMPのページネーションは意図的に外されたのではないかと考えました。
今の所、当方の体制に大きな影響は無いので、しばらくこのまま様子を見たいと思います。
AMPページの「コメントを書き込む」ボタンを常時展開したかった
AMPページの「コメントを書き込む」ボタンを押すと、非AMPページに飛んでしまいます。
それは悪くはないのですが、せっかくAMPページでreCAPTCHAを機能させようとプログラミングしたのに、それがうまく使えませんでした。
「コメントを書き込む」ボタンではなく、通常ページと同様に最初から展開したままにしておく機能が個人的に欲しかったですね。
通常ページにはその設定があったのですが、AMPページには対応していないようでした。
AMPページの修正確認は必ずキャッシュを削除すること
先ほども述べたように、AMPページは外部のサーバーにキャッシュされますが、それ以前にCocoonテーマ自体でAMPページをキャッシュしているというところが要注意です。
AMPページへの自動変換にそれなりの計算時間がかかるという理由のためらしいです。
ということは、AMPページを修正したら直ぐには反映されないことを頭に入れておかねばなりません。これは、ブラウザのキャッシュではなく、自分のレンタルサーバーのキャッシュでも無いということろが要注意です。
私は最初、このことを知らずに、AMPページを修正したらサーバーキャッシュ削除して、ブラウザキャッシュ削除しましたが、全く反映されておらず、かなりハマりました。
特に、Google Search ConsoleにAMPエラー通知が沢山届いていて、それを１つずつ処理していったわけですが、コードを何度修正しても反映されていなくて、かなり長い間悩まされました。
Cocoonの場合はこちらのマニュアルにもあるように、独自のキャッシュを設けていますので、Cocoon管理画面のAMPキャッシュ削除をすればAMPページの修正が直ぐに反映されます。
ただ、Google検索結果のキャッシュはしばらく待たないと反映されないことは頭に入れておかねばなりません。
AMPページのアドセンス広告タグは別途準備必要？
Cocoonの場合は、AMPを有効にすると、ヘッダ付近のアドセンス共通コードが自動で挿入されるようになっていました。
しかし、body開始タグ直下の以下のタグを見てみると、
<amp-auto-ads type="adsense" data-ad-client=""></amp-auto-ads>
となっていて、data-ad-clientのところのアドセンスIDが空でした。
ここにIDを自動挿入するようにする為には、Cocoon設定→「広告」→「アドセンス設定」→「広告コード」のところに、アドセンスのディスプレイ広告ユニットタグを入力しておく必要がありました。
そのタグからIDを抽出してAMPタグに自動入力する仕組みのようです。
これが分かるまでにかなりハマりましたね。
WP-appboxプラグインで、スマホアプリのリンクカードはAMPエラーになる
スマホアプリを記事中で紹介する時に、Google PlayやApp Storeのリンクカードを使いますが、私の場合、WP-appboxプラグインに頼っています。
ただ、これはAMPページでエラーになるので、結局、アプリリンクカードを使っているページはAMPを解除しました。
この辺もAMP対応を避けるサイトが多い理由なのかも知れませんね。
実は、あるCSSを追加すると、AMPページでもOKという情報をネットで見たのですが、今後のメンテナンス性を考えて、今回は見送ることにしました。
まぁ、アプリのリンクカードは普通のテキストリンクでもいいのかも知れませんが…。
スクリプトを使ったページはAMP除外とした
JavaScriptを加えた投稿ページはAMP自動変換で無視されますので、その記事ページは個別にAMPを解除しました。
これもAMPページを敬遠する人が多い原因と思います。
以上が今回行った主なAMPページのチェックですが、テーマ変更するとAMPページの修正が結構面倒ですね。
最初からAMPページのみのサイトを作っていれば苦労しなかったかも知れません。
でも、AMPはまだまだ発展途上ですので様子見ですね。
欲を言えば、ソースコードのシンタックスハイライト表示だけでも対応してもらいたいですね。
その他チェックしたこと
以上の他に、まだまだチェックしたことがあるので、それを紹介します。
Googleアナリティクスのタグ対策
これはCocoon設定の「アクセス解析・認証」のところにトラッキングIDを入力するくらいで、全てOKでした。
旧テーマのように子テーマのヘッダファイルにタグを挿入する必要もありませんでした。
AMPページも自動で設定されるようになっていて、問題無しでした。
画像のLazy Load（遅延読み込み）対応
画像のLazy Load（遅延読み込み）は、先ほども少々述べましたが、以前、こちらの記事で紹介したように、Intersection Observerというものです。
簡単に言うと、サイトを表示させたときに、見える範囲の画像は即時読み込んで、見えない範囲の画像は読み込まずに、スクロールした時に読み込ませる仕組みです。
これにより、画像が沢山貼ってある長い記事でも、ブラウザのページレンダリングの速度に影響を与えずに済みます。
これは最近ほとんどのWebサイトで実装されていると思われます。
無限スクロールサイトなどは恐らくこの類のテクニックを使っているように思われます。
2019年初めの頃は、自分自身でコードを作って実装しなければいけませんでしたが、最近はChrome、Edge、FireFoxブラウザが標準対応するようになりました。
現在はimg要素にloading="lazy"という属性を加えるだけで実装できるようになり、超お手軽になりました。（※Safariは残念ながらまだ非対応です。2021/5月現在）
そして、Lazy LoadはWordPressも5.5から標準装備し、Cocoonテーマも設定すれば対応可能になりました。
そんなこんなですが、私の場合、本文中の画像貼り付けは、旧テーマで全て自前のショートコードで実装していたため、Cocoonに変わってもそのままショートコードを使い続けなければならなかったという状態です。
翌々はWordPress標準の画像埋め込みに任せたいと思っています。
因みに、AMPページの場合、仕様でLazy Load対応になっているようなので、特にこちらで何か対策をする必要はありませんでした。
テーマ自身の自動変換に全て一任です。
YouTube埋め込み動画のLazy Load（遅延読み込み）について
WordPress 5.7からiframe要素もLazy Load（遅延読み込み）が標準対応になったので、YouTube動画埋め込みにも嬉しい機能です。
iframe要素のLazy Loadもimg要素と同様、loading="lazy"という属性を加えるだけで実装できます。（※Safariは残念ながらまだ非対応です。2021/5月現在）
これも私の場合は旧テーマから自作の関数でショートコード貼り付けにしていました。
YouTube埋め込み動画は、ページレンダリング時間にかなり影響されるので、Lazy Loadは必須ですね。Search Consoleの評価にモロに影響してくるところです。
robots.txtはどこ？
そう言えば、かなり以前、サーバーにrobots.txtを設置したことがありました。
しばらく触っていなかったので、テーマを変えたことを機に自分のサーバーでそのファイルを探しました。
しかし、全然見当たりません。
でも、robots.txtテスターで試すと、ちゃんとrobot.txtは存在していました。
実は、XML sitemapプラグインに仮想robots.txtというものが生成されるようになっていました。
よって、新たにファイルを自作する必要は無かったのです。
ただ、このファイルを探し出すだけで、結構時間を取られてしまいましたね。
＜pre＞タグの中の半角＜＞記号エラーが出たので実体参照の<と>に変更した
旧テーマを使っていた時にはエラーが無かったはずですが、Cocoonに変更したら、preタグの中にある半角特殊記号＜＞がエラーになっているという通知がSearch Consoleに届きました。
このエラーはCocoon特有のものでは無くて、以前のテーマでもエラーだったはずが、ただ単にGoogleクローラが巡回していなかっただけなのかも知れません。
そう言えば、以前もそんなことがあったような気がしたので、preタグの中の半角＜＞記号は、文字実体参照の<と>に変更しました。
何か少し疑問ですが、修正箇所が少なかったのでヨシとします。
では、次ページではGoogleアドセンス広告のチェックを紹介して行きます。
いろいろ苦戦しました。
コメント