ESC

Open Graph設定

Open Graphプロパティ
0/60
0/200
記事プロパティ
Twitter Card

ソーシャルプレビュー

Facebookプレビュー
Twitterプレビュー

生成されたメタタグ

設定を構成してOGメタタグを生成してください...
すべての処理はブラウザ内で行われます。データはサーバーに送信されません。

使用例

ウェブサイトホームページ

適切なブランディングとソーシャルメディアの外観でウェブサイトホームページ用のOGタグを生成します。

ブログ記事

著者、公開日、セクション、タグ情報付きの記事固有のOGタグを作成します。

ECサイト商品

商品画像と説明付きのECサイト向けに最適化された商品OGタグを構築します。

機能

ライブソーシャルプレビュー

リンクがFacebookとTwitterでどのように表示されるかリアルタイムで確認

すべてのOGプロパティ

記事固有のタグを含むすべてのOpen Graphプロパティをサポート

Twitter Card統合

Open Graphタグと一緒にマッチするTwitter Cardタグを生成

プライバシー優先

すべての処理はブラウザ内でローカルに行われます

使い方

1

OGプロパティを入力

ページのタイトル、説明、URL、画像を入力します。

2

プレビューとカスタマイズ

ライブプレビューでリンクがソーシャルメディアでどう表示されるか確認します。

3

コピーして実装

生成されたメタタグをコピーしてHTMLページのhead部分に貼り付けます。

よくある質問

Open Graph (OG) タグは、ソーシャルメディアで共有された際のページの表示を制御する、<head>セクション内のHTMLメタタグです。Facebookがこのプロトコルを作成し、現在では主要なすべてのプラットフォーム(LinkedIn、WhatsApp、Slack、Discord、iMessage)が、リンクのプレビューを構築するために og:title, og:description, og:image, および og:url を読み取ります。OGタグがない場合、プラットフォームは推測を行い、ランダムな画像や切り取られたページタイトル、あるいは何も表示されないことがあります。

1200x630 ピクセル(1.91:1の比率)は、Facebook、LinkedIn、Twitterの summary_large_image、およびその他のほとんどのプラットフォームで共通して推奨されるサイズです。ファイルサイズは 8 MB 未満(Facebookの制限)に抑え、高速な読み込みのために 1 MB 未満を目指してください。透明度のあるグラフィックスには PNG を、写真には JPEG を使用します。200x200 ピクセル以下の画像は Facebook で表示されないことがあります。画像が正方形で見栄えが良い場合は、正方形(1200x1200)も有効です。

og:type は、あなたのページがどのような種類のコンテンツであるかをプラットフォームに伝えます。website はデフォルトで、ホームページ、ランディングページ、およびほとんどの静的なページに使用できます。article はブログ投稿やニュース用で、article:author, article:published_time, および article:section といった追加のタグを有効にします。product は電子商取引(e-commerce)の商品用です。メディアコンテンツ用には video.movie や music.song が存在します。正しいタイプを使用することで、一部のプラットフォームでよりリッチなプレビューを有効にできる場合があります。

Twitter は OG タグをフォールバックとして読み取るため、明示的な Twitter Card タグがなくてもリンクのプレビューは表示されます。しかし、Twitter Card には 2 つの重要なメリットがあります。(1) twitter:card タイプ — summary_large_image は、基本的なサマリーカードの小さなサムネイルよりも注目を集める、リンクテキストの上の全幅画像を表示します。(2) twitter:site と twitter:creator — カードの下にあなたの @handle が表示されます。コンテンツマーケティングにおいては、Twitter Card タグを追加する価値は追加の 2 行の HTML で十分です。

Facebook や LinkedIn は OG データを強力にキャッシュします。og:image URL を更新した後は、Facebook の Sharing Debugger (developers.facebook.com/tools/debug) を使用して強制的に再スクレイピングを行ってください。URL を貼り付けて "Scrape Again" をクリックします。LinkedIn には Post Inspector (linkedin.com/post-inspector) があります。Twitter/X は通常、数時間以内に自動的に更新されます。画像 URL を変更する(例:キャッシュを破棄するために ?v=2 を追加する)ことでも、プラットフォームに新しい画像を再取得させることができます。

og:locale は、コンテンツの言語と地域(例:en_US, fr_FR, tr_TR など)を宣言します。オプションですが、多言語サイトには便利です。ユーザーが共有されたリンクをクリックした際に、Facebook が正しい言語バージョンを表示するのに役立ちます。形式はアンダースコアを使用した language_TERRITORY です(ハイフンではありません)。og:locale:alternate で追加の対応可能なロケールをリスト化できます。単一言語のサイトでは省略しても問題ありません。Facebook はデフォルトで en_US を使用します。

Facebook Sharing Debugger (developers.facebook.com/tools/debug) が最も完全なツールです。どのタグがスクレイプされたか、警告事項を表示し、キャッシュの更新を強制できます。LinkedIn Post Inspector (linkedin.com/post-inspector) は LinkedIn のプレビューをテストします。Twitter Card Validator (cards-dev.twitter.com/validator) は Twitter カードを確認します。これらのツールはシミュレーションではなく実際のスクレイプデータを示すため、ブロックされた画像 URL や必須タグの欠如などの問題を特定できます。

いいえ。すべての OG タグ生成とソーシャルプレビューのレンダリングは、ブラウザ上の JavaScript で行われます。あなたのページのタイトル、説明、URL、および画像 URL があなたのマシンから外に出ることはありません。

Open Graphジェネレーターとは?

Open Graphジェネレーターは、Facebook、LinkedIn、Twitterなどのプラットフォームでリンクがどう表示されるかを制御するog:メタタグの作成を支援します。タイトル、説明、画像URL、コンテンツタイプを入力すると、ライブソーシャルプレビュー付きのコピー可能なHTMLメタタグが得られます。

主な機能

タイプ、ロケール、サイト名を含むすべてのOGプロパティに対応。著者、公開日時、セクション、タグなどの記事固有フィールド。カードタイプ選択付きのTwitter Card統合。共有リンクがどう見えるかを公開前に確認できるライブFacebook/Twitterプレビュー。

よくある使用例

ブログ記事には著者と公開日付付きのarticleタイプOGタグが必要です。ECサイトの商品は画像付きのproductタイプタグの恩恵を受けます。ホームページはブランディングを強調したwebsiteタイプタグを使います。ソーシャルメディアで共有されるすべてのページにOGタグが必要です。

ヒント

常に1200x630pxの高品質画像を使いましょう。OGタイトルは60文字以内、説明は200文字以内に。公開後はFacebookのシェアデバッガーでタグをテストしましょう。

プライバシー

すべてブラウザ内で動作します。URL、画像、タグデータはサーバーに送信されません。

セキュリティとプライバシー

あなたのデータの安全を最優先しています

ローカル処理

すべての処理がブラウザ内で完結します

データ送信なし

データはサーバーに送信されません

保存しません

データは保存も共有もされません

SSL暗号化

安全な通信でご利用いただけます

次のステップ

MoreOnlineToolsでもっと見る