seo-meta

SEO メタタグ

ステータス：本番環境対応済み ✅ 最終更新日：2026-01-14 出典：Schema.org、Open Graph Protocol、Twitter Developer Docs

---

クイックスタート

すべてのページに必要です：

<head>
  {/* Basic SEO */}
  <title>Service in Location | Brand Name</title>
  <meta name="description" content="Value prop. Differentiator. Call to action." />
  <link rel="canonical" href="https://example.com/page" />

  {/* Open Graph */}
  <meta property="og:title" content="Service in Location" />
  <meta property="og:description" content="Value prop. Differentiator. CTA." />
  <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="website" />

  {/* Twitter Card */}
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Service in Location" />
  <meta name="twitter:description" content="Value prop. Differentiator. CTA." />
  <meta name="twitter:image" content="https://example.com/og-image.jpg" />

  {/* JSON-LD Structured Data */}
  <script type="application/ld+json">
    {JSON.stringify({
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "name": "Business Name",
      "description": "What we do",
      "@id": "https://example.com",
      "url": "https://example.com",
      "telephone": "+61-XXX-XXX-XXX",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "123 Main St",
        "addressLocality": "Sydney",
        "addressRegion": "NSW",
        "postalCode": "2000",
        "addressCountry": "AU"
      }
    })}
  </script>
</head>

---

タイトルタグのパターン

文字数制限：

• Google：50～60文字（デスクトップ）、78文字（モバイル）
• ソーシャル：60～70文字

ページタイプ別の数式：

ページタイプ	パターン	例
ホーム	[Brand] - [Primary Service] in [Location]	Acme Plumbing - 24/7 Emergency Plumber Sydney
サービス	[Service] in [Location] | [Brand]	Hot Water Repairs Sydney | Acme Plumbing
場所	[Service] [Suburb] | [Brand]	Plumber Bondi | Acme Plumbing
会社概要	About [Brand] - [Tagline/USP]	About Acme - Licensed Plumbers Since 1995
お問い合わせ	Contact [Brand] - [Location] | [Phone]	Contact Acme Plumbing - Sydney | 1300 XXX XXX

タイトル修飾語（信頼性を高めます）：

• 24/7 緊急対応
• ライセンス取得済み・保険加入済み
• 無料見積もり
• 即日対応
• 家族経営
• 受賞歴あり

避けるべきパターン：

• ❌ 「ようこそ…」（文字数を無駄にします）
• ❌ キーワードの詰め込み（plumber plumbing plumbers）
• ❌ すべて大文字（スパムのように見えます）
• ❌ 特殊文字（★ § ¶）

---

メタディスクリプションのパターン

文字数制限：

• デスクトップ：155～160文字
• モバイル：120～130文字

数式：

[Value prop] [Service] in [Location]. [Differentiator]. [CTA].

ページタイプ別の例：

ホームページ：

Fast, reliable plumbing services in Sydney. 24/7 emergency response, licensed plumbers, upfront pricing. Call 1300 XXX XXX for same-day service.

サービスページ：

Expert hot water repairs in Sydney. Fix or replace electric, gas & solar systems. Licensed technicians, 1-year warranty. Book online or call 1300 XXX XXX.

ロケーションページ：

Trusted plumber in Bondi. Blocked drains, leaks, hot water, gas fitting. Same-day service, upfront quotes. Call your local plumber on 1300 XXX XXX.

訴求力のある言葉（使いすぎないようにしてください）：

• 信頼性：ライセンス取得済み、認定済み、保険加入済み、保証付き、信頼できる
• スピード：迅速、すばやい、即日、緊急、24/7、即時
• 価値：手頃な価格、競争力のある価格、明朗会計、追加料金なし、無料見積もり
• 地域性：地元、近隣、お住まいの地域、[Suburb Name]
• 品質：専門家、プロフェッショナル、経験豊富、受賞歴あり

---

Open Graph タグ

必須タグ：

<meta property="og:title" content="Service in Location" />
<meta property="og:description" content="Value prop. Differentiator. CTA." />
<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="website" />

画像の要件：

• 寸法：1200x630px（比率 1.91:1）
• 形式：JPG または PNG（ファイルサイズを抑えられる JPG を推奨）
• ファイルサイズ：<1MB（理想は <300KB）
• テキストオーバーレイ：重要なテキストは中央に配置します（セーフゾーン：1000x530）

ページタイプ別の og:type 値：

ページタイプ	og:type
ホーム、サービス、ロケーション	website
ブログ記事	article
ビジネスプロフィール	business.business

任意ですが、推奨されるタグ：

<meta property="og:site_name" content="Brand Name" />
<meta property="og:locale" content="en_AU" />

---

Twitter Cards

カードタイプ：

タイプ	用途
summary	小さな正方形の画像（1:1）、基本情報
summary_large_image	大きな画像（1.91:1）、最も一般的

必須タグ：

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Service in Location" />
<meta name="twitter:description" content="Value prop. Differentiator. CTA." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />

任意のタグ：

<meta name="twitter:site" content="@yourbrand" />
<meta name="twitter:creator" content="@authorhandle" />

フォールバック動作：

• twitter:title がない場合、og:title が使用されます
• twitter:description がない場合、og:description が使用されます
• twitter:image がない場合、og:image が使用されます

ベストプラクティス：まず og:* タグを定義し、値が異なる場合にのみ twitter:* を追加します。

---

JSON-LD 構造化データ

LocalBusiness スキーマ（最も重要）

ホームページとお問い合わせページで使用します：

{
  "@context": "https://schema.org",
  "@type": "Plumber",
  "name": "Acme Plumbing",
  "description": "Licensed plumbing services in Sydney",
  "@id": "https://acmeplumbing.com.au",
  "url": "https://acmeplumbing.com.au",
  "logo": "https://acmeplumbing.com.au/logo.png",
  "image": "https://acmeplumbing.com.au/og-image.jpg",
  "telephone": "+61-XXX-XXX-XXX",
  "email": "[email protected]",
  "priceRange": "$$",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main Street",
    "addressLocality": "Sydney",
    "addressRegion": "NSW",
    "postalCode": "2000",
    "addressCountry": "AU"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": -33.8688,
    "longitude": 151.2093
  },
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      "opens": "07:00",
      "closes": "17:00"
    }
  ],
  "sameAs": [
    "https://facebook.com/acmeplumbing",
    "https://instagram.com/acmeplumbing"
  ]
}

具体的なビジネスタイプ（汎用的な LocalBusiness の代わりに使用）：

• Plumber、Electrician、Locksmith、HVAC（HVACBusiness）
• Dentist、Attorney、Accountant
• Restaurant、Cafe、FoodEstablishment
• Store、AutoRepair、BeautySalon

Service スキーマ

サービスページで使用します：

{
  "@context": "https://schema.org",
  "@type": "Service",
  "name": "Hot Water Repairs",
  "description": "Fast hot water system repairs in Sydney",
  "provider": {
    "@type": "Plumber",
    "name": "Acme Plumbing",
    "url": "https://acmeplumbing.com.au"
  },
  "areaServed": {
    "@type": "City",
    "name": "Sydney"
  },
  "availableChannel": {
    "@type": "ServiceChannel",
    "serviceUrl": "https://acmeplumbing.com.au/hot-water-repairs",
    "servicePhone": "+61-XXX-XXX-XXX"
  }
}

FAQ スキーマ（リッチスニペット）

FAQ セクションで使用します：

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How much does a plumber cost in Sydney?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Plumbing rates in Sydney typically range from $100-$150 per hour for standard work. Emergency callouts may incur higher rates. We provide upfront quotes before starting work."
      }
    },
    {
      "@type": "Question",
      "name": "Do you offer same-day service?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, we offer same-day plumbing service across Sydney for urgent repairs. Call us before 2pm for same-day availability."
      }
    }
  ]
}

BreadcrumbList スキーマ

ホームページを除くすべてのページで使用します：

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://acmeplumbing.com.au"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Services",
      "item": "https://acmeplumbing.com.au/services"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Hot Water Repairs",
      "item": "https://acmeplumbing.com.au/hot-water-repairs"
    }
  ]
}

---

正規 URL

使用する場合：

• すべてのページに自己参照型の正規 URL を設定します
• 重複コンテンツ（ページネーション、フィルター、印刷用バージョン）
• シンジケートされたコンテンツ
• ドメインをまたぐ重複コンテンツ

自己参照型の正規 URL：

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

ページネーション：

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

よくある間違い：

• ❌ 正規 URL がない（Google が選択します）
• ❌ 相対 URL（絶対 URL を使用してください）
• ❌ 正規 URL が異なるコンテンツを指している
• ❌ 正規 URL が複数ある（1ページにつき1つだけ）

---

検証ツール

実装を確認する：

ツール	目的	URL
Google Rich Results Test	構造化データをテストする	search.google.com/test/rich-results
Schema Markup Validator	JSON-LD を検証する	validator.schema.org
Facebook Debugger	Open Graph タグをテストする	developers.facebook.com/tools/debug
Twitter Card Validator	Twitter Cards をテストする	cards-dev.twitter.com/validator
Screaming Frog	すべてのページを監査する	screamingfrog.co.uk/seo-spider

ブラウザー拡張機能：

• SEO Meta in 1 Click（Chrome）
• META SEO inspector（Firefox）

---

クイックリファレンスチェックリスト

すべてのページに次を含めます：

• <title>（50～60 文字、ページごとに固有）
• <meta name="description">（150～160 文字、ページごとに固有）
• <link rel="canonical">（絶対 URL）
• Open Graph タグ（og:title、og:description、og:image、og:url、og:type）
• Twitter Card タグ（twitter:card、twitter:title、twitter:description、twitter:image）
• JSON-LD 構造化データ（ホームページには LocalBusiness、サービスページには Service）
• BreadcrumbList スキーマ（ホームページを除くすべてのページ）
• モバイルビューポートのメタタグ
• 文字コードのメタタグ（UTF-8）

次のことは避けてください：

• ❌ ページ間でタイトルを重複させる
• ❌ タイトルに「Welcome to...」を使う
• ❌ og:image を省略する（ソーシャル共有に不可欠です）
• ❌ 汎用的な @type を使う（Plumber ではなく LocalBusiness）
• ❌ メタディスクリプションに CTA を含めない

---

エラーの防止

よくある問題

問題	原因	対処法
検索結果にリッチスニペットが表示されない	JSON-LD が無効	validator.schema.org を使い、カンマと引用符を確認します
ソーシャル共有で誤った画像が表示される	og:image がない、またはサイズが正しくない	1200x630px を使用し、Facebook Debugger でテストします
検索結果でタイトルが途中で切れる	長すぎる	60 文字未満にします
ディスクリプションが途中で切れる	長すぎる	160 文字未満にします
同じキーワードで複数のページがランクインする	タイトルの重複	各タイトルを固有のものにします

テストワークフロー

1. HTML を検証する：W3C validator を使用します
2. 構造化データをテストする：Google Rich Results Test
3. ソーシャル共有をテストする：Facebook Debugger + Twitter Card Validator
4. モバイルでの表示をプレビューする：Google Search Console URL Inspection
5. クロスブラウザーで確認する：Chrome/Firefox/Safari でメタタグの表示をテストします

---

ベストプラクティスのまとめ

タイトルタグ：

• 最大 50～60 文字
• 主要キーワード + 地域 + ブランドを含める
• すべてのページで固有にする
• 修飾語（24/7、Licensed、Free）は控えめに使う

メタディスクリプション：

• 最大 150～160 文字
• 提供価値 + 差別化要素 + CTA を含める
• 検索エンジンではなく、人に向けて書く
• すべてのページに固有のディスクリプションが必要です

Open Graph：

• 必ず og:image を含める（1200x630px）
• 絶対 URL を使う
• og:title は 60 文字未満にする
• 公開前に Facebook Debugger でテストする

JSON-LD：

• 具体的な @type を使う（LocalBusiness ではなく Plumber）
• 連絡先情報（電話番号、住所、メールアドレス）をすべて含める
• 表示を改善するため、openingHoursSpecification を追加する
• schema.org validator で検証する

Canonical URL：

• すべてのページに canonical が必要です
• 必ず絶対 URL を使う
• 自己参照は適切な方法です
• 1 ページにつき canonical は 1 つだけにする

---

本番環境に関する注意事項：

• React アプリには react-helmet-async を使います（SSR に安全）
• CMS/データベースから JSON-LD を動的に生成します
• パフォーマンス向上のため、メタタグコンポーネントをキャッシュします
• インデックス登録の問題がないか Search Console を監視します
• ビジネス情報が変更されたら構造化データを更新します