久しぶりにサーチコンソールをのぞいたら、真っ赤なエラーの山が築かれていました。
メッセージをみるとAMPエラー、しかも、その数なんと53ページもある！
AMPとは？何だっけ！
AMP、ネットで時々見かけていたけど、ややこしそうなのでスルーしてました。
でも、エラーが検出されている以上は、気になるので、さっそく調べて修正に取り掛かることにしました。
今回は、AMPエラーに対処した修正法を記事にしています。
同じエラーの人の参考になれば幸甚です。
AMPとは？
「AMP」とは、モバイルでページの閲覧を高速化する機能のことです。
Wikipediaには次のように説明されています。
Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである。
AMPを使用したウェブページの閲覧者は、リンクをクリックした後に待ち時間なくページの内容を閲覧することができる。
Googleは、アクセスしたウェブページが低速であると多くのユーザーはそのページの閲覧をやめてしまう、というデータを示しており、ページが高速で表示できることはウェブサイトの制作者にとっても有益である。（参照元：Wikipedia）
つまり、モバイルでサイトページを高速で表示させるプログラム。
AMPに対応しているページは、スマホで検索ページを見た時に右端に「稲光のマーク」が付いているリンクがあります。
こんなマークが付いていればAMP対応ページです。
実際にスマホで表示スピードを比較してみると、AMP対応のページは一瞬で表示されます。
AMP対応のページのURLの最後には「?type=AMP」が付加されます。
こんな風になります。
「https://seniorhobby.net/monooq/?type=AMP」
私のAMPエラーは3種類表示されていた
AMPエラーを抜き出してみると以下の内容でした。
- 指定できるのは、amp-boilerplate と amp-custom の「style」タグのみです
- 許可されていない属性または属性値が HMTL タグにあります
- AMP HTML タグの属性で指定されたレイアウトが無効です
何のことか、サッパリ理解できません。
AMPエラーの内容を調べるには、
表示されたエラーをクリックすると該当ページのURL一覧が表示されます。
次に表示されたURLをクリックするとエラーになっいる記述を確認できます。
ピンクの蛍光ペン様の部分の記述がエラーのようです。
拡大図ですが「<style type=”text/css”>」の記述に問題があるようです。
しかし、サーチコンソールではいま一つ分かりづらいのです。
「AMPテスト」サイトが便利です。
AMPテストのサイトで調べる
AMPが有効に機能しているか調べるとても便利なサイトがあります。
このサイトで、AMPの「有効」、「無効」を調べ、
「無効」の場合、エラーの内容とページの場所を表示してくれます。
私のサイトのAMPエラーは3種類ありました。
AMPテストで調べた結果、AMPエラーの内容を理解しました。
- AMPで使用できない<style type=”text/css”>の記述があります
- 必須属性「height」がタグ「amp-img」にありません
- 属性「border」はタグ「amp-img」で使用できません。
調べる手順を以下に記しておきます。
➀AMPで使用できない<style type=”text/css”>の記述があります
AMPテストにサーチコンソールでエラー指摘されているページをコピペして実行します。
確かに、「有効なAMPページではありません」と表示されます。
エラーページの行数部分をクリックするとページのエラーの箇所が具体的に表示されます。
AMPでは、「<style type=”text/css”>」は使えないようです。
「<style type=”text/css”>」をページから外すことにしました。
しかし、該当ページ内にはエラーになっている「<style type=”text/css”>」の記述が見当たりません。
AMPエラーの記述部分の上は「アフィリエイトコード」が入っています。
心当たりがありました。
サイトにプラグイン「Wp-Insert」を使用していますが、
このプラグインはサイトの全てのページに同じ記述を挿入するものです。
プラグイン「Wp-Insert」が自動的に「<style type=”text/css”>」を付加していることが分かりました。
結論は、プラグイン「Wp-Insert」を停止させることでこのエラーは修正完了です。
次は②の「必須属性「height」がタグ「amp-img」にありません」を修正します。
②必須属性「height」がタグ「amp-img」にありません
「height」属性は、画像の高さを指定するものです。
ホームページに画像を貼り付ける際のhtmlタグで以下の形式です。
<img src=”http://画像のあるURL” alt=”画像の説明” width=”幅” height=”高さ” border=”外枠のありなし” />
「height」は画像の高さを、「width」は画像の横幅を指定します。
AMPエラーは「height」の指定がない、という指摘でしたが、必然的に「width」も指定する必要があります。
画像に属性「height」と属性「width」を指定して、修正完了です。
画像の記述〈img は、AMPでは〈amp
-imgに変換されるようです。
③属性「border」はタグ「amp-img」で使用できません。
AMPでは、「height」属性は必要だが、「border」は使用できないとのこと。
先程の画像を貼り付ける際のhtmlタグで以下の形式で、
<img src=”http://画像のあるURL” alt=”画像の説明” width=”幅” height=”高さ” border=”外枠のありなし” />
ここでの修正部箇所はアフィリエイトコードでした。
画像の外枠を指定する「border」を削除して修正完了。
アフィリエイトコードもAMP対応のコードを用意しているASPもあります。
AMPテストの結果「有効なAMPページです」
修正が終わったら、AMPページが「有効」になったか確認します。
サーチコンソールでは、反映されるまでに時間がかかりますので、AMPテストのサイトを使います。
実際に「有効」が表示されてひと安心です。
約20後にサーチコンソール表示のエラー「0」に
AMPエラーの修正後、約20日後にサーチコンソールのAMPエラーが0となりました。
サイトの修正が10月20日、検証、合格が11月7日。
グーグルの検索エンジンのサイト巡回は18日かかりました。
まとめ
最初はAMPエラーを理解できませんでした。
調べていくうちに色々なことを学び少しだけスキルアップしました。
また、修正してされて「有効」と判定された時は嬉しいものです。
エラーを修正後、検索エンジンが巡回し、サーチコンソールに反映されるまで18日かかりました。
AMPエラーは、グーグルが発するエラーなので放置することはできませんが、
もう少しフレキシブルに対応できないものかと、思いました。