Open Graph 生成
タイトルと説明を入力し、シェアカードを確認して、メタタグをコピーします。
その他のオプション
いずれかのフィールドを入力すると、ここにタグが表示されます。「生成」ボタンはありません。
使い方
- タイトル、説明、画像、ページ URL を入力します。シェアカードのプレビューと <meta> タグは入力に合わせて更新されます。生成ボタンはありません。
- 「その他のオプション」を開くと、サイト名、ロケール、Twitter の @ユーザー名を追加できます。Open Graph だけが必要な場合は Twitter Card をオフにしてください。
- タグをコピーしてページの <head> に貼り付けます。ダウンロードすると同じブロックを .html ファイルとして保存できます。
例
フィールド
タイトル「完璧なサワードウを焼く方法」· 種類 website · 画像 URL · ページ URL · サイト名「ベーカリーブログ」· ロケール ja_JP · Twitter @bakeryblog
タグ
<meta property="og:title" content="完璧なサワードウを焼く方法"> <meta property="og:type" content="website"> <meta property="og:image" content="https://example.com/og-image.png"> <meta property="og:url" content="https://example.com/blog/sourdough"> <meta property="og:description" content="スターターから、クラストがパリッと気泡のあるクラムまでを解説するステップガイド。"> <meta property="og:site_name" content="ベーカリーブログ"> <meta property="og:locale" content="ja_JP"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@bakeryblog"> <meta name="twitter:title" content="完璧なサワードウを焼く方法"> <meta name="twitter:description" content="スターターから、クラストがパリッと気泡のあるクラムまでを解説するステップガイド。"> <meta name="twitter:image" content="https://example.com/og-image.png">
タグは固定の順序で生成されるため、同じフィールドからは常に同じブロックが得られます。空のフィールドはスキップされ、content="" の空タグは生成されません。
範囲、制限、よくある質問
- URL の取得は行いません。このツールは他サイトの既存タグを読み取れず、デプロイしたページが認識されているかも確認できません。デプロイ後に URL を Facebook Sharing Debugger や X Card Validator に貼り付けて確認してください。
- 空のフィールドはスキップされます。説明を空欄にすると og:description は出力されず、プレースホルダー値も入りません。
- URL のチェックは警告であり、ブロックではありません。相対パスや https:// の欠落でもタグは生成されます。プラットフォームが拒否する場合はあなたの側で修正してください。
- 生成される Twitter カードは summary と summary_large_image のみです。App カードと Player カードには追加の app:id / player: フィールドが必要で、ほとんどのページでは使用されません。
- プレビュー画像は、入力した og:image の URL からソーシャルサイトと同じ方法で読み込まれます。当社のサーバーには送信されず、ホストに到達できない場合はプレースホルダーが表示されます。
- 何もアップロード、保存、ページ URL への書き込みは行いません。再読み込みすると例から始まり、フィールドをクリアすると空の状態から始まります。
関連ツール
タグを設置した後、次に必要になることが多いツールです。