Question 1

og:image にはどのような画像サイズを使うべきですか？

Accepted Answer

推奨される最小サイズはアスペクト比 1.91:1 の 1200×630 ピクセルです。それより小さい画像は Facebook や LinkedIn でトリミングされます。8 MB 未満の PNG または JPEG を使用してください。プラットフォームがサムネイル用に画像を少しトリミングする場合があるため、重要なテキストを端に近づけすぎないようにしましょう。

Question 2

og:type と Twitter カードタイプの違いは何ですか？

Accepted Answer

og:type はページのコンテンツの種類を説明します — 一般ページは 'website'、ブログ記事は 'article'、動画コンテンツは 'video.other'。Twitter Cards は独立したシステムです：summary は小さなサムネイル、summary_large_image は全幅画像、player は動画を埋め込みます。<meta name="twitter:card"> で独立して設定します。

Question 3

動的な OG 画像を自動生成できますか？

Accepted Answer

はい。Vercel の @vercel/og（ImageResponse API 使用）や Cloudinary の URL ベースの変換を使えば、テキストとテンプレートからその場で画像を生成できます。Next.js では Edge ランタイムを使って、リクエスト時に React を PNG 画像にレンダリングする opengraph-image.tsx ルートを作成できます。

Question 4

og:url はなぜ重要で、canonical とどのように一致させるべきですか？

Accepted Answer

og:url はソーシャルプラットフォームにどの URL にシェアカードを関連付けるかを伝え、複数の URL から同じページにアクセスした場合（例：末尾スラッシュの有無、UTM パラメータ）のカード重複集計を防ぎます。ページの正規アドレスを示すため <link rel="canonical"> URL と完全に一致させる必要があります。

Question 5

OG 画像を変更したのに更新されないのはなぜですか？

Accepted Answer

ソーシャルプラットフォームは OG メタデータを積極的にキャッシュします。Facebook は最大 7 日間、Twitter/X はそれより短い期間キャッシュします。強制更新するには：Facebook シェアデバッガー（developers.facebook.com/tools/debug）や Twitter Card バリデーターを使ってキャッシュをスクレイプして更新してください。画像 URL を変更（例：キャッシュバスト用クエリ文字列を追加）すると、プラットフォームが即座に再取得します。

OGプレビュー

Facebook / LinkedIn

Twitter

よくある質問

Comments & Feedback