ブログやホームページを開設してる運営者サイドは、モバイルユーザーがより快適につかえるよう、2015年にグーグルがモバイルフレンドリーテストを提供しました。ページ表示速度など遅すぎたら、改善してユーザーも目を配ろうって取り組みです。
前はクローラー見せる義務はなかったJavaScript・cssファイルを表示させるようになったのは、ページの装飾まで知ってスマホユーザーに不便がないかをみるようになったんですね。（ボタンの装飾が近いと誤タップしやすいなど）
さっそくモバイルフレンドリーって何なのかを見てみましょう！
モバイルフレンドリーって！？どう言う事？
モバイルフレンドリーって、ブログやサイト運営者がスマホユーザーにも目を配ろう！ってGoogleが2015年4月下旬から始めた取り組みです。
PC画面は大きく見やすいけど、スマホは画面も小さいし仕様が違ってきています。そんなスマホは、ユーザーにとって親切設計となってるか！？スマホユーザーにも目を配りましょう！って事なんです。
例えば字が小さすぎたり、タップするボタンが近すぎたら、使いづらいですよねっ。PCでうまく表示されてるのにスマホでは、画像などが見切れてるとか。。スマホビューをついつい忘れがちになってないでしょうか？
参考CSSでスマホ対応！画面からはみ出す、グラグラ横揺れする原因！画像YouTubeブログカード、テーブル表が見切れる時の対処法
スマホ等のデバイスでも、表示される仕様のものを！
Flashなどの古いプレーヤーを使ってたら、再生できないどころかただの四角い箱が表示されるだけになって、見たいものが見れなかったりします。
動画やコンテンツの種類によってはモバイル端末で再生できないものがあります。たとえば、ライセンスの制約があるメディアの場合や、モバイル端末であまりサポートされていない Flash などのプレーヤーを必要とする場合などです。どのようなウェブサイトでも、再生できないコンテンツがページにあるとユーザーの不満が増すおそれがあります。
スマホから訪問したユーザーから見ると、PC環境では見れるんけどスマホじゃ見れない。運営者から見れば、訪問したユーザーさんがそのまま直帰するって惜しいですよね。
いまだにflashのインストールをと言われても、対応してないので困るし、グーグルは「ユーザーの視点に立って見るのが大事だよ」って、声を大にして言ってます。。
グーグルが推奨してる事をざっくり言うと。
- Flashや独自の動画プレーヤーでは、見れないって人の為にアニメーションは、標準搭載されているHTML5を使いましょう。
- 皆が見たい時に再生できるものを使おう。（再生出来ないモノは、出来るものに変更を推奨♪）
- 動画は、字幕をだせるようにした方がいいよ！
グーグルさん推奨アニメーション：Google Web Designer
モバイルフレンドリーテスト
モバイルフレンドリーテストは、クローラーはどんな見方をしてるかを表示し、スマホユーザーも使いやすい環境か分析した上で、改善点を教えてくれます。テストするのは、リンク先に飛んで自分のアドレスをコピペするだけです。
- Googlebotにどんな風にみられているのか？
- モバイルフレンドリーページの詳細
- Search Consoleサーチ コンソール(旧ウェブマスターツール）を利用しているか？
など項目が出てきて、色々教えてくれるので、試してみてください。
モバイルフレンドリーで問題ありなら、レスポンシブデザインを使えば良い！
レシポンシブデザインのブログでしたら、パソコン画面で見ていて画面の幅を縮めた時に画面からはみ出したりしません。スマホでみても基本、画像が見切れたりしないし、キレイに画面内に収まるように縮小しますっ♪
PC画面から見れる方は、試しに画面の幅を狭くしてみてください。左右ですよぉ(笑)
すると、スルスルｽﾙ～っと、上手い具合に収まってくれますよねっ！これがレスポンシブデザインの素敵な所！
初心者で上手くいかないって事があったら、レスポンシブデザインのテーマを探してみるのも良いですねっ。
速度を分析して最適化する為のツールPageSpeed Insights
WordPressって、もともと重たいって事もあったり、始めたばかりだからこそ後々の為にサイトのパフォーマンスを気にして速度を最適にしておくと後々楽です。ページも画像も、今後どんどん増える一方です。
PageSpeed Insightsではアドレス貼ると解析して結果としてアドバイスをもらえます。恐ろしく遅くなってるページがある時は、画像の圧縮して速度を改善して快適にしてみてはいかがでしょうか？
Googlebotに JavaScript・css・画像のファイルを見せてあげる
JavaScript・css・画像のファイルは、クローラーが内容をより良くブログの様子を理解する為に必要なファイルなんです！それが入ってるディレクトリは下記です。
- wp-contentファイル内
例えばwp-contentは、投稿に関係のあるページです。リンクとリンクがくっつき過ぎてたらユーザーさんにとってクリックしにくいです。それは、CSSを見ないと理解出来ないから、CSS等もクロールさせましょうねっ。
くっつき過ぎてたら直しましょうって意味も含めてモバイルフレンドリーがあります。
※CSSでボタンのボーダーの内側padding、ボーダーの外側maginの間隔を広げてあげると対応できますよね。
robots.txtファイルの設定を見る
クローラー（ロボット）にCSSとJsファイルを見ないでって設定していませんか？一度robots.txtファイルでDisallow（見ないで！）ってしてないかご確認くださいね。
ロボット（クローラー）に、その３つを見せておかないと私たちがいつも見ているブログのレイアウトと違った見方をされたら、モバイルフレンドリーではないって検索エンジンに評価されちゃうなんて、たまったもんじゃないですからねぇ♪
今の自分の設定の確認はブログのURLの後ろにrobots.txtとつけたら見れますよ！
http://hoge.com/robots.txt
さいごに
超簡単な説明でしたけど、あなたのブログはモバイルフレンドリーになっていますか？すぐに対応出来る事ですから、サクサクやってみましょうねっ♪
それではっ。かうたっくでした！
Comments