OGPとTwitter Cardの設定ガイド

この記事の対象読者

X（旧Twitter）やFacebookでサイトをシェアした時の表示を改善したい人
OGPタグの設定方法を知りたい人
Twitter Cardが正しく表示されない問題を解決したい人

OGP とは

OGP（Open Graph Protocol）は、Webページが SNS でシェアされた時に タイトル、説明文、画像 をリッチに表示するための仕組みです。Facebook が策定し、現在は X（旧Twitter）、LINE、Discord など多くのプラットフォームが対応しています。

OGP を設定しないと、SNS でシェアした際にタイトルや画像が正しく表示されず、クリック率が大幅に低下します。

OGP 設定	シェア時の表示	クリック率
未設定	URLのみ、または不適切な画像	低い
設定済み	タイトル・説明・画像がリッチ表示	高い

基本的な OGP タグ

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

HTML - head内

<!-- OGP 基本タグ -->
<meta property="og:type" content="article" />
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の説明文（120文字以内推奨）" />
<meta property="og:url" content="https://example.com/article/slug/" />
<meta property="og:image" content="https://example.com/images/ogp.png" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />

各タグの役割

タグ	必須	説明
`og:type`	必須	ページの種類（`website`: トップ、`article`: 記事）
`og:title`	必須	ページのタイトル
`og:description`	推奨	ページの説明（120文字以内）
`og:url`	必須	ページの正規URL
`og:image`	推奨	シェア時に表示される画像のURL
`og:site_name`	推奨	サイト名
`og:locale`	任意	言語と地域（日本語: `ja_JP`）

Twitter Card の設定

X（旧Twitter）でのシェア表示には、OGP に加えて Twitter Card 専用のメタタグ が必要です。

HTML - head内

<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@your_account" />
<meta name="twitter:title" content="記事のタイトル" />
<meta name="twitter:description" content="記事の説明文" />
<meta name="twitter:image" content="https://example.com/images/ogp.png" />

Twitter Card の種類

種類	値	表示
Summary	`summary`	小さな画像 + タイトル + 説明文
Summary Large Image	`summary_large_image`	大きな画像 + タイトル + 説明文

Django での実装例

Django のテンプレート継承を活用すると、ベーステンプレートにデフォルトの OGP を設定し、各ページで上書きできます。

ベーステンプレート

templates/base.html

<head>
    <!-- OGP -->
    <meta property="og:type" content="{% block og_type %}website{% endblock %}">
    <meta property="og:title" content="{% block og_title %}{{ SITE_NAME }}{% endblock %}">
    <meta property="og:description" content="{% block og_description %}サイトの説明{% endblock %}">
    <meta property="og:url" content="https://{{ request.get_host }}{{ request.path }}">
    <meta property="og:site_name" content="{{ SITE_NAME }}">
    <meta property="og:locale" content="ja_JP">
    {% block og_image %}
    <meta property="og:image" content="https://{{ request.get_host }}{% static 'image/og-default.png' %}">
    {% endblock %}

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@your_account">
</head>

記事詳細テンプレート

templates/blog/article_detail.html

{% block og_type %}article{% endblock %}
{% block og_title %}{{ article.title }}{% endblock %}
{% block og_description %}{{ article.excerpt }}{% endblock %}
{% block og_image %}
{% if article.thumbnail %}
<meta property="og:image" content="https://{{ request.get_host }}{{ article.thumbnail.url }}">
{% endif %}
{% endblock %}

ポイント

{% block %} タグを使うことで、トップページではサイト全体の情報を、記事ページでは記事固有の情報を OGP に設定できます。

OGP 画像の最適なサイズ

プラットフォーム	推奨サイズ	アスペクト比
X（Twitter Card summary）	240 x 240 px 以上	1:1
X（summary_large_image）	1200 x 628 px	1.91:1
Facebook	1200 x 630 px	1.91:1
LINE	1200 x 628 px	1.91:1

注意

画像は 絶対URL（https:// から始まる完全なURL）で指定する
画像サイズは 5MB 以下 にする
JPEG、PNG、GIF、WebP 形式に対応

表示の確認とデバッグ

OGP が正しく設定されているかを確認するツールを活用しましょう。

確認ツール一覧

ツール	用途	URL
Twitter Card Validator	X でのカード表示を確認	cards-dev.twitter.com
Facebook シェアデバッガー	Facebook での表示を確認・キャッシュクリア	developers.facebook.com
ラッコツールズ OGP確認	各 SNS での OGP 表示を一括確認	rakko.tools

curl でメタタグを確認

ターミナル

# OGP タグを確認
curl -s https://example.com/ | grep -i "og:"

# Twitter Card タグを確認
curl -s https://example.com/ | grep -i "twitter:"

よくある間違いと対処法

問題	原因	対処法
画像が表示されない	相対URLで指定している	`https://` からの絶対URLに変更
古い情報が表示される	SNS側のキャッシュ	各デバッガーツールでキャッシュをクリア
タイトルが途切れる	文字数が多すぎる	og:title は 40文字以内を推奨
説明文が表示されない	og:description が未設定	120文字以内で設定
Twitter Card が表示されない	twitter:card が未設定	`summary` または `summary_large_image` を指定

SNS キャッシュについて

OGP を修正しても、SNS 側のキャッシュにより古い情報が表示されることがあります。Facebook シェアデバッガーで「スクレイピングし直す」を実行すると即座に更新されます。X は時間経過で自動的に更新されます。