2015年4月21日から始まったグーグルのモバイルフレンドリー優先対応の検索アルゴリズム変更。
WordPressサイトのモバイルフレンドリーに関するエラーが増加
これに関連して、WordPressで運営しているサイトの状況を一応確認しておくかということでグーグルのウェブマスターツールに久しぶりにログインして、モバイルフレンドリーからどうかチェックしている「モバイルユーザビリティ」をチェックしてみたら、なんと、１ヶ月前には殆どエラーがなかったモバイルユーザビリティでエラーが増殖中ではないですか！
どういうこった？
WordPressのサイトはレスポンシブデザインで、数カ月前に４月２１日から始まるグーグルのモバイルフレンドリー優先を見越して、対応を済ませていたはず。
取り敢えず、一旦落ち着いて、エラーになっているページをモバイルフレンドリーテストにかけてみます。
モバイルフレンドリーではありませんとなっています。。
「コンテンツの幅が画面の幅を超えています」ということなので、なんか表とかテーブル要素がダメだったのかな～とエラーになっているページをスマホで見てみましたが、ぱっと見はコンテンツの幅が画面の幅を超えていませんし、リンク同士も近すぎたりはしていませんでした。
うーん (゜_゜)困った。
WordPressで原因不明の問題発生時はキャッシュ系プラグインを疑う
こういう時は、キャッシュ系のプラグインが怪しいことがあるので、利用しているW3 Total Cacheのキャッシュをクリアしてみるも結果変わらず。
先ほどのモバイルフレンドリーの結果をもう一度見てみると、Googlebotでアクセス出来ないリソースがあるということなので、何か間違ったものをブロックしてしまったかなと見てみると、javascriptやHTML,CSSを最適化してくれる「Autoptimize」というプラグインの名称がたくさん出てきました。
WordPressのAutoptimizeプラグインがモバイルフレンドリーに影響
robots.txtでワードプレスのプラグインフォルダやキャッシュフォルダはボットに対してブロックしているので、googlebotがアクセスできないのは当然な結果なのですが、気になったので、一旦「Autoptimize」を停止して、再度モバイルフレンドリーテストを実行してみると「問題ありません」になりました！
AutoptimizeのCSS最適化がモバイルフレンドリーに悪影響
「Autoptimize」の全てが悪いのか、それとも一部なのか更に調査を進めます。
調査は、「Autoptimize」の最適化オプション設定を１つ１つon/offしてモバイルフレンドリーテストの結果が変わるかどうかで行いました。
まずは、HTMLの最適化をOFFにしてみます。
結果は変わらず。
次に、javascriptの最適化をOFFにしても結果は変わらず。
最後に、CSSの最適化をOFFにするとモバイルフレンドリーテストで問題なしとなったことから、CSSの最適化が影響していることが分かりました。
AutoptimizeプラグインとWordPress人気テーマ Stinger5の相性問題
しかし、「Autoptimize」を使っている他のワードプレスのサイトについて、cssの最適化を行っているのにモバイルフレンドリーテストで問題なしとなるサイトもありました。
即ち、「Autoptimize」だけが悪いわけではありません。
CSSの最適化On/Offによって変わるということなので、これは、ワードプレスで利用してるテーマのデザイン設定と関係がありそうです。
因みに私が運営しているワードプレスのサイトで利用させてもらっているのは@enjiさん作成のレスポンシブデザインテーマStinger5。
Stinger5とAutoptimizeの組み合わせがダメなのか、レスポンシブデザイン全般的にAutoptimizeとの相性がよくないのかは分かりませんが、謎のグーグルモバイルフレンドリーエラーに出くわした際には参考にしていただければと思います。
