Open Graph タグジェネレーターとは？
Open Graphタグジェネレーターは、URLが共有されたときソーシャルアプリが読むメタタグを組み立てます。ToolsMinifyの無料ジェネーターはタイトル、説明、URL、画像、タイプ、サイト名、ロケールからコピー可能なog:* HTML - 任意のTwitter Cardタグ - とライブソーシャルプレビューを生成します。headに貼り付け、Facebook、LinkedIn、Slack、Discord、iMessageが推測サムネではなく意図したカードを表示します。
タイトル、説明、URL、画像から Open Graph と Twitter Card のメタタグを生成。ライブ HTML とソーシャルプレビュー付きの無料 OG タグジェネレーター。
今すぐ試す
無料のOpen Graph タグジェネレーターを開き、以下の手順に従ってください。ダウンロードは不要です。
Open Graph タグジェネレーターを使う理由
- 入力に合わせog:title、og:description、og:url、og:type、og:image、og:site_name、og:localeを生成
- 同じスニペット内の任意Twitter Card（summaryまたはsummary_large_image）
- 引用符とアンパサンドをエスケープするライブHTML
- 公開前に弱いタイトルや画像欠落を見つけるソーシャルプレビュー
- 完全ブラウザ内 - 下書きは端末外に出ません
Open Graph タグジェネレーターの使い方 - ステップバイステップ
- ステップ1: ページタイトル、説明、正規 URL、画像 URL を入力します。
- ステップ2: og:type（website、article、product、profile）を選びます。
- ステップ3: 必要ならサイト名とロケール（例: en_US）を追加します。
- ステップ4: Open Graph のみ必要な場合以外は Twitter Card タグをオンにします。
- ステップ5: HTML をコピーしてページの head 内に貼り付けます。
Open Graph タグジェネレーターはSEOツールにあります。ツールページを開き、メインフィールドにインプットを入力すると、結果が即座に更新されます。コピーボタンを使用して、出力結果をドキュメント、コードエディタ、またはスプレッドシートに貼り付けてください。
一般的な使用例
ブログ記事
og:typeをarticleにし、1200 x 630カバーを追加、テンプレートにタグをコピーし、シェアに書いた見出しを表示。
商品・ランディングページ
productまたはwebsiteタイプ、ヒーロー画像、ベネフィット重視の説明で広告とチャットプレビューをページに一致。
ホームとブランドシェア
og:site_nameとja_JPなどのロケールを追加し、LinkedInとSlackでタイトル下にブランドを表示。
CMSとフレームワークメタデータ
HTMLを一度生成し、編集者がタイトルと画像URLを貼るときNext.js、WordPress、headスニペットに各プロパティをマップ。
例
- ブログ記事のシェアカード: タイトル「ブログ記事用 Open Graph タグ」、type article、1200 x 630 の画像、記事 URL から og:title、og:type、og:image、og:url が生成され、記事テンプレートにそのまま貼れます。
- サイト名付きホームページ: type website、ブランドを og:site_name、ホーム URL を指定すると、Slack や LinkedIn でタイトル下にブランド名が表示されます。
- 商品ページ: type product にタイトル、価格訴求の説明、商品 URL、ヒーロー画像を設定すると、Facebook や iMessage で購入しやすいカードになります。
- 引用符とアンパサンド: Shop "A & B" のようなタイトルは Shop "A & B" にエスケープされ、貼り付け後も HTML が有効です。
プロのヒント
- 絶対https画像URLを使ってください。相対パスはFacebookやSlackクローラーで失敗しがちです。
- 1200 x 630 pxが一般的な横長サイズ。正方形は多くのネットワークでクロップされます。
- タイトルは短く（約60文字）、説明は~200文字未満で、単語の途中で切れないように。
- デプロイ後、Facebook Sharing DebuggerとLinkedIn Post InspectorでライブURLをスクレイプしキャッシュ更新。
- GoogleスニペットにはMeta Description Checkerと併用 - Open Graphはソーシャルカード用でSERP説明ではありません。
よくある質問
Open Graph タグとは？
Open Graph タグは og:title、og:description、og:image、og:url、og:type などの meta 要素で、SNS アプリにリンクプレビューの見え方を指示します。ないと Facebook や LinkedIn、Slack が弱いタイトルや誤った画像を推測することがあります。
必要な Open Graph タグは？
まず og:title、og:type、og:image、og:url。あれば og:description、og:site_name、og:locale を追加。入力したフィールドだけを出力し、og:type はデフォルト website です。
og:image のサイズは？
絶対 https URL を使います。Facebook や LinkedIn では 1200 x 630 px の横長が一般的です。小さいとトリミングや小さなサムネイルになることがあります。
Twitter Card タグも必要？
X (Twitter) は Open Graph を読めますが、twitter:card、twitter:title、twitter:description、twitter:image で明示制御できます。オプションをオンにしてください。画像ありは summary_large_image、なしは summary です。
HTML はどこに貼る？
HTML ドキュメントの head 内（またはフレームワークの metadata API）に貼ります。og:url に設定した公開 URL のページ上に置き、クローラーが読めるようにします。
入力内容は端末の外に出ますか？
いいえ。Open Graph タグジェネレーターはブラウザ内だけで動作し、タイトル、URL、画像リンクはサーバーに送られません。
必要な関連ツール
ToolsMinifyで他のseoツールを探索してください。関連ユーティリティはOpen Graph タグジェネレーターページにリンクされており、サイトを離れることなくワークフローを完了するのに役立ちます。
始める準備はできましたか？
Open Graph タグジェネレーターを無料で利用できます - 正確、高速、モバイル向けに最適化されています。