アニメやゲームの感想から、ブログ運営、お金(資産運用、節税)、健康の話まで雑多につぶやくブログです

【THE THOR】Google Search Console の AMP エラー対応

3 min 0 views
【THE THOR】Google Search Console の AMP エラー対応

はい、どーも
はるねこ(@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」を記述しなくちゃいけない。
  • 画像サイズを調べないとダメ
  • いやいや、自動で画像サイズが挿入される方法がある

との事。

  1. 挿入した画像をクリックし、「鉛筆マーク(編集)」を押します
  2. 画像詳細が開いたら、何もせずただ「更新」ボタンを押すだけで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」をお忘れなく!

それでは今回はこのへんで👋

その他のTHE THOR 記事
THE THOR(ザ・トール)の詳細はこちら 

hal_neko

hal_neko

会社員雑記ブロガー

元スーパー店員。ゲーム屋さん所属。来世は猫がいいです。
趣味やお金の事について雑多につぶやいてます。
ブログでそこそこ稼げるようになるのが目標です(- -)
そこそこって大事。そういうこと。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です