SEO CheckerSEO Checker
# SEO# OGP# SNS# Twitterカード

OGP設定でSNSシェアの見え方を最適化する｜og:image比率・og:title・Xカードの実装ガイド

SNSシェア時のカード表示を制御するOGP（Open Graph Protocol）の基本から、og:imageの推奨サイズ（1200×600px）・og:titleの使い分け・X（旧Twitter）カードの実装まで解説。OGP設定チェックリストも紹介します。

株式会社サードスコープ 開発部読了 約8分

ページを SNS でシェアしたとき、タイトル・説明文・サムネイル画像がカード形式で表示されるのは OGP（Open Graph Protocol） の設定によるものです。

OGPはSEOの直接的なランキング要因ではありませんが、SNSでの視認性向上とクリック率（CTR）改善を通じてトラフィックに大きく貢献します。本記事では、OGPの基本から画像サイズの最新仕様・X（旧Twitter）カードの実装まで解説します。

OGPとは——SNSプラットフォームがページを理解する仕組み

OGP（Open Graph Protocol）は、Facebook が策定したオープンな仕様で、SNSプラットフォームがウェブページの情報（タイトル・説明・画像・URLなど）を正しく読み取るための標準フォーマットです。現在は Facebook、X（旧Twitter）、LINE、Slack、Discord など主要プラットフォームで広くサポートされています。

OGPタグは HTML の <head> 内に <meta> タグとして記述します。

html
<head>
  <!-- 必須の4タグ -->
  <meta property="og:title" content="OGP設定でSNSシェアを最適化する完全ガイド">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/ogp-guide">
  <meta property="og:image" content="https://example.com/images/ogp-thumb.jpg">

  <!-- 推奨タグ -->
  <meta property="og:description" content="og:imageの比率・og:title・Xカードの設定方法を実装例つきで解説します。">
  <meta property="og:site_name" content="Example Blog">
</head>

OGPとSEOの関係——直接の順位シグナルではないが間接効果は大きい

OGPタグは Google のランキングシグナルではありません。Google は og:title や og:description を検索順位の判断に直接使用しないと明示されており、前記事のメタディスクリプションやtitleタグとは異なる位置づけです。

ただし、間接的な効果は無視できません。OGPが正しく設定されたページは SNS でシェアされた際に魅力的なカード表示になり、クリック率が向上します。Conductor の調査（2024年）では「OGPタグを完全実装したページは未実装ページと比べてソーシャルシェアのエンゲージメント率が約40%高い」とのデータがあります。SNSからの参照トラフィック増加は、間接的にサイトの権威性向上や被リンク獲得にも繋がります。

og:image の仕様——2026年現在の推奨サイズ

OGP設定で最も影響が大きいのが og:image です。シェアカードの印象はほぼこの画像で決まります。

推奨サイズ（2026年現在）

主要プラットフォームは現在 2:1 の比率で画像を表示しており、かつての Facebook 推奨比率 1.91:1 は実用上ほぼ同じですが、クロップなしで表示するには 1200 × 600px が最もクリーンです。

項目推奨値
解像度1200 × 600px（2:1比率）
最小サイズ600 × 315px（これ以下は表示されないプラットフォームあり）
ファイル形式JPG または PNG
ファイルサイズ8MB 以下（Facebookの上限）
URL形式絶対URL必須（相対パス不可）
html
<!-- 絶対URLで記述すること -->
<meta property="og:image" content="https://example.com/images/ogp-1200x600.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="600">
<meta property="og:image:alt" content="OGP設定ガイドのサムネイル画像">

og:title と og:description の使い分け

og:title はtitleタグとは別に設定する

og:title を設定しなかった場合、プラットフォームは <title> タグにフォールバックします。しかし <title> タグには「サイト名」が末尾に付くことが多く、SNSカード上で冗長になるケースがあります。

html
<!-- titleタグ（検索向け） -->
<title>OGP設定ガイド | SEOコラム by Example</title>

<!-- og:title（SNSシェア向け）：サイト名不要、興味を引く表現を優先 -->
<meta property="og:title" content="たった5分で完成！OGPカードの最適設定ガイド2026">

titleタグは検索意図キーワードを前方に置く最適化をしますが、og:titleはSNSフィード上での訴求力（好奇心・クリック欲求）を優先した表現にするのが有効です。

og:description の文字数

SNS カードで表示されるdescriptionの文字数目安はプラットフォームによって異なります。

プラットフォーム表示文字数の目安
Facebook約300文字（ただし2行程度で切れる場合あり）
X（旧Twitter）約125文字
LINE約100文字

最も短いXの表示に合わせ、冒頭100文字以内に要旨を集約するのが安全です。

X（旧Twitter）カードの設定

X は OGP タグを多くの部分で参照しますが、カードの種類を指定する twitter:card タグだけは OGP にフォールバックしません。明示的に設定が必要です。

html
<!-- twitter:card の指定は必須（OGPにフォールバックしない） -->
<meta name="twitter:card" content="summary_large_image">

<!-- 以下はog:タグがあれば省略可能だが、明示的に書くのが確実 -->
<meta name="twitter:title" content="OGP設定ガイド2026">
<meta name="twitter:description" content="og:imageの比率からXカードまで完全解説">
<meta name="twitter:image" content="https://example.com/images/ogp-1200x600.jpg">

twitter:card の主要な値は以下の2つです。

  • summary_large_image：横長の大きなサムネイル付きカード。コラム・記事ページに推奨
  • summary：小さな正方形サムネイル付きカード。プロフィールや短い投稿向け

SEO評価ツールの extractOgpData が確認する項目

OGP解析機能（extractOgpData）は、ページから以下の項目を抽出・評価します。

項目チェック内容
og:title設定の有無、titleタグとの差分
og:description設定の有無、文字数
og:image設定の有無、絶対URL形式か、推奨サイズとの乖離
og:url正規URLと一致しているか
og:type適切なタイプ（article / website 等）が設定されているか
twitter:card設定の有無と値の妥当性

これらが欠落・不正確な場合、SNSシェア時に意図しない表示になるだけでなく、ツールのOGPスコアが低下します。

よくある落とし穴

  • 相対URLで og:image を書いてしまう：/images/ogp.jpg のような相対パスは多くのプラットフォームで読み取れません。必ず https:// から始まる絶対URLを使ってください。
  • 同一サイト内で全ページ共通の og:image を使い回す：コラム一覧やカテゴリページと記事ページが全部同じ画像では、シェアカードの差別化ができません。少なくとも記事単位でユニークなOGP画像を用意することが理想です。
  • OGPキャッシュのリフレッシュを忘れる：Facebook・Xなどは一度スクレイピングした OGP 情報をキャッシュするため、修正後も古い表示のままになることがあります。Facebook の Sharing Debugger でキャッシュをリフレッシュできます。

まとめ：OGP設定チェックリスト

最後に、本記事のポイントをチェックリストとしてまとめます。

  • og:title・og:type・og:url・og:image の必須4タグが設定されているか
  • og:image が絶対URLで、1200×600px（2:1比率）以上の解像度か
  • og:title が <title> タグとは別にSNS向けに最適化されているか
  • og:description の冒頭100文字以内に要旨が収まっているか
  • twitter:card が summary_large_image または summary で明示されているか
  • og:url がページの正規URLと一致しているか
  • 記事ごとにユニークな og:image が設定されているか
  • SNSシェアプレビューツールで実際の表示を確認したか

自分のページのOGP設定が正しいかは、本ツールの SEOチェッカー で確認できます。OGP/Twitterカードのメタ情報を抽出し、X・Facebookでのシェアプレビューを再現表示します。

参考・一次情報ソース

他のコラムを読む

すべて見る →
# SEO# 内部リンク# 外部リンク# rel属性

内部リンク・外部リンク設計の基本：回遊性とrel属性を整理する

内部リンクによる回遊性・クローラビリティの向上と、外部リンクを扱う際のrel属性（nofollow / sponsored / ugc）の使い分けを解説。アンカーテキストの付け方・リンク切れ対策・発リンクの信頼性まで整理し、リンク設計チェックリストも紹介します。

読了 約7分
# SEO# robots.txt# sitemap# クロール

robots.txtとsitemap.xmlの基本：クロール制御の入口を整える

検索エンジンのクロールを制御する robots.txt と、重要URLを伝える sitemap.xml の役割・正しい設定方法・起きがちな事故パターンを解説。sitemapに含めるべきURLの考え方や Search Console での確認方法、クロール制御チェックリストも紹介します。

読了 約7分
# SEO# 画像# alt# アクセシビリティ

画像altとは？アクセシビリティとSEOを両立する書き方

画像の alt 属性の役割から、良いalt・悪いaltの違い、装飾用画像の alt="" の扱い、ファイル名やキャプションとの関係、画像最適化とのバランスまで解説。キーワード詰め込みのNG例と、画像alt最適化チェックリストも紹介します。

読了 約7分