当サイトではWordPressで配布されているレスポンシブテーマを利用しているが、Google先生から言わせると、「ページがモバイルフレンドリーではありません。」だそうです。
見た目はめっちゃフレンドリーなのですが。
そこで、これまたGoogle先生が提供している「モバイル フレンドリー テスト」というものをやってみました。
モバイルフレンドリーテスト
以下のリンク先でテストするURLを入力し、「テストを実行」ボタンを押すだけです。
しばらく待つと結果が出ます。
モバイル フレンドリー テスト – Google Search Console
そして、出た結果が…。
![このページはモバイルフレンドリーではありません](https://minory.org/wp-content/uploads/2018/01/mobile-fliendly-01.png)
さらに「次の2件の問題を修正してください」と書いてあり、
- クリック可能な要素同士が近すぎます
- コンテンツの幅が画面の幅を超えています
でした。何っ!!?右側を見ると確かにガッタガタだが、CSSはどうした!?
そりゃCSSが適用されなきゃフレンドリーじゃなくなるだろ!そして本来の姿がこちらです。
![Minory レスポンシブ版](https://minory.org/wp-content/uploads/2018/01/minory-mobile.png)
全然ちゃうやんけ!
WPtouchプラグイン
今まで特に気にしていませんでしたが、何やらSEOにも関わるらしいので、対策したいと思います。
しかし、今更テーマを改造するのは嫌なので、昔使ってたWPtouchプラグインを入れることにしました。
![](https://ps.w.org/wptouch/assets/banner-772x250.jpg?rev=3085904)
少しデザインを変えてできたのがこちら。
![](https://minory.org/wp-content/uploads/2018/02/minory-wptouch.png)
ちょっとダサくなったけど我慢。
別のテーマもあるようなので、気になる方は探してみてください。
AMPプラグインも入れておく
ついでに、これまたGoogle先生が推奨しているAMP(Accelerated Mobile Pages)にも対応したいと思います。
AMP「モバイルページを高速に表示させるための手法」のことらしいです。
こちらもSEOに関わりそうなので対応しておきます。
詳しくは以下をご参照ください。
![](https://digitalidentity.co.jp/blog/wp/wp-content/uploads/2016/07/IMG_6209.png)
出典:【AMP】Googleが推進するAMPとは?概要と対応方法まとめ
AMPプラグイン
公式プラグインページはこちら。
使い方はインストールして有効化するだけ。
![](https://techblog.recruit.co.jp/assets/rmp/thumbnail/10773.jpg)
URLを~/amp/にしたら確認できます。
確認例
1 |
https://minory.org/start.html/amp/ |
アクセスしてみると確かに高速。いかがでしたでしょうか?
新たに追加したプラグインもこちらのページでまとめておきます。
![](https://minory.org/wp-content/uploads/2017/08/wordpress_plugins-e1642912029964-300x200.jpg)
![](https://minory.org/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
コメント