OGPプレビューアー

OGP PREVIEWER🔍

ページのURLを入力すると、X（旧Twitter）・Facebook・LINE・Slack・Discord・はてなブックマークでシェアされたときの見え方をまとめて確認できる無料ツールです。設定されているOGPタグの一覧と、画像サイズ・文字数・記述もれの診断も同時に表示します。
公開前のページやローカル環境のページは、HTMLソースを貼り付けて確認できます。値を書き換えれば、そのまま貼れるOGPタグも書き出せます。

1. 読み取り方法を選ぶ

※ ログインが必要なページ、Basic認証やIP制限のかかったページ、公開前のページは取得できません。その場合は「HTMLソースを貼り付け」をお使いください。

ページを読み取っています…

2. SNSごとの見え方

各SNSのカードを再現した表示です。実際の表示は各サービスの仕様変更で変わることがあります。

3. 診断結果

4. 読み取ったタグ一覧

タグ	内容

5. 値を編集してタグを書き出す

値を書き換えると、上のプレビューと下のコードがその場で更新されます。修正した内容をそのままサイトに貼り付けられます。

og:title（ページのタイトル） og:description（ページの説明） og:image（画像の絶対URL） og:url（ページの正規URL） og:site_name（サイト名） og:type（ページの種類） og:locale（言語） twitter:card（Xのカード形式） twitter:site（Xのアカウント）

貼り付け用のOGPタグ（<head> 〜 </head> の中に記述）

コピーしました

このツールの特長 6つのSNSの見え方を1画面で確認X（旧Twitter）・Facebook・LINE・Slack・Discord・はてなブックマークのカードを同時に表示します。サービスごとに切り取られる位置や表示される文字数が違うため、並べて見ると「タイトルが途中で切れる」「画像の主役が隠れる」といった問題にすぐ気づけます。 公開前のページもHTMLの貼り付けで確認できるSNS各社の公式デバッガーは公開済みのURLしか読み込めません。本ツールはHTMLソースの貼り付けにも対応しているため、テスト環境やBasic認証下のページ、これから公開する下書きの状態でも見え方を確かめられます。 画像サイズ・文字数・記述もれを自動で診断og:image が推奨サイズ（1200×630px）を満たしているか、相対パスのままになっていないか、タイトルが長すぎないかを判定して、直すべき点を日本語で表示します。 直した内容をそのままタグとして書き出せる読み取った値を画面上で編集すると、プレビューが即座に更新され、貼り付け用のOGPタグが生成されます。修正案を作ってから実装に進めます。 OGPとは

OGP（Open Graph Protocol）は、ページがSNSでシェアされたときに表示されるタイトル・説明文・画像を、サイト側から指定するための仕組みです。<head> の中に <meta property="og:title" content="…"> のような形式で記述します。指定がない場合、SNS側はページの <title> や本文中の画像を推測して使うため、意図しない画像が表示されたり、タイトルだけの味気ないリンクになったりします。

シェアされたリンクは、タイムライン上で写真や広告と並びます。カードの見た目は、クリックされるかどうかに直結する要素です。特に画像は、多くのSNSで最も面積を取るため、社名やページタイトルが読み取れる画像を用意しておくと効果的です。

主なOGPタグと推奨値

タグ	役割と推奨値
og:title	カードに表示されるタイトル。全角30〜40字程度。長いとSNS側で末尾が省略されます。
og:description	タイトルの下に出る説明文。全角50〜80字程度。Xでは表示されないこともあります。
og:image	カードの画像。絶対URL（https://から始まる）で指定します。推奨は1200×630px（比率1.91:1）。600px未満だと小さいカードになる場合があります。
og:url	そのページの正規URL。パラメータ付きでシェアされても評価を1つにまとめるために指定します。
og:type	ページの種類。トップページや一般ページは website、記事は article。
og:site_name	サイト全体の名前。SlackやDiscordではカード上部に表示されます。
og:locale	言語と地域。日本語のサイトは ja_JP。
twitter:card	Xでのカード形式。大きい画像で見せるなら summary_large_image。
twitter:site	サイトを運営するXアカウント（@つき）。カード下部に表示されることがあります。

使い方

確認したいページのURLを入力して「プレビューする」を押すと、当社のサーバーがそのページのHTMLを読み取り、メタタグだけを取り出してカードを再現します。ページの内容を保存することはありません。公開前のページを確認したい場合は「HTMLソースを貼り付け」に切り替え、ブラウザでソースを表示（Windowsは Ctrl+U）してすべてコピーし、貼り付けてください。

修正が必要な箇所が見つかったら、「値を編集してタグを書き出す」で内容を書き換えます。プレビューが即座に切り替わるので、切れ方や見え方を確かめながら文言を調整でき、決まった内容は下のコードをコピーしてサイトの <head> 内に貼り付けられます。WordPressをお使いの場合は、SEOプラグイン（All in One SEO、Yoast SEOなど）の設定画面から同じ値を入力する形が安全です。

※ 本ツールは無料でご利用いただけます。取得したページの著作権は各サイトに帰属します。診断結果の利用により生じたいかなる損害についても、当社は責任を負いかねます。

よくある質問

タグを修正したのに、SNSでの表示が変わりません。

各SNSは一度読み取ったOGP情報をキャッシュしています。Facebookは「シェアデバッガー」、Xは「Card Validator」で対象URLを再読み込みすると、最新の内容が反映されます。LINEやSlackはキャッシュの手動削除ができないため、URLの末尾に ?v=2 のようなパラメータを付けて共有すると、新しい内容で表示されます。

画像が表示されません。

よくある原因は3つです。(1) og:image を相対パス（/img/ogp.jpg）で書いている。絶対URL（https://example.com/img/ogp.jpg）に直してください。(2) 画像がログインの必要な場所や、外部からの参照を拒否する設定の場所にある。(3) 画像サイズが極端に小さい、または5MBを超えている。本ツールでは、画像が読み込めない場合もその旨を表示します。

URLを入力しても「取得できません」と表示されます。

Basic認証やIP制限がかかっているページ、ログイン後にしか見られないページ、外部からの自動取得を拒否しているサイトでは読み取れません。また、内容をJavaScriptで描画しているサイトでは、メタタグが空のまま返ることがあります。この場合は「HTMLソースを貼り付け」に切り替え、ブラウザで表示したソースを貼り付けてご確認ください。

OGP画像は何を入れればよいですか。

1200×630pxで、ページのタイトルとサイト名（またはロゴ）が入った画像が基本です。SNSのタイムラインでは実際にはかなり小さく表示されるため、文字は大きく、要素は詰め込みすぎないことが読みやすさにつながります。またサービスによって上下や左右が切り取られるため、重要な文字やロゴは中央寄りに配置してください。

入力したURLやHTMLは保存されますか。

HTMLソースの貼り付けはブラウザ内だけで処理し、送信していません。URLでの取得は、当社サーバーが対象ページを読みに行く必要があるため通信が発生しますが、取得した内容は一時的な処理（同じURLの連続確認を軽くするための短時間キャッシュ）にのみ使用し、保存や第三者提供は行いません。

▶ このツールの使い方（診断結果の読み方・キャッシュで表示が変わらないときの対処）：OGPプレビューアーの使い方

▶ ほかのツールを見る：提供ツール一覧

Web制作・ITのご相談はこちら

OGP PREVIEWER🔍

OGPプレビューアー

LET’S CONTACT

お問い合わせ