WordPress備忘録 AMPエラー

2019年2月6日日常の理系

サイトを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^;)

スポンサーリンク