OGPとは？SNSで共有したときの画像と文章を整える設定と確かめ方

OGP（オージーピー）とは、ページをSNSやLINEで共有したときに出る画像・見出し・説明文を、サイト側から指定するための設定です。正式には Open Graph Protocol といいます。ページの見た目は変わらず、共有されたときの見え方だけが変わります。

「自社のページをLINEで送ったら、関係のない画像が出た」「SNSに貼っても画像が出ない」「画像を差し替えたのに、古いまま変わらない」。OGPを調べ始めるきっかけは、たいていこのどれかだと思います。

先に結論を言うと、小さな会社やお店のサイトでやることは多くありません。使っているサービスの設定画面で、横1200×縦630ピクセルの画像を1枚登録し、トップページと、よく共有するページの見出しと説明文を確かめる。多くの場合は、これで足ります。HTMLを書く必要があるのは、自分でサイトのコードを管理している場合だけです。

この記事では、本業の合間に自社のホームページやブログを運営している方に向けて、OGPの役割、設定しないと何が起きるか、入れる項目、画像のサイズと作り方、使っているサービスごとの設定場所、確かめ方、画像が出ないときの確認順、検索順位との関係を、各サービスの公式情報をもとに順番に説明します。サイズや仕様は2026年11月4日に確認した内容です。

OGPとは、SNSでの見え方を指定する設定

OGPは、ページの情報をSNSなどのサービスに伝える決まりです。The Open Graph protocol の公式サイト（外部サイト・新しいタブで開きます）によると、もともとFacebookで作られた仕組みで、ページの <head> という、画面には出ない情報を書く場所に、<meta> タグという短い記述を足して使います。今ではFacebookだけでなく、XやLINEなどでも読み取られています。

共有カードの各部分は、次の図のようにOGPの項目で指定します。

「OGP画像」は、このうち og:image で指定する画像のことです。サムネイル、シェア画像、ソーシャルカバーなど、サービスによって呼び名が違いますが、指しているものは同じです。

実際に入っているタグの例

このブログの記事にも、OGPが入っています。2026年11月4日にrobots.txtの記事の中身を確かめたところ、次の記述がありました（OGPの主な行を抜き出し、説明文は省略しています）。

<meta property="og:title" content="robots.txtとは？触るべきかの判断と書き方・確認方法"/>
<meta property="og:description" content="robots.txtとは、Googleなどの…"/>
<meta property="og:url" content="https://tsumugi.koromo.io/blog/robots-txt"/>
<meta property="og:image" content="https://tsumugi.koromo.io/images/blog/robots-txt.jpg"/>
<meta property="og:type" content="article"/>
<meta name="twitter:card" content="summary_large_image"/>

見出しと画像のアドレスが、その記事のものになっている点が大切です。記事ごとに違う内容を出せるので、受け取った人は、開く前に何のページかを判断できます。

状況別の読み分け早見表

今の状況に近い行から読むと、必要なところにすぐたどり着けます。

設定していないと何が起きるか

OGPがなくても、共有はできます。ただし、何を出すかは各サービスが判断するので、思ったとおりの見え方になるとは限りません。

つまり、「関係のない画像が選ばれる」「画像が出ない」「本文の途中が説明文になる」といったことが起きます。投稿の失敗ではなく、サービスが手元の情報で埋めた結果です。

先に整えたいページと、後回しでよいページ

全ページを一度に手作業で直す必要はありません。OGPの効果が出るのは、共有される場面があるページだけだからです。

SNSをまったく運用していなくても、URLをLINEやチャットで送る機会があるなら、トップページだけは確かめておく価値があります。設定の手間は小さく、一度入れれば送るたびに効くからです。

入れる項目は、基本の5つとX用の1つ

基本の5項目と、Xのカードの形を決める1項目を入れれば、たいていの場面に対応できます。The Open Graph protocol の公式サイト（外部サイト・新しいタブで開きます）は、タイトル・種類・画像・URLの4つをすべてのページの必須項目とし、説明文は任意としています。ただ、説明文はFacebookの文書（外部サイト・新しいタブで開きます）が基本のタグに挙げており、LINE（外部サイト・新しいタブで開きます）も読み取るので、入れておくほうが安心です。

足しておくと親切な項目

余裕があれば、次の3つも足します。

• og:site_name：サイト全体の名前です。公式サイトは任意の項目としています。
• og:locale：ページの言語です。Facebookの文書によると初期値は en_US なので、日本語のページなら ja_JP と書いておきます。
• og:image:alt：画像の内容を文字で説明したものです。The Open Graph protocol の公式サイト（外部サイト・新しいタブで開きます）は、og:image を指定するなら入れるべきだとしています。書き方はalt属性の記事と同じ考え方で足ります。

古い解説に残っている「必須」に注意

OGPの解説記事には、公開から何年も経ったものも多く、今の公式情報と合わない説明が見つかります。迷いやすいのは次の2つです。

ひとつは fb:app_id です。Facebookの文書（外部サイト・新しいタブで開きます）によると、これはFacebookからの流入を分析する「インサイト」を使うためのものです。そのため、分析を使わないなら、開発者登録をしてまで用意する必要はないと考えてよいでしょう。

もうひとつは、Xの指定です。Xの開発者向け文書には、Xの指定がなければ og:title などのOGPの項目を使う、と説明があります（この文書は現在、公式サイトの総合ページに転送されるので、2026年1月時点の保存版（外部サイト・新しいタブで開きます）を確認しました）。つまり、見出しや画像をOGPと別に書く必要はなく、足すのはカードの形を決める twitter:card です。サイトのXアカウントを示す twitter:site は、この文書では必須ではないとされていますが、タグの一覧の文書（外部サイト・新しいタブで開きます）には必須と書かれています。文書によって扱いが違うので、アカウントがあれば書いておくと安心です。

タイトルタグや説明文とは、読む相手が違う

OGPの項目は、検索結果向けのタイトルや説明文とよく似ていますが、主に読み取る相手が違います。

同じ文章でも問題はありません。Wixの説明（外部サイト・新しいタブで開きます）でも、初期設定ではSEO用のタイトルと説明文がそのまま使われます。分けるとしたら、SNSで流れてきたときに目を止めてもらいたいページだけです。検索結果では「探している言葉」を、SNSでは「読むと何が分かるか」を前に出すと、書き分けやすくなります。

OGP画像のサイズと作り方

迷ったら、横1200×縦630ピクセルのJPGかPNGで、ファイルは5MB未満にしておけば、次の表のサイズと重さの条件に収まります。横と縦の比率は約1.91対1で、Xのカードでは少し切られることがあります。

Xの数字は保存版の内容で、今の公式サイトでは同じ文書を確かめられませんでした。LINEのOGP画像については、確認したLINE Developers FAQ（外部サイト・新しいタブで開きます）にサイズの指定がありませんでした。他の解説記事に「LINEは正方形で630×630」のような数字が出てくることはありますが、公式の文書では確かめられなかったので、ここでは目安に入れていません。

このブログの記事の画像も、実測で1200×630ピクセルです。

切られても伝わるように作る

同じ画像でも、表示される場所によって端が切られることがあります。Facebookの案内（外部サイト・新しいタブで開きます）は、切られずに全体を見せるには比率を1.91対1に近づけるよう求めていて、Xの大きなカードは2対1、小さなカードは正方形です。横1200×縦630の画像で計算すると、切られる範囲は次のようになります。

切られ方はサービスごとに変わるので、これは目安です。それでも、大事な文字や人の顔を中央に寄せておけば、ほとんどの場面で伝わります。左右の端には、切れても困らない背景や模様を置きます。

作るときに決めておくこと

画像を作るときは、次の5つを決めておくと手が止まりません。

1. 何の画像にするか：お店の外観、施工事例の写真、商品の写真など、そのページの内容が分かるものを選びます。
2. 文字を入れるか：入れるなら、短い一言だけにします。スマートフォンの画面では、カードはかなり小さく表示されるからです。
3. ロゴだけの画像にしないか：Xの文書とGoogleの文書（外部サイト・新しいタブで開きます）は、どちらもサイトのロゴのような一般的な画像を使わないよう案内しています。全ページに同じロゴが出ると、受け取った人はページの違いが分かりません。
4. どこまで個別に作るか：まずサイト共通の画像を1枚用意し、人に送るページから個別の画像に替えていけば十分です。WixやStudioには、サイト全体の画像とページごとの画像を分けて登録する仕組みがあります。
5. ファイルの重さ：大きすぎると読み込めないことがあります。Wixのヘルプ（外部サイト・新しいタブで開きます）は、WhatsAppでのブログ記事やURLの共有では、300KB未満の画像だけがプレビューに出ると注意しています。海外の取引先とWhatsAppでやり取りするなら、ここも見ておきます。

文字の入れすぎには、別の理由もあります。Googleの文書（外部サイト・新しいタブで開きます）は、検索結果やDiscover（スマートフォンのGoogleアプリなどに出るおすすめ記事の欄）で優先してほしい画像に、テキストが含まれた画像を使わないよう案内しています。SNSでは短い文字が役に立つ場面もあるので、どちらを重く見るかはサイトの事情しだいです。写真が主役で文字は補助、という作り方にしておけば、両方に対応しやすくなります。

使っているサービスごとの設定場所

ホームページ作成サービスやWordPressを使っているなら、HTMLを触らずに設定できます。

WordPressの場合

使っているテーマに、OGPやSNSの設定があるかをまず確かめます。無ければ、SEO用のプラグインで入れます。たとえばSEO SIMPLE PACK（外部サイト・新しいタブで開きます）は、ページごとにOGPのタグを設定できる軽いプラグインで、有効インストールは10万件以上です。Yoast SEO（外部サイト・新しいタブで開きます）は有効インストールが1,000万件以上あるプラグインで、OGPやXのカード用の情報も扱います。どちらを選ぶかなど、プラグイン全体の選び方はWordPressのSEOの記事にまとめています。

よくある失敗は、テーマとプラグインの両方が同じ項目を出力している状態です。The Open Graph protocol の公式サイト（外部サイト・新しいタブで開きます）によると、同じ項目が複数あると、競合したときは先に書かれたものが優先されます。プラグインで画像を変えたのに反映されないときは、テーマ側のタグが先に出ていないかを、次の章の方法で確かめてください。

Wixの場合

Wixのヘルプ（外部サイト・新しいタブで開きます）によると、ダッシュボードの「SEO・GEO」から「ツールと設定」「SEO 設定」と進み、編集したいページの種類を選びます。「基本設定・SNS シェア」の「編集」を開くと、og:image、og:title、og:description を変えられます。切れないようにするために、タイトルは80文字以内、説明文は300文字以下が推奨されています。

同じヘルプは、各SNSが独自の基準で表示内容を選ぶので、設定した情報が使われるとは限らない、とも注意しています。設定したら、必ず実際の表示を確かめてください。

Studioの場合

Studioのヘルプ（外部サイト・新しいタブで開きます）によると、ボックスを何も選んでいない状態で右パネルを開き、ページごとの設定は「ページ」タブ、サイト全体の設定は「サイト」タブで行います。「ソーシャルカバー」の項目で画像をアップロードし、サイトを公開または更新すると反映されます。ページの設定はサイトの設定より優先され、ページ側が未入力ならサイト側の内容が使われます。

HTMLを自分で書く場合

The Open Graph protocol の公式サイト（外部サイト・新しいタブで開きます）の例に、説明文とXのカードを足すと、次の形になります。内容は例なので、ページごとに書き換えてください。

<html lang="ja" prefix="og: https://ogp.me/ns#">
<head>
  <title>外壁塗装の費用と、見積もりの見方｜○○塗装</title>
  <meta property="og:title" content="外壁塗装の費用と、見積もりの見方" />
  <meta property="og:description" content="築15年の家を例に、見積書で確かめたい項目を順番に説明します。" />
  <meta property="og:image" content="https://example.com/images/estimate.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="外壁の塗り替え工事をしている住宅の写真" />
  <meta property="og:url" content="https://example.com/blog/estimate" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="○○塗装" />
  <meta property="og:locale" content="ja_JP" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

og:image:width と og:image:height は省いても動きますが、入れておくと得をします。Facebookの文書（外部サイト・新しいタブで開きます）によると、最初にシェアした人に画像が出ないことがあり、この2つを書くとそれを避けられるからです。

設定できたかの確かめ方

設定後は、公式の確認ツールを使えるサービスはそれで、ないサービスは実際に送って確かめます。

Xには以前「Card Validator」という確認ツールが案内されていましたが、今回の確認時にはログイン画面へ転送され、中身を確かめられませんでした。Xのカードの見え方は、投稿して確かめるのが確実です。

URLを入れるだけでOGPの中身を一覧できる、第三者の無料ツールもあります。入れ忘れを探すには便利ですが、各サービスの本当の表示と同じになるとは限りません。最後は、使う予定のサービスで確かめてください。

スマートフォンでの見え方も必ず見ます。共有カードは、スマートフォンでは小さく表示されます。画像の文字が読めるか、見出しの大事な部分が切れていないかは、パソコンの画面だけでは分かりません。

画像が出ない・古いままのときの確認順

原因は、タグ、画像そのもの、読み取りの妨げ、サービス側に残った古い情報の4つに分かれます。次の順に確かめると、無駄な作り直しを避けられます。

1. 今見ているのが古い投稿でないかを確かめる。 直したあとも、すでに投稿済みのカードは変わらないことがあります。Facebook（外部サイト・新しいタブで開きます）とLinkedIn（外部サイト・新しいタブで開きます）は、どちらも古い投稿のプレビューは自動では更新されないとしています。新しく貼り直して確かめてください。
2. タグが入っているかを確かめる。 ページのソースを開き、og:image を探します。無ければ設定が保存されていないか、公開や更新を忘れています。2つ以上あれば、先に書かれたほうが使われている可能性があります。
3. 画像のアドレスを開く。 og:image のアドレスをシークレットウィンドウで開きます。Xの文書の保存版（外部サイト・新しいタブで開きます）によると、画像が出ない最も多い原因は、画像がインターネット上で公開されていないことです。公開前のサイトや、パスワードをかけたサイトでも同じことが起きます。
4. 画像の形式と重さを確かめる。 XはSVGに対応していません。重さは前の章の表で確かめます。
5. 読み取りを止めていないかを確かめる。 robots.txtやサーバーの設定で、SNSのクローラーを止めていることがあります。Xの文書の保存版は原因の例としてrobots.txtやサーバー会社による遮断を挙げ、Metaの文書（外部サイト・新しいタブで開きます）は、数秒以内に読み取れるようにすることと、OGPの項目をページの最初の1MBより前に書くことを求めています。robots.txtの読み方はrobots.txtの記事で確かめられます。
6. サービス側の古い情報を更新する。 ここまで問題が無ければ、サービス側に古い情報が残っている状態です。次の表の方法で更新します。

画像を差し替えるときは、最初から新しいファイル名でアップロードする、と覚えておくと、この手間の多くが減ります。

OGPはSEOに効くのか

結論として、OGPを入れれば検索順位が上がる、とは言えません。今回確認したGoogleの公式文書の範囲では、OGPを順位の決め手として説明している箇所は見つかりませんでした。OGPは、まず共有されたときの見え方を整える設定と考えてください。

ただし、Googleの検索とまったく無関係でもありません。公式文書で確かめられた接点は次のとおりです。

Discoverの文書は、幅1200ピクセル以上の大きな画像を勧めていて、ここでも1200×630の画像は使えます。ただし、同じ文書が勧める比率は16対9で、OGP画像の1.91対1とは少し違います。Discoverに力を入れている場合だけ、気にすれば十分です。

検索結果の見え方を整える方法には、構造化データもあります。こちらは検索エンジンに向けてページの内容を説明するもので、SNSの共有カードとは目的が別です。どちらか一方でよいという関係ではありません。

検索からの流入を増やしたいなら、OGPを整えたあとは、検索されている言葉に答える記事を増やす作業のほうが、直接の効き目があります。

記事を増やすときに、画像の手間を減らす

共有カードは、一度整えると放っておけます。手間が続くのは、記事を増やすたびに画像を作る部分です。

つむぎは、この「記事づくり」を手伝う道具です。サーチコンソールとつなぐと、順位・表示回数・クリック率を取り込み、キーワードごとに「新規で書く」「リライトする」「タイトルだけ直す」「内部リンクを足す」「今は様子を見る」のどれがよいかを、理由をつけて提案します。サイトごとの設定に「サムネイルの制作ガイド」があり、画像の画風と配色をそろえられます。できた記事は「要確認」の状態で届き、確認して承認したものだけが公開され、つむぎが勝手に公開することはありません。

一方で、つむぎはOGPの設定を代わりに行う道具でも、SNSの共有カードを点検する道具でもありません。お使いのサイトでOGPのタグが正しく出るかは、この記事の方法で確かめてください。SNSで共有するページがトップページとサービス紹介くらいなら、この記事の手順だけで足ります。

新しい記事の作成は1本あたり約4クレジットで、登録時に付与される初回8クレジットで約2本分を試せます。自分のサイトの検索データでどんな提案が出るかを確かめたい場合は、無料で始めるから試してください。

よくある質問

OGPを確かめるチェックリスト

設定したあとに、上から順に確認してください。

• トップページのソースを開き、og:title、og:description、og:image、og:url、og:type が入っていることを確かめた。
• 同じ項目が2つ以上出ていない（テーマとプラグインの重複がない）。
• 画像は横1200×縦630ピクセルで、ファイルは5MB未満にした。
• 大事な文字や顔を、画像の中央に寄せた。
• 画像はSVGではなく、JPGかPNGにした。
• 画像のアドレスを、シークレットウィンドウで開けることを確かめた。
• 人に送るページの見出しと画像が、そのページの内容に合っている。
• 全ページ同じロゴ画像になっていない。
• Facebookのシェアデバッガー、またはLINEの自分宛てのトークで、実際の見え方を確かめた。
• スマートフォンの画面で、画像の文字が読めることを確かめた。
• 画像を差し替えるときは、新しいファイル名で置いた。

あわせて読む

• メタディスクリプションとは：共有カードではなく、検索結果の説明文を整えたい人向け。
• WordPressのSEO対策：OGPを出力するプラグインも含めて、WordPressの設定をまとめて見直したい人向け。
• alt属性とは：OGP画像だけでなく、ページの中の画像の説明文も整えたい人向け。
• robots.txtとは：SNSのプログラムに読み取られているかが気になる人、robots.txt の中身を確かめたい人向け。

出典

• The Open Graph protocol（外部サイト・新しいタブで開きます）：Facebookで作られた仕組みであること、<head> に書くこと、必須と任意の項目、og:description と og:image:alt の説明、ページの種類、同じ項目が複数あるときの扱いの裏づけ。
• Facebook「ウェブ管理者向けシェア機能ガイド」（外部サイト・新しいタブで開きます）：タグがないときの予測、基本のタグ、og:title の書き方、fb:app_id の用途、og:type と og:locale の初期値、シェアデバッガーの役割の裏づけ。
• Facebook「リンクシェアの中の画像指定」（外部サイト・新しいタブで開きます）：画像のサイズと比率、最初のシェアで画像が出ないことへの対処、画像の差し替え方、古い投稿が自動更新されないことの裏づけ。
• Meta「Webクローラー」（外部サイト・新しいタブで開きます）：Facebookのクローラーへの対応、数秒以内の読み取りと最初の1MBの条件の裏づけ。
• X「Getting started with Cards」の保存版（2026年1月）（外部サイト・新しいタブで開きます）：Xの指定がないときにOGPの項目を使うこと、twitter:site を必須としていないことの裏づけ。
• X「Cards markup」の保存版（2026年1月）（外部サイト・新しいタブで開きます）：twitter:site を必須とする記述、twitter:card などの各項目とOGPの項目との対応の裏づけ。
• X「Summary Card with Large Image」の保存版（2026年1月）（外部サイト・新しいタブで開きます）：大きなカードの画像の比率・サイズ・形式の裏づけ。
• X「Summary Card」の保存版（2025年12月）（外部サイト・新しいタブで開きます）：小さなカードの画像の比率とサイズの裏づけ。
• X「Troubleshooting Cards」の保存版（2025年12月）（外部サイト・新しいタブで開きます）：画像が出ない原因、約7日ごとの読み直し、画像のアドレスを変えて更新する方法の裏づけ。
• LINE Developers FAQ（外部サイト・新しいタブで開きます）：LINEが使う3つのOGPタグと、設定がないときの読み込み方の裏づけ。
• LinkedIn ヘルプ「Use Post Inspector to refresh URL」（外部サイト・新しいタブで開きます）：Post Inspectorでの更新と、既存の投稿が変わらないことの裏づけ。
• Wix ヘルプ「サイトページの SNS シェア設定をカスタマイズする」（外部サイト・新しいタブで開きます）：設定の場所、初期値、推奨文字数、表示が保証されないことの裏づけ。
• Wix ヘルプ「og:image の推奨サイズ」（外部サイト・新しいタブで開きます）：推奨サイズとWhatsAppでの300KBの条件の裏づけ。
• Studio ヘルプ「ソーシャルカバー画像」（外部サイト・新しいタブで開きます）：設定の手順、推奨サイズ、未設定時の表示、反映のタイムラグの裏づけ。
• WordPress.org「SEO SIMPLE PACK」（外部サイト・新しいタブで開きます）と「Yoast SEO」（外部サイト・新しいタブで開きます）：OGPに関する機能と有効インストール数の裏づけ。
• Google「タイトルリンク」（外部サイト・新しいタブで開きます）：og:title が情報源の1つであることの裏づけ。
• Google「画像に関するベストプラクティス」（外部サイト・新しいタブで開きます）と「Discover」（外部サイト・新しいタブで開きます）：og:image による優先画像の指定と、選ぶときの注意の裏づけ。
• Google「スニペット」（外部サイト・新しいタブで開きます）：検索結果の説明文の元になる情報の裏づけ。