モバイルSEOは、スマホでサイトを快適に閲覧できるようにユーザービリティを高め、Googleの高評価をもらうことで検索順位向上につなげる施策です。Googleはモバイルファーストインデックスを採用し、PC向けサイトよりもモバイル向けサイトを重視するようになりました。レスポンシブなどの手法で、単にスマホ対応するだけでは評価してもらえない項目もあります。どのような判定基準があるのか、確認しておきましょう。
概要
モバイル向けSEOに関して、Googleは以下の7つの項目に対応することを推奨しています。
- テキストを読める大きさにする
- 縦スクロールでページが見れるようにする
- リンクやボタンを押しやすくする
- Flashを使わない
- モバイルとPCでは同じコンテンツを表示させる
- モバイルとPCで相互にリダイレクトする
- canonicalリンクタグを設置する
このうち、ルール①~④は、「モバイルフレンドリー」と呼ばれています。Googleはこの4つの基準を使い、スマホに対応しているサイトかどうかをチェックしています。
ルール① テキストを読める大きさにする
概要
16pxを目安にフォントサイズを設定します。
Googleはテキストのフォントサイズをチェックする
ページをインデックスに登録する際、Googleはテキストの大きさが適切かどうかをチェックしています。フォントサイズが小さくて読みづらい場合、そのページは「モバイルフレンドリーではない」と判定されます。
モバイルフレンドリーは検索ランキングの要因で、モバイルフレンドリーではないページはマイナス評価となります。
フォントサイズを適切な値に設定する
備考や注釈のようなテキストも含め、フォントサイズを適切な値に設定します。
Googleは本文のフォントサイズとして16pxを推奨しているので、これを目安にします。
フォントサイズを設定しても小さすぎる場合は、次のようなmetaタグを追加すると、スマホの画面サイズに応じて適切な大きさで表示されるようになります。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
モバイルフレンドリーテストツールを使い、Googleがモバイルフレンドリーとして判断したかどうか、調べておきましょう。
ルール② 縦スクロールでページが見れるようにする
概要
画面幅に合わせてレイアウトし、横スクロールせずにページ全体が見れるようにします。
横スクロールができてしまうとモバイルフレンドリーではない
スマホの画面幅を超えるような画像やテーブルは、横スクロールするか、縮小表示させないと見ることができません。このような横スクロール操作は、ユーザービリティ上も快適とは言えないので、Googleは画面幅を超えるコンテンツを見つけ次第、「このページはモバイルフレンドリーではない」と判断します。
画像やテーブルの最大幅を設定する
スマホサイトで画面幅を超えやすいものは、画像とテーブルです。普段と異なる大きな画像を使用したときや、列数が多かったりテキスト分量が多いテーブルを記述したときに発生しやすいです。通常、次のようなCSSをあらかじめ書いておけば解決します。
img, table {
max-width: 100%;
}
スマホサイトのレイアウトを確認する
SEO分析ツール「アナトミー」は、最大240画面のキャプチャを毎週自動取得して履歴を保存してくれます。
スマホ画面のレイアウトを確認できるので便利です。
ルール③ リンクやボタンを押しやすくする
概要
連続する短いアンカーテキストを避けます。
Googleはリンクやボタンの位置を自動判定する
スマホでは指を使ってリンクやボタンをタップするので、ボタンが小さかったり、リンクが近くに並んでいたりすると、押し間違いやすくなります。Googleは、リンクやボタンの大きさと、その位置関係を定期的にチェックし、「押しにくい」もしくは「押し間違えやすい」リンクやボタンを見つけ次第、「このページはモバイルフレンドリーではない」と判断します。
短かすぎるアンカーテキストは避ける
リンクのテキスト文字列が英語で1~3文字のように短く、かつ連続している場合は、リンクがタップしづらくなります。アンカーテキストを長くしたり、長くできない場合は行を分けたりします。
例1:モバイルフレンドリーなリンク
<a href="...">src属性</a> <a href="...">alt属性</a>
例2:モバイルフレンドリーなリンク
<ul>
<li><a href="...">src</a></li>
<li><a href="...">alt</a></li>
</ul>
例3:モバイルフレンドリーではないリンク(アンカーテキストが短い)
<a href="...">src</a> <a href="...">alt</a>
ルール④ Flashを使わない
概要
Flashを代わりの代替技術を使います。
FlashはPC向けブラウザもサポート終了
スマホ向けブラウザはFlashに対応しておらず、PC向けブラウザもFlashのサポートが終了しています。Googleは、Flashを使用したページを「モバイルフレンドリーではない」と判断し、検索順位ではマイナスの影響があります。
代わりの技術に置き換える
現在ではFlashを使わなくても、HTML 5やCSS 3で同様のアニメーションやUIが実現できるようになっています。
モバイルフレンドリー対応については、以下の記事をご参考ください。
- 関連記事:モバイルフレンドリーとは?対応と確認方法
ルール⑤ モバイルとPCでは同じコンテンツを表示させる
概要
モバイルとPCとで情報量の差をつけないようにします。
モバイルもPCと同じコンテンツが前提
閲覧するデバイスによって情報量に差があるのは、ユーザーにとって望ましくないはずです。Googleもデバイスによる情報量に違いをチェックしており、「デバイスによらず同じコンテンツ」を推奨しています。
HTMLをスマホ用・PC用で分けて作らない
スマホ用ページとPC用ページを別々に作成するのではなく、レスポンシブやモバイルサイトライブラリを使い、1つのHTMLで構成します。
スマホ用ページとPC用ページを別々に作成する場合は、デザインは異なっていても、コンテンツが同一になるようにします。
- 関連記事:レスポンシブデザインがSEOに有利な理由
ルール⑥ モバイルページかPCページへリダイレクトする
概要
PCページとモバイルページが別々に存在する場合は、デバイスに応じたページへリダイレクトします。
クローラーはPC用とスマホ用が巡回する
検索エンジンのクローラーには、PCサイトを巡回する「PC用クローラ」と、スマホサイトを巡回する「スマホ用クローラ」の2種類があります。
PCページとスマホページが別々に存在しているときの話になりますが、PCページに「スマホ用クローラー」がアクセスしたときに、スマホページにリダイレクトされると、クローラーはスマホページを発見できます。また、スマホページに「PC用クローラー」がアクセスしたときに、PCページにリダイレクトされると、クローラーはPCページを発見できます。
デバイスに応じたページへリダイレクトする
「スマホサイトはこちら」というリンクを設置しても、クローラーがその先がスマホページだとは認識できません。
サーバーの設定を変更し、スマホブラウザからPCページへアクセスされたときはスマホページへリダイレクトします。同様に、PCブラウザからスマホページへアクセスされたときはPCページへリダイレクトします。
ルール⑦ canonical linkタグを設置する
概要
URL正規化を行い、PCとモバイルのコンテンツの評価を合算します。
Googleは類似コンテンツをまとめて評価する
検索エンジンは「URL正規化」という類似コンテンツを集約する処理を行ったうえで、SEO評価を行っています。PC用ページとスマホ用ページが別々のURLのとき、Googleはそれらが類似コンテンツ、つまり同じ内容のページと自動的に判断します。ただし、類似コンテンツの自動判別が正しく機能しないときもあり、その場合はSEO評価がダウンする可能性があります。
canonical linkタグを設置する
canonicalタグは、正規化URLを検索エンジンに伝える役割を持つタグで、類似コンテンツ(重複コンテンツ)のURLを正規化できます。canonicalリンクタグでは、PCページのURLを指定します。
<link rel="canonical" href="https://example.com/service/">
無料のSEOセミナーで検索の仕組みが学べる
テクニカルSEOを行う上でGoogleの検索の仕組みを理解することは必要不可欠です。
検索の仕組みを知り、現状の把握、具体的施策ができるように、弊社では「Google公式SEOガイド読解セミナー【検索の仕組み編】」というセミナーを実施しています。
テクニカルSEOをこれから実践する方にとって最適な内容になっているので、ぜひご参加ください。
まとめ
モバイルSEOは、基本的にスマホでの使い勝手を向上することです
スマホでの操作性・表示速度を良くするには、スマホを第一に考える「モバイルファースト」の考え方が役に立ちます。
GoogleはPCサイトよりもモバイルサイトの評価を優先しているので、モバイルファーストはSEOにおける自然な流れと言えるでしょう。
- 関連記事:モバイルファーストの意味とは?
最後に弊社ではサーチコンソールとGA4データを1つにまとめて分析ができる「SEO分析ツール アナトミー」 を提供しております。運用しているサイトのSEOチェックを行うのに必要な機能が揃ったダッシュボードプランは全て無料でずっとご利用いただけます。是非、アナトミーに無料登録してサイトのSEOチェックをしてみてください。