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