過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong>SEO（Search Engine Optimization）</strong>: Google 等の検索エンジンで上位表示させる施策の総称</li><li>基本: <strong>title タグ（60 文字以内）</strong>、<strong>meta description（160 文字）</strong>、<strong>見出し階層（h1 → h2 → h3）</strong></li><li>構造化データ: <strong>JSON-LD（schema.org 語彙）</strong>でリッチリザルト対応。Article / Product / FAQPage / BreadcrumbList</li><li><strong>Core Web Vitals</strong>: LCP < 2.5s / FID < 100ms / CLS < 0.1（2024 から INP に置換）</li><li>基盤: <strong>HTTPS 必須</strong> / <strong>canonical URL</strong> / <strong>sitemap.xml + robots.txt</strong> / <strong>Google Search Console 登録</strong></li></ul></td></tr></table>
<h2>SEO の全体像</h2>

<p>SEO は大きく <strong>3 つの軸</strong>で考えます:</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>軸</th><th>内容</th><th>主な施策</th></tr></thead>
<tbody>
<tr><td>テクニカル SEO</td><td>クローラビリティ・インデックス</td><td>sitemap、robots.txt、canonical、HTTPS、表示速度</td></tr>
<tr><td>コンテンツ SEO</td><td>検索意図に合う質の高い記事</td><td>title、description、見出し、本文、画像 alt</td></tr>
<tr><td>外部 SEO</td><td>被リンク・E-E-A-T</td><td>権威性のあるサイトからの自然リンク、著者情報</td></tr>
</tbody>
</table>

<h2>title タグ（最重要）</h2>

<p>検索結果のクリック率を最も左右します。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- ✅ 良い例 -->
<title>Laravel バリデーション完全ガイド（Form Request / カスタムルール） | CWiki</title>

<!-- ❌ 悪い例 -->
<title>Home</title>
<title>ページ1</title>
<title>すごく長くてキーワードを詰め込みすぎたタイトル...60 文字を大きく超えて検索結果で省略されてしまう</title></code></pre>
<ul>
<li><strong>30〜60 文字</strong>（日本語 30 文字前後）</li>
<li>主要キーワードを<strong>前半</strong>に配置</li>
<li>サイト名は末尾に <code>| サイト名</code> 形式</li>
<li>ページごとにユニーク</li>
</ul>

<h2>meta description</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><meta name="description" content="Laravel のバリデーションを基本から応用まで網羅。$request->validate() の使い方、Form Request クラス、カスタムルール、エラーメッセージのローカライズ、API レスポンスまでサンプルコード付きで解説します。"></code></pre>
<ul>
<li><strong>120〜160 文字</strong>（PC 検索結果の表示幅）</li>
<li>記事の<strong>結論と読み終わるメリット</strong>を含める</li>
<li>キーワードは含めるが詰め込みすぎない（自然な文）</li>
</ul>

<h2>見出し階層（h1 / h2 / h3）</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- ✅ 正しい階層 -->
<h1>Laravel バリデーション完全ガイド</h1>
  <h2>基本: $request->validate()</h2>
    <h3>失敗時の挙動</h3>
  <h2>Form Request クラス</h2>
    <h3>authorize()</h3>
    <h3>rules()</h3>

<!-- ❌ 階層スキップは NG -->
<h1>...</h1>
  <h4>サブセクション</h4>  <!-- h2 / h3 を飛ばしている --></code></pre>
<h2>構造化データ（JSON-LD）</h2>

<p>Google が記事の意味を理解するための<strong>機械可読なメタ情報</strong>。リッチリザルト（強調表示）の対象になります。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Laravel バリデーション完全ガイド",
  "image": "https://example.com/article-cover.jpg",
  "datePublished": "2026-05-17T00:00:00+09:00",
  "dateModified": "2026-05-17T00:00:00+09:00",
  "author": {
    "@type": "Person",
    "name": "山田太郎"
  },
  "publisher": {
    "@type": "Organization",
    "name": "CWiki",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  }
}
</script></code></pre>
<p>FAQ 形式のページは <code>FAQPage</code> スキーマで Q&A が直接検索結果に表示されます:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "Laravel のバリデーションはどこに書くのが良い？",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "小規模ならコントローラに、規模が大きくなったら Form Request クラスに分離するのが推奨です。"
    }
  }]
}
</script></code></pre>
<h2>Open Graph / Twitter Card</h2>

<p>SNS シェア時のサムネ・タイトル・説明文を制御します:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- Open Graph (Facebook / LINE 等共通) -->
<meta property="og:title" content="Laravel バリデーション完全ガイド">
<meta property="og:description" content="$request->validate() から Form Request まで...">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:url" content="https://example.com/articles/123">
<meta property="og:type" content="article">
<meta property="og:site_name" content="CWiki">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Laravel バリデーション完全ガイド">
<meta name="twitter:description" content="...">
<meta name="twitter:image" content="https://example.com/ogp.png"></code></pre>
<h2>sitemap.xml と robots.txt</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-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>2026-05-17</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/articles/123</loc>
    <lastmod>2026-05-17</lastmod>
  </url>
</urlset></code></pre><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-text"># robots.txt
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/

Sitemap: https://example.com/sitemap.xml</code></pre>
<h2>canonical URL（URL 正規化）</h2>

<p>同じ内容が複数 URL で見える場合、評価が分散しないよう正規 URL を指定します:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- https://example.com/articles/123?utm_source=twitter にアクセスされた時 -->
<link rel="canonical" href="https://example.com/articles/123"></code></pre>
<h2>Core Web Vitals（表示速度・UX）</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#fff3e0"><th>指標</th><th>意味</th><th>目標</th></tr></thead>
<tbody>
<tr><td><strong>LCP</strong> (Largest Contentful Paint)</td><td>最大要素の表示時間</td><td>< 2.5 秒</td></tr>
<tr><td><strong>INP</strong> (Interaction to Next Paint)</td><td>入力 → 反映までの遅延（旧 FID）</td><td>< 200ms</td></tr>
<tr><td><strong>CLS</strong> (Cumulative Layout Shift)</td><td>レイアウトのずれ量</td><td>< 0.1</td></tr>
</tbody>
</table>

<p>計測ツール: <strong>PageSpeed Insights</strong> / <strong>Lighthouse</strong> / <strong>Chrome DevTools Performance</strong>。</p>

<h2>必須の運用ツール</h2>

<ul>
<li><strong>Google Search Console</strong>: クロール状況、検索パフォーマンス、インデックス登録、Core Web Vitals 確認</li>
<li><strong>Google Analytics 4 (GA4)</strong>: 流入元、ユーザー行動、コンバージョン</li>
<li><strong>Bing Webmaster Tools</strong>: Bing への登録</li>
<li><strong>PageSpeed Insights</strong>: ページ速度の継続計測</li>
</ul>

<h2>SEO アンチパターン</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#ffebee"><th>NG 行為</th><th>リスク</th></tr></thead>
<tbody>
<tr><td>キーワード詰め込み（同じ語の反復）</td><td>スパム判定でランクダウン</td></tr>
<tr><td>隠しテキスト（白背景に白文字）</td><td>手動ペナルティ</td></tr>
<tr><td>低品質ページの大量生成（コピペ・自動生成）</td><td>Helpful Content Update で全サイト評価低下</td></tr>
<tr><td>有料リンク購入 / 相互リンク集</td><td>リンクスパムでペナルティ</td></tr>
<tr><td>cloaking（クローラと人で表示を変える）</td><td>インデックス削除</td></tr>
</tbody>
</table>

<h2>FAQ</h2>

<p><strong>Q: SEO の効果はどれくらいで出る？</strong><br />
A: 一般に 3〜6 ヶ月。新規ドメインは 1 年以上かかることもあります。</p>

<p><strong>Q: AI 生成記事は SEO に不利？</strong><br />
A: Google は「生成手段でなく品質で判定」と公式アナウンス。ただし低品質な大量生成は Helpful Content で減点されます。</p>

<p><strong>Q: モバイル対応はどの程度重要？</strong><br />
A: Google は<strong>モバイルファーストインデックス</strong>を採用済。スマホでの表示・速度が評価の基本となります。</p>