Next.js ポートフォリオを Google に見せる：本当に効く SEO

私の名前を Google で検索すると、私のポートフォリオが一番上に出ます。SEO は効いています。しかし、良い順位は良い見せ方を保証しません。リンクの横に表示されるアイコン、サイト名、説明文——それらはすべて、Google があなたのコードから読み取る、正確な技術シグナルで決まります。

この記事では、ありきたりな検索結果と、信頼を呼ぶ検索結果とを分ける設定を詳しく見ていきます。

Google は各検索結果の左にアイコンを表示します。それが汎用のフォールバックではなくあなたのものになるには、三つの条件があります。

• ファビコンは安定した URL で配信し、<link rel="icon"> で宣言すること。
• サイズは 48px の倍数（48、96、144……）でなければならない。よくある 64×64 は、Google に単純に無視されます。
• ごく小さなサイズでも読めること：モノグラムか記号であって、決して細部の多いロゴではないこと。

Next.js では、シンプルな app/icon.tsx ファイルがファビコンを生成し、<link> タグを自動で挿入します。落とし穴は、書き出されるサイズに潜んでいます。

完璧なファビコンでも、64×64 では Google の検索結果に決して現れません。何週間もの疑念を生む細部です。

既定では、Google はしばしば実際の名前の代わりにドメイン（monsite.com）を表示します。正しい名前を課すには、厳密に一致すべき三つのシグナルを揃えなければなりません。

• WebSite 構造化データ（JSON-LD）の name フィールド。
• og:site_name タグ（Open Graph）。
• application-name メタ。

この三つの値が食い違えば——たとえ片方が「Jean Portfolio」、もう片方が「Jean — Portfolio」というだけでも——Google は諦めてドメインに戻ります。一貫性こそが唯一のルールです。

Person の JSON-LD は、サイトが特定の個人——職業、所在地、SNS プロフィールを持つ人物——について語っていると Google に理解させるものです。最も重みのあるフィールド：

• name、jobTitle、description — 基本のアイデンティティ。
• sameAs — あなたのプロフィール（GitHub、LinkedIn）の一覧。これがサイトをあなたのオンライン上の存在に結びつけ、ナレッジパネルを育てます。
• image — 写真。リッチリザルトに役立ちます。

各エンティティを @id 識別子（#person、#website）で結ぶと、重複を避け、孤立したカードの寄せ集めではなく、きれいなグラフを Google に渡せます。

複数言語のサイトは、どのバージョンを誰に見せるかを Google に伝えなければなりません。それがないと、各言語がインデックス上で共食いします。ルール：各 URL は alternates.languages で自らの言語バリアントすべてと、x-default を宣言します。

Next.js は、各エントリが hreflang を担うネイティブな sitemap.ts を生成します。[locale] 型の動的ルートをしばしば取りこぼすサードパーティ製プラグインより信頼できます。

新しいプロジェクトで優先順位を付けるなら：

1. Google Search Console — これなしでは、あなたは目隠し状態です。サイトマップを送信し、インデックス登録を申請しましょう。
2. アイデンティティシグナルの一貫性 — 準拠したファビコン、揃ったサイト名、きれいな JSON-LD。
3. 本物のコンテンツ — 1 ページきりのサイトはすぐ頭打ちになります。この記事のような技術記事が、あなたを実際の検索クエリ上に存在させます。
4. Core Web Vitals — 速いサイトは、より上位に来るサイトです。まず計測し、それから最適化を。

技術的 SEO に魔法はありません。明快なシグナルをきれいに送り、あとは Google が再クロールするまでの時間に委ねる——その連なりです。残りは、辛抱が引き受けます。