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

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

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

1 AMPエラーの内容
2 AMPエラーの対処方法
3 AMPエラーの解決確認

AMPエラーの内容

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

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

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

■エラーの内容

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

AMPエラーの対処方法

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

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

// AMP判別関数
function is_amp(){
    $is_amp = false;
    if (empty($_GET['amp']) ) {
        return false;
    }
    if (is_single() && $_GET['amp'] === '1'){
        $is_amp = true;
    }
    return $is_amp;
}

//AMP用のタグ変換
function convert_body_amp($the_content){
    if(!is_amp()){
        return $the_content;
    }

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

    //「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);
    return $the_content;
}
add_filter('the_content','convert_body_amp',1001);

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

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

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

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

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

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

あとは・・・

ページで不足している 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に自動広告コードを設定②”を参考にしてください。