【完全解説】Procomユーザーページに実装したSEO対策の全貌

プロコム開発チーム

こんにちは。今回は、SNSプロフィール集約サービス「Procom（プロコム）」で、Google検索やSNSシェア時に最適化された表示を実現するためのSEO対策について、実際の実装内容を交えて詳しくご紹介します。

技術スタックは Next.js（App Router）をベースに構築しており、以下のような対策を施しました。

Contents

1 ✅ 今回の目的
2 🧱 対策 1：generateMetadata() の導入
- 2.1 🔽 実装コード
3 🖼 対策 2：OGP画像の設定（og-image.jpg）
- 3.1 📁 保存場所と名前
4 🔗 対策 3：URLベースの動的OGP対応
5 👀 対策 4：descriptionの最適化
6 🔍 対策 5：Googleにインデックスされる構成に
7 ✅ まとめ：今回のSEO対策まとめ
8 🔮 今後の展望
9 ✍️ おわりに

✅ 今回の目的

多くのProcomユーザーが「自分の名前で検索してもプロフィールページが出てこない」と感じている課題を解決するため、

検索エンジンに表示されやすくする（Googleインデックス対策）
SNSでシェアした際に綺麗なOGPが表示されるようにする（Open Graph対策）

を主軸にSEO施策を講じました。

🧱 対策 1：`generateMetadata()` の導入

Next.js App Router のページごとに SEO メタデータを動的に設定できる仕組みとして、generateMetadata() が提供されています。

今回対象となるのは以下のファイルです：

app/user/[uid]/page.tsx

ここに generateMetadata() を追加しました。

🔽 実装コード

export async function generateMetadata({ params }: { params: { uid: string } }) {
  const profile = await getProfileFromFirestore(params.uid);

  const title = profile?.name
    ? `${profile.name}さんのプロフィール | Procom`
    : 'プロフィール | Procom';

  const description = profile?.bio || 'SNSや活動履歴をまとめたページです。';

  const image = profile?.photos?.[0]?.url || 'https://procom-next.onrender.com/og-image.jpg';

  return {
    title,
    description,
    openGraph: {
      title,
      description,
      url: `https://procom-next.onrender.com/user/${params.uid}`,
      siteName: 'Procom',
      images: [
        {
          url: image,
          width: 1200,
          height: 630,
          alt: `${profile?.name ?? 'ユーザー'}のプロフィール画像`,
        },
      ],
      type: 'profile',
    },
    twitter: {
      card: 'summary_large_image',
      title,
      description,
      images: [image],
    },
  };
}

🖼 対策 2：OGP画像の設定（`og-image.jpg`）

OGP（Open Graph Protocol）は、SNSやチャットアプリなどでURLが展開されたときに表示される「サムネイル・タイトル・説明文」です。

ユーザーがプロフィールに写真を登録していればその写真を表示
写真がなければ public/og-image.jpg を表示

という切り替えを導入しました。

📁 保存場所と名前

public/og-image.jpg
1200×630px の比率推奨
今回はシンプルなProcomロゴ画像を用意しました

🔗 対策 3：URLベースの動的OGP対応

プロフィールページは /user/[uid] というパス構造をとっています。

検索エンジンやSNSで正確にユーザーごとのページを識別させるため、

url: `https://procom-next.onrender.com/user/${params.uid}`

のように動的にURLを組み立てています。これはSNSシェア時のプレビューやGoogleのインデックス精度にも影響します。

👀 対策 4：descriptionの最適化

<meta name="description"> に該当する要素は、検索結果やSNSでのプレビュー文に使われることが多く、非常に重要です。

今回は、Firestore から取得した profile.bio（紹介文）を使用しています。紹介文が未記入の場合はデフォルト文が表示されます：

const description = profile?.bio || 'SNSや活動履歴をまとめたページです。';

🔍 対策 5：Googleにインデックスされる構成に

今回のページは、動的な generateMetadata() と server-side rendering (SSR) の組み合わせにより、クローラにとって読み取り可能なHTMLを生成しています。

また、以下の前提も満たしており、SEO的にも有利です：

metaタグがHeadにしっかり出力される
構造化されたHTML（セクションやh1タグの利用）
パフォーマンスの高いNext.js構成（Page Speed Core Vitalsにも強い）

✅ まとめ：今回のSEO対策まとめ

対策内容	詳細
`generateMetadata()` の導入	動的にタイトル・説明・OGPを設定
OGP画像の自動切り替え	登録写真がない場合はデフォルト画像を使用
descriptionの最適化	Firestoreから紹介文を取得し設定
正確なURL出力	各ユーザーページ固有のURLでSNS対応
SSRレンダリング	クローラが読み取り可能なHTMLを提供