SEOとは
SEO（Search Engine Optimization）は、検索エンジンでWebサイトを上位表示させるための施策です。適切なSEO対策により、より多くのユーザーにサイトを見つけてもらえます。
2025年のGoogleアルゴリズムでは、E-E-A-T（経験・専門性・権威性・信頼性）とコアウェブバイタルがより重視されています。
オンページSEO
ページ内で行う最適化です。HTMLの適切な記述が検索順位に直結します。
タイトルタグの最適化
効果的なタイトルタグ
<!-- 良い例 -->
<title>React Hooks入門 - useStateとuseEffectの使い方【2025年版】</title>
<!-- ポイント -->
✓ 主要キーワードを先頭に配置
✓ 30〜60文字程度（60バイト以内推奨）
✓ ページごとにユニーク
✓ ブランド名は後ろに
<!-- 悪い例 -->
<title>トップページ | 株式会社〇〇</title> /* キーワードなし */
<title>ページ1</title> /* 意味のないタイトル */メタディスクリプション
クリック率を上げる説明文
<meta
name="description"
content="React Hooksの基礎をわかりやすく解説。useState、useEffectの使い方から実践的なカスタムフックの作成まで、コード例とともに学べます。"
>
<!-- ポイント -->
✓ 120〜160文字程度（スマホ表示も考慮）
✓ ページの内容を具体的に説明
✓ アクションを促す言葉を含める
✓ キーワードを自然に含める見出しタグの階層構造
正しい見出し構造
<!-- 良い例：論理的な階層 -->
<h1>React Hooks入門ガイド</h1>
<h2>Hooksとは</h2>
<p>説明文...</p>
<h2>基本的なHooks</h2>
<h3>useState</h3>
<p>説明文...</p>
<h3>useEffect</h3>
<p>説明文...</p>
<h2>実践例</h2>
<h3>データ取得</h3>
<h4>非同期処理の扱い</h4>
<!-- NG: h1が複数、階層飛ばし -->
<h1>見出し1</h1>
<h1>見出し2</h1> /* h1が2つ */
<h4>見出し4</h4> /* h2, h3を飛ばしている */画像の最適化
SEOに配慮した画像タグ
<img
src="react-hooks-diagram.webp"
alt="React HooksのuseStateとuseEffectの動作フロー図"
width="800"
height="450"
loading="lazy"
>
<!-- ポイント -->
✓ alt属性: 画像の内容を具体的に説明
✓ width/height: CLSを防ぐため必須
✓ loading="lazy": 遅延読み込みでLCP改善
✓ WebP形式: ファイルサイズ削減
✓ ファイル名: キーワードを含めるテクニカルSEO
メタタグの基本設定
必須のhead内設定
<head>
<!-- 文字エンコーディング（最初に配置） -->
<meta charset="UTF-8">
<!-- ビューポート（レスポンシブ必須） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- タイトルとディスクリプション -->
<title>ページタイトル</title>
<meta name="description" content="説明文">
<!-- 正規URL（重複コンテンツ対策） -->
<link rel="canonical" href="https://example.com/page/">
<!-- OGP（SNSシェア用） -->
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="説明文">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="article">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
</head>robots.txtとsitemap.xml
robots.txt
# クローラーへの指示
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /private/
# サイトマップの場所
Sitemap: https://example.com/sitemap.xmlsitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/</loc>
<lastmod>2025-01-15</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://example.com/blog/</loc>
<lastmod>2025-01-10</lastmod>
<changefreq>daily</changefreq>
<priority>0.8</priority>
</url>
</urlset>構造化データの実装
構造化データ（JSON-LD）を追加すると、検索結果にリッチスニペットが表示される可能性があります。
記事ページの構造化データ
Article構造化データ
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "React Hooks入門ガイド",
"description": "React Hooksの基礎を解説...",
"image": "https://example.com/images/react-hooks.jpg",
"author": {
"@type": "Person",
"name": "著者名"
},
"publisher": {
"@type": "Organization",
"name": "サイト名",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
},
"datePublished": "2025-01-15",
"dateModified": "2025-01-20"
}
</script>FAQページの構造化データ
FAQPage構造化データ
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "React Hooksとは何ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "React Hooksは関数コンポーネントで状態管理やライフサイクルを扱える機能です。"
}
},
{
"@type": "Question",
"name": "useStateの使い方は？",
"acceptedAnswer": {
"@type": "Answer",
"text": "const [state, setState] = useState(初期値) の形で宣言します。"
}
}
]
}
</script>パンくずリストの構造化データ
BreadcrumbList構造化データ
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "ホーム",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "ブログ",
"item": "https://example.com/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "React Hooks入門"
}
]
}
</script>SEOツールと分析
Google Search Console
検索パフォーマンスの確認、インデックス状況の把握
Google Analytics
ユーザー行動の分析、流入経路の把握
PageSpeed Insights
ページ速度とCore Web Vitalsの測定
リッチリザルトテスト
構造化データの検証
定期チェックリスト
1
週次
Search Consoleでエラー確認、インデックス状況チェック
2
月次
検索順位の推移確認、Core Web Vitals測定
3
四半期
コンテンツの更新・リライト、内部リンク構造の見直し
まとめ
SEOは一朝一夕で効果が出るものではありませんが、基本を押さえて継続的に改善することで、検索順位の向上が期待できます。まずはタイトルタグとメタディスクリプションの最適化から始め、徐々に構造化データやテクニカルSEOにも取り組んでいきましょう。
H
honualohak編集部
テクノロジーで人々の日常をより便利に。AI、プログラミング、Web開発に関する情報を発信しています。