SEO内部対策「スマホ」についての記事一覧
モバイル用ページを別URLで管理する正しい方法
SEO対策の中で、スマホ対応はもはや必須と言っても良いほど重要な対策のひとつですが、モバイル用のページを以前からPC用ページとは別で既に用意していて、今後もそれで運用していく予定の方も多いかと思います。
この管理方法で注意したい所は、そのモバイル用に作成したページが正しくモバイル対応と認識されているのかどうかはもちろん、PC用とモバイル（スマホ）用のページが存在することを検索エンジンに正しく認識してもらわなければ、全く同じコンテンツがサイト内に存在すると認識されてしまい、せっかくの評価を落としてしまう可能性があるという点です。
では、今回はPC用ページとモバイル用ページを別々のURL（ディレクトリやサブドメイン）で管理する場合の正しい方法をご紹介したいと思います。
スマホ対応しているかどうかのテストは下記のページでチェックすることができます。
→モバイル フレンドリー テスト
WordPressのサイトをレスポンシブデザインにする方法
WordPress独自の方法があるようなタイトルですが…レスポンシブデザインは、WordPress専用の作り方が特別ある訳ではありません。
WordPressで作られたサイトでも、レスポンシブデザインにすることは難しくありません。
通常のサイトと同じ手順で簡単にレスポンシブデザインにすることができます！
スマホでのSEO対策を行うには、レスポンシブデザインは必須です。
ということで今回は、WordPressで作られたサイトに着目して、レスポンシブデザインを導入する方法をまとめていきたいと思います。
【css】displayの値オススメ5つ！レスポンシブデザインにも便利
コーディング作業で使用頻度の高いcssのうちのひとつ、「display」は指定できる値が色々とあります。基本は、要素の表示を指定するもので、spanのようなインライン要素をブロック要素として扱うことができたり、コンテンツの中身を非表示にしたりと、レスポンシブデザインにも大変便利なcssです。
レスポンシブデザインにする際によく使う項目は下記の記事も参考にしてみてください。
レスポンシブデザイン簡単導入法02 - よく使うcssまとめ編そして、SEO対策を行うには、htmlの知識も多少必要となります。
今回はその中から特におすすめの値を5つ紹介するので、ぜひコーディングの参考にしてください。
レスポンシブデザイン簡単導入法03 – モバイルフレンドリー テスト編
レスポンシブデザインを導入する際に、モバイルフレンドリーのテストで確認されるかと思いますが、エラーの項目とそれぞれの合格ラインを確認したものをまとめたいと思います。
ぜひ、スマホ対応の参考にしてみてください。
https://www.google.com/webmasters/tools/mobile-friendly/?hl=ja
今回はモバイルフレンドリーをテストするために、このような仮のページを用意しました。（横幅：pc用960px/スマホ用100%）
そして、モバイルフレンドリーに合格するためにはこちらのエラー項目をクリアする必要があります。
- テキストが小さすぎて読めません
- モバイル用 viewport が設定されていません
- リンク同士が近すぎます
- コンテンツの幅が画面の幅を超えています
これらを色々な設定でテストしてみたいと思います。
レスポンシブデザイン簡単導入法02 – よく使うcssまとめ編
レスポンシブデザインの導入のために、ビューポートとメディアクエリを設定した後は、スマホ用のcssを調整しながら各デバイスに対応していくわけですが、今回はその際によく使う、cssのポイントをご紹介したいと思います。
レスポンシブデザインはcssで各デバイス用に表示します。
そして、この記事でご説明するcssでほぼできあがってしまいます。しっかりとバックアップを取りながらスマホ対応を行いましょう。
レスポンシブデザイン簡単導入法01 – ビューポート・メディアクエリ編
運営中のサイトを自分でスマホ対応にしたいという方へ、具体的なレスポンシブデザインの導入方法を数回に分けて、まとめていきたいと思います。
レスポンシブデザインについては、2015年4月21日からスマホ対応していないサイトに対して、スマホでの検索結果が下がる、モバイルフレンドリーアルゴリズムが導入されることから、モバイルユーザーの多いサイトは必須の対応となります。
モバイルフレンドリーに対応しているかどうかは、こちらから確認できます。
https://www.google.com/webmasters/tools/mobile-friendly/?hl=ja
※モバイルフレンドリーはサイト単位ではなく、ページ単位となるので、全ページ対応しないといけない訳ではありません。
今回は、このモバイルフレンドリーに対応する方法としてGoogleが推奨しているレスポンシブデザインにするための準備とポイントをご紹介します。
スマホ表示を高速化するAMP（Accelerated Mobile Pages）とは？
サーチコンソールにAccelerated Mobile Pages（以下AMP）という項目が追加されたことは、もうお気付きかと思いますが、2016年2月後半からgoogleの検索に追加表示されたというこのAMPとは実際のところ何なのか？現状、対応する必要があるのか？などをこの記事でご説明したいと思います。
簡単！レスポンシブデザインの作り方のすべて
レスポンシブデザイン導入されていますか？
2016年5月からモバイルフレンドリーが強化されます。詳細な日付はアナウンスされていませんが、徐々に更新されるとのことです。
これによって、よりスマホでのSEO対策にはレスポンシブデザインが必須となります。
念のため、スマホで上位表示させたい重要なページがモバイルフレンドリーに対応しているかどうか確認しておきましょう。
参考：モバイル フレンドリー テスト
この記事ではモバイルフレンドリーに対応するためのレスポンシブデザインの作り方をすべてご紹介したいと思います。
