テーマ

LION MEDIAで起きるAMPエラーの解決策

2020年4月29日

LION MEDIAで起きるAMPエラーの解決策

当ブログでは「LION MEDIA」のテーマを利用しているのですが、「AMP機能」を有効にしてからGoogle Search Consoleでエラーが発生していることが確認できたので、同じような人のために、AMPエラーの解決策をまとめます。

私のサイトでは下記の2点がAMPエラーとして通知がありました。解決策だけ読みたいという方は目次から「エラー内容の解決策」をクリックしてください。

【AMPエラーの内容】

(1)AMP HTML タグの属性で指定されたレイアウトが無効です。
詳細:属性「loading」はタグ「amp-img」で使用できません。
原因:プラグインLazy Lodyのタグが入っている

(2)許可されていない属性または属性値が HMTL タグにあります。
詳細:必須属性「height」がタグ「amp-img」にありません。
原因:画像の高さ設定ができていない

Google Search Consoleでエラーを確認する

Google Search ConsoleのAMP

Google Search Consoleの左メニューから「AMP」をクリック。ステータスについては下記を確認して下さい。エラーがある場合は、AMPページの表示ができていないので、修正する必要があります。

有効:AMPページ表示できる

有効(警告):AMPページ表示できるが修正すべき問題がある

エラー:AMPページ表示できない

AMPエラーの詳細

スクロールすると、エラーの詳細が表示されます。

AMP HTML タグの属性で指定されたレイアウトが無効です。

詳細をクリックすると、該当のエラーページの一覧画面に遷移します。エラーページをクリックすると、右側に該当のソースコードが表示されます。「ページ内のインスタンス」が該当箇所の数になります。

AMPテストでエラーの詳細を確認する

AMPテスト

AMPページの検証ができる「AMPテスト」でエラーの詳細を確認していきます。該当ページのURLを検索窓に入力して検証を始めて下さい。

AMPテスト

検証が始まると上記の画面になります。

有効なAMPページではありません

検証結果で問題があった場合、上記のように赤文字で「有効なAMPページではありません」という表示がでます。検証で発見された問題の詳細も記載されています。

必須属性「height」がタグ「amp-img」にありません

問題の詳細をクリックすると該当箇所の行が表示されます。

エラー内容の解決策

当ブログで発生したAMPエラーは下記になります。

【AMPエラーの内容】

(1)AMP HTML タグの属性で指定されたレイアウトが無効です。
詳細:属性「loading」はタグ「amp-img」で使用できません。
原因:プラグインLazy Lodyのタグが入っている

(2)許可されていない属性または属性値が HMTL タグにあります。
詳細:必須属性「height」がタグ「amp-img」にありません。
原因:画像の高さ設定ができていない

(1)AMP HTML タグの属性で指定されたレイアウトが無効です。

「amp-img」タグに「Loading」が付いていることがエラーで表示されました。読み込み遅延で有名なプラグイン「Lazy Lody」を有効にしていたことが原因でした。そのため、「Lazy Lody」を無効にすることでこのAMPエラーは解決しました。

インストール済みプラグイン一覧

WordPressの左メニューの「プラグイン」>「インストール済みプラグイン一覧」でプラグインを無効にします。上記のようになれば無効になっています。

(2)許可されていない属性または属性値が HMTL タグにあります。

「amp-img」タグに「height」タグが付いていないことがエラーで表示されました。結構めんどくさいのですが、投稿した記事の画像を全てチェックして「height」タグを付けることで解決しました。

投稿ページの画像の寸法

投稿ページで画像をクリックして、右側の幅・高さの数値を入力するもしくはパーセントを設定することで、「height」が設定されます。

投稿ページの画像のソースコード

HTML編集に変更してソースコードをチェックします。「height」タグが入っていれば完了になります。

AMPテストで検証する

AMPテスト

AMPエラーを修正したら、再度AMPテストで検証を行います。

有効なAMPページです

検証の結果問題がなければ、上記の緑文字で「有効なAMPページです」という表示がされます。

解決したことをGoogleに通知する

Google Search ConsoleのAMP

ここで終わりでなく、Google Search Consoleに戻り「AMP」から「修正を検証」のボタンをクリックします。

初期検証中

検証が始まると、上記の画面になります。

Google Search ConsoleのAMP検証開始

検証がスタートすると、上記のように「検証:開始 開始日:◯◯◯◯/◯◯/◯◯」という表示がされます。念のため確認で、「詳細を表示」のボタンをクリックします。

Google Search ConsoleのAMP検証詳細

ステータスが「保留」になっていれば、検証が無事開始されたことになります。後はGoogleの検証結果を待ちましょう。

当サイトで申込みが多いプログラミングスクール・教室はこちら!

【1位】ポテパンキャンプ:Webエンジニア輩出率No1

【2位】CodeCamp:満足度96.6%のプログラミングレッスン

【3位】DMM WEBCAMP:プログラマー転職成功率98%

【4位】TechAcademy:プログラミングスクール受講者数No1

【5位】GEEK JOB:満足度・転職率が高い・20代社会人経験者向け

-テーマ
-