Web

SEO

中級

読み方:エスイーオー|英語:SEO

Search Engine Optimizationの略で、検索エンジンで上位に表示されるようにサイトを最適化することだよ。

やさしい説明

SEO(Search Engine Optimization)は、Googleなどの検索エンジンで自分のサイトを上位に表示させるための工夫です。

適切なHTMLの構造(セマンティックタグ)、メタタグ(title, description)、ページの表示速度、モバイル対応などが検索順位に影響します。

良いコンテンツを作ることが最も重要ですが、技術的なSEO対策も必要です。Web開発者なら基本を知っておくべき知識です。

具体例・使い方

<!-- SEOに重要なHTMLタグ -->
<head>
  <title>JavaScriptの基本 | プログラミング入門</title>
  <meta name="description" content="JavaScriptの基本をゼロから解説。変数・関数・イベントを実例つきで学べます。">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h1>JavaScriptの基本</h1>  <!-- 1ページに1つだけ -->
  <img src="js-logo.png" alt="JavaScriptのロゴ">  <!-- alt属性は必須 -->
</body>

技術的SEOのチェックポイント

  • title タグ — 各ページに固有のタイトルを設定(30〜60文字が目安)
  • meta description — ページ内容を要約した説明文(120〜160文字)
  • h1 タグ — 1ページに1つだけ。ページの主題を明確に示す
  • alt 属性 — 画像に代替テキストを設定(アクセシビリティにも重要)
  • ページ速度 — 表示が遅いと順位が下がる。画像の最適化が効果的
  • モバイル対応 — Googleはモバイル版を優先評価(モバイルファーストインデックス)
  • HTTPS — セキュリティのある接続が必須。HTTPSでないとペナルティがある

Googleの「Lighthouse」(開発者ツールのF12から使える)でSEOスコアを計測できます。100点満点で評価され、具体的な改善点も提示してくれます。

いつ使う?

Webサイトを公開するときは常に意識します。ブログ、ECサイト、ポートフォリオ——検索から人に見つけてもらいたいサイトにはSEO対策が必須です。

間違いやすいポイント

❌ titleやdescriptionを全ページ同じにする

各ページに固有の titledescription を設定しましょう。同じだと検索エンジンがページの違いを認識できず、重複コンテンツと判断される場合があります。

❌ h1を複数使う、またはh2から始める

h1 は1ページに1つだけ使います。見出しの階層(h1 → h2 → h3)は飛ばさずに順番に使いましょう。検索エンジンはページの構造を見出しで把握しています。

よくある疑問

Q: SEOの基本対策は?

A: ①適切なtitleタグ ②meta description ③見出し(h1-h6)の正しい使用 ④画像のalt属性 ⑤ページ速度の改善 ⑥モバイル対応、が基本です。

Q: SPAはSEOに弱い?

A: JavaScriptで描画するSPAはクローラーが内容を読めないことがあります。Next.jsなどのSSR/SSGフレームワークで解決できます。

Q: SEOの効果が出るまでの期間は?

A: 通常3〜6ヶ月かかります。すぐに結果は出ないので、継続的にコンテンツを改善していくことが大切です。

関連用語

  • セマンティック — 意味を持つHTMLタグを使うことでSEOにも効果がある
  • HTML — titleやmeta descriptionを設定する言語
  • レスポンシブ — モバイル対応はSEOの重要な要素
  • alt属性 — 画像のalt設定はSEOとアクセシビリティ両方に必要

関連ブログ記事

⚠️ 関連するエラー

❓ 関連するQ&A