SEO対策の基礎

SEO（Search Engine Optimization）とは、検索エンジンに自分のWebページを正しく評価・表示してもらうための最適化手法です。しかし、アルゴリズムの詳細は非公開であり、時と場合によって効果のある対策が変わることもあります。ここでは、そうした曖昧な要素ではなく、ユーザビリティに基づく論理的なSEO対策だけに絞って解説します。

1. 適切なメタ情報の設定

検索エンジンはページの <title> や <meta name="description"> を重視してコンテンツの概要を把握します。

1export const metadata = {
2  title: '記事タイトル',
3  description: 'このページの内容を簡潔に説明するテキスト（120文字以内推奨）'
4};

title はブラウザのタブにも表示され、検索結果のタイトルにもなる重要な要素です。description は検索結果のスニペットに表示される可能性があり、クリック率に影響を与えます。

2. セマンティックなHTML構造

検索エンジンはHTMLの構造から情報の重要度を判断します。以下のようなセマンティックなタグを使うことで、意図が明確に伝わります。

• <header>：ページのヘッダー
• <nav>：ナビゲーション
• <main>：メインコンテンツ
• <article>：独立した記事コンテンツ
• <h1>〜<h6>：見出し（構造的に正しい順序で）

3. 見出しタグ（h1〜h6）の階層構造

<h1> はそのページに1つだけ設定し、以下 <h2> → <h3> … のように階層構造を守ることが重要です。 これにより、コンテンツの構造が検索エンジンにも正しく伝わります。

4. ページごとに固有のURLを持つ

各ページは明確なURLでアクセスできるようにし、内容に応じたスラッグをつけましょう。 例：/blog/nextjs-seo-basics

また、URLの正規化（canonical）の設定も重要です。Next.jsでは以下のように設定できます：

1export const metadata = {
2  alternates: {
3    canonical: 'https://example.com/blog/nextjs-seo-basics'
4  }
5};

5. ページ速度の最適化

読み込み速度はユーザー体験に直結し、SEOにも影響を与えます。以下のような点に気をつけましょう。

• 画像はWebP形式など軽量なフォーマットを使用
• <img>にloading="lazy"を付ける
• 不要なJavaScriptの削減
• 外部フォントの読み込み数を最小限に

6. アクセシビリティの向上

アクセシビリティが高いサイトは、検索エンジンにも評価されやすくなります。

• 画像にalt属性を設定
• ボタンには明確なラベルを
• リンクのテキストは意味が伝わるものにする（例："こちら"ではなく"SEOの基本についてはこちら"）

7. モバイル対応（レスポンシブデザイン）

Googleはモバイルファーストインデックスを採用しているため、モバイル対応は必須です。Next.jsではレスポンシブなCSSやTailwind CSSなどのユーティリティを活用すると対応しやすくなります。

まとめ

SEO対策にはさまざまな方法がありますが、重要なのは検索エンジンの評価を意識する前に、まずユーザーの体験を最優先することです。論理的で明確なHTML構造、分かりやすい情報設計、アクセシビリティへの配慮、ページ速度の最適化など、ユーザビリティの高い設計を心がけましょう。