【AMPの問題】AMPコンポーネントの「script」タグがありません

PC,WordPress

AMPのエラー警告

サイトを運営していると、たまにGoogle先生のチェックに引っかかります。今回は上記のようにエラーメッセージが届いた際に対処したことをメモしました。

スポンサーリンク

不具合のある場所の確認

まずはどの部分に不具合があるのかを確かめます。先ほどのメールにあった「AMPの問題を解決する」ボタンを押すと、下のような画面になります。

AMPのエラー警告2

その画面を下へスクロールすると、エラーのあるページが載っています。どれでもいいので、URLをクリックしてみて下さい。

AMPのエラー警告3

すると、画面の右側にエラーのある箇所が出て来ます。何個かで確認しましたが、今回は全てのページに同じエラーが出ていました。

AMPのエラー警告4

ということで、ここを直せば解決するはずです。

amp-link-rewriterを訂正する

対応方法については、下記ページに詳細が書いてありました。

https://amp.dev/ja/documentation/components/amp-link-rewriter/?format=websites

英語のページですが、要は

<script async custom-element="amp-link-rewriter" src="https://cdn.ampproject.org/v0/amp-link-rewriter-0.1.js`"></script>

というコードを<head>タグにある<script async src="https://cdn.ampproject.org/v0.js"></script>より前に記述すればOKとのことです。

そこで、WordPressの「Luxeritas」→「子テーマの編集」→「headタグ」へと進み、

<script async custom-element="amp-link-rewriter" src="https://cdn.ampproject.org/v0/amp-link-rewriter-0.1.js`"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>

と追記します。

あとは、最初のページにある「修正を検証」ボタンを押して、検証に入ってくれるはず…なのですが、なぜがコードがうまく反映されておらず、検証へ入ってくれませんでした。

AMPのエラー警告2

色々と調べたのですがうまくいきませんので、<amp-link-rewriter layout="nodisplay">自体が何のために書いてあるのかを確認し、できれば削除することを検討しました。

amp-link-rewriterを削除する

結論を言うと、このコードはバリューコマースのLinkSwichを設定するために追記したもので、下記のようになります。

<amp-link-rewriter layout="nodisplay">
<script type="application/json">
~~~中略~~~
</script>
</amp-link-rewriter>

色々とありまして、設定を途中でやめてしまったのでエラーになったものでした。お恥ずかしい限りです。

このコードはWordPressの「Luxeritas」→「子テーマの編集」→ 「AMP HTML(body)」というところに書いたので、ここを削除しました。

そして再度「修正を検証」をすると…ちゃんと検証を開始してくれました。

AMPのエラー警告5

その後、無事に解決されたとGoogleから通知が来ました。今回は私の場合の対応ですが、同じようなエラーのメールが来た方は、参考にして下さい。

PC,WordPress

Posted by 管理人