Google Search Consoleで指摘されたAMPエラーの対処メモ

スポンサーリンク

タイトル通りですが、Googleから珍しくAMPエラーのメールが届いたので対処した内容を備忘メモ。

スポンサーリンク

AMPって?

AMP(Accelerated Mobile Pages)は、主にGoogleが推進しているモバイル向けページを高速表示させるための手法、というかフレームワークみたいなもの。(厳密には違うかもなので詳しくは下記サイトへ)

How AMP works

エラーを調べる

エラー「許可されていない属性または属性値が HMTL タグにあります。」

HMTLって…誤字だよね?と軽い違和感を覚えつつ、具体的にどこが原因なのかをGoogle Search Consoleのエラー画面から確認。

エラーの見つかったURLがズラズラと並んでいるリストが表示されているので、そこにカーソルを合わせると出てくる虫眼鏡(下の画像)をクリック。

この画面で表示されているエラー(タイトルは「問題の件数」)をクリックすると、指摘箇所が色付けされたHTMLのソースがひょっこり表示されて、エラーの理由も教えてくれる。他の箇所でも同様に問題のHTMLソースを表示してくれるのに、エラーの理由まで表示してくれるのはこの画面だけなので要注意。うーん、何だか不思議、というか不親切な気もする。

 属性「charset」はタグ「amphtml engine v0.js script」で使用できません

どうもエラーはページ内に2箇所あって、どちらもcharset属性を付けているのが原因っぽい。

<script type='text/javascript' src='https://cdn.ampproject.org/v0.js' async charset='UTF-8'></script>
<script type='text/javascript' src='https://cdn.ampproject.org/v0/amp-twitter-0.1.js' async charset='UTF-8' custom-element="amp-twitter"></script>

エラーを対処する

AMP対応にはWordpressのテーマ Cocoon の機能を使わせて貰っているので、Cocoonの不具合かな?と検索してみたところ、特にそのような情報は無し。

ふと、Wordpressが重たいのでレスポンス高速化のためにfunction.phpに下記コードを追加したのを思い出し、jqueryだけじゃなくてamp用のスクリプトも対象外にしてみる。

if (!(is_admin() )) {
  function add_async_to_enqueue_script( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;       //.js以外は対象外
    if ( strpos( $url, 'jquery.min.js' ) ) return $url;       //'jquery.min.js'は、asyc対象外
    if ( strpos( $url, 'v0.js' ) ) return $url;               //'v0.js'は、asyc対象外
    return "$url' async charset='UTF-8";                      // async属性を付与
  }
  add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

インストール済みプラグインを眺めていると「AMP」という見知らぬプラグインが有効になっているのを発見。「あれ?CocoonでAMP化してるから、これは無効にしても大丈夫なのでは?」ということで無効化。

その後にページを何度か表示してもタグからcharset属性が消えず。ふと目に入ったCocoon設定の「キャッシュ削除」を実行すると、charset属性が無事に消えたので多分オッケー。

修正されたか確認する

ここまで出来たらGoogleに修正確認の依頼を出せばオッケーのハズですが、念のためGoogle Search Console画面から検査。(後で分かったけど検査依頼時に実行されるので必要なかったっぽい)

さっきエラーを確認した画面の右上にある「公開URLをテスト」ボタンをクリック。検査に通れば赤いアイコンが緑に更新されればオッケー。あとはGoogleに修正を確認してもらう。(確認には数日〜数週間かかるようなので気長に待つ)

まとめ

頻繁にテーマが更新されることもあって、Cocoonを疑ったけど違いました、ゴメンナサイ。(頻繁な更新ありがとうございます)
というのと、Cocoonを導入することで不要になったプラグイン、他にもまだありそうなため、 WordPressの利用当初にインストールしたプラグインを一度整理した方が良いのかも。

調べる時に参考にさせてもらったサイト

AMP
Accelerated Mobile Pages は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトです。 Cocoonは、この高速化機能を利用して、モバイル用にサイトを高速表示対応することができます。
Googleから「AMP」の問題が新たに検出されました~対処法2パターン
Googleサーチコンソールから、「AMP」の問題が新たに検出されました。と通知がきたときの対処法を解説。「AMP」のエラー通知でも使えるやり方と2パターン解説しています。概要は、プラグイン「Contact Form 7」の設定です。

AMPの有効チェックは下記サイトでも

The AMP Validator
AMP HTML Project Web Validator. Tests Accelerated Mobile Pages for valid markup.

 

コメント