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

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

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

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

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

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

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

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

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

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

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

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

エラー内容の解決策

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

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

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

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

（２）許可されていない属性または属性値が HMTL タグにあります。

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

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

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

AMPテストで検証する

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

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

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

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

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

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

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