はい、どーも
はるねこ（@hal_neko）です。
今回は、ほったらかしにしていた
Google Search Console の AMP エラーの対応をしていこうと思います。
ちなみに
WPテーマ「THE THOR」を基準に解説しています。
もくじ
属性「border」はタグ「amp-img」で使用できません
参考情報
こちらの記事が参考になりました。
A8.net などの広告タグを貼っている場合に発生するエラーだそうです。
AMP では img に border を指定してはいけない決まりになっているが
広告タグに「border=”0″」が指定されているためエラーが出ます。
解決法
上記のページからも飛べますが
こちらに書いてあるように
「border=”0″」を一括で除去する方法を行う事で
解決しました。
必須属性「width」「height」がタグ「amp-img」にありません
参考情報
こちらの記事が参考になりました。
AMPで画像を使用する場合
「width」と「height」の値を記述することが必須です。
その記述がないよ！ というエラーのようです。
解決法
上記ページにやり方が載っていますが
- 画像を使用する場合「width」や「height」を記述しなくちゃいけない。
- 画像サイズを調べないとダメ
- いやいや、自動で画像サイズが挿入される方法がある
との事。
- 挿入した画像をクリックし、「鉛筆マーク（編集）」を押します
- 画像詳細が開いたら、何もせずただ「更新」ボタンを押すだけでOK
とりあえず開き直して「更新」すりゃいいようです。
楽ちん！😆
でも全記事分やるのはめんどいので
こまめにやっておくのが吉ですね。
タグ「video」を同等の「amp-video」タグに置き換えてください
参考情報
上記のページが参考になりました。
解決法
上記ページに記載してあるリンクに飛びます。
こちらに記載されているコードを
「属性「border」はタグ「amp-img」で使用できません」
の項目で対応したように修正します。
- 「外観」＞「テーマエディター」＞「THE THOR」 の親テーマを選択
- 「inc」>「amp」＞「convert.php」
- 好きなタイミングで、コードを貼り付ける
$pattern = '/<video ([^>]+?)>(.+?src=[\"])(http:|https:)(.+?)<\/video>/is';
$append = '<amp-video layout="responsive" $1>$2$4</amp-video>';
$the_content = preg_replace($pattern, $append, $the_content);で、自分の場合は解決しました。
※テーマの編集は自己責任で行ってください
タグ「audio」を同等の「amp-audio」タグに置き換えてください。
参考情報
上記のページが参考になりました。
解決法
「属性「border」はタグ「amp-img」で使用できません」
の項目で対応したように修正します。
- 「外観」＞「テーマエディター」＞「THE THOR」 の親テーマを選択
- 「inc」>「amp」＞「convert.php」
- 好きなタイミングで、コードを貼り付ける
$pattern = '/<audio .+?src="([^"]+?)".+?<\/audio>/is';
$append = '<amp-audio src="$1"></amp-audio>';
$the_content = preg_replace($pattern, $append, $the_content);で、自分の場合は解決しました。
※テーマの編集は自己責任で行ってください
属性「marginheight」はタグ「amp-iframe」で使用できません。
参考情報
こちらの記事が参考になりました。
自分の場合も、Wordpress の記事埋め込み機能が
うまくいっていないようでした。
解決法
上記ページに記載されている
「追記するプログラム」のコードを
また「convert.php」のどこかに貼り付けます。
$pattern = '/marginwidth="0"/i';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);
$pattern = '/marginheight="0"/i';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);
$pattern = '/security="restricted"/i';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);以上です。
※テーマの編集は自己責任で行ってください
「Speech bubble」を辞めて「WP-Speech-Balloon」に変更
ふきだしのプラグインに
「Speech bubble」を利用していたのですが
AMPに対応していない、という事で
エラー対応のこの機に変更してみました。
「WP-Speech-Balloon」だと、AMP に対応しているそうです。
↑こちらを参考に。
と思ったのですが、やってみたら
画像が、めっちゃでっかく表示されたので断念。
おわりに
なんだかんだ、ほったらかしてしまいがちな
AMP対応なんですが、SEO的には重要な要素なので
しっかり対応しておきましょう。
AMPエラーに対応したら
「XMLサイトマップの再送信」or「Fetch as Google」をお忘れなく！
それでは今回はこのへんで👋
