Open Graphタグ生成ツール — 無料オンライン

Facebook、LinkedInなどでリッチなSNSプレビューを表示するためのOpen Graphメタタグを生成します。

結果は情報提供のみを目的としており、誤りを含む場合があります。重要な情報は必ずご自身で確認してください。本ツールのご利用は自己責任でお願いいたします。

このツールでできること

Open Graphタグ生成ツールは、Facebook、LinkedIn、WhatsApp、Slack、Discord、Telegramなど多くのアプリでリンクを共有したときの見た目を決めるog:メタタグを作成します。タイトル、説明、正規URL、画像URLを入力し、タイプ（website、article、product、profile）を選んで、タグをページの<head>にコピーしてください。

出力されるのは入力した項目だけで、特殊文字はエスケープされます。Open Graphタグがないと、アプリはタイトルを推測してページ内の画像を適当に選ぶか、プレビューをまったく表示しません。最も重要なタグはog:imageです。1200×630ピクセルの鮮明な画像があれば、共有されたリンクがクリックされる可能性は大きく高まります。

こんなときに使えます

  • ブログ記事、商品ページ、ランディングページをSNSで共有できるよう準備するとき。
  • リンクのプレビューに間違った画像や古いタイトルが表示されるのを直すとき。
  • JavaScriptでコンテンツを描画するシングルページアプリに共有用プレビューを追加するとき。
  • SlackやDiscordで共有されるドキュメントサイトのリンクカードを設定するとき。

使用例

入力

タイトル：Free JSON Formatter
説明：Format and validate JSON in your browser.
URL：https://4dev.net/json-formatter
画像URL：https://4dev.net/og/json-formatter.png
タイプ：website

出力

<meta property="og:title" content="Free JSON Formatter"/>
<meta property="og:description" content="Format and validate JSON in your browser."/>
<meta property="og:url" content="https://4dev.net/json-formatter"/>
<meta property="og:image" content="https://4dev.net/og/json-formatter.png"/>
<meta property="og:type" content="website"/>

このツールについての質問

タグを更新したのに、古いプレビューが表示されたままです。なぜですか？

各プラットフォームはプレビューをキャッシュしています。FacebookのシェアデバッガーやLinkedInのPost Inspectorを使って、ページを再取得させてください。SlackとWhatsAppは、しばらくすると自動的に更新されます。

Twitterカードのタグも必要ですか？

X（Twitter）はOpen Graphタグにフォールバックしますが、大きな画像のレイアウトで表示するには<meta name="twitter:card" content="summary_large_image"/>を追加してください。

画像のURLは絶対URLでなければいけませんか？

はい。https://から始まる完全なアドレスを使ってください。ほとんどのクローラーは相対パスを解決しません。また、画像はログインなしでアクセスできる公開状態にしておく必要があります。

Open GraphタグはSEOに効果がありますか？

直接的な効果はありません。検索エンジンはタイトル、ディスクリプション、コンテンツを使って順位を決めます。Open GraphタグはSNSで共有されたときのクリック率を高め、訪問者の増加につながります。検索向けのタグはメタタグ生成ツールで設定してください。

このツールは無料ですか？

はい、無料でご利用いただけます。登録・メールアドレス不要。結果はこのページに表示されます。

結果はどこで確認できますか？

このページでツールを使用すると、結果がここに表示されます。メールで受け取る必要はありません。