「OGPは、決まったmetaタグを書き写して中身を差し替えれば終わる設定」。記事の公開に関わる方からいただくご質問は、たいていこの前提から始まります。解説記事の多くがタグの一覧とコード例だけで完結しているため、公開までの段取りとは切り離された、一度書けば済む作業として受け取られやすいのでしょう。
しかし弊社はこれまで、多くのSEO記事を制作し、公開してSNSに流れるところまで見てきました。その経験から言えるのは、OGPでつまずく理由は書き方を知らないことではなく、決めるタイミングを公開より後ろにずらしてしまうことにある、という点です。各SNSは一度読み取った内容を自分の側に保存するため、後から書き換えても、貼られた投稿の見え方は追いついてくれません。OGPは公開後に直す項目ではなく、公開前に決め切る項目です。
本記事では、OGPの意味と設定するタグの書き方から、SNSごとの見え方の違い、画像の推奨サイズ、公開前に確認する順番、表示されないときの原因までを、記事制作会社の視点で順を追ってお伝えします。
- OGPの意味と、書く場所・書き方の基本形
- 仕様上の必須タグと、実務でそろえるタグの違い
- X・Facebook・LINEで変わる見え方と追加タグ
- og:titleを検索用のtitleタグと分けるかの判断
- 公開前に確認する順番と、表示されないときに見る場所
OGPとは？SNSでの見え方を指定する仕組み
OGPは、Open Graph Protocol（オープングラフプロトコル）の略で、読み方は「オージーピー」です。WebページのURLがSNSやチャットに貼られたとき、画像・タイトル・説明文をひとまとめにしたカードの形で表示させるための取り決めを指します。2010年にFacebookが公開した仕様で、いまはX（旧Twitter）、LINE、Slack、はてなブックマークなど、リンクのプレビューを出す多くのサービスが同じ記法を読み取っています。
書く場所は、HTMLのhead内です。metaタグのproperty属性に「og:」で始まる名前を、content属性に表示させたい内容を入れる形をとります。指定がなければ、各サービスはtitleタグやページ本文から表示内容を推測します。推測が当たることもありますが、画像については何も選ばれないか、ページ内のどれかが拾われるだけです。
つまりOGPは、新しい表示を足す仕組みというより、放っておくと推測で決まる表示を、こちらから指定する仕組みだと考えたほうが実態に近いでしょう。
関連記事：【2025年最新版】初心者でもできるSEOのやり方完全ガイド | 上位表示するための具体的な方法を徹底解説
OGPを設定すると何が変わるのか
設定して変わるのは、タイムラインやトーク画面のなかで、そのリンクが占める面積と伝わる情報量です。文字だけのリンクと、画像付きのカードでは、目に入る大きさがまるで違います。
- タイムラインで画像付きのカードとして表示され、リンク1行より広い面積を取る
- シェアする人が「何のページか」を書き添えなくても、内容が相手に伝わる
- SlackやTeamsなど社内のチャットに貼ったときも同じカードが出る
- サイト名が毎回同じ表記で出るため、貼られた先でも発信元が分かる
見落とされやすいのは3つ目です。OGPはSNS拡散のための設定として語られますが、実際にいちばん頻度が高いのは社内のチャットにURLを貼る場面でしょう。記事を確認してもらうとき、カードが出るかどうかで相手が開く前に受け取れる情報が変わります。
一方で、期待しないほうがよい効果もはっきりしています。
OGPは検索順位を動かす設定ではありません。Googleの検索結果にog:titleやog:imageが使われることはなく、順位への直接の影響もありません。SNSやチャットでの見え方を指定する仕組みだと割り切ったうえで、検索向けのtitleタグとmeta descriptionは別に用意してください。
関連記事：h2タグとは？記事制作会社が教える見出しの決め方と並び順
OGPタグの書き方と各要素の役割
ここからは実際の書き方です。まず全体像を1つのコードで示し、そのうえで要素ごとの注意点を見ていきます。
head内への書き方とprefix属性
head開始タグにprefix属性を付け、そのなかにmetaタグを並べます。
<head prefix="og: https://ogp.me/ns#">
<meta property="og:title" content="OGPとは？タグの書き方と公開前の確認手順">
<meta property="og:type" content="article">
<meta property="og:url" content="https://writers-hub.co.jp/blog/ogp">
<meta property="og:image" content="https://writers-hub.co.jp/media/ogp-card.png">
<meta property="og:description" content="OGPの意味と設定するタグの書き方、公開前の確認手順を解説します。">
<meta property="og:site_name" content="Writers-hub">
</head>prefix属性は「og:」という短縮名が何を指すかを宣言する部分です。省いても表示されるサービスは多いものの、仕様に沿うなら付けておくのが無難でしょう。なお、使うのはname属性ではなくproperty属性です。ここを取り違えると、記述そのものは正しく見えるのに読み取られません。
Web担当者6つ全部書かないと、カードは出ないのでしょうか。
Writers-hub編集部
仕様が必須としているのはog:title、og:type、og:image、og:urlの4つで、残る2つは任意です。ただ、任意の2つを省くと「どのサイトの何の記事か」が読み取りにくいカードになるため、実務では6つそろえています。
OGPの必須タグは4つで、残りは任意です。この線引きは仕様の原文で確認できます。
各タグの役割と書き方の注意点
6つの役割と、現場でつまずきやすい点を並べます。
property | 何を指定するか | 書き方の注意 |
|---|---|---|
og:title | カードに出す見出し | サイト名や記号を足さず、ページの内容だけを書く |
og:type | ページの種類 | 記事はarticle、トップページはwebsite |
og:image | カードに出す画像 | httpsから始まる絶対URLで書く。相対パスは読まれない |
og:url | そのページの正規URL | パラメータを付けず、1ページ1本に統一する |
og:description | カードに出す説明文 | 表示されないサービスもあるため、要点を先に置く |
og:site_name | サイトの名前 | サイト全体で同じ表記にそろえる |
とりわけ見落とされがちなのが、og:urlの扱いです。SNSのシェア数や取得済みの内容は、ここに書いたURLを単位として扱われます。同じ記事に複数のURLが存在する状態（末尾のスラッシュあり・なし、計測用パラメータ付きなど）でog:urlがばらつくと、同じ記事が別のページとして数えられます。正規URLの1本に固定しておいてください。
og:imageに相対パスを書いた場合、ほとんどのサービスは画像を取得できません。SNSのクローラーはあなたのサイトの外から画像を取りに来るため、必ずhttpsから始まる絶対URLで指定します。加えて、その画像が会員限定の場所やベーシック認証の内側に置かれていると、URLが正しくても画像は取得されません。
WordPressなどCMSでの設定
WordPressの場合、テーマがOGPを出力していることもあれば、SEO系のプラグインが担っていることもあります。All in One SEOやYoast SEO、SEO SIMPLE PACKなどはいずれもOGPの出力機能を持っています。
ここで起きやすい事故が、出力元の重複です。テーマとプラグインの両方がog:titleを書き出すと、同じproperty名のmetaタグが2つ並び、どちらが採用されるかはサービス側の読み取り順に左右されます。OGPを出力する箇所は1つに絞り、残りは機能をオフにしてください。設定を変えたあとは、ブラウザで「ページのソースを表示」を開き、og:で始まるタグが1種類につき1つだけになっているかを目で確かめるのが確実です。
関連記事：HTMLタグとは？目的別の一覧と選び方を記事制作会社が解説
X・Facebook・LINEでの見え方と追加タグ
同じOGPを読んでいても、カードの形と出る情報はサービスごとに違います。
| X（旧Twitter） | LINE | ||
|---|---|---|---|
| OGPを読むか | 読む | 読む | 読む |
| 専用タグ | twitter:cardとtwitter:siteを追加できる | fb:app_idは任意 | なし |
| 画像の形 | カードの種類で横長か正方形 | 横長 | トークとタイムラインで差がある |
| 気をつける点 | 表示仕様の変更が比較的多い | シェアデバッガーから再取得を指示できる | 画像が正方形に切られる場面がある |
Xだけは、OGPに加えて専用のタグを足せます。twitter:cardで画像の大きさを選び、twitter:siteでアカウント名を添える形です。
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@アカウント名">summary_large_imageを指定すると横長の大きな画像、summaryなら小さな正方形の画像になります。twitter系のタグはname属性で書く点に注意してください。og:で始まるタグはproperty属性、twitter:で始まるタグはname属性という使い分けです。
FacebookとLINEについては、OGPを正しく書いていれば専用タグは不要です。fb:app_idはインサイトの計測に使う値で、カード表示のために必須ではありません。ただしLINEはトークに貼られたときに画像が正方形に近い形で切られる場面があるため、横長画像の左右が落ちても意味が通る作りにしておくと安心でしょう。
OGP画像の推奨サイズと文字の入れ方
画像サイズは、横1200ピクセル×縦630ピクセルが実務上の基準です。Facebookは1200×630ピクセル以上を推奨しており、この比率（およそ1.91対1）で作っておけば、多くのサービスで大きな横長カードとして扱われます。
ここで実務上いちばん効くのは、寸法よりも文字量の判断です。1200×630で作った画像は、タイムラインでは画面幅に合わせて縮小されます。制作画面では読める文字が、スマートフォンでは判別できないという事故が起きるのは、確認を等倍のまま済ませてしまうからでしょう。
- 横1200ピクセル×縦630ピクセルで作る
- 文字は端から5パーセントほど内側に収める
- 入れる文字は15文字前後までに絞り、2行までにとどめる
- ファイル形式はJPGかPNG、容量は1メガバイト前後を上限に考える
- ページごとに違う画像を指定する
※ 切り取られる幅はサービスと画面幅によって変わります。上記は制作時の目安としての数値です。
文字を絞る代わりに効くのが、色と配置の固定です。同じ位置に同じ書体でタイトルが入る形を決めておくと、縮小されて文字が読めない状態でも、発信元がどこかは伝わります。記事ごとに背景写真を変える運用よりも、書式を固定して文字だけ差し替える運用のほうが、作る手間と読める確率の両面で扱いやすいはずです。
og:titleはtitleタグと同じ文でよいか
設定方法の解説ではあまり触れられない論点に入ります。og:titleに、検索用のtitleタグと同じ文字列をそのまま入れてよいかという判断です。
結論から言えば、titleタグの作り方によって変わります。検索のtitleとog:titleでは、読者の状態が違います。検索結果のtitleを読むのは、自分で検索窓に言葉を打って探しに来た人です。だから検索語との一致が効き、サイト名を後ろに添えるのも理にかなっています。一方でog:titleを読むのは、何も探していない人です。誰かの投稿のすぐ下に置かれた1行を、流れの途中で目にする状態にあります。
この違いが、書き方の差になって表れます。探していない人にとって、検索語の繰り返しやサイト名の付記は、カードの限られた行数を埋めるだけの文字です。代わりに要るのは「なぜ今これを読むのか」が分かる一言でしょう。
og:titleをtitleタグと分けるかどうかは、titleタグに何を足しているかで決まります。サイト名や区切り記号より後ろの文字をtitleタグに含めているなら、その部分を外したog:titleを別に用意する価値があります。titleタグがページの内容だけで組まれていて検索語も自然に入っているなら、そのまま使い回して構いません。
CMSの設定画面では、OGP用のタイトル欄が空のときにtitleタグを自動で流用する作りになっているものが多く、放っておくと全ページが使い回しの状態になります。全記事を書き分ける必要はありませんが、SNSからの流入を狙う記事だけでも別に書いておくと、同じ記事でも読まれ方が変わってきます。
記事ごとに読まれる1行を書き分ける手が足りていませんか
検索結果で読まれる見出しと、SNSで通りすがりに読まれる1行は、同じ文では務まりません。記事本文だけでなく、タイトル、説明文、SNS向けの1行までをまとめて用意する進め方もあります。1本あたりの工程と費用の目安からお伝えします。
OGPを公開前に決め切る理由
ここまでは「何を書くか」の話でした。ここからは「いつ決めるか」に視点を移します。冒頭で触れた、OGPでつまずく本当の理由です。
Web担当者公開したあとに画像を差し替えたら、投稿のカードも変わりますか。
Writers-hub編集部
自動では変わりません。すでに投稿されたリンクは、SNS側が最初に取得した内容を表示し続けます。Facebookはシェアデバッガーから再取得を指示できますが、投稿済みのカードまで書き換わるとは限りません。
各サービスは、URLを初めて受け取ったときにページを読みに来て、取得した内容を自分の側に保存します。次に同じURLが貼られたときは、保存した内容を出すほうが速いためです。各SNSは初回に取得した内容を自分側に保存します。この仕組みがある結果、公開直後に誰かがシェアすると、その時点のOGPが固定されます。
だからこそ、OGPは公開ボタンを押す前に確認する項目として工程に入れておく必要があります。順番はこの4つです。
画像だけが表示されるか確かめます。404が返る場所や、ログインが必要な場所に置いた画像は、SNSからは取得できません。
ブラウザの「ページのソースを表示」でheadの中を開き、og:で始まるmetaタグが1種類につき1つだけあるか、og:urlが正規URLになっているかを確かめます。
URLを入れると各SNSでの表示を同時に確認できるツールを使い、画像の切れ方とタイトルの折り返しを確認しましょう。
プレビューを実寸のまま拡大せずに見て、入れた文字が読めるか確かめます。読めなければ文字を減らします。
公開前に済ませれば、この4つで5分もかかりません。公開後に気づいた場合は、再取得の操作に加えて、すでに貼られた投稿を消して貼り直すかどうかという判断が別に発生します。5分で済む確認が、関係者への確認を挟む作業に変わってしまうわけです。
OGPの確認方法と表示されないときの原因
確認の手段と、うまく出ないときに見る場所を分けて整理します。
表示を確認するときに使うツール
用途で3つに分かれます。読み取られている内容そのものを見たいのか、複数のSNSでの見え方を比べたいのか、保存された内容を更新したいのかで選んでください。
Facebookのシェアデバッガー（Meta for Developersのツール一覧から開けます）は、取得された内容の表示と、保存済みの内容の再取得ができます。複数のSNSでの見え方を一度に比べたいときは、ラッコツールズのOGP確認のように主要なSNSのカードを並べて表示するツールが扱いやすいでしょう。Xについては、以前提供されていたカード確認用のツールが現在は使えないため、投稿の下書き画面にURLを貼って表示を見る方法が確実です。
3つのうち、公開前に必ず通しておきたいのは2つ目の並べて見るツールです。1つのSNSで整っていても、別のSNSでは画像の左右が落ちてタイトルが折り返すことがあり、そこは並べて見ないと気づけません。
表示されないときに見る順番
原因はほぼ次のどれかに収まります。上から順に確かめてください。
- metaタグをbody内に書いている、またはheadの外に出ている
- og:imageを相対パスで書いている
- 画像が認証の内側にあり、外からは取得できない
- 同じproperty名のmetaタグが2つ以上あり、意図しない側が読まれている
- JavaScriptで後からmetaタグを差し込んでいる
- サービス側が以前取得した内容を保存したまま、まだ更新していない
最後から2つ目は、SPAやクライアント側でページを組み立てる構成で起きます。SNSのクローラーはJavaScriptを実行せずにHTMLを読むものが多いため、ブラウザでは正しく見えるOGPが、クローラーには空のまま渡るのです。サーバー側でHTMLにmetaタグを埋め込む形に変える必要があり、フレームワークの設定を含む対応になります。
キャッシュが原因のときは、シェアデバッガーで再取得を指示すれば新しい内容に切り替わります。一方で、Xやチャットツールには再取得の窓口がなく、一定期間が過ぎるまで待つしかない場合もある点は、あらかじめ知っておいたほうがよいでしょう。
公開前の確認が、担当者の記憶だけに預けられていませんか
OGPの確認は、公開ボタンを押す直前にしか意味を持ちません。だからこそ、誰が担当しても同じ順番で確認が回る形にしておく必要があります。記事の企画から執筆、確認、公開までの工程を組み直すところからお手伝いできます。
OGPについてよくある質問
制作のご相談でいただくことの多い質問をまとめました。
仕様上の上限はありません。ただし表示できる長さはサービスごとに違うため、80字前後で要点を先に置く形が扱いやすいでしょう。説明文が出ないカードもあるので、そこだけに情報を預けないほうが安全です。
上がりません。OGPはSNSやチャットでの表示を指定する仕組みで、Googleの検索結果には使われません。シェアが増えた結果として評価が動くことはありますが、順位を直接動かす設定ではないと考えてください。
あります。og:titleとog:image、og:urlはページごとに違う内容になるため、サイト共通の1セットを使い回すと、どのページを貼っても同じカードが出ます。少なくともこの3つはページ単位で出力してください。
勧められません。SEO系のプラグインは多くがOGPを出力するため、2つ動かすとmetaタグが重複します。出力する側を1つに決め、もう一方はOGPの機能だけオフにしてください。
こうして並べてみると、質問のほとんどが「設定の中身」ではなく「どこまでを誰がいつ確認するか」に関わる話だと分かります。OGPでつまずく原因も、タグの知識より公開までの段取りの側にあると見ています。
タグの設定より先に、記事を出し続ける形を決めたい方へ
OGPは記事を公開する工程の最後の一手です。その手前にある企画、執筆、確認の流れが詰まっているなら、そこから見直したほうが早く進みます。現状をお聞きしたうえで、どこから手を付けるかを一緒に整理します。
まとめ｜OGPは公開前に決める1行と1枚
OGPは、WebページのURLがSNSやチャットに貼られたときの見え方を指定する仕組みです。書くタグはog:title、og:type、og:image、og:url、og:description、og:site_nameの6つで、このうち仕様が必須とするのは前の4つでした。書き方そのものは1度覚えれば終わります。
残るのはタイミングの問題です。各サービスは初回に読み取った内容を保存するため、公開後に直しても、すでに貼られた投稿の見え方は追いついてくれません。og:imageのURLが外から開けるか、head内にog:タグが1種類ずつあるか、画像の文字が縮小表示で読めるか。この3点を公開ボタンの手前に置くだけで、後から慌てる場面はほとんどなくなるはずです。
私たち合同会社Writers-hubは、SEO記事の企画から執筆、公開前の確認までをまとめてお引き受けしています。OGPのようにひとつずつは小さい工程が、担当者の記憶だけに預けられて抜け落ちる状態にお困りでしたら、工程の組み方からご相談ください。
