「AMP」の問題が新たに 検出されましたのエラーや警告への対処法

今朝、Search Console を見たら
『サイト https://chronoseed.com/ で「AMP」の問題が新たに 検出されました』
とメッセージに警告文が届いていました。

「なんだよぉ」と思い読んでみると「はぁ~」となりました。

ここでは、私に来た”AMP”の問題にどのように対処したのか
その内容を備忘録として、同じ境遇になった方への参考になれば
と思い紹介いたします。

スポンサーリンク

『AMP関連の問題が3件検出されました』のエラーへの対処

まず
AMPってなに?

A…Accelerated(加速)
M…Mobile(モバイル、携帯端末)
P…Pages(ページ)

グーグルが推奨している、
モバイル端末で快適にページを表示できるようにする仕組みのこと、
使う側がストレスなく高速に表示してくれるので回遊率が上がると言われている。

”AMP”に対応したページにすれば ”Google” のサーバーにキャッシュされるので
ページを読み込み、表示するよりも速く表示されるようになる。

それならば”AMP”を作れば更に良くなるのでは?と思っちゃったんですね。

何故ならアナリティクスを見ると『最もよく使われているデバイスは?』の
デバイス別セッション数でモバイルのパーセンテージが多かったからです。

しかもwordpressで簡単に”AMP”が作れちゃうので「ぽちっとな!」と
よく吟味する前に作っちゃったのです。

すると

先に書いたエラー文が届いたのです。

エラーの本文(google search console)

エラーがいっぺんに3つも『許可されていません』と書いてあります。

タグ「p」の属性「style」で検出されたプロパティは許可されていません。

許可されていない属性または属性値がHMTLタグにあります。

タグ「span」の属性「style」で検出されたプロパティは許可されていません。

この「AMP」ページは早く表示するために構造に制約があるようです

エラーになっているページを確認してみると以下のタグを書き込んでいました。

CSSのインラインスタイルシートで書いた部分がエラーになったようです。

これらを全て洗い出して削除し修正しました。

しかし、それでも同じエラーになるページが2~3ページ出ていました。

原因を追究する気力が無かったので取り合えず
エラーとなっているページの文字修飾部分を作り直すと改善しました。

 

『推奨サイズより大きい画像を指定してください』の警告への対処

ブログを始める時に、アイキャッチ画像などブログ内で使用する画像の
最適な画像サイズはいくつが良いのか?検索していました。

大きいサイズは読み込みスピードに影響するだろうと思っていましたので…

しかし、なかなかはっきりと示されたサイトが見つりませんでした。
仕方なく、いくつかのサイトを参考に”520x480”がよさげと勝手に判断して
自分のサイトで使用する画像を上記で書いたサイズで使用していました。

それが突如、


『https://chronoseed.com/ の所有者様』
『Search Console により、貴サイトに影響する「AMP」関連の問題が 1 件検出されました。』

 

いやいや、ちょっと待ってくださいよ

なぜ今頃!

 

WORDPRESSで”AMP”ページ化したのは4月5日頃、先のエラーを解決して
約3か月が過ぎてからこの警告が届きました。

この警告に付いて検索してみると

Googleは、2019年1月15日に”AMP”ページの画像についての警告を
Search Consoleのステータスレポートに送信しました。
出典:iSchool

と書いてあるサイトがありました。

使っている画像の横幅が1200pix(ピクセル)以上必要なんだとか

WORDPRESSのメディアライブラリにある画像を編集する機能を利用して、画像の縮尺を変えて大きくすれば出来ると考えましたが…

しかし、WORDPRESSの機能では大きいサイズを小さくできるが、逆は出来ないみたいで直せませんでした。

とても全ての画像を直すのは大変なので、とりあえず最初にアイキャッチ画像を修正して様子を見ると警告の出ていたページが減っていったので、
この縛りはアイキャッチ画像だけと判り全てのアイキャッチ画像だけ
”1200pix×900pix”に修正しました。

これで解決しました。

スポンサーリンク

AMPを削除したい場合は

当初”AMP”ページを作ってからスマホで確認してみると

アドセンス広告が表示されないページがいくつかありました。

”AMP”ページのエラーや警告のせいで出ていないのかなぁ?と思っていました。
解決すれば表示されるだろとエラーや警告が出ないように直してみました。

それでもアドセンス広告が表示されないページがいくつかありました。
”AMP”ページの何かがいけないのだろうと考え検索してみると

他サイトでデザインの崩れやadsence広告が出ない例が紹介されている事を知り
自分のサイトも”AMP”を作ったせいかもと思い”AMP”を辞める事にしました。

既に”AMP”ページはインデックスされているのでこれを辞めると404エラーが
出てしまうと思い”AMP”ページを普通のページにリダイレクションさせる事にしました。

wordpressのcocoonフォーラムにも”AMP”を辞める方法が記載されていたので
同じ方法を使いました。

私の使用しているcocoonは”AMP”の有効を無効するだけで良いのですが
いきなり”AMP”の使用チェックを外す前に

以下のコードを”.htaccess”ファイルに記述すれば良い事が分かりました。

<IfModule mod_rewrite.c>

RewriteEngine On

RewriteCond %{QUERY_STRING} (^|&)amp=1(&|$)

RewriteRule ^(.*)$ https://chronoseed.com/%{REQUEST_URI}? [R=301,L]

</IfModule>

赤文字の部分は自分のサイトURLに変更して使ってください。

”.htaccess”ファイルは、レンタルサーバーの所にあります。

私は”Xサーバー”を借りているので以下の所から編集できます。

”.htaccess”ファイル内の”wordpress”の前に記述ます。

この”.htaccess”ファイルに正しく記述しないと
サイトに次のような状態になりアクセスできなくなります。


私もこの状態になったので焦りました。
その後”.htaccess”ファイルに正しく記述して事無きを得ました。

まとめ

如何でしたでしょうか

私の場合は結局、”AMP”を取り消し削除しました。

これが良かったかどうかは分かりませんが

少なくとも”AMP”に関するストレスが少なくなったので良かったと思っています。

もっと経験が積み重なって”AMP”の問題にもストレスなく対処できれば

Googleが推奨しているので”AMP”を復活させてみる事を考えています。

スポンサーリンク

コメント

タイトルとURLをコピーしました