今回は、THE THORのAMP機能設定で生じたGoogleサーチコンソールのAMPエラーについてです。実際に通知されたエラーの内容と原因を解説しています。その前に、AMPとは何か？THE THORでの設定方法についても書いています。
AMPとは？
AMPとは、Accelerated Mobile Pageの略です。かんたんに言うと、読み込み速度を速めたモバイルページのことです。これにより、スマホなどでページを閲覧する時のページ表示速度が向上します。
2015年にユーザーエクスペリエンス向上のため、GoogleとTwitterが共同で立ち上げたプロジェクトです。
Googleの調査でも明らかな通り、ページ読み込みに3秒以上かかると半数以上の人がそのページを離脱します。モバイルからのネット接続が一番多い今、ページ読み込み速度を向上させることはSEO対策の観点で非常に重要ですね。
THE THORでのAMP機能設定
THE THORでは、AMP機能をクリック一つで実装できます。数あるWordPressのテーマの中でもなかなかない機能です。
AMP機能の設定方法
外観＞カスタマイズ＞AMP設定[THE] ＞AMP機能設定 で設定できます。
AMP機能設定では、以下の3つの設定をします。
- AMPページを表示するか選択
- AMPページで検索ボックスを表示するか選択
- AMPページで通常ページへのボタンを設置するか選択
どれも「表示」か「非表示(default)」かを選択するだけです。つまり、ワンクリックでAMP設定ができてしまうのです。
AMPページを表示するか選択
まずはAMPページを表示するかしないかです。
「表示」した場合
画像の通り、AMPページ表示であることを示すマークがアドレスバーに表示されます。
表示しない場合
画像のように通常ページとして表示されます。アドレスバーには通常ページのSSL接続であることを示す鍵マークが表示されています。
AMPページで検索ボックスを表示するか選択
ページ上部に検索ボックスを表示するかしないかの選択です。
AMPページで通常ページへのボタンを設置するか選択
「表示」を選択すると、画像のように、通常ページへ遷移するリンクボタンが表示されます。この設定をしておくと、万が一AMPページがうまく表示されないことがあっても離脱を最小限に抑えられるでしょう。
サーチコンソールで通知されたAMPエラー
THE THORでAMP設定をして数日後、GoogleサーチコンソールにAMPエラーの通知が届きました。
サイドメニュー＞拡張＞AMP で確認できます。
上の図からエラーが8ページで生じており、1件の問題が関係していることが分かります。グラフから、最も多い時には9ページでエラーが出ていたことも確認できます。
エラーの原因
「詳細」の部分を見ていくと、エラーの「型」が表示されています。
「許可されていない属性または属性値がHTMLタグにあります」
この部分をクリックすると、さらに詳細なエラー情報が分かります。
エラーが出ている8ページすべてのURLとクロールされた日付が分かります。すべてAMPページであることも確認できますね。
さらに、一つ一つのURLをクリックするとエラーの具体的な情報が表示されます。
上の画像の通り、インスタンスの部分に詳細なエラーの原因とエラー件数が表示されます。また、該当する部分のHTMLがハイライトされています。
8ページ中、エラーの原因は以下の4つでした。
- 属性「loading」はタグ「amp-img」で使用できません。
- 属性「security」はタグ「amp-iframe」で使用できません。
- 属性「marginwidth」はタグ「amp-iframe」で使用できません。
- 属性「marginheight」はタグ「amp-iframe」で使用できません。
エラーが出たタグ
amp-img
画像埋め込み要素：ページ内に画像を埋め込む
amp-iframe
インラインフレーム要素：ページに他のページを埋め込む
このように、画像などの埋め込みに関連したタグが影響していることが分かりました。
原因はサイトカードの画像！
エラーに該当する部分のHTMLを調べていくと、共通しているのはサイトカードだということが分かりました。
画像の通り、当ブログでは内部リンクを見やすく表示させるサイトカードを、関連記事を紹介するために設置しています。このサイトカードの画像にエラーが出ていました。
さらに調べていくと、WordPress5.9では遅延読み込み（LazyLoad）をデフォルトで導入してくれるのですが、その際にAMPでは使ってはいけない属性をつけてしまうことが原因であることが分かりました。
THE THORでは、関連記事などのサイトカード（内部リンク）やブログカード（外部リンク）をショートコードでかんたんに設置できます。そのカード内に設置したサムネイル画像を遅延読み込みするためにWordPressが挿入するHTMLに、AMPでは使ってはいけない属性が含まれているということなのです。
しかし…
Googleなどの検索エンジンに対するSEO対策として大切な遅延読み込みのための機能が、Googleが推奨するAMPページを表示させる際にエラーとなるとは…悲しい現実です。
まとめ
いかがでしたか。AMPエラーの原因は、関連記事のカード内にあるサムネイル画像につく属性でした。しかも、WordPressのデフォルトの便利機能がAMPページの規則に抵触するという、なんとも残念な原因です。AMPも遅延読み込みもユーザービリティを考慮しての機能なのに。。。
次回は、このAMPエラーを解消するために実際に行った対処方法をご紹介します。実際エラーはすべて消えました！functions.phpに追記する方法ですが、phpに詳しくなくても、THE THORのカスタマイズからかんたんにできる方法をご紹介します。では、次回もお楽しみに！