WordPress備忘録 AMPエラー
サイトをAMP化したところ、エラーページが続出しました。
その対処法についてです。
【AMPについて】
AMPとはAccelerated Mobile Pagesの略です。
現時点では、ウェブコンテンツの読み込みを、一瞬で完了させるために設計された、オープンソースとしての認識が高いです。
ただ、読み込み速度のアップだけではありません。
ウェブコンテンツ全体の最適化を進めるオープンソースプロジェクトです。
今後も色々な提案がされていくことが予想されます。
［AMPの利点］
ウェブページ上のコンテンツが一瞬で表示される。
これはやっぱり利点です。
検索したウェブページの表示が遅い、時間がかかるとなると、やっぱり他の検索ページへ移動したくなります。
AMPサイトが増えてくると、AMPに適応されていないページの表示の遅さが、より際立ってくると思われます。
スポンサーの意向を重視すれば、Googleが、AMP普及の推進を謳うのもやむなしといったところでしょう。
［AMP化］
私が使っているデザインテーマのLuxeritasには、そのカスタマイザーにAMPのタブがあります。
そこでサイト全体のAMP化が簡単にできます。
投稿画面では、そのページだけをAMP無効化ができます。
AMPは色々制約が多いので、特定のページをAMP無効化ができるのは便利です。
スポンサーリンク
【AMPエラー】
わたしは、無料ブログサービスのbloggerから移行してきたばかりです。
ウェブ上で動く、プラグインやJavascriptといった高度なコンテンツは使用していません。
なので、気楽にサイト全体をAMP化しました。
すると、Google search consoleの拡張欄にあるAMPで、エラーページの検出が日毎に増えていきました。
以下はその対処法です。
-
Search Consoleのいいところは、
エラーページのどこがエラーなのかを表示してくれるところです。
問題のあるページのアドレスをクリックすると、そのページのソースを表示してくれます。
（ページのソースをみると、そのページがAMP対応用に書き換えてあることがわかります。）
そのソースで問題になっている部分を、背景色を付けて指摘します。
［iframe］
Youtubeの動画を貼るときに使われるタグです。
このタグは、サウンドクラウドにアップした音源を、ワードプレスに貼り付けるときにも使われていました。
しかし、この場合のiframeに問題がありました。
Youtubeの場合 width と heighe の数字がpx指定されています。
サウンドクラウドの場合 widthの数字が％で指定されています。
%指定がAMPではエラーとなるようです。
サウンドクラウドを貼り付けているページはAMP無効化にしました。
［img］
画像の大きさ
AMPは画像の大きさを要求します。
横幅が1200px以上でないといけません。
私はほとんどの画像を横幅640にしていました。
フリーの画像を借りて表示させていたページは、サイズの大きい画像を用意しないといけません。
これらのページもAMPを無効にしました。
ただ、掲載している全画像を1200px以上にしないといけないということではないようです。
アイキャッチ画像の横幅が1200px以上になってれば、AMPエラーにならないようです。（今の処）
img
グーグルフォトからbloggerに画像をリンクさせていた場合です。
この場合のimgタグもAMPエラーになります。
この件に関しては、ワードプレスのURLリンク方法に沿って全部リンクし直しました。
この作業が大変でした。
スポンサーリンク
【まとめ】
以下の画像はSearch ConsoleのAMPエラーの結果です。
対処したおかげでエラーが減っていってるのがわかります。
が、未だにエラーと警告が1ページづつあります。
その警告ページも「公開中のバーションをテスト」をクリックすると・・・・
有効なAMPページと出ます。
あまり気にしなくていいのかもしれません。
クロールエラーのページも同様の結果でした。
私の場合、AMPエラーのほとんどが画像に関するものでした。
大きな画像を挿入していけば、AMPページとして、ほとんどが使えそうなのがよかったです。
もし、プラグインをたくさん導入していた場合、私にはAMPがNGなプラグインの特定もできないでしょう
そのことを思うと背筋がゾッとしました(^m^;)