突然ですがこのようなメールを受け取ったことありませんか？
どうやら私のサイトでAMPの「問題」が検出されたようなのですが，AMP自体ちんぷんかんぷんなので，この記事では
- AMPとは
- 今回検出された「問題」の簡単な対処法
を紹介したいと思います。
目次
AMPで「問題」が検出される原因
AMPとは
Isamu
AMPとは「Accelerated Mobile Pages」の略で，Googleが推奨するモバイルページを高速に表示する手法のことです。
AMP（アンプと読む）対応しているサイトは検索エンジンで検索した際，カルーセル表示されたり，雷のマークがついています。
AMPを実装すると
今回検出されたAMPの「問題」について
今回，私がGoogle Search Consoleからのメールに書いてあったAMPの「問題」を以下に列挙していきます。
- AMP HTML タグの属性で指定されたレイアウトが無効です
- 許可されていない属性または属性値が HMTL タグにあります
- 指定できるのは、amp-boilerplate と amp-custom の「style」タグのみです（ドキュメント ヘッドにのみ指定できます）。
検出された「問題」を対処していく
記事の中の「問題」箇所の特定
まずはGoogle Search Consoleを開いて，検出された問題箇所はどこなのか特定しましょう。
Google Search Consoleを開いて左側の項目欄に「拡張」があると思います。
その中に例の”雷”マークとAMPと書いているのでそこをクリックしましょう。※上の写真が参考
”AMP”をクリックすると上のような画面が現れます。
エラーが出ていることが確認できますね。ここから下にスクロールしていくと，それぞれの記事のURL付きでそのエラーが個々にリスト化されています。
どれでもいいので１つ選んでみましょう。
記事URLをクリックすると，右に新しくウィンドウが開き，問題箇所を表示してくれます。
「問題」の箇所はピンクになっているのでそこを解決してあげればいいのです！
あとはそれぞれの「問題」に対して対処していくだけです。
①AMP HTML タグの属性で指定されたレイアウトが無効です
４つの記事でこのエラーを確認しました。
そして「問題」としてピンクで塗られている部分はどうやらGoogleMapを埋め込んでいる箇所のようです。
Isamu
GoogleMapを埋め込んでモバイル表示させたときに，画面から地図がはみ出していたため実施したアレンジです。
Widthを100%にするとモバイル表示でも画面からはみ出さなくなるのですが，これがAMPの「問題」を招いていたとは…
ネット記事を参考にして実装したアレンジですが，なんでもかんでも100%にしてはいけないってことですね。
Isamu
どうやら「問題」は無事解消されたようです。
こうやって「問題」箇所をコツコツ直していきましょう。
骨が折れますけど，知らなかったとはいえルールを守らなかった私のせいでもあるので我慢してなおしますよっと_(┐「ε:)_
②許可されていない属性または属性値が HMTL タグにあります
この問題は３つの記事で検出されていました。
先程と同じ様に，問題となっている箇所をGoogle Search Consoleで調べてみると２つの記事では「カスタムHTMLに貼り付けたA8.netの広告リンク」が原因のようでした。
A8.netのサイトで広告リンクの種類を確かめる
A8.netで広告リンクを貼る
>>>アフィリエイトA8.net
参加中のプログラムから広告リンクを開いてみると「AMP対応リンク」と書かれた広告リンクがありました。
どうやら「通常の広告リンク」を記事内に貼り付けていたので「問題」として検出されたみたいです。
Isamu
残り１つの記事で検出された「問題」の原因はプラグインが関係しているようでした。
この問題はプラグイン箇所をどう修正していいかわからなかったので，記事からプラグイン箇所を削除，その後プラグインを停止させています。
Isamu
プラグイン機能で画像を表示するため記事に埋め込んだショートコードが原因のようでした。
>>>記事作成中もう少し待ってね
③指定できるのは、amp-boilerplate と amp-custom の「style」タグのみです（ドキュメント ヘッドにのみ指定できます）。
この「問題」は１つの記事でのみ検出されました。
しかし，なぜこの問題が起きたのか原因を突き止めることが出来ませんでした。
先に紹介した画像比較用プラグイン「Ultimate Before After Image Slider – BEAF」のショートコードを削除したらこの「問題」も同時に解決してしまいました。
ひょっとしたら画像比較用プラグインが２つの「問題」を引き起こしていたのかもしれないですね。
さいごに
AMP対応するためには「問題」が生じないようにルールを守って記事を書く必要があります。
Google Search ConsoleからAMPで検出された「問題」があります。とメールが来たらこの記事が役に立てればいいと思っています。
最後まで読んでくれて，ありがとうございました。
WordPress有料テーマ「TheThor」ならAMP対応も簡単な設定で可能です！
>>>集客・収益に徹底的にこだわった結果へ導く次世代WordPressテーマ「ザ・トール」
