Open Graph ジェネレーター
Open GraphとTwitterのメタタグを生成し、ソーシャルカードをプレビューします。
入力したフィールド値はブラウザ内でローカルにメタタグへ変換され、入力した内容がサーバーへアップロードされることはありません。
リンクの各部分を確認しますか？ URLパーサーをお試しください。
Open Graph ジェネレーター について
このOpen Graphジェネレーターは、ソーシャルプラットフォームでリッチなリンクプレビューを表示するために必要なOpen GraphとTwitter Cardのメタタグを作成します。タイトル、説明、正規URL、og:image、タイプ、サイト名、Twitterカードスタイルを入力すると、入力に合わせてライブのソーシャルカードプレビューが更新され、完成したHTMLをコピーできます。すべてのプロパティを手書きせずに正しいソーシャルメタタグを用意したい開発者、マーケター、コンテンツチームに便利です。OGメタタグジェネレーターおよびTwitter Cardジェネレーターとして、一般的なog:imageタグやソーシャルメタタグをカバーするので、Facebook、LinkedIn、Slack、Xで共有されるリンクが洗練されて見えます。すべてはブラウザ内でローカルに動作するため、入力内容はデバイス上で処理され、サーバーへ何もアップロードされません。
機能
- Open Graph（og:title、og:description、og:type、og:url、og:image、og:site_name）タグを生成
- 対応するTwitter Cardタグ（twitter:card、title、description、image）を追加
- 入力に合わせて更新されるライブのソーシャルカードプレビュー
- クリーンでコピーしてすぐ使えるHTMLメタブロックを出力
- タイトル、説明、URL内の特殊文字を適切にエスケープ
- og:typeとtwitter:cardスタイル（summary_large_imageなど）を選択可能
- クリップボードにコピー、またはmeta-tags.htmlとしてタグをダウンロード
- 空のフィールドをスキップして生成マークアップをすっきり保持
Open Graph ジェネレーター の使い方
- 入力フィールドにページのタイトル、説明、URL、画像URLを入力します。
- og:typeとTwitterカードスタイルを設定し、サイト名を追加します。
- ライブのソーシャルカードプレビューで、リンクがどう表示されるかを確認します。
- コピーをクリックしてHTMLを取得するか、ダウンロードでmeta-tags.htmlを保存します。
- 生成されたタグをページの<head>セクションに貼り付けます。
例
入力
title: ローンチ当日
url: https://acme.dev/launch
image: https://acme.dev/og.png
出力
<title>ローンチ当日</title>
<!-- Open Graph -->
<meta property="og:title" content="ローンチ当日" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://acme.dev/launch" />
<meta property="og:image" content="https://acme.dev/og.png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="ローンチ当日" />
<meta name="twitter:image" content="https://acme.dev/og.png" />
空のフィールドは省略され、og:typeはwebsiteがデフォルトになります。
よくあるエラーとトラブルシューティング
- FacebookやLinkedInのプレビューでog:imageが表示されない。 — 画像には相対パスではなく完全な絶対URL（https://...）を使い、画像が公開されてアクセス可能であることを確認してください。
- Twitterで大きなカードの代わりに小さな画像が表示される。 — twitter:cardの値をsummary_large_imageに設定すると、プラットフォームが全幅の画像レイアウトを表示します。
- プレビューでタイトルや説明が途中で切れて見える。 — プラットフォームが切り詰めないよう、タイトルは約60文字、説明は約110〜160文字に保ってください。
- &や<のような特殊文字がマークアップを壊す。 — 生の文字を入力してください。ジェネレーターが出力時に自動的に有効なHTMLエンティティへエスケープします。
- タグを更新してもプラットフォームが古いプレビューデータを表示し続ける。 — プラットフォームのデバッガー（Facebookシェアデバッガーなど）でURLを再スクレイプして、キャッシュされたプレビューをクリアしてください。
よくある質問
- Open Graphジェネレーターとは何ですか？
- Open Graphジェネレーターは、タイトル、説明、URL、画像、タイプ、サイト名から、貼り付けてすぐ使えるOpen GraphとTwitter CardのメタタグのHTMLブロックを生成するツールです。
- Open Graphジェネレーターでメタタグを作成するには？
- ページのタイトル、説明、正規URL、og:image、タイプ、サイト名を入力し、ライブプレビューの更新を確認してから、コピーまたはダウンロードをクリックし、タグをページの<head>に貼り付けます。
- Open GraphタグとTwitter Cardタグの違いは何ですか？
- Open Graph（og:）タグはFacebook、LinkedIn、Slackなど多くのサービスで読み取られ、twitter:タグはX/Twitter専用です。このツールは両方を出力するので、どこでもプレビューが機能します。
- どのog:imageサイズが最適ですか？
- 絶対URLの1200x630ピクセルの画像が、ほとんどのプラットフォームのsummary_large_imageカードで安全な選択肢です。
- リンクを共有しても変更が反映されないのはなぜですか？
- ソーシャルプラットフォームはプレビューをキャッシュするため、メタタグを更新した後はそのプラットフォームのシェアデバッガーにURLを貼り付けて、新しいスクレイプを強制してください。
- Open Graphジェネレーターで入力したデータのプライバシーは守られますか？
- はい。タグはブラウザ内でローカルに作成され、データがデバイスから外部に出ることはなく、入力した内容がサーバーへアップロードされることもありません。
関連ツール
すべての ArrayKit ツール