FAQコード生成用
FAQの構造化データ（JSON-LD）
ページのQ&Aを、検索エンジンが読める形式でも書き出す。
用途・説明
ページに載せた質問と回答を、検索エンジンが理解できる構造化データ（FAQPage の JSON-LD）としても出力するためのプロンプトです。画面に表示するFAQと同じ配列から自動で作るので、内容がずれません。表示される内容と一致させる、といった注意点も含めています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- ページに表示する質問・回答
[使用技術]- 例：HTML + JavaScript、Next.js、Astro
プロンプト全文
あなたはSEOと構造化データに詳しいフロントエンドエンジニアです。 以下の質問と回答について、画面に表示するFAQと、FAQPage の構造化データ（JSON-LD）をあわせて実装してください。 ## 質問と回答 [質問と回答] ## 実装すること 1. 質問と回答を1つの配列（question、answer）で持つ 2. その配列から、画面に表示するFAQ（シンプルなアコーディオン）を作る 3. 同じ配列から、JSON-LD を自動で作り、script type="application/ld+json" で出力する ## JSON-LD の仕様 - @context は https://schema.org、@type は FAQPage - mainEntity に、質問ごとの Question を入れる（name に質問、acceptedAnswer の text に回答） - 回答のなかのHTMLは、リンク（a）、段落（p）、改行（br）、リスト（ul / ol / li）、太字（b / strong）だけを残し、ほかのタグは取り除く - JSON として正しい形になるよう、引用符や改行をエスケープする（JSON.stringify を使う） - script タグのなかに「</script>」という文字列が入らないよう、「<」を \u003c に置き換える ## 守ること - 構造化データの内容は、画面に実際に表示されている質問・回答と一致させる（画面にない質問を入れない） - 1つのページに FAQPage は1つだけにする - 宣伝だけの内容や、質問になっていない項目は入れない - 構造化データを入れても、検索結果での表示が保証されるわけではないことをコメントに書く ## 画面表示の最低限のデザイン - 質問：16px、font-weight 700、色 #1B2A44。回答：15px、line-height 1.9、色 #5F6D84 - 質問の間は 1px solid #E2E8F0 ## 出力形式 - [使用技術]のコードを1つ出力 - 出力された JSON-LD の確認方法（検索エンジンが提供しているテストツールで検証する）を最後に書く
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。