「渾身の記事をSNSでシェアしたのに、なぜか意図しない画像が表示される…」
「URLを投稿しても、タイトルしか表示されなくて見栄えが悪い…」
「OGPって言葉は聞くけど、何から手をつければいいか分からない！」
Webサイト運営で多くの人がつまずくポイント。それがOGPやTwitterカードの設定です。この設定を怠ると、SNSでの見栄えが悪くなり、せっかくのコンテンツが誰にも読まれずに埋もれてしまいます。
私は、Web制作の現場でOGPやTwitterカードを日常的に活用し、SNS経由の流入を安定的に改善してきました。
この記事では、初心者でも迷わず設定できるようOGPとTwitterカードの基本から具体的な設定方法まで解説します。
この記事を読めば「SNSでシェアされたときに意図した通りに美しく表示させる方法」が分かり、クリック率の向上が期待できます。
SNSからのアクセスを増やしたい方は、ぜひ最後まで読んで設定を完了させてください。
OGPとTwitterカードとは何？
OGP（Open Graph Protocol）は、Facebookが開発したメタデータ仕様です。ページをSNSでシェアしたときに「タイトル」「説明文」「画像」などを正しく表示させる役割があります。
一方、TwitterカードはTwitter専用の表示フォーマットです。OGPをベースにしつつ、Twitter独自のタグを追加することで「大きな画像付きカード」や「記事のプレビュー」を出せるようになります。
つまり両者の目的は同じ。SNSでシェアされたときに「どう見せたいか」をコントロールするための仕組みです。
OGPとTwitterカードの設定でよくある失敗と原因
OGPやTwitterカードを設定しても、意図通りに表示されないことがあります。よくある失敗例をまとめました。
画像が表示されない
指定画像のサイズが小さい、またはURLが間違っている
タイトルが途中で切れる
長すぎるタイトルをそのまま設定している
説明文が空白になる
descriptionタグを入れていない、文字数が不足している
SNSごとに違う見え方になる
OGPだけでなくTwitter専用タグを設定していない
多くの失敗は「タグ不足」か「ルール違反」で発生します。ここを押さえれば、ほぼ解決できます。
OGPとTwitterカードの設定方法
OGPやTwitterカードは、多くのタグがあります。どれを設定すればいいか迷いますよね。
迷ったらhead内に下記タグを設定しておけばオッケーです。
ガチでおすすめのOGPとTwitterカード設定サンプル
OGPは、og:title/og:description/og:type/og:url/og:image/og:site_name/og:localeを設定。
Twitterカードは twitter:cardを1ページ1種類で設定。（推奨：summary_large_image）
<!-- OGP -->
<meta property="og:title" content="ページタイトル ※基本titleタグと同じ内容でオッケー">
<meta property="og:description" content="ページの説明（80〜90文字目安）※基本descriptionタグと同じ内容でオッケー">
<meta property="og:type" content="タイプを記述（例：website）">
<meta property="og:url" content="現状ページのURL">
<meta property="og:image" content="画像のURL">
<meta property="og:site_name" content="サイト名をいれる ※全ページ共通">
<meta property="og:locale" content="ja_JP"> 共通
<!-- Twitter / X -->
<meta name="twitter:card" content="カードの種類を記述（summaryかsummary_large_image、app、player）">
XはTwitter専用タグが無ければOGPを参照するので、twitter:card以外の設定はしなくてもオッケーです。
og:titleについて
SNSプレビュー（カード）の見出しになるタイトルです。ページ固有の分かりやすい見出しを設定しましょう。
文字数は厳密制限はありませんが、1行で読み切れる長さ（titleタグと同じくらいの文字数30文字前後）。
SNS向けに最適化してもいいですが、titleタグと同じ内容でオッケーです。
※SNSやその他チャネルでも使われることを考慮したtitleタグの設計をすることがポイントです。
<meta property="og:title" content="ページタイトル ※基本titleタグと同じ内容でオッケー">
og:descriptionについて
SNSプレビューの要約（本文）になります。結論→要点の順で、1〜2文にまとめます。おすすめの文字数は、80〜90文字。最も伝えたいことは最初の40文字に含めましょう。
SNS向けに最適化してもいいですが、descriptionタグと同じ内容でオッケーです。
<meta property="og:description" content="ページの説明（80〜90文字目安）※基本descriptionタグと同じ内容でオッケー">
og:typeについて
コンテンツの種類（型）をSNSに伝えます。代表的な使い分けは、
website：トップや一覧・固定情報ページ。
article：ニュース・ブログ・事例など記事ページ
<meta property="og:type" content="タイプを記述（例：website）">
og:urlについて
そのページの正規URLを伝え、重複URLの評価やシェアカウントの紐づけを安定させます。
絶対URLを使います（https://…）。wwwの有無、「/」末尾有無、クエリ（UTM等）を正規化して1つに統一します。
可能ならページの<link rel=”canonical”>と整合させます。
<meta property="og:url" content="現状ページのURL">
og:imageについて
SNSプレビューのサムネイル画像です。CTRに最も影響します。
1200×630px（1.91:1） を基準。 ※小さすぎると非表示・縮小の恐れがあります。
JPEG推奨（PNGも可）。XはWebP/GIFも可ですがSVGは不可。ファイルは軽め（〜1MB目安）。絶対URLで指定。
<meta property="og:image" content="画像のURL">
og:site_nameについて
サイト（媒体）名を示します。ブランド認知の補助になります。サイト全体で統一します（全ページ同じでOK）。
<meta property="og:site_name" content="サイト名をいれる ※全ページ共通">
og:localeについて
ページの言語と地域を指定します。日本語は ja_JP が一般的。英語（米国）は en_US。
<meta property="og:locale" content="ja_JP"> 共通
twitter:cardについて
X（Twitter）専用のカードの種類を指定します。
主な種類
- summary（小さめ画像＋テキスト）
- summary_large_image（推奨）（大きめ画像で視認性が高い）
- player（動画・音声の埋め込み。追加タグが必要）
- app（アプリ訴求）
1ページ1種類にします（複数宣言があると最後の宣言が優先されます）。OGPが整っていれば内容はフォールバックされますが、twitter:card は明示しましょう。
<meta name="twitter:card" content="カードの種類を記述（summaryかsummary_large_image、app、player）">
OGP/Twitterカードの具体例サンプル
実際にイメージができるように架空のサイト（株式会社アオゾラテック）で、サンプルを作成しています。
トップページ（/）の場合
（/）
<!-- OGP -->
<meta property="og:title" content="株式会社アオゾラテック｜クラウドで業務を軽くするDXパートナー">
<meta property="og:description" content="株式会社アオゾラテックは、中小企業の業務を軽くするクラウド導入・システム内製化支援のDXパートナーです。無料相談受付中。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://aozoratech.jp/">
<meta property="og:image" content="https://aozoratech.jp/assets/ogp/home-1200x630.jpg">
<meta property="og:site_name" content="株式会社アオゾラテック">
<meta property="og:locale" content="ja_JP">
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
会社概要ページ（/company/）の場合
<!-- OGP -->
<meta property="og:title" content="会社概要｜株式会社アオゾラテック">
<meta property="og:description" content="株式会社アオゾラテックの会社概要ページ。企業情報、使命、沿革、所在地、役員、主要取引先、各種認証について掲載しています。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://aozoratech.jp/company/">
<meta property="og:image" content="https://aozoratech.jp/assets/ogp/company-1200x630.jpg">
<meta property="og:site_name" content="株式会社アオゾラテック">
<meta property="og:locale" content="ja_JP">
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
ブログページ一覧（/blog/）の場合
<!-- OGP -->
<meta property="og:title" content="ナレッジブログ｜株式会社アオゾラテック">
<meta property="og:description" content="株式会社アオゾラテックの公式ナレッジブログ。クラウド活用、業務改善、Web技術、デザイン、セキュリティなど現場で使えるノウハウを発信します。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://aozoratech.jp/blog/">
<meta property="og:image" content="https://aozoratech.jp/assets/ogp/blog-index-1200x630.jpg">
<meta property="og:site_name" content="株式会社アオゾラテック">
<meta property="og:locale" content="ja_JP">
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
ブログ記事ページ（/blog/how-to-set-ogp/）の場合
<!-- OGP -->
<meta property="og:title" content="OGPとTwitterカードの設定完全ガイド">
<meta property="og:description" content="OGPとTwitterカードの仕組みと設定方法を、HTMLテンプレとチェックリストで解説。画像サイズやデバッグ手順もわかります。">
<meta property="og:type" content="article">
<meta property="og:url" content="https://aozoratech.jp/blog/how-to-set-ogp/">
<meta property="og:image" content="https://aozoratech.jp/assets/ogp/blog-ogp-twitter-1200x630.jpg">
<meta property="og:site_name" content="株式会社アオゾラテック">
<meta property="og:locale" content="ja_JP">
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
サービスページ（/services/）の場合
<!-- OGP -->
<meta property="og:title" content="サービス｜株式会社アオゾラテック">
<meta property="og:description" content="クラウド導入支援、業務プロセス可視化、内製化伴走、セキュリティ対策など、Aozora Techのサービス一覧。無料相談を受け付けています。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://aozoratech.jp/services/">
<meta property="og:image" content="https://aozoratech.jp/assets/ogp/services-index-1200x630.jpg">
<meta property="og:site_name" content="株式会社アオゾラテック">
<meta property="og:locale" content="ja_JP">
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
まとめ
いかがでしたでしょうか。
今回は、OGPとTwitterカードの設定に迷ったらおすすめの以下8タグをご紹介しました。
og:title / og:description / og:type / og:url / og:image / og:site_name / og:locale ＋ twitter:card（summary_large_image推奨）
Webサイトを制作及び改修の際に、ぜひご活用ください。
