Next.js14+のMetadataとOpenGraphをマスターする:大規模な動的ソーシャルカード

Audio Briefing• Voice: Google Cloud Journey-F

0:00 / 0:00

ソーシャルカードが最高のコンバージョン率を誇るトラフィックエンジンである理由

開発者や読者があなたの記事リンクをX（Twitter）、LinkedIn、Discord、Slackで共有したとき、どのように表示されますか？

目を引くビジュアル、魅力的な見出し、簡潔な要約を備えた、リッチで高解像度のプレビューカードが生成されますか？それとも、一般的なドメインのフォールバックが表示される、不毛で壊れたリンクが表示されますか？

BufferとHubSpotの調査によると、リッチなOpen Graphサマリーカードが添付されたリンクは、プレーンテキストのURLと比較してクリック率（CTR）が3.2倍以上高くなります。

Next.js App Routerでは、<Head>コンポーネントをnext/headから挿入する古いパターンは公式に廃止されました。その代わりに、静的定義、非同期のgenerateMetadata()データフェッチ、正規URL解決、動的なエッジ生成ソーシャルグラフィックをシームレスに処理する、統合された厳密に型付けされたMetadata APIが導入されています。

公開前にGoogle、Twitter、LinkedInでサイトがどのように表示されるかを確認したいですか？当社のコンパニオンツールであるOpen Graph & Meta Tag Previewer ToolでURLをテストしてください。

静的メタデータ vs 動的`generateMetadata()`

Next.jsでは、ルートでドキュメントのメタデータを宣言する主な方法が2つあります。

Feature	Static metadata Object	Dynamic generateMetadata() Function
Use Case	静的ページ（ホーム、アバウト、コンタクト、ツールインデックス）	動的ルート（[slug]、[id]、パラメータ化されたEコマースまたはブログ投稿）
Data Fetching	非同期オーバーヘッドなし。定数オブジェクトとして直接定義	完全な非同期サポート。データベース、CMS、またはAPIをクエリ可能
Performance Caching	静的生成時にビルド時に一度計算される	React cache()を介して親ページデータフェッチと自動的に重複排除される
Execution Environment	純粋なサーバー実行。クライアントバンドルに0 kB送信	純粋なサーバー実行。クライアントバンドルに0 kB送信

レガシー`<Head>`をNext.js App Routerメタデータにリファクタリングする

レガシーなNext.js Pages Routerのメタデータが、モダンで型安全なApp Routerのメタデータにどのように変換されるかを示します。

ソーシャルカード最適化の4つの黄金律

1. 1200 x 630の標準

TwitterとFacebookの両方で、アスペクト比はほぼ1.91:1と指定されています。Open Graph画像を幅1200px、高さ630pxで作成することで、高DPIディスプレイでも不自然な自動トリミングなしに鮮明にレンダリングされます。

2. タイトルと説明の文字数制限

タイトル: 60文字以内にしてください。それより長いと、モバイルSERPやTwitterカードで省略記号で切り詰められます。
説明: 140〜160文字にしてください。これにより、検索エンジンやソーシャルプラットフォームに十分なコンテキストが提供され、途中で切れることがありません。

3. 絶対画像URLは必須

ソーシャルクローラー（facebookexternalhitやTwitterbotなど）はJavaScriptを実行せず、/static/images/og.pngのような相対パスを解決できません。常に画像URLの前に完全なドメイン名を付けてください: https://locionic.com/static/images/og.png。

4. Canonical URLは重複SEOペナルティを防ぐ

コンテンツが複数のURL（例: /?utm_source=twitterや/en/blog/post）でアクセス可能な場合、alternates: { canonical: '...' }を設定することで、Googleはすべてのランキング権限を主要な正規URLに集中させるよう指示されます。

インタラクティブクイズ: SEOとメタデータの知識を試す

よくある質問

はい！Next.jsは、'next/og'の'ImageResponse' APIを介して動的なOpen Graph画像生成を組み込みでサポートしています。これにより、JSXとCSS Flexboxを使用して、エッジ速度で動的なSVG/PNG画像を生成できます。

標準のHTML <title>は、ブラウザのタブやGoogle検索エンジンの結果ページに表示されるものです。'og:title'タグは、ソーシャルメディアネットワーク（Facebook、LinkedIn、Discord、Slack）によって特別に解析されます。ほとんどの場合、これらは同じで構いませんが、ソーシャルフィード向けに'og:title'をよりパンチの効いた、クリックされやすいものに調整することもできます。

無料のインタラクティブなOpen Graph & Meta Tag Previewerを使用して、Google SERP、Twitter Large Card、LinkedInのプレビューモードで、タイトル、説明、画像をリアルタイムでテストできます。

Next.js14+のMetadataとOpenGraphをマスターする:大規模な動的ソーシャルカード

ソーシャルカードが最高のコンバージョン率を誇るトラフィックエンジンである理由

静的メタデータ vs 動的`generateMetadata()`

レガシー`<Head>`をNext.js App Routerメタデータにリファクタリングする