中級④ SEO・OGP・AI検索対応を実装する

どんなに良いサービスも、見つけてもらえなければ存在しないのと同じ。今日は無料講座「SEOと集客」の知識を、my-appに実装します。ちなみに今日付ける装備は、いまあなたが読んでいるこの学習サイトが実際に着けているものと同じです。

STEP1：検索結果での“顔”を整える

サイト全体のSEO用メタデータを整えて。①layout.tsx でサイト全体の title のテンプレート（ページ名 | サイト名 の形式）と description を設定 ②各ページにもそのページの内容に合った title と description を設定 ③本番URLを基準にした canonical の設定もして。まず計画を見せて。

反映されたら、ブラウザのタブの表示が「ページ名 | サイト名」になっているか見てみましょう。この title と description が、Google検索の結果に出る見出しと紹介文になります。

STEP2：OGP画像——SNSでの“顔”

URLをXやLINEに貼ったときに出るプレビューカードの画像がOGP画像。サイズは 1200×630ピクセル が標準です。CanvaやFigmaで「サービス名＋ひとこと」のシンプルな画像を作りましょう（凝らなくてOK。文字が大きくて読めることが一番大事）。

1. 11200×630の画像を作って og.png という名前で保存。
2. 2リポジトリに置く：「この画像を app/opengraph-image.png として配置して、OGPとして効くようにして」とAIに頼む（GitHubの画面から直接アップロードでもOK）。
3. 3X（投稿せず下書きでOK）やLINEの自分専用トークにURLを貼って、カードが出るか確認。

STEP3：サイトマップとrobots——検索ロボット向けの地図

app/sitemap.ts と app/robots.ts を作って。サイトマップには公開している全ページを載せる。robots は全ページクロール許可で、サイトマップの場所も知らせる。本番URLは環境変数やVercelの情報から正しく組み立てて。まず計画を見せて。

反映後、公開URLの /sitemap.xml と /robots.txt を開いてみてください。ページの一覧が出れば成功。Googleのロボットはこの地図を頼りに、あなたのサイトを巡回します。

STEP4：AI検索対応——llms.txtと構造化データ

これからの集客は、Google検索だけでなくAI検索（ChatGPT・Claude・Perplexityなどに「おすすめの〇〇は？」と聞く流れ）が主戦場になっていきます。AIに正しく理解してもらうための2つの装備を付けます。

AI検索対応を2つ実装して。① /llms.txt ：このサイトが何で、どんなページがあるかをAI向けにまとめたテキストを返すルートを作る。② トップページにJSON-LD（構造化データ）を入れて、サイト名・説明・運営者をschema.orgの形式で宣言する。JSON-LDに入れる文字列は安全にエスケープすること。まず計画を見せて。

llms.txt

AI向けの自己紹介ファイル。「このサイトはこういうサイトです」をAIが読みやすい形で置く新しい慣習。

構造化データ（JSON-LD）

「これはサイト名」「これは運営者」と機械向けにラベル付けするデータ。検索結果のリッチ表示にも効く。

STEP5：効果を確認する＋次の一手

1. 1Googleで site:あなたのドメイン を検索——登録され始めているかが分かります（新しいサイトは数日〜数週間かかるのが普通。焦らない）。
2. 2余力があれば Google Search Console に登録してサイトマップを送信（無料）。検索からの流入状況が見られるようになり、次回⑥の解析とつながります。

おさらい：今日使った“言葉”

title / description

検索結果に出る見出しと紹介文。ページごとに内容に合ったものを。

OGP画像

SNSのプレビューカード。1200×630。文字大きめが正義。

sitemap / robots

検索ロボット向けの地図と案内板。/sitemap.xml で確認できる。

AI検索対応

llms.txt＋構造化データ。AIに「正しく紹介してもらう」ための装備。