SNSでURLをシェアしたときに表示される「OGP画像」。この表示が「ある」か「ない」かで、クリック率や視認性は大きく変わります。本記事では、OGP画像の基本知識から、デザイン、コードの設定方法まで、徹底的に解説します。
Contents
【第1章】OGP画像とは
OGP (Open Graph Protocol) はFacebookが提唱したメタデータ設定ルールのことで、主にSNSでURLをシェアした際の情報表示をカスタマイズするための技術です。
【OGPで指定可能な要素】
og:title…シェアされるタイトルog:description…説明文og:image…表示される画像og:url…ページURLog:type…Webページならwebsiteog:site_name…サイト名
Twitterの場合はTwitter Cardsと呼ばれ、以下のような指定も加えると優先されます:
twitter:card…summary_large_imageが一般的twitter:title,twitter:description,twitter:image等
【第2章】OGP画像のデザイン要素
1.【サイズ】
- 1200 × 630px が基本のサイズ
- 最小で 600 x 315px は確実に
- アスペクト比率 1.91:1 を保つ
2.【ファイル形式】
- JPEG または PNG
- ファイルサイズは 5MB以下
3.【デザインのコツ】
- 文字は入れすぎない。結論メインタイトルみたいなものを解りやすく表示
- コントラスの高い色みを選ぶ
- 作成はFigma / Canva / Photoshopなどが便利
【第3章】コード設定: HTMLヘッダーに追加
<!-- OGPタグ -->
<meta property="og:title" content="タイトル文">
<meta property="og:description" content="ページの説明">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Example Site">
<!-- Twitter Cardタグ -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="タイトル文">
<meta name="twitter:description" content="ページの説明">
<meta name="twitter:image" content="https://example.com/og-image.jpg">ヘッダの<head>内に追加します。
【第4章】Next.js でOGP設定する
app/layout.tsx または app/page.tsx に以下のように追加:
export const metadata = {
title: 'My Site',
description: '簡単説明文',
openGraph: {
title: 'My Site Title',
description: 'OGPの説明',
url: 'https://example.com',
siteName: 'MySite',
images: [
{
url: 'https://example.com/og-image.jpg',
width: 1200,
height: 630,
alt: 'OGP画像説明',
},
],
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: 'My Site Title',
description: '説明',
images: ['https://example.com/og-image.jpg'],
},
};必ず「全衔URL」にすること。 ローカルパス /og-image.jpg などだとTwitterで表示されない場合があります。
【第5章】OGP表示のチェック方法
ツール
URLを挿入して表示を確認します
【第6章】よくあるトラブルと対処
| 問題 | 原因 | 対処 |
|---|---|---|
| TwitterでOGPが表示されない | URLが絶対パスでない | https://example.com/og-image.jpgにする |
| Facebookでサムネが出ない | imageサイズが小さい | 1200x630pxにする |
| 更新したのに反映されない | キャッシュの保持 | Debuggerで削除させる |
【最後に】OGPは「想像以上に重要」
「どうせ気づかれない」、「デフォルトでいいか」と思われがちなOGP。でもSNSはイメージが味解の一番の分かれ目。
たった1枚の画像で、ブランドの見え方も、ユーザーの印象も、ここまで変わります。
今日からは、「とりあえず採用」のデフォルトOGPは見直しましょう。
