【Procom開発記】ユーザー名がGoogle検索に出るようになった話。SEO対策の裏側を公開！

プロコム開発チーム

こんにちは、Procom運営チームです！
今回は、ユーザー名がGoogle検索に引っかかるようになったSEO改善について、その仕組みや裏側の実装、そして「なぜそれが大事なのか」まで、じっくり解説していきます。

Procom（プロコム）は、SNS時代のセルフブランディングを支援するために開発された、プロフィール集約型SNSプラットフォームです。
YouTuber・インスタグラマー・ダンサー・俳優・声優・芸人・Vtuber・モデルなど、「自分を発信するすべての人」が、自分のSNSや写真・動画・活動歴を1ページで魅力的に見せられる設計になっています。

その中でも今回のアップデートは、Procomに登録しているユーザーがGoogleで検索されたときに、しっかりと検索結果に出るようになる、とても大切なSEO対策のひとつです。

Procomはこちら

Contents

1 🔍 課題：Google検索でユーザーページが出てこない！
2 💡 原因は「動的ページ」と「sitemap.xmlの不備」
3 ✅ 実施したSEO対策一覧
4 ✨ 結果：ユーザー名で検索すると表示されるように！
5 🎉 これはまだ始まり。今後もSEO強化していきます！
6 📝 最後に：なぜProcomはSEOにこだわるのか？
- 6.1 🔗 あなたの名前で、Google検索に出てみませんか？
7 まとめ

🔍 課題：Google検索でユーザーページが出てこない！

Procomでは、ユーザーごとに

https://procom-next.onrender.com/user/[uid]

という専用のプロフィールページが自動生成されます。

しかし、サービス初期の段階では、「Procomに登録したのに、Googleで名前を検索しても全然出てこない…」という声がありました。
実はこれ、技術的に「SEOに強いページの作り方」ができていなかったことが原因だったんです。

💡 原因は「動的ページ」と「sitemap.xmlの不備」

Next.js（Reactベースのフレームワーク）では、ユーザーIDに応じてページを動的に生成する[uid]のようなルーティングを使います。
これによってURLごとにページが切り替わるのですが、サーバーサイドで「このページが存在する」とGoogleに伝えてあげないと、検索エンジンはクロールしてくれません。

加えて、robots.txtやsitemap.xmlが不十分だったため、検索エンジンにとって「このページは見に行くべき対象かどうか」の判断ができなかったのです。

✅ 実施したSEO対策一覧

今回のアップデートで、以下の施策を行いました：

① sitemap.xmlにすべてのユーザーページを自動追加

sitemap.xmlはGoogleのロボット（クローラー）に、「どんなページがあるのか」「どれくらいの頻度で更新されるのか」を伝えるファイルです。

今回は next-sitemap を導入し、以下のように設定しました：

// next-sitemap.config.cjs
module.exports = {
  siteUrl: 'https://procom-next.onrender.com',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  exclude: ['/account', '/login', '/register'],
  async additionalPaths(config) {
    const res = await fetch('https://procom-next.onrender.com/api/all-uids');
    const { uids } = await res.json();
    return uids.map(uid => ({
      loc: `/user/${uid}`,
      changefreq: 'weekly',
      priority: 0.7,
    }));
  },
};

これで、登録されているすべてのユーザーページがsitemap.xmlに自動で含まれるようになりました！

② metaタグでページごとに動的なSEO情報を出力

Googleはタイトルや説明文などのmetaタグを元に検索結果を表示します。

Procomでは、ユーザーページの <head> セクションに、ユーザーの名前や紹介文をもとに動的にメタ情報を出すようにしました。

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プロフィール集約プラットフォーム Procom';
  return {
    title,
    description,
    openGraph: {
      title,
      description,
      images: ['/og-image.jpg'],
    },
  };
}

これにより、検索結果で名前と紹介文がきちんと表示されるようになりました。