『LION MEDIA』でAMP設定を有効にしたら【広告タグ】の貼り付け方に注意しよう

どうも、こはるです。

今回は『LION MEDIA』のカスタマイズ機能のひとつである「AMP設定」を有効にした場合に気をつけた方がいいよってことがあったのでご紹介いたします。

まず、『LION MEDIA』のAMP設定のところには、

「AMPを適用させるには、AMPが定める厳格なマークアップルールに従う必要があります。記述に誤りがあると機能を有効化してもページによってはエラーとなる可能性があります」

と書かれています。

「へぇ～、そうなんやぁ・・・」ぐらいの軽い気持ちで設定を有効にしたところ、Google サーチコンソールで頻繁にエラーを指摘されるようになりました。

これが言われてたエラーか・・・、AMPわからんのに・・・と、こんな状態に。

「いらすとや」でお借りしました

でも、数をこなすうちにあることに気づきました。

それは、

広告タグを貼るときには気をつけろ！

外部画像をお借りするときは気をつけろ！

ということです。

それでは、どんなエラーが出たのかを紹介したいと思います。

サーチコンソールのエラー内容

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

このメッセージでエラーになっていたHTMLタグは「border=”0″」でした。

「border=”0″」とは、ボーダーの太さを表すタグです。AMPでは、「img」のスタイルを指定するときに「border」を使ってはいけないというルールがあります。

例えば、A8.netの場合、記事内に貼る広告リンクコードは下記のようになります。

テキストリンクであっても「img」タグが一緒についてくる仕様なので、<img >内にある【border=”0″】は削除する必要があります。（「img」は画像に使われるHTMLタグです。）

では、下のようなバナータイプの場合、どのように記述されるかを見てみますね。

バナータイプの場合、2ヶ所に【border=”0″】が使用されています。AMPに対応させるためには、この2ヶ所を削除する必要があります。

必須属性「width」「height」がタグ「amp-img」にありません

AMPで画像を使用する場合、「width」と「height」の値を記述することが必須です。

「width」は横幅、「height」は高さを表しています。

バナー広告のように画像を伴う広告を貼る場合や、何らかの理由で他サイトの画像を読み込むためにリンクを貼り付けた場合、「width」や「height」が記述されていないことがあります。そのまま放置するとエラーとなってしまうので、修正する必要があります。

例えばこんなバナー広告（楽天の広告）

どこにも、「width」や「height」が記述されていないですよね。でも書いておかないとエラーになります。

エラーを回避するためには、画像サイズを調べないとダメか・・・って思いますよね。

でも、調べる必要はなし！

次の方法でやれば、自動で画像サイズが挿入されます。

挿入した画像をクリックし、「鉛筆マーク（編集）」を押します。画像詳細が開いたら、何もせずただ「更新」ボタンを押すだけでOK。終わりです。簡単だったでしょ。

更新すると自動的に「width」と「height」が記述されます。

まとめ

AMPのことを理解しないまま、ペタペタやってたら、えらいこっちゃ～になってしまったのでご紹介させていただきました。

広告タグでのエラーは、【border】と【width】、【height】ぐらいでした。後から修正するのは、やっぱり面倒くさいです。記事を書くときに、ほんの少し注意を払っていれば防げるエラーだと感じました。

ご参考にしていただければ幸いでございます。

こはるでした。