Open Graph タグとは？リンクプレビューとソーシャルシェアリングガイド

Facebook、LinkedIn、Slack、Twitter でリンクをシェアすると、通常、タイトル、説明、画像を含むプレビューカードが表示されます。このプレビューは魔法ではありません。ページの HTML 内の Open Graph (OG) タグ によってコントロールされています。

Open Graph タグを正しく設定すると、シェアされたリンクはプロフェッショナルに見え、より多くのクリックを獲得します。誤って設定すると、みっともないプレビュー、画像の欠落、または一般的なフォールバックテキストが表示されます。

Open Graph プロトコルとは？

Open Graph は Facebook が 2010 年に作成したプロトコルで、Web ページがソーシャルプラットフォームでどのように表示されるかを定義することができます。HTML の <head> セクションのメタタグを使用します：

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short summary of the page" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

ソーシャルプラットフォームが共有 URL を検出すると、ページをフェッチしてこれらのタグを読み、プレビューカードを構築します。

必須の Open Graph タグ

og:title

プレビューカードに表示されるタイトル。プラットフォーム全体で最適に表示されるように、60 文字以下に保つしてください。

<meta property="og:title" content="How to Create Branded Short Links" />

ヒント：

<title> タグを単に複製しないでください。ソーシャルエンゲージメント用に最適化してください
重要な単語を前に配置してください
クリックベイトを避けてください（プラットフォームはこれを罰する可能性があります）

og:description

タイトルの下に表示される簡単な説明。120～160 文字を目指してください。

<meta property="og:description" content="Create custom branded short links with click tracking and analytics. Set up in 5 minutes." />

og:image

プレビューに表示される画像。これは最も影響力のあるタグです。画像を含む投稿ははるかに多くのエンゲージメントを獲得します。

<meta property="og:image" content="https://example.com/social-preview.jpg" />

プラットフォーム別の画像要件：

プラットフォーム	推奨サイズ	アスペクト比
Facebook	1200 × 630 px	1.91:1
Twitter	1200 × 628 px	1.91:1
LinkedIn	1200 × 627 px	1.91:1
Slack	500 × 500 px 以上	任意

すべてのプラットフォームをカバーするために、1200 × 630 ピクセルを使用します。

og:url

ページの正規 URL。これはプラットフォームに表示する URL を伝え、重複コンテンツを防ぐのに役立ちます。

<meta property="og:url" content="https://example.com/page" />

og:type

コンテンツのタイプを説明します。一般的な値：

website — ホームページと一般的なページ用
article — ブログ記事と記事用
product — 商品ページ用

Twitter カードタグ

Twitter は Open Graph に加えて独自のメタタグを使用してプレビューカードを表示します：

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Twitter カードタグが存在しない場合、Twitter は Open Graph タグにフォールバックします。最大限のコントロールのために、ほとんどのサイトは両方を設定しています。

ソーシャルプラットフォームが Open Graph データを取得する方法

URL をシェアする場合：

1プラットフォームのクローラーが URL にアクセスします
2HTML <head> で OG タグを読みます
3プレビューカードデータをキャッシュします
4同じ URL の後続のシェアはキャッシュバージョンを使用します

重要： OG タグへの変更は即座には反映されません。プラットフォームは積極的にキャッシュするため、キャッシュを手動でクリアする必要があるかもしれません（下記のデバッグを参照）。

Linkly でリンクプレビューをカスタマイズ

コントロールしていない URL をシェアしたい場合、または異なるコンテキストに対して異なるプレビューカードが必要な場合はどうしますか？

Linkly のカスタムソーシャルプレビュー機能により、短縮リンクの Open Graph データをオーバーライドできます：

カスタムタイトル、説明、画像を設定
異なるオーディエンスに対する異なるプレビュー
宛先ページの HTML を編集する必要がありません
所有していないページでも、任意の URL で動作します

これは以下の場合に特に便利です：

自社ブランディングでサードパーティコンテンツをシェア
A/B テスト異なるプレビューカードをテストして、どれがより多くのクリックを取得するかを確認
宛先ページに不十分または欠落した OG タグがある

Open Graph タグのデバッグ

Facebook シェアリングデバッガー

Facebook のツールを使用すると、キャッシュされた OG データをプレビューおよび更新できます：

1URL を入力します
2Debug をクリックします
3Facebook がページから読み取ったものを確認します
4Scrape Again をクリックしてキャッシュをクリアします

Twitter カード検証ツール

Twitter の検証ツールは、カードがどのように表示されるかを示し、問題を強調しています。

LinkedIn ポストインスペクター

LinkedIn のツールはリンクカードをプレビューし、キャッシュされたデータを更新します。

一般的なヒント

ソースを確認する： ページソースを表示し、og: を検索してタグが存在することを確認します
絶対 URL を使用する： 画像 URL は相対的ではなく絶対的である必要があります（https:// で始まります）
変更後にテストする： OG タグを更新した後、常にプラットフォームキャッシュをクリアします
JavaScript レンダリングを確認する： 一部のプラットフォームは JavaScript を実行できないため、OG タグは初期 HTML レスポンスに含まれる必要があります

よくある間違い

1og:image が欠落している：画像のない投稿はクリック数が 2～3 倍少なくなります
2画像が小さすぎる：少なくとも 1200 × 630 ピクセルを使用します
3間違ったアスペクト比：画像が不格好にトリミングされます
4古いキャッシュ： OG タグを更新しましたが、プラットフォームキャッシュをクリアするのを忘れました
5重複タグ：同じタイプの複数の OG タグが予測不可能な動作を引き起こします
6HTTP 画像：画像 URL には HTTPS を使用してください。一部のプラットフォームは HTTP 画像をブロックします
7相対 URL：プラットフォームクローラーは相対パスを解決できません

異なるコンテンツタイプの Open Graph

ブログ投稿

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Your Name" />

商品

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />

ビデオ

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />

結論

Open Graph タグは、HTML に小さく追加されますが、ソーシャルウェブ全体でコンテンツがどのように表示されるかに大きな影響を与えます。適切なタイトル、説明、画像を使用して正しく設定すると、リンクがシェアされたときのクリックスルー率が直接増加します。

HTML を編集しないでカスタムリンクプレビューが必要ですか？ Linkly を始めると、短縮リンクのソーシャルプレビューカードをカスタマイズ（独自のタイトル、説明、画像を設定）できます。