5日間でSEO構造化データ自動生成ツールを作った話【Gemini 2.0 × Next.js】

はじめに

こんにちは!今回、URLを入力するだけでSchema.org準拠のJSON-LD構造化データを自動生成するツールを5日間で開発しました。

完成品はこちら:
https://schema-generator-one.vercel.app/

本記事では、開発の経緯から技術的な課題、特に苦労した「sameAs厳格化」の実装まで、開発ストーリーをお届けします。

完成品の紹介

デモ

主な機能

URLを入力するだけで自動生成: ページを解析し、最適なスキーマタイプを自動判定
対応スキーマ:
- 完全対応: Organization (企業サイト), WebSite (サイト内検索)
- 対応: Article (ブログ・ニュース記事)
- 近日対応予定: Product (商品ページ), FAQ
SEO価値重視: SNSリンク(sameAs)、連絡先、所在地を優先抽出
検証ツール連携: Googleリッチリザルトテスト、Schema.org Validatorへ直接連携
生成履歴: 過去10件の生成履歴を保存

技術スタック

フロントエンド: Next.js 14 (App Router), TypeScript, Tailwind CSS
AI API: Gemini 2.0 Flash
デプロイ: Vercel
コスト: 完全無料 (Gemini無料枠 + Vercel Hobby)

なぜこのツールを作ったか

構造化データの重要性

構造化データは、Googleなどの検索エンジンがページ内容を理解するための重要な情報です。正しく実装すれば:

リッチリザルト表示(記事、商品、FAQ等)
ナレッジパネルの情報充実
音声検索の精度向上
AIアシスタントへの情報提供

といったSEO効果が期待できます。

既存ツールの課題

しかし、構造化データの作成は面倒です:

手動作成: 時間がかかり、ミスが発生しやすい
既存ツール: 手動入力が多く、日本語対応が不十分
有料ツール: 海外製で高額($49/月〜)

「URLを貼るだけで自動生成」できるツールがあれば便利だと思い、開発を決意しました。

開発の流れ

Day 1-2: MVP開発

まずは基本機能の実装です。

実装内容:

Next.js + Gemini API統合
Organization、Articleスキーマ対応
基本的なUI

初期のプロンプト設計:

const prompt = `
以下のHTMLから、Schema.org準拠のJSON-LD構造化データを生成してください。

HTMLコンテンツ:
${html}

Organizationの場合、以下のプロパティを含めてください:
- name: 企業名
- url: サイトURL
- logo: ロゴ画像
...
`;

この段階では、基本的な生成はできるものの、抽出精度が低く、エラーも多発していました。

Day 3: SEO最適化

ここでGeminiに相談しながら、SEO価値を高める改善を実施しました。

主な改善:

sameAs (SNSリンク)の優先抽出

構造化データで最も重要なのは、実はsameAsです。これは企業の公式SNSアカウントへのリンクで、Googleがエンティティ(企業や人物)を特定するために使用します。

プロンプトに以下を追加:

- **sameAs (必須・超重要):**
  - SNS公式アカウント、Wikipedia、公式の外部サイトへのリンクを優先的に抽出
  - Twitter/X, LinkedIn, Facebook, YouTube等

OGP画像の優先抽出

ロゴ画像の抽出で404エラーが頻発していたため、OGP画像(og:image)を優先的に使用する方針に変更:

- **logo (推奨):**
  - まず、HTMLの `<meta property="og:image">` からOGP画像を抽出
  - OGP画像がない、または不適切な場合のみ、`<img>` タグから企業ロゴを探す

インラインSVGの除外

インラインSVG(data:image/svg...)を含めると404エラーになるため、自動除外:

- **⚠️ インラインSVGは絶対に使用しない** 
  (data:image/svg... で始まるURLは除外)

これらの改善で、生成精度が大幅に向上しました。

Day 4: WebSite対応

ECサイトなど、サイト内検索機能があるサイトでは、WebSiteスキーマも追加生成することで、Googleの「サイトリンク検索ボックス」表示に対応できます。

実装:

### WebSite (検索機能があるサイト)

- **@type:** "WebSite"
- **name:** サイト名
- **url:** 入力されたURL
- **potentialAction:**
  - **@type:** "SearchAction"
  - **target:**
    - **@type:** "EntryPoint"
    - **urlTemplate:** 検索URLパターン 
      (例: "https://example.com/search?q={search_term_string}")

サイトの検索URL構造を自動解析し、SearchActionを設定します。

Day 5: sameAs厳格化（最難関）

ここで最大の課題に直面しました。

最大の課題: sameAs厳格化

問題発覚

Anthropic社のサイトで生成テストしたところ、以下の結果に:

"sameAs": [
  "https://www.anthropic.com/",  // ← 自分自身のURL!
  "https://claude.ai/",
  "https://twitter.com/AnthropicAI"
]

自分自身のURLがsameAsに含まれてしまっていました。

なぜ問題なのか

sameAsは「外部の権威あるソースへのリンク」を示すプロパティです。自分自身のURLを含めると:

Schema.orgの定義から逸脱
Googleがエンティティを正しく理解できない
E-E-A-T(専門性・権威性・信頼性)の評価が下がる

解決策の試行錯誤

最初は単純に「入力URLと同じ値を除外」と指示していました:

- **sameAs:**
  - 入力されたURL (${url}) と同じ値を含めないこと

しかし、これだけでは不十分でした。なぜなら:

https://www.anthropic.com/ (入力URL)
https://www.anthropic.com (末尾スラッシュなし)
https://anthropic.com/ (wwwなし)
https://anthropic.com (両方なし)

これらは実質的に同じURLですが、文字列として完全一致しないため、除外されませんでした。

最終的な解決策

Geminiと相談しながら、以下の厳格な比較ルールを追加:

- **🚨 厳格な除外ルール:**
  * 抽出した各URLが、入力されたサイトのメインURL (${url}) と
    完全に一致していないか検証すること
  * 末尾のスラッシュ (`/`) の有無、`www` の有無を無視して比較
  * 実質的に同一URLであれば必ず除外すること
  * 例: 入力URLが `https://www.anthropic.com/` の場合、
    以下は全て除外:
    - `https://www.anthropic.com/`
    - `https://www.anthropic.com`
    - `https://anthropic.com/`
    - `https://anthropic.com`

結果

修正後、再度Anthropicサイトでテスト:

"sameAs": [
  "https://twitter.com/AnthropicAI"  // ✅ 外部リンクのみ!
]

完璧に動作しました! 🎉

この厳格な比較ルールにより、どんなサイトでも自己参照URLを確実に除外できるようになりました。

現在の対応状況

完全対応

Organization (企業・組織サイト)

企業サイト、団体サイトに最適
sameAs厳格化により、自己参照URL問題を完全解決
SNSリンク、連絡先、所在地など、SEO価値の高い情報を優先抽出

WebSite (サイト内検索)

ECサイト、ポータルサイトのサイト内検索に対応
SearchAction設定により、Googleの「サイトリンク検索ボックス」表示を実現

実用レベル

Article (ブログ・ニュース記事)

note, Zenn, Qiita等で動作確認済み
必須フィールド(headline, author, datePublished等)を正確に抽出
一部サイトでheadlineが長くなる場合があるが、Google的には許容範囲

近日対応予定

Product (商品ページ)

現在、商品ページでもOrganizationスキーマが生成される課題があります。これは判定ロジックの優先順位の問題で、技術的には解決可能です。

修正方針:

ページの主要コンテンツ(価格、在庫、商品説明)を先に判定
Productスキーマをメインとして生成
企業情報があればOrganizationも追加生成

対応予定: 数日以内に修正し、本記事に追記予定です。

FAQ (よくある質問ページ)

プロンプト実装済み
検証が完了次第、正式対応

技術的な学び

1. Gemini APIとの協業

開発中、Gemini本人に相談しながら進めたのが非常に効果的でした。

Schema.orgの仕様についてGeminiが詳しい
プロンプト設計のフィードバックをもらえる
実際の生成結果を見てもらい、改善提案をもらう

特に「sameAs厳格化」は、Geminiからの提案がなければ実現できませんでした。

2. プロンプトエンジニアリングの重要性

LLMを使った開発では、プロンプト設計が9割です。

良いプロンプトの条件:

具体的な指示(「〜を含める」より「〜を優先的に抽出」)
エッジケースを明示(「〜の場合は除外」)
出力形式を厳密に指定(JSON構造を例示)

今回は7回のバージョンアップで、プロンプトを段階的に改善していきました。

3. JSON出力モードの活用

Gemini 2.0ではresponseMimeType: "application/json"を指定できます:

const model = genAI.getGenerativeModel({
  model: "gemini-2.0-flash",
  generationConfig: {
    temperature: 0.2,
    responseMimeType: "application/json",
  },
});

これにより、JSONパースエラーが大幅に減少しました。

コスト・運用

完全無料運用

使用サービス:

Gemini API: 無料枠 (1日1,500回、月45,000回)
Vercel: Hobby プラン (無料)

月間予想:

想定ユーザー: 500人
1人あたり使用回数: 月3回
合計: 1,500回/月

→ 完全に無料枠で運用可能!

有料化する場合の試算

将来的にユーザーが増えた場合:

Gemini 2.0 Flash 料金:
- 入力: $0.075 / 100万トークン
- 出力: $0.30 / 100万トークン

1リクエストあたり:
- 入力: 2,000トークン ($0.00015)
- 出力: 1,000トークン ($0.0003)
- 合計: 約¥0.07

月10,000リクエストでも約¥700

非常に低コストでスケール可能です。

苦労した点まとめ

sameAs厳格化: 最も時間がかかったが、最も重要な改善
画像URL抽出: OGP優先、SVG除外のロジック確立
JSONパースエラー: Geminiの出力がたまにマークダウン形式になる
WebSite判定: 検索URL構造の自動解析ロジック

今後の展開

Phase 1: 直近の改善 (数日〜1週間)

Product対応: 商品ページの判定ロジック改善
FAQ対応: 検証完了次第、正式対応
初期ユーザーからのフィードバック対応

Phase 2: フィードバック収集 (0-3ヶ月)

ユーザーの使い方を観察
バグ修正、UI/UX改善
要望の多い機能を優先実装

Phase 3: 機能拡張 (3-6ヶ月)

一括生成機能 (sitemap.xml対応)
複数スキーマタイプの同時生成
カスタムスキーマ対応

Phase 4: マネタイズ検討 (6ヶ月〜)

無料プラン: 月10回
有料プラン: ¥1,980/月 (月100回)
WordPress/Shopifyプラグイン開発

まとめ

5日間の開発で学んだこと:

LLM×個人開発の可能性: Gemini APIで高度な機能を短期間で実装
プロンプト設計の重要性: 7回の改善で精度が大幅向上
Geminiとの協業: AIに相談しながら開発する新しいスタイル
コスト効率: 無料枠で月45,000回まで対応可能

特にsameAs厳格化の実装は、単なる「動くツール」から「SEOの専門知識を反映した高品質なツール」へのステップアップでした。

完全無料で公開していますので、ぜひ使ってみてください!

ツールURL:
https://schema-generator-one.vercel.app/

GitHubリポジトリ:
https://github.com/sonicdaydream/schema-generator

フィードバックや改善提案など、お待ちしています!

📝 追記予定

Product対応(商品ページ)の実装が完了次第、本記事に追記します。数日以内を予定していますので、続報をお待ちください!

参考資料

最後まで読んでいただき、ありがとうございました!
いいねやストック、コメントいただけると嬉しいです😊