seo

SEO の最適化

Lighthouse の SEO 監査と Google 検索のガイドラインに基づく検索エンジン最適化です。テクニカル SEO、ページ内最適化、構造化データに重点を置いています。

SEO の基礎

検索ランキング要因（影響度の目安）：

要因	影響度	このスキル
コンテンツの品質と関連性	~40%	一部対応（構造）
被リンクと権威性	~25%	✗
テクニカル SEO	~15%	✓
ページエクスペリエンス（Core Web Vitals）	~10%	Core Web Vitals を参照
ページ内 SEO	~10%	✓

---

テクニカル SEO

クロール可能性

robots.txt：

# /robots.txt
User-agent: *
Allow: /

# Block admin/private areas
Disallow: /admin/
Disallow: /api/
Disallow: /private/

# Don't block resources needed for rendering
# ❌ Disallow: /static/

Sitemap: https://example.com/sitemap.xml

Meta robots：

<meta name="robots" content="index, follow" />


<meta name="robots" content="noindex, nofollow" />


<meta name="robots" content="index, nofollow" />


<meta name="robots" content="max-snippet:150, max-image-preview:large" />

正規 URL：

<link rel="canonical" href="https://example.com/page" />


<link rel="canonical" href="https://example.com/current-page" />


<link rel="canonical" href="https://example.com/products" />

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>2024-01-15</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/products</loc>
    <lastmod>2024-01-14</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

サイトマップのベストプラクティス：

• サイトマップあたりの URL は最大 50,000 件、または 50MB までです
• 大規模なサイトではサイトマップインデックスを使用します
• 正規 URL かつインデックス登録可能な URL のみを含めます
• コンテンツが変更されたら lastmod を更新します
• Google Search Console に送信します

URL 構造

✅ Good URLs:
https://example.com/products/blue-widget
https://example.com/blog/how-to-use-widgets

❌ Poor URLs:
https://example.com/p?id=12345
https://example.com/products/item/category/subcategory/blue-widget-2024-sale-discount

URL のガイドライン：

• アンダースコアではなくハイフンを使用します
• 小文字のみを使用します
• 短く保ちます（75 文字未満）
• 対象キーワードを自然に含めます
• 可能な限りパラメーターを避けます
• 常に HTTPS を使用します

HTTPS とセキュリティ

<img src="https://example.com/image.jpg" />


<img src="http://example.com/image.jpg" />

SEO の信頼性を示すセキュリティヘッダー：

Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
X-Frame-Options: DENY

---

ページ内 SEO

タイトルタグ

<title>Page</title>
<title>Home</title>


<title>Blue Widgets for Sale | Premium Quality | Example Store</title>

タイトルタグのガイドライン：

• 50～60 文字（Google は約 60 文字で切り詰めます）
• 主要キーワードを前方に配置します
• すべてのページで固有のタイトルにします
• （ホームページ以外は）末尾にブランド名を配置します
• 適切な場合は行動を促す表現にします

メタディスクリプション

<meta name="description" content="" />


<meta
  name="description"
  content="Shop premium blue widgets with free shipping. 30-day returns. Rated 4.9/5 by 10,000+ customers. Order today and save 20%."
/>

メタディスクリプションのガイドライン：

• 150～160 文字にします
• 主要キーワードを自然に含めます
• 魅力的な行動喚起を含めます
• すべてのページで固有のものにします
• ページのコンテンツと一致させます

見出し構造

<h2>Welcome to Our Store</h2>
<h4>Products</h4>
<h1>Contact Us</h1>


<h1>Blue Widgets - Premium Quality</h1>
<h2>Product Features</h2>
<h3>Durability</h3>
<h3>Design</h3>
<h2>Customer Reviews</h2>
<h2>Pricing</h2>

見出しのガイドライン：

• 1 ページにつき <h1> は 1 つにします（メインテーマを示します）
• 論理的な階層にします（レベルを飛ばさないでください）
• キーワードを自然に含めます
• 汎用的ではなく、内容がわかる見出しにします

画像 SEO

<img src="IMG_12345.jpg" />


<img
  src="blue-widget-product-photo.webp"
  alt="Blue widget with chrome finish, side view showing control panel"
  width="800"
  height="600"
  loading="lazy"
/>

画像のガイドライン：

• キーワードを含む説明的なファイル名にします
• 代替テキストで画像の内容を説明します
• 圧縮し、適切なサイズにします
• フォールバックを用意したうえで WebP／AVIF を使用します
• ファーストビューより下の画像は遅延読み込みします

内部リンク

<a href="/products">Click here</a>
<a href="/widgets">Read more</a>


<a href="/products/blue-widgets">Browse our blue widget collection</a>
<a href="/guides/widget-maintenance">Learn how to maintain your widgets</a>

リンクのガイドライン：

• キーワードを含む説明的なアンカーテキストを使用します
• 関連する内部ページにリンクします
• ページあたりのリンク数を適切に保ちます
• リンク切れは速やかに修正します
• 階層を示すためにパンくずリストを使用します

---

構造化データ（JSON-LD）

組織

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Example Company",
    "url": "https://example.com",
    "logo": "https://example.com/logo.png",
    "sameAs": ["https://twitter.com/example", "https://linkedin.com/company/example"],
    "contactPoint": {
      "@type": "ContactPoint",
      "telephone": "+1-555-123-4567",
      "contactType": "customer service"
    }
  }
</script>

記事

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "How to Choose the Right Widget",
    "description": "Complete guide to selecting widgets for your needs.",
    "image": "https://example.com/article-image.jpg",
    "author": {
      "@type": "Person",
      "name": "Jane Smith",
      "url": "https://example.com/authors/jane-smith"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Example Blog",
      "logo": {
        "@type": "ImageObject",
        "url": "https://example.com/logo.png"
      }
    },
    "datePublished": "2024-01-15",
    "dateModified": "2024-01-20"
  }
</script>

商品

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "Blue Widget Pro",
    "image": "https://example.com/blue-widget.jpg",
    "description": "Premium blue widget with advanced features.",
    "brand": {
      "@type": "Brand",
      "name": "WidgetCo"
    },
    "offers": {
      "@type": "Offer",
      "price": "49.99",
      "priceCurrency": "USD",
      "availability": "https://schema.org/InStock",
      "url": "https://example.com/products/blue-widget"
    },
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "4.8",
      "reviewCount": "1250"
    }
  }
</script>

FAQ

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "What colors are available?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Our widgets come in blue, red, and green."
        }
      },
      {
        "@type": "Question",
        "name": "What is the warranty?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "All widgets include a 2-year warranty."
        }
      }
    ]
  }
</script>

パンくずリスト

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://example.com"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Products",
        "item": "https://example.com/products"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "Blue Widgets",
        "item": "https://example.com/products/blue-widgets"
      }
    ]
  }
</script>

検証

次のツールで構造化データをテストします：

• Google リッチリザルトテスト
• Schema.org バリデーター

---

モバイル SEO

レスポンシブデザイン

<meta name="viewport" content="width=1024" />


<meta name="viewport" content="width=device-width, initial-scale=1" />

タップ対象

/* ❌ Too small for mobile */
.small-link {
  padding: 4px;
  font-size: 12px;
}

/* ✅ Adequate tap target */
.mobile-friendly-link {
  padding: 12px;
  font-size: 16px;
  min-height: 48px;
  min-width: 48px;
}

フォントサイズ

/* ❌ Too small on mobile */
body {
  font-size: 10px;
}

/* ✅ Readable without zooming */
body {
  font-size: 16px;
  line-height: 1.5;
}

---

多言語 SEO

Hreflang タグ

<link rel="alternate" hreflang="en" href="https://example.com/page" />
<link rel="alternate" hreflang="es" href="https://example.com/es/page" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page" />
<link rel="alternate" hreflang="x-default" href="https://example.com/page" />

言語の宣言

<html lang="en">
  
  <html lang="es-MX"></html>
</html>

---

SEO 監査チェックリスト

重要

• HTTPS が有効になっている
• robots.txt でクロールが許可されている
• 重要なページに noindex が設定されていない
• タイトルタグが設定され、ページごとに固有である
• 1 ページにつき <h1> が 1 つである

優先度：高

• メタディスクリプションが設定されている
• サイトマップが送信されている
• 正規 URL が設定されている
• モバイル対応になっている
• Core Web Vitals に合格している

優先度：中

• 構造化データが実装されている
• 内部リンクの戦略がある
• 画像に代替テキストが設定されている
• 説明的な URL を使用している
• パンくずナビゲーションがある

継続的な対応

• Search Console のクロールエラーを修正する
• コンテンツの変更時にサイトマップを更新する
• ランキングの変化を監視する
• リンク切れを確認する
• Search Console のインサイトを確認する

---

ツール

ツール	用途
Google Search Console	インデックス登録を監視し、問題を修正する
Google PageSpeed Insights	パフォーマンスとCore Web Vitals
Rich Results Test	構造化データを検証する
Lighthouse	SEO全般を監査する
Screaming Frog	クロールを分析する

参考資料

• Google Search Central
• Schema.org
• Core Web Vitals
• Web Quality Audit