Skip to content

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

Open Graph、Twitter Card、SEO メタタグをまとめて生成。Google・Facebook・X のライブプレビュー付き。100% 無料・ブラウザ内処理・登録不要で、コードをそのままコピー＆ペーストできます。

トラッキングなし ブラウザで動作 無料
すべてブラウザ内で動作します。あなたのコンテンツと画像 URL がこのページの外に出ることはありません。アップロードも登録もありません。
基本 SEO
Open Graph（Facebook、LinkedIn…）
X（Twitter）Card
詳細設定・アイコン
チェック
    生成された <head> タグ 
     
      
     既存の <head> からインポート（ローカルで解析、アップロードなし） 
       
     
      
     デプロイ後に検証: Facebook LinkedIn Google Rich Results 
     
     
      
      
       タグ出力とプラットフォーム仕様は、Open Graph プロトコル（ogp.me）、Google Search Central、および現行の Facebook・X・LinkedIn・Discord のシェアに関するドキュメントに照らして検証済みです。 — Go Tools Team · Jul 15, 2026  
          
     
    メタタグと Open Graph とは？
     
     
    メタタグは、ページの <head> 内にある HTML の断片で、ブラウザ・検索エンジン・ソーシャルプラットフォームに対してページを説明します。代表的な SEO タグは <title>、meta description、canonical リンクです。Open Graph タグ（og:title、og:type、og:image、og:url など）は、もともと Facebook 由来のプロトコルで、リンクがシェアされたときに表示されるタイトル・ディスクリプション・画像を制御します。そして LinkedIn・Slack・Discord・WhatsApp・Pinterest・Telegram を含む、ほぼすべてのプラットフォームがこれを読み込みます。
    Twitter/X は独自の twitter:card タグを使いますが、それらが無い場合は Open Graph タグにフォールバックします。そのため、良質な OG タグに単一の twitter:card 値を加えるだけで、あらゆるネットワークをカバーできます。このジェネレーターはこれらのタグをすべて書き出し、任意で JSON-LD 構造化データを追加し、結果をライブでプレビューします。もう手作業で書いたり、シェアの見え方を推測したりする必要はありません。
     
      
      
     
    プラットフォーム別のソーシャル画像・タグ仕様
     
     
     
    Open Graph（Facebook・LinkedIn）
     
    どちらも og:title、og:description、og:image、og:url を読み込みます。推奨画像は 1200×630（1.91:1）。Facebook は約 30 日、LinkedIn は約 7 日キャッシュするため、デプロイ後は各デバッガーで再スクレイプしましょう。
     
     
    X（Twitter）Card
     
    twitter:card は必須です（summary_large_image または summary）。残りは X が og:* にフォールバックします。単一の 1200×630 画像が OG と X の両方に使えます。300×157 未満の画像は大きなカードから小さなカードに格下げされます。
     
     
    Slack・Discord
     
    Slack は Twitter Card を読み、次に Open Graph を読み込み、twitter:label/data で 2 つの追加フィールドを表示できます。Discord は Open Graph を読み込み、埋め込みのアクセントバーに theme-color を独自に使用します。
     
     
    WhatsApp・Telegram
     
    WhatsApp は og:title と og:image を必要とし、メタデータは HTML の先頭付近にある必要があります。Telegram は Open Graph を読み込み、JPEG または PNG 画像からのみ確実にレンダリングします。
     
     
    Pinterest リッチピン
     
    Pinterest は Open Graph または Schema.org を読み込みます。記事リッチピンには og:type=article に加えて article:published_time と article:author が必要で、article タイプを選ぶとここですべて生成されます。
     
     
    Google 検索スニペット
     
    デスクトップとモバイルの SERP ライブプレビューが、タイトルとディスクリプションを文字数ではなくピクセル単位で計測するため、Google よりも先に切り詰めのリスクを確認できます。
     
     
     
          
     
    メタタグの例
     
     
     
    ウェブサイトのトップページ
     
     
    Title: Acme — Ship faster
Description: The all-in-one platform for modern teams.
URL: https://acme.com
Image: https://acme.com/og/home.png (1200×630)
     
    <title>Acme — Ship faster</title>
<meta name="description" content="The all-in-one platform for modern teams.">
<link rel="canonical" href="https://acme.com">

<meta property="og:title" content="Acme — Ship faster">
<meta property="og:type" content="website">
<meta property="og:image" content="https://acme.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://acme.com">

<meta name="twitter:card" content="summary_large_image">
     
     
    トップページに必要なのは、必須の Open Graph タグ 4 つに加えて、タイトル・ディスクリプション・canonical だけです。画像が 1200×630 なので width と height は自動で補われ、最初の Facebook シェアが空欄にならず即座にレンダリングされます。
     
     
    ブログ記事（article:* ＋ JSON-LD 付き）
     
     
    og:type: article
Title: The Complete Guide to Open Graph Tags
Author: Ada Lovelace
Published: 2026-07-15
     
    <meta property="og:title" content="The Complete Guide to Open Graph Tags">
<meta property="og:type" content="article">
<meta property="og:image" content="https://blog.example.com/og/guide.png">
<meta property="og:url" content="https://blog.example.com/open-graph-guide">
<meta property="article:published_time" content="2026-07-15T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">

<meta name="twitter:card" content="summary_large_image">

<script type="application/ld+json">{ "@type": "Article", "headline": "The Complete Guide to Open Graph Tags", "datePublished": "2026-07-15T00:00:00Z" }</script>
     
     
    article タイプを選ぶと article:published_time と article:author のプロパティが有効になり、対応する Article JSON-LD も生成されます。これにより検索エンジンや Pinterest のリッチピンが構造化データを自動的に受け取れます。
     
     
    Twitter/X が Open Graph を継承
     
     
    twitter:card: summary_large_image
Inherit title/description/image from OG: on
     
    <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@acme">
     
     
    対応する twitter:* タグが無い場合、X は Open Graph タグを読み込みます。そのため必要なのは twitter:card だけです。このジェネレーターは空の twitter:image を出力しません。空にするとこのフォールバックが壊れてしまうためです。
     
     
     
          
     
    サイトに Open Graph タグを追加する方法
     
       
    1.  1 
       
      タイトル・ディスクリプション・URL を入力
       
      ページタイトル、meta description、canonical URL を入力します。ピクセルメーターが Google の検索スニペットに収まるかどうかを示します。
       
       
    2.  2 
       
      og:image を追加してタイプを選択
       
      1200×630 の画像 URL を貼り付け、website・article・product・profile から選びます。対応する Open Graph フィールドと JSON-LD が自動で表示されます。
       
       
    3.  3 
       
      ライブプレビューを確認
       
      Google・Facebook・X・LinkedIn・Slack・Discord のタブを切り替えて、公開前にリンクの正確な見え方を確認します。
       
       
    4.  4 
       
       にコピー
       
      タグブロック全体（または一部セクション）をコピーして HTML の  内に貼り付けます。デプロイ後は Facebook と LinkedIn のデバッガーで検証しましょう。
       
       
      5.  
     
      
     
    よくある Open Graph の間違い
     
     
     
    相対パスの og:image
     
    /cover.png のようなパスはエディター内では動作しますが、シェア時には空欄になります。クローラーは絶対 URL を必要とするためです。
     
     
     ✗ 誤り 
    <meta property="og:image" content="/cover.png">
     
     
     ✓ 正しい 
    <meta property="og:image" content="https://example.com/cover.png">
     
     
     
     
    og:url の欠落
     
    canonical な og:url が無いと、シェア数が URL のバリエーション間で分散し、プラットフォームが誤ったアドレスを選ぶことがあります。
     
     
     ✗ 誤り 
    <!-- no og:url -->
     
     
     ✓ 正しい 
    <meta property="og:url" content="https://example.com/page">
     
     
     
     
    画像が小さすぎる・比率が違う
     
    Facebook は 200×200 未満の画像を無視し、1.91:1 から大きく外れたものをトリミングします。
     
     
     ✗ 誤り 
    600×600 og:image
     
     
     ✓ 正しい 
    1200×630 og:image (1.91:1)
     
     
     
     
    twitter:card の忘れ
     
    完全な Open Graph タグがあっても、twitter:card が設定されていなければ X はカードをレンダリングしません。
     
     
     ✗ 誤り 
    <!-- OG only, no twitter:card -->
     
     
     ✓ 正しい 
    <meta name="twitter:card" content="summary_large_image">
     
     
     
     
    空の twitter:image がフォールバックを壊す
     
    空の twitter:image は X が og:image にフォールバックするのを妨げます。空のままにせず、タグ自体を省略しましょう。
     
     
     ✗ 誤り 
    <meta name="twitter:image" content="">
     
     
     ✓ 正しい 
    <!-- omit it; X uses og:image -->
     
     
     
     
    charset の記述が遅すぎる
     
    charset 宣言はドキュメントの先頭 1024 バイト以内に現れなければ無視されます。
     
     
     ✗ 誤り 
    <meta charset> after many tags
     
     
     ✓ 正しい 
    <meta charset="utf-8"> first in <head>
     
     
     
     
     
      
     
    主なユースケース
     
     
     
    ランディングページの公開
     
    新しいマーケティングページ用に head ブロック全体を生成し、誰かが X・LinkedIn・Slack でリンクをシェアした瞬間から洗練された見た目にします。
     
     
    ブログ・記事のプレビュー
     
    article:published_time、article:author、Article JSON-LD を追加し、投稿が Pinterest リッチピンやリッチなソーシャルカードの対象になるようにします。
     
     
    壊れたシェアの修正
     
    現在のタグをインポートし、チェックパネルで欠落した og:image や誤った寸法を見つけて修正し、デバッガーのリンクで再スクレイプします。
     
     
    フレームワークの head スニペット
     
    クリーンで正しいタグセットをコピーし、静的サイト・CMS テンプレート・サーバーレンダリングの head パーシャルに組み込みます。
     
     
     
      
     
    ジェネレーターの仕組み
     
     
     
    ブラウザ内のライブプレビュー
     
    各カードは、あなたが入力した値からレンダリングされ、URL を取得することは一切ありません。これによりプレビューは即時かつプライベートに保たれます。ページがデプロイされる前にプレビューできる唯一の誠実な方法です。
     
     
    ピクセル精度の SERP メーター
     
    Google はタイトルとディスクリプションを文字数ではなくピクセル幅で切り詰めます。canvas が同じフォントであなたのテキストを計測するため、スニペットが切れる正確なタイミングでメーターが黄色に変わります。
     
     
    クライアントサイドの画像チェック
     
    og:image の URL はブラウザ内で Image に読み込まれ、実際の幅と高さを読み取り、1200×630 とカードのアスペクト比に照らして確認されます。クロスオリジンの画像でもサイズは報告されるため、アップロードなしにチェックが機能します。
     
     
    完全でモダンなタグセット
     
    基本 SEO、Open Graph、Twitter Card、JSON-LD を 1 つのブロックにまとめ、charset を最初に出力して先頭 1024 バイト以内に収めます。meta keywords のようなレガシータグは既定でオフです。
     
     
     
      
     
    メタタグのベストプラクティス
     
     
     
    絶対 HTTPS URL を使う
     
    og:image と og:url は完全な https://… の URL でなければなりません。相対パスはローカルでは動作しますが、クローラーがライブページを取得すると空欄になります。
     
     
    og:image:width と height を必ず設定
     
    寸法を宣言すると、プラットフォームは画像を非同期に取得している間もすぐにカードをレイアウトできるため、最初のシェアが空欄になりません。
     
     
    canonical と og:url を一致させる
     
    両方を 1 つの canonical URL に向けることで、シェア数や検索シグナルが URL のバリエーション間で分散しません。
     
     
    ピクセル予算を意識して書く
     
    タイトルは 50〜60 文字前後、ディスクリプションは 155 文字前後を目安にしましょう。ただし Google は文字数ではなく幅を計測するため、ピクセルメーターを信頼してください。
     
     
    タグはサーバーサイドでレンダリング
     
    Facebook・LinkedIn・WhatsApp・Telegram・Discord のクローラーは JavaScript を実行しないため、Open Graph タグは静的またはサーバーレンダリングされた HTML に含まれている必要があります。
     
     
     
      
     
    よくある質問
     
     
     メタタグ ジェネレーターとは何ですか？ 
     メタタグ ジェネレーターは、ページの <head> 内に入る HTML タグ、つまり <title>、meta description、canonical リンク、Facebook や LinkedIn 向けの Open Graph タグ、Twitter/X の Card タグを生成するツールです。このツールはそれらを一度にすべて生成し、Google・Facebook・X・LinkedIn・Slack・Discord でリンクがどう表示されるかをライブプレビューし、ワンクリックでコードをコピーできます。すべてブラウザ内で動作します。 
     
     ウェブサイトに Open Graph タグを追加するには？ 
     タイトル、ディスクリプション、canonical URL、og:image の URL を入力し、Open Graph のタイプを選んでから、生成されたタグをコピーして HTML の <head> 内に貼り付けます。Facebook・LinkedIn・WhatsApp・Telegram のクローラーは JavaScript を実行しないため、タグはクライアントサイドのスクリプトで注入するのではなく、サーバーでレンダリングした HTML または静的 HTML に含まれている必要があります。 
     
     Open Graph 画像のサイズはどのくらいが良いですか？ 
     推奨される og:image のサイズは 1200×630 ピクセル（アスペクト比 1.91:1）で、これは X の summary_large_image カードも満たします。Facebook は 200×200 未満の画像を無視し、600×315 未満のものは小さな正方形で表示します。最初のシェアが即座にレンダリングされるよう og:image:width と og:image:height を必ず指定し、robots.txt でブロックされていない公開 URL で HTTPS 経由の画像を配信してください。 
     
     twitter:card タグは必須ですか？ 
     はい。twitter:card は必ず含めるべき唯一の Twitter/X タグです。これが無いと、Open Graph タグがあっても X はカードをレンダリングしません。大きな画像には summary_large_image を、小さな正方形サムネイルには summary を設定します。それ以外（タイトル・ディスクリプション・画像）については X が og:* タグにフォールバックするため、このツールはマークアップをすっきり保つよう既定でそれらを省略します。 
     
     メタタグは SEO に役立ちますか？ 
     <title> と canonical タグは SEO に重要です。meta description は直接のランキング要因ではありませんが、検索スニペットを形づくることでクリック率に影響します。Open Graph と Twitter Card のタグは Google のランキングには影響しませんが、シェアされたときにリンクがどう見えるかを制御し、それがソーシャル流入を左右します。Google は検索結果でタイトルを書き換えることがあるため、明確でユニークなタイトルを書き、重要な語を先頭に置きましょう。 
     
     このツールはコンテンツや画像をアップロードしますか？ 
     いいえ。すべては JavaScript でブラウザ内にローカル生成されます。タイトル・ディスクリプション・画像 URL がページの外に出ることはありません。サーバーも、アップロードも、アカウントもありません。og:image はプレビュー表示と寸法の読み取りのために、あなた自身のブラウザ内でのみ読み込まれます。 
     
     すでに持っているメタタグをインポートできますか？ 
     はい。インポートパネルを開いて既存の <meta> タグを貼り付けると、ツールがブラウザ自身の HTML パーサーでローカルに解析してフォームに反映します。ネットワークリクエストは無く、何もアップロードされません。サーバーからライブ URL を取得するツールに対する、プライバシー優先の代替手段です。 
     
     更新したのに Facebook や LinkedIn のプレビューが古い画像のままなのはなぜですか？ 
     各プラットフォームは Open Graph データをキャッシュします。Facebook は約 30 日、LinkedIn は約 7 日です。デプロイ後は Facebook Sharing Debugger や LinkedIn Post Inspector でページを再スクレイプし、キャッシュされたタイトル・ディスクリプション・画像を更新してください。デバッガーへのリンクは生成コードの下に一覧表示されます。 
     
     
     
     
       
      
     
     
    関連ツール
      すべてのツールを見る →
 
     
      
     
      
      
      
     
     
    cURLコマンドジェネレーター＆ビルダー
     
     
    Web と API
     
    ブラウザでcurlコマンドを作成 — メソッド・ヘッダー・認証・ボディを設定してすぐにコピーできるコマンドを生成。Bearer・POST JSON・ファイルアップロードのプリセットも搭載。無料・プライバシー保護・登録不要。
     
     
       
          
     
      
      
      
     
     
    htpasswd ジェネレーター — bcrypt・Apache MD5（apr1）・Basic認証
     
     
    Web と API
     
    bcrypt・Apache MD5（apr1）・SHA-1 などで htpasswd エントリーを生成。Apache・nginx・Docker 設定をすぐに貼り付けられる形式で出力。100% ブラウザ完結・アップロード不要。
     
     
       
          
     
      
      
      
     
     
    進数変換ツール — 2進数・16進数・10進数・8進数
     
     
    単位変換
     
    無料オンライン進数変換ツール。2進数、8進数、10進数、16進数および任意の基数（2-36）間で数値を瞬時に変換。BigInt対応で桁数制限なし。登録不要・サーバー送信なし、すべての処理がブラウザ内で完結。コピーボタンやコードリテラル出力で開発作業を効率化。
     
     
       
          
     
      
      
      
     
     
    Base64エンコーダー＆デコーダー
     
     
    エンコーディングとフォーマット
     
    Base64のデコード・エンコードが無料でオンラインで行えます。リアルタイム変換、UTF-8・絵文字対応。100%ブラウザ上で動作しデータは外部に送信されません。登録不要。
     
     
       
          
     
      
      
      
     
     
    Base64 画像変換ツール
     
     
    エンコーディングとフォーマット
     
    Base64 文字列やデータURIをブラウザ上で画像に戻します。プレビューし、寸法と MIME を確認して、PNG・JPG・GIF・SVG としてダウンロード。アップロード不要。
     
     
       
          
     
      
      
      
     
     
    Bcrypt ハッシュ生成・検証ツール
     
     
    セキュリティツール
     
    bcrypt パスワードハッシュをオンラインで生成・検証。コスト調整、$2b$/$2a$/$2y$ プレフィックス対応。100% ブラウザ内で処理し、パスワードは一切送信されません。