
- 現役Webマーケター
(元Webディレクター) - 東証一部上場の不動産系企業で勤務
- 最高収益:月間30万円
当ブログでは「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の左メニューから「AMP」をクリック。ステータスについては下記を確認して下さい。エラーがある場合は、AMPページの表示ができていないので、修正する必要があります。
有効:AMPページ表示できる
有効(警告):AMPページ表示できるが修正すべき問題がある
エラー:AMPページ表示できない
スクロールすると、エラーの詳細が表示されます。
詳細をクリックすると、該当のエラーページの一覧画面に遷移します。エラーページをクリックすると、右側に該当のソースコードが表示されます。「ページ内のインスタンス」が該当箇所の数になります。
AMPページの検証ができる「AMPテスト」でエラーの詳細を確認していきます。該当ページのURLを検索窓に入力して検証を始めて下さい。
検証が始まると上記の画面になります。
検証結果で問題があった場合、上記のように赤文字で「有効なAMPページではありません」という表示がでます。検証で発見された問題の詳細も記載されています。
問題の詳細をクリックすると該当箇所の行が表示されます。
当ブログで発生したAMPエラーは下記になります。
【AMPエラーの内容】
(1)AMP HTML タグの属性で指定されたレイアウトが無効です。
詳細:属性「loading」はタグ「amp-img」で使用できません。
原因:プラグインLazy Lodyのタグが入っている
(2)許可されていない属性または属性値が HMTL タグにあります。
詳細:必須属性「height」がタグ「amp-img」にありません。
原因:画像の高さ設定ができていない
「amp-img」タグに「Loading」が付いていることがエラーで表示されました。読み込み遅延で有名なプラグイン「Lazy Lody」を有効にしていたことが原因でした。そのため、「Lazy Lody」を無効にすることでこのAMPエラーは解決しました。
WordPressの左メニューの「プラグイン」>「インストール済みプラグイン一覧」でプラグインを無効にします。上記のようになれば無効になっています。
「amp-img」タグに「height」タグが付いていないことがエラーで表示されました。結構めんどくさいのですが、投稿した記事の画像を全てチェックして「height」タグを付けることで解決しました。
投稿ページで画像をクリックして、右側の幅・高さの数値を入力するもしくはパーセントを設定することで、「height」が設定されます。
HTML編集に変更してソースコードをチェックします。「height」タグが入っていれば完了になります。
AMPエラーを修正したら、再度AMPテストで検証を行います。
検証の結果問題がなければ、上記の緑文字で「有効なAMPページです」という表示がされます。
ここで終わりでなく、Google Search Consoleに戻り「AMP」から「修正を検証」のボタンをクリックします。
検証が始まると、上記の画面になります。
検証がスタートすると、上記のように「検証:開始 開始日:◯◯◯◯/◯◯/◯◯」という表示がされます。念のため確認で、「詳細を表示」のボタンをクリックします。
ステータスが「保留」になっていれば、検証が無事開始されたことになります。後はGoogleの検証結果を待ちましょう。