地域とトレンドをつなぐ情報サイト|いいものタウン

【AMPエラー】原因と解決方法|内容による対処方法の考え方

【AMP】Accelerated Mobile Pagesで出るエラーと対処方法のあれこれ

プラグインまたは対応テーマを用いることでサイトのAMP導入自体は容易ですが、導入してもAMP専用環境のため、検証でエラー多発ということも。このページではAMPページで出現するエラーの種類(メッセージ)と解決方法を防備録的に掲載。

AMPを導入したもののエラーだらけで導入を見送る、または放置というケースもあるかもしれませんがエラー内容を理解してエラーを解消しましょう。

AMPページに限りませんがエラーを放置するのはSEOの点からもよくありません。
スポンサーリンク

サーチコンソールでAMPページエラーを確認

AMP化をしているとGoogle Search Console(サーチコンソール※サチコ)メニューに「AMP」の拡張項目が表示されます。

AMP状況についてはこちらをチェック

【AMP】Accelerated Mobile Pagesで出るエラーと対処方法のあれこれ

AMPエラーの確認

【AMP】Accelerated Mobile Pagesで出るエラーと対処方法のあれこれ

このグラフをみると2021年の1月半ばまではエラーなし、以降急激に増えていることが分かります。当サイトの場合の原因は

「テーマ」を変更したから。

1月半ばまではサイト全体を「lightning」を部分的にカスタマイズして運用していましたが、諸事情により以降記事ページ部分については「cocoon」で運用を検証しています。

というわけで以下についてはテーマ「cocoon」+「ligtning」+プラグイン(環境による)でのあれこれした話。

【AMP】Accelerated Mobile Pagesで出るエラーと対処方法のあれこれ

AMPエラーの出る原因

エラー原因は基本的な構文ミスや相性の悪いカスタムページを生成するプラグインを利用していると大量に出る場合あり。

ねこさん
ねこさん
テーマ「cocoon」単体での利用だとエラーは出ないでしょう。

AMPエラーのメッセージ(種類)と解決方法

原因の特定には「AMP テスト」でAMPURLをテストすると原因の特定が容易。
エラー内容解決方法
HTML タグに必須属性がありません。「cocoon」にはもともとフキダシ機能がありますが、当サイトで元々利用していた仕組みを継続。単純にイメージのsrcを設定していないミスだったので設定するころで回避。
AMP HTML タグの属性で指定されたレイアウトが無効です。今回のケースでは「height」に「auto」が設定されていたことが原因だったので変更、修正。
AMP HTML タグにレイアウト属性がありません。不完全なレイアウト属性が指定されていたため、記事ページをリライト。ビルダーで生成していたため、生テキストで編集。
許可されていないタグがあります。例)テーブル内での「summary」クラスはNG→削除。
許可されていない属性または属性値が HMTL タグにあります。コンタクトフォーム7などでの「form」が弾かれるので該当ページについては「AMPを生成しない」ことで対応、またはフォームを外すか。
エラー内容「属性「action」はタグ「form」で使用できません。」埋め込みのコンタクトフォームショートコードを外す、またはページでAMPを生成しない
エラー内容「属性「summary」はタグ「table」で使用できません。」該当ページの「table」から属性「summary」を削除
このページには AMP コンポーネントの「script」タグが必要ですが、このタグがありません。Youtube動画を埋め込む場合にAMPでは専用のスクリプトを読み込む必要があります。「cocoon」では投稿、固定ページ内の情報を取得した後、埋め込みがあれば挿入、無い場合は該当スクリプトが吐き出されない仕組みになっていましたが、関連ページ等に出力される「Featured Video Plus」利用記事については検索外だったようなので強制的に専用のスクリプトを挿入することで対応。(もとのヘッダーからは該当箇所を削除)

エラーが出たものの直ってしまったエラー

過去にはエラー表示されたもののキャッシュやメンテナンスで自然と解消されてしまったエラー。また発生すれば解決方法を追記。
エラー内容解決方法
タグ「script type=application/ld+json」内のテキストに「html comments」が含まれていますが、これは許可されていません。
タグ「style[amp-keyframes]」の親タグは「body」である必要があります。
タグ「style[amp-keyframes]」の親タグは「body」である必要があります。
タグ「style[amp-keyframes]」を指定する場合は、タグ「body」の最後の子にする必要があります。
タグ「style amp-custom」で指定された作成者のスタイルシートが長すぎます。上限は 75000 バイトです。記事内部の装飾の見直し。
タグ「iframe」を同等の「amp-iframe」タグに置き換えてください。
タグ「style amp-custom」の CSS 構文エラーです。
タグ「html」の親タグは「!doctype」である必要があります。
タグ「img」を同等の「amp-img」タグに置き換えてください。
タグ「amp-iframe」に必須属性がありません。
タグ「a」の属性「href」で不正な形式の URL が検出されました。
AMP コンポーネントの「script」タグがありますが、使用されていません。
このドキュメントに、必須の AMP HTML タグがありません。
ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました。
指定できるのは、amp-boilerplate と amp-custom の「style」タグのみです(ドキュメント ヘッドにのみ指定できます)。
カスタム JavaScript は使用できません。
本文でのみ使用できるタグやテキストが本文以外で検出されました。
クロールエラー
サーバーエラー(5xx)
URL が見つかりませんでした(404)
参照している AMP URL は AMP ではありません
URL に noindex が指定されています

AMP化する理由

SEOの点から言えば「コンテンツの内容ありき」の上で読み込みスピードが重要なのですが、AMP化にあたって敷居が高い、クセがあることで導入は見送られているケースも多いでしょう。

当サイトではユーザビリティ向上のひとつとして当サイトでは2021年現在、記事ページにAMP(Accelerated Mobile Pages)を取り入れています。

サーバーによっては導入する必要が無かったりもしますが、読み込みが爆速になるAMPは負荷分散(Googleのサーバーからページのキャッシュが提供される)の点からも導入しています。

さすがに通常ページで同時アクセス1万人超えはヤバい

AMPページでなければ、おそらく高負荷でサイトが閲覧できなかったでしょう。

同時アクセス

0

WEB・IT
スポンサーリンク

※最新情報は商品・サービスの販売元、提供元までお問合せください。
※情報の正確性、出典元の明示、利便性向上のため、当サイトから第三者ウェブサイトへのリンクが含まれることがあります。

ヒサヤ-電気
いいものタウン

COMMENT 追加情報やリクエスト

※コメントは一般公開されます。メールアドレス不要、匿名、ニックネームでもコメントが可能です。
※個人情報の記入はお控えください。
タイトルとURLをコピーしました