AnyTools
👁

Open Graph プレビューツール

ソーシャルメディア共有カード用の Open Graph メタタグをプレビューおよび生成

メタデータ入力

タイトル
説明
画像
URL

プレビュー

ページタイトルページの説明がここに表示されますexample.com

生成されたメタタグ

❓Open Graph プレビューツールとは

Open Graph プレビューツールは、ウェブページがソーシャルメディアで共有されたときの表示を視覚化およびテストします。Open Graph は Facebook が作成したプロトコルで、ウェブページをソーシャルグラフのリッチオブジェクトに変換します。meta タグ（og:title、og:description、og:image、og:url）を通じてシェアカードの外観を制御します。主な機能：リアルタイムシェアカードプレビュー（Facebook、Twitter、LinkedIn など）、完全な OG タグ生成、画像サイズ検証、タグ構文チェック、マルチプラットフォームプレビュー。なぜ重要：適切な OG タグはクリック率を向上、ブランドプレゼンテーションを改善、ソーシャルメディアエンゲージメントを増加。不正確なタグは壊れた画像、間違ったタイトル、または欠けた説明につながります。必須タグ：og:title（タイトル）、og:type（タイプ - website/article）、og:image（画像 URL - HTTPS、1200x630px）、og:url（正規 URL）。オプションタグ：og:description、og:site_name、og:locale、画像メタデータ。プラットフォーム固有タグ：Twitter Cards（twitter:card、twitter:title）、Facebook 固有（fb:app_id）。このツールは OG タグの作成、プラットフォーム間プレビュー、最適化の推奨を支援します。

✨機能

🔍

リアルタイムプレビュー

ソーシャルメディアでのページ表示を即座にプレビュー
📝

完全なOGタグ

必要なすべてのOpen Graphメタタグを生成
🌐

複数プラットフォーム

Facebook、Twitter、LinkedInを同時にプレビュー
📋

タグをコピー

生成されたメタタグをワンクリックでコピー

📋使用ガイド

1️⃣
メタデータ入力
コンテンツのタイトル、説明、画像URL、ページURLを入力
2️⃣
オプション設定
Open Graph タイプ、サイト名、Twitter カードタイプ、ソーシャルメディアハンドルを設定
3️⃣
表示プレビュー
異なるソーシャルメディアプラットフォームでのコンテンツ表示を確認
4️⃣
タグ生成とコピー
メタタグコードを生成し、ウェブサイトの <head> セクションにコピー

📚技術紹介

🏗️Open Graph プロトコル

Open Graph は HTML <head> 内の og: プレフィックス付きメタタグを使用してページメタデータを定義します。コアプロパティには og:title（ページタイトル）、og:type（article、website、video などのコンテンツタイプ）、og:image（プレビュー画像URL）、og:url（正規URL）、og:description（コンテンツ要約）が含まれます。オプションのプロパティには og:site_name、og:locale、article:published_time、video:duration があります。これらのタグは、URL が共有されるときにソーシャルメディアプラットフォームによって解析され、リッチプレビューカードを作成します。

🐦Twitter Cards

Twitter Cards は twitter: プレフィックス付きタグで Open Graph を拡張し、Twitter 固有の機能を提供します。4 つのカードタイプが利用可能：summary（デフォルト、正方形画像）、summary_large_image（大きな長方形画像）、app（モバイルアプリプロモーション）、player（ビデオ/オーディオプレーヤー）。twitter:card はタイプを指定し、twitter:site と twitter:creator は Twitter @ハンドルを参照します。Twitter 固有のタグがない場合、Twitter は Open Graph タグにフォールバックします。

📐画像要件

異なるプラットフォームには特定の画像要件があります：Facebook は 1200x630px（1.91:1 比率）を推奨、最小 200x200px、最大 8MB；Twitter summary_large_image は 2:1 比率が必要（1200x600px 推奨）、summary カード 1:1 比率（最小 144x144px）；LinkedIn は 1200x627px（1.91:1）をサポート；WeChat は 300x300px から 1068x455px が必要。画像は JPG、PNG、または WEBP 形式である必要があります。複数の og:image タグを使用してフォールバックを提供します。

🔍テストとデバッグ

プラットフォーム固有のデバッグツールで Open Graph 実装を検証：Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) は Facebook がページをどのように見ているかを表示し、キャッシュをクリア；Twitter Card Validator (https://cards-dev.twitter.com/validator) は Twitter カードをプレビュー；LinkedIn Post Inspector (https://www.linkedin.com/post-inspector/) は LinkedIn 共有をテスト。これらのツールは欠落しているタグ、画像読み込みの問題を特定し、ベストプラクティスの警告を提供します。
❓

よくある質問

❓

Open Graphタグとは何ですか？

Open Graphタグは、ソーシャルメディアプラットフォームで共有されるときにURLの表示方法を制御するメタタグです。リンクプレビューのタイトル、説明、画像、その他のプロパティを定義します。
💬

どのプラットフォームがOpen Graphを使用していますか？

Facebook、LinkedIn、Pinterestなど多くのプラットフォームがOpen Graphを使用しています。Twitterは類似のTwitter Cardタグを使用します。両方は同じページに共存できます。
🔍

推奨される画像サイズは？

推奨：Facebook/LinkedInは1200x630px。最小：600x315px。PNGまたはJPG形式を使用。ファイルサイズは8MB未満に保つ。
💡

Open Graphタグをデバッグするには？

Facebook共有デバッガー、Twitterカードバリデーター、またはLinkedIn投稿インスペクターを使用します。これらのツールはタグの表示方法を示し、エラーを特定します。
📚

各プラットフォームに異なるタグが必要ですか？

Open Graphタグはほとんどのプラットフォームで機能します。Twitter固有の機能にはTwitterカードタグ（twitter:*）を追加します。すべてのプラットフォームのフォールバックとしてog:*タグを使用します。

💡使用方法

1️⃣

ページURLを入力

ページURLを入力またはOpen Graphタグを貼り付け。ツールがメタタグを取得し分析。プラットフォーム間でプレビューを表示。
2️⃣

OGタグを編集

Open Graphプロパティを変更：タイトル、説明、画像、タイプ。ツールがリアルタイムでプレビューを更新。各プラットフォームに最適化。
3️⃣

プラットフォームプレビュー

Facebook、Twitter、LinkedInでのコンテンツ表示を確認。画像サイズ、テキスト長、フォーマットをチェック。最適な表示を確保。
4️⃣

メタタグを生成

ツールが完全なHTMLメタタグコードを生成。ページの<head>セクションにコピー。必要なすべてのOGプロパティを含める。
5️⃣

検証とテスト

プラットフォームバリデーターを使用してタグをテスト。Facebook Debugger、Twitter Validator、LinkedIn Inspector。警告やエラーを修正。

🔗Related Documents

📖Open Graphプロトコル-Open Graphプロトコル公式ドキュメント
🐦Twitter Cardタグ-Twitter Cardメタタグガイド
📘Facebook共有-Facebook共有のベストプラクティス
🔍LinkedIn Post Inspector-LinkedIn投稿プレビューとデバッグツール
📊SEOメタタグガイド-SEOとソーシャルメタタグの完全ガイド

📝更新ログ

📌v1.11.251102
v1.0.251026Open Graph プレビューツールを作成；マルチプラットフォームプレビュー（Facebook、Twitter、LinkedIn）をサポート；リアルタイムメタタグ生成；画像検証とサイズチェック；完全な Open Graph および Twitter Card タグ生成；ワンクリックコピーと検証機能(2025年10月26日)

📦推奨コンポーネント

User Comments

0 / 2000
Loading...