ライオンメディアAMPエラーとは？その対処方法

ライオンメディアでAMP設定をしたらAMPエラーが発生してしまいました。

AMPエラーを全てなくすために１週間くらい時間がかかってしまったのですが、どうにか全てのAMPエラーを対処できたので、その方法を記事にしたので参考にしてみてください。

ライオンメディアはAMP対応のWordPressテーマです。

LION MEDIAのheader.phpを確認するとAMP表示で読み込む仕組みになっています。

ではAMPエラーになる原因は？LION MEDIAで原因があるとしたら自分で設定していないところがあるという事が可能性として考えられます。

AMPエラーの原因として多いのが、AMPサイトで禁止されてるタグを使用していること。

禁止されてるHTMLタグを確認するならGoogle Search Consoleのエラー詳細を見れば何がエラーなのかはわかりますが、AMPエラーをどうやって修正していくかが問題なわけでして。

まずはAMPエラーの対処の前に、エラーの詳細を知ることが大切なので確認します。

1. AMPエラー内容を確認する
2. AMPエラーの対処方法.１
3. functions.phpを使用してAMPエラーを対処.２
- 3.1. エラー対処後にAMPエラーを確認する

AMPエラー内容を確認する

AMPエラーが確認するのはGoogle Search ConsoleのAMPからエラー確認をします。

上記の画像がGoogle Search ConsoleのAMPエラーを確認しに行けるとこです。(雷マークが目印)

AMPをクリックするとAMPエラーのグラフがあります。その下にスクロールすると、どんなAMPエラーなのか詳細が確認できます。

AMPエラーの詳細の確認をしてみると今回はエラーが3個ありました。(画像はエラー対策後)

許可されてない属性がHTMLタグ「amp-img」にあります

AMPのエラー詳細でみたAMPエラー内容を１ずつ見ていきます。(対処法だけ知りたい人は飛ばしてください)

「amp-img」⇐このエラーけっこうみんな多いんじゃないですかね？

amp-imgは画像を表示するための要素です。

精一杯ググった結果、ampではなくて<amp-img>にしなくていけないということです。

そして、<amp-img>はwidthとheightがないとだめだということも発見。

そして、そして、私が自分のampエラーを１週間見てきた限りだとborderタグもエラーになります。AMP検証をするとわかりますが、このエラーが増えると私の場合は全てborderタグが原因。

このエラーはA8のリンクでした。

アフィリンクのborderタグがAMPエラーだった事が分かったので、記事内のアフィリンクのborderを削除してみました。

しかし、この対処方法はアフィリンクがなんか変な感じになってしまったのでボツ。

AMPエラーを完全に対処することに、もう後には引けなくなっていたので今だけアフィリンク自体を覚えてる限り削除してみる。

当然AMPエラーは消えました。しかし今後を考えるとこれではいけませんね。

カスタムJavaScriptは使用できません

Scriptエラーはアドセンス広告がエラーになっていた記憶があります。

AMPエラーのスクショ消してしまったので貼れません…

AMPページではJavaScriptがGoogleが指定した1種類を除いて禁止されてるためエラーを吐いてしまうようです。

ライオンメディアはアドセンスコードを貼り付ける広告設定があるので当然のごとく導かれるままにアドセンスコードを貼ります。

でもAMPエラーを見るとアドセンスコードがエラーを吐いてるのでアドセンスコードだという事は確信。

ちなみにアドセンスコード貼り付けてる場所は

記事内広告
アーカイブ用インフィード広告
記事下用ダブル広告

広告設定のAMP用広告にアドセンスAMP自動広告コードを上下に貼り付け

おそらくAMP自動広告がエラーなんだと思うけどアドセンスコードを、どう書き換えればいいのか分からずGoogleで「アドセンスAMPエラー」で検索してGoogleに逆クロール！

しかしアドセンスコードを書き換えるための逆クロールがまさかの結果に⇐(後の対処方法になる)

クロールエラー

これもエラーが消えてしまったのですが、エラー発生中は404エラーにでもなってるのかな？と思ったのです。

それでも気になるのでググッてみると404エラーは一時的な可能性があるため、そのページ情報は24時間の間はクロールシステム上で保管される。

という事なので上記2つのAMPエラーを先に対処して有効なAMPにしてからどう変わるか様子見をする事に。

AMPエラーの対処方法.１

LION MEDIAのAMPエラーをなくすためにやったことは二つです。

LION MEDIAの設定で出来る対処方法から説明します。

投稿編集の一番下まで行くとAMPページ用Scriptの選択があるので、該当してるAMPエラーすべてにチェック。

このAMPページ用Scriptの選択はライオンメディアの設定で出来る設定です。

投稿ページ全部にあるので、AMPエラーになってるページでチェックを入れておくようにします。

TwitterやInstagram、YouTube、iframeと外部コンテンツを使ってる場合のエラーは、ここの対処方法だけで大丈夫かもしれません。

TwitterやInstagramはわかるけどiframeがいまいちわからなかったので調べてみると、HTMLの中に別のHTMLファイルを入れることらしいです。多分たまに目にする入れ子というものだと思います。

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);

上記をfunctions.phpに貼り付けて更新をします。

functions.phpの場所は⇒外観⇒テーマの編集⇒テーマのための関数(functions.php)で行きます。