【LION MEDIA】 AMPエラーの原因と対応策を紹介!これからのウェブサイトは、AMP対応が必須ですよ!

【LION MEDIA】 AMPエラーの原因と対応策を紹介!これからのウェブサイトは、AMP対応が必須ですよ!

LION MEDIAのテーマを使用してAMPを有効にした場合、AMPエラーが発生する可能性があります。

 

 

AMPエラーの内容

本サイトの2018年6月29日時点のAMPエラーとなります。

全部で107ページありますが、インデックスに登録されたAMPページ数は40ページであり、重大な問題があるAMPページは、なんと、”67”ページもあります。かなり、多いですね・・・。

最初は順調に登録されていたので、AMPエラー対応を後回しにしていたのですが、あまりにも数が多いので、頑張ってエラーを対応します。

 

■エラーの内容

問題 重大度 問題のあるページ
1
HTML タグの禁止された用法、無効な用法
致命的
53
2
AMP マークアップがない、または正しくない
致命的
17
3
AMP タグに無効なレイアウト プロパティがある
致命的
12
4
同等の AMP タグがある HTML タグの使用禁止
致命的
10
5
ページにユーザー作成の JavaScript がある
致命的
1
6
コンテンツの不一致: 埋め込み動画なし
重要ではない問題
7

 

 

AMPエラーの対処方法

AMPエラーは、”LION MEDIAの問題ではなくページ構成の問題”ですので、LION MEDIAの問題だろうと思って調べても、何も解決しないです。

では、どのような対応で解決させるか?ですが、「テーマのための関数(functions.php)」にAMP用の変換関数を作成することで対応します。

 

 

HTML タグの禁止された用法、無効な用法

これは、A8ネットから提供される商品リンクに、<amp-img>タグでエラーとなる「border」タグが含まれているために発生しています。解決策として、AMPの場合に「border」タグを削除すればOKです。

// A8ネットの「border」タグを削除
$the_content = preg_replace(‘/ border=”0″/i’,”,$the_content);

 

 

AMP マークアップがない、または正しくない

今回のエラーはYouTubeで発生していますが、このエラーが出る場合のほとんどが設定です。以下の設定を忘れていませんか?

YouTubeやIFrameをページ内に埋め込む場合は、以下のチェックをONにしておかないとエラーになります。

あとは・・・

ページで不足している AMP マークアップまたは無効な AMP マークアップを修正してください。AMP ページに必須のコードがなかったり、無効な AMP 構文があったりすると、Google 検索結果に AMP 固有の表示機能が表示されないことがあります

Google Search Consoleに記載がありますが、このエラーは色々な要素が混在しているので、他のエラーを先に改善してから、最後に確認してみると良いと思います。

案外、特別な対応は不要であり、このエラーが発生しているときは、LION MEDIAにYouTubeを貼り付ける際に、URLをそのまま”ビジュアル”のページに貼り付ければ良く、動画の埋め込みでYouTubeを貼り付けたりするとエラーになったりしますので、手順が間違っていないか確認した方が良いです。

LION MEDIA 公式サイト → http://lionmedia.fit-jp.com/embed-2/

 

 

AMP タグに無効なレイアウト プロパティがある

エラーの内容通り、「amp-img」タグにheightの属性がないということですね。私の場合は、アマゾンアフィリエイトの商品リンクで発生しているので、もしもアフィリエイトの商品リンクに切り替えて対応を行いました。

 

 

同等の AMP タグがある HTML タグの使用禁止

エラーの内容通り、「video」タグが「amp-video」タグに変換されていないというエラーですね。私の場合は、「audio」タグもエラーになっていましたので、両方変換する処理を実装しています。

//「audio」タグを「amp-audio」タグに変換
$the_content = preg_replace(‘/<audio/i’,'<amp-audio’, $the_content);
$the_content = preg_replace(‘/preload=”none” /i’,”, $the_content);
$the_content = preg_replace(‘/< \/audio>/i’, ‘</amp-audio>’, $the_content);

//「video」タグを「amp-video」タグに変換
$the_content = preg_replace(‘/<video/i’,'<amp-video’, $the_content);
$the_content = preg_replace(‘/< \/video>/i’, ‘</amp-video>’, $the_content);

 

 

ページにユーザー作成の JavaScript がある

このエラーはグーグルアドセンスの自動広告に関するJavaScriptコードを記載する場所がダメなため発生しています。

グーグルアドセンスのJavaScriptコードは、<head></head>タグの間に記載しましょうとなっているので、LION MEDIAの高度な設定[LION用]に貼り付けたのですが、これがまずかったですね。AMPの場合にも適用されることから、LION MEDIAの高度な設定[LION用]に貼り付けていたJavaScriptコードを別の場所に変更することで、このエラーを回避しました。

★別の場所とは、

【LION MEDIA】 カスタマイズ基本編(Googleアドセンスの自動広告の活用)自動広告で収益アップを目指そう!

の記事の”LION MEDIAに自動広告コードを設定②”を参考にしてください。

AMPエラーの解決確認

該当するエラーをクリックすると、以下のような画面になります。AMPに対応できていないページの一覧が表示されます。

 

赤枠の”ページをテスト”ボタンをクリックします。

 

分析中になります。さぁ、エラーが発生するか問題なしとなるか、どちらでしょうね(笑)

 

有効なAMPページと表示されれば、次回のクロールの際に、有効なAMPとしてインデックス登録されると思います。

 

♡おすすめ記事♡

ミー
本サイトで人気のおすすめ記事も読んでね!
豊富な商品紹介から、LION MEDIAやサイト構築の技術紹介、
趣味や人気YouTuberの紹介などなど、
たくさん見てね♥

 

【LION MEDIA】のカテゴリを見よう!
WordPressのテーマ「LION MEDIA」に関するカスタマイズ内容やテクニック、知らなきゃ損する情報を提供します。
【レンタルサーバ】のカテゴリを見よう!
サイト運営に必要なレンタルサーバーの選択ポイントや、各社のレンタルサーバを比較した結果を紹介!

 

LION MEDIAカテゴリの最新記事