Open Graphメタタグジェネレーター

Open Graphタグは、ページがFacebook、LinkedIn、Slack、Discord、X（Twitter）でシェアされたときの見た目を決める小さなHTMLの断片です。以下にタイトル、説明文、URL、画像などを入力すると、シェアカードのプレビューが即座に更新されます。生成された<meta>タグをそのままページの<head>にコピー＆ペーストするだけです。すべての処理はブラウザ内で完結し、サーバーには何も送信されません。

このツールとは？

Open Graphは、もともとFacebookが考案したプロトコルで、HTMLの<head>内に置く<meta property="og:...">という小さなタグ群を使って、あらゆるWebページが自分自身を説明できるようにするものです。誰かがあなたのリンクをSNSアプリやチャット、メッセージングツールに貼り付けると、そのアプリはページの内容から推測するのではなく、これらのタグを読み取ってプレビューカード（タイトル・説明文・サムネイル画像）を組み立てます。

Twitter（X）は関連はしているものの別系統のタグ<meta name="twitter:...">を使い、自社プラットフォーム上でのリンクプレビューを個別に制御します。多くのサイトは両方を設定します。Open Graphタグで幅広い互換性を確保し、Twitter Cardタグでは大きな画像カードにするか小さなサマリーカードにするかなど、X上のプレビューを細かく調整します。

これらのタグがないと、共有されたリンクにはプレビューが全く表示されないか、プラットフォームがページの生の内容からタイトルや画像を推測しようとします——見当違いの見出しや無関係な画像が選ばれたり、何も表示されなかったりすることも珍しくありません。og:title、og:description、og:imageを明示的に設定することで、クリックされる前にコンテンツがどう見えるかを完全にコントロールできます。

なぜこれを使うのか？

リアルタイムプレビュー——公開前に、入力しながらシェアカードの見た目をそのまま確認できます。
Open Graphタグ（og:title、og:description、og:image、og:url、og:type、og:site_name）とTwitter Cardタグを一度にまとめて生成。
各プラットフォームが実際に読み取る項目を網羅——タイトル、説明文、正規URL、画像、サイト名、コンテンツタイプ、Twitterカードの種類。
処理はすべてクライアント側で完結——タイトル・説明文・URLがブラウザの外に送信されることはありません。
無料・ログイン不要・回数制限なし——生成結果をコピーしてHTMLに貼り付けるだけ。

使い方

ページのタイトルと短い説明文を入力します（タイトルは約60文字以内、説明文は約155〜160文字以内が目安です）。
ページの正規URLと、プレビュー画像の絶対URLを入力します（画像URLはhttps://example.com/image.jpgのように完全な形式で指定し、相対パスは使えません）。
必要に応じてサイト名を設定し、og:type（website、article、product、profile、video、music）とTwitterカードの種類（summaryまたはsummary_large_image）を選択します。
リアルタイムプレビューカードで、タイトル・説明文・画像の組み合わせが適切かどうか確認します。
「コピー」をクリックし、生成された<meta>タグをページの<head>内、</head>の終了タグの直前に貼り付けます。

例

入力

タイトル：「本当に使える無料開発者ツール10選」
説明文：「JSON、正規表現、UUIDなどのためのブラウザベースツールを厳選——インストール不要。」
URL：https://example.com/blog/dev-tools
画像：https://example.com/images/dev-tools-cover.jpg

出力

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

入力した項目のみが出力に含まれます。サイト名を空欄にすると、出力からog:site_nameが単純に省かれます。

避けるべきよくある間違い

og:imageを設定し忘れる——これがないと、ほとんどのプラットフォームはプレビュー画像を表示しないか、ページ内からランダムに拾った画像を使い、たいてい見栄えが悪く不自然になります。
/images/cover.jpgのような相対パスを使い、https://example.com/images/cover.jpgのような完全なURLにしていない——ソーシャルクローラーは通常、相対パスを解決できません。
画像のアスペクト比が合っていない——正方形や縦長の画像は、プラットフォームによって1.91:1の横長フレームに強制トリミングされると不格好になります。シェア用画像は常に1200×630前後で設計してください。
タイトルや説明文が途中で切れる——ほとんどのプラットフォームで省略記号で切られないよう、og:titleは約60文字以内、og:descriptionは約155〜160文字以内に収めてください。
キャッシュされたプレビューの更新を忘れる——公開済みページのogタグを変更しても、FacebookやLinkedInのキャッシュに古いプレビューが残ることがあります。各プラットフォームのデバッグツールで手動で再クロールを強制する必要があります。

各タグの用途

og:title、og:description、og:imageは、ほとんどすべてのプラットフォームがプレビューを組み立てる際に読み取る3つの中核タグです。og:urlは、プレビューをどの正規リンクに関連付けるべきかをクローラーに伝えます。同じコンテンツが複数のURLでアクセス可能な場合に重要になります。og:site_nameは、Facebookなど一部のプラットフォームで、タイトルの上に（発行元やブランド名など）小さなラベルとして表示されます。

og:typeは、Open Graphのより豊富なオブジェクトモデルに対応するクローラーに対して、そのページがどのような種類のオブジェクトかを伝えます。たとえばarticleに設定すると、対応プラットフォームでog:article:published_timeやog:article:authorが有効になりますが、ほとんどのソーシャルプレビューはこれらの追加項目を無視し、タイトル・説明文・画像という中核の3項目だけを使用します。

twitter:cardはX上でのレイアウトを具体的に制御します。summaryはテキストの横に小さな正方形のサムネイルを表示し、summary_large_imageはテキストの上に幅いっぱいの画像を表示します。意味のあるカバー画像があるコンテンツでは、ほぼ常に後者のほうが良い選択です。

よくある質問

og:imageはどのくらいのサイズにすべきですか？

推奨サイズは1200×630pxです。高解像度ディスプレイでも十分に鮮明で、Facebook・LinkedIn・Xがトリミングに使う約1.91:1のアスペクト比にも合っています。ファイルサイズは5〜8MB以下、形式はJPGかPNGにし、画像URLは相対パスではなく完全な絶対URLにしてください——多くのクローラーは相対パスを正しく解決できません。

リンクを共有してもプレビューが表示されないのはなぜですか？

よくある原因は、og:imageが設定されていない、画像URLが絶対URLではなく相対パスになっている、robots.txtでクローラーがブロックされている、あるいはプラットフォームが古いプレビューのキャッシュを表示している、などです。FacebookとLinkedInはどちらもプレビューを積極的にキャッシュするため、タグを更新した後はFacebookのシェアデバッガーやLinkedInのPost Inspectorを使って再クロールを強制してください。

og:タグとtwitter:タグの違いは何ですか？

og:タグ（og:title、og:description、og:imageなど）はOpen Graph標準で、Facebook、LinkedIn、Slack、Discord、WhatsAppなどほとんどのプラットフォームが読み取ります。twitter:タグはTwitter/X独自の形式です。twitter:titleやtwitter:imageが設定されていない場合、Xは自動的に対応するog:タグにフォールバックしますが、両方を明示的に設定しておくと、summary_large_imageを選んで大きなプレビュー画像にするなど、より細かい制御が可能になります。

og:typeは何を選べばよいですか？

ホームページや一般的なコンテンツを含む、ほとんどのページでは「website」が無難なデフォルトです。ブログ記事やニュース記事には「article」を使うと、公開日時などの記事固有の追加タグが有効になります。ECサイトのページには「product」、個人やユーザーのプロフィールページには「profile」を使います。このタイプは主にどの追加Open Graphプロパティが有効になるかに影響し、基本的なプレビューカードの見た目自体は変わりません。

このツールは入力データをどこかに保存・送信しますか？

いいえ。生成処理はすべてブラウザ内でJavaScriptによりローカルに行われます。入力した内容が送信・記録・保存されることはなく、タブを閉じればすべて消えます。