Open Graphタグジェネレーター 🔒 ブラウザ内で完結 — 何もアップロードされません。

ライブリンクプレビューカード付きでOpen Graphメタタグを生成。

リンクプレビュー

画像なし

生成されたメタタグ

このツールについて

Open Graphタグは、ページの `` にある小さな追加の `` タグ群で、誰かがそのURLを共有したときにFacebook、LinkedIn、Discord、Slackなどほとんどのプラットフォームがリンクプレビューをどう表示するか——単なるリンクの代わりにどのタイトル・説明・画像を表示するか——を伝えます。これらがないと、多くのプラットフォームはページ自身の `` と最初の画像から推測するため、見た目がおかしくなったり不完全になったりしがちです。</p><p data-astro-cid-zpu62n3h>このジェネレーターは `og:title`、`og:description`、`og:url`、`og:image`、`og:type`、任意の `og:site_name` タグを自動生成し、カードが通常どう表示されるかを近似したライブプレビューも提供します。レンダリングの細部（画像のトリミング、文字数制限、キャッシュの挙動）はプラットフォームごとに多少異なるため、広く公開する前に対象プラットフォーム自身のデバッガーやプレビューツールで最終結果を確認する価値はあります——ここでの処理はすべてブラウザ内でローカルに行われ、何もアップロードされません。</p> <h2>よくある質問</h2> <div class="faq-item"> <h3>og:imageにはどのくらいの画像サイズを使うべきですか？</h3> <p>1200×630pxが広く推奨されるサイズです。Facebook、LinkedIn、その他ほとんどのリンクプレビュー画面で不自然な切り取りなく大きなカードとして表示されます。</p> </div><div class="faq-item"> <h3>なぜタイトル/説明に警告が表示されるのですか？</h3> <p>このツールは60文字を超えるタイトルや200文字を超える説明にフラグを立てます。ほとんどのプラットフォームはプレビューカードで長いテキストを切り詰めるためです。これはブロックしない提案であり、エラーではありません。</p> </div> </article> <nav class="related" aria-label="関連ツール"> <h2>関連ツール</h2> <div class="tool-grid"> <a class="tool-card" href="/ja/css-gradient-generator/"> <span class="icon">▧</span> <h3>CSS グラデーション生成</h3> <p>線形・放射・円錐グラデーションを作って CSS をコピー。</p> </a><a class="tool-card" href="/ja/box-shadow-generator/"> <span class="icon">❏</span> <h3>ボックスシャドウ生成</h3> <p>ライブプレビューで多層の CSS box-shadow を作成。</p> </a><a class="tool-card" href="/ja/border-radius-generator/"> <span class="icon">⌒</span> <h3>角丸ジェネレーター</h3> <p>角丸や有機的なブロブ形状を作って CSS をコピー。</p> </a><a class="tool-card" href="/ja/flexbox-generator/"> <span class="icon">⧉</span> <h3>Flexbox ジェネレーター</h3> <p>flex プロパティを試してレイアウト CSS をコピー。</p> </a><a class="tool-card" href="/ja/css-variables-generator/"> <span class="icon">🎨</span> <h3>CSS変数ジェネレーター</h3> <p>名前と値のペアから :root CSSカスタムプロパティブロックを作成。</p> </a><a class="tool-card" href="/ja/svg-blob-generator/"> <span class="icon">🫧</span> <h3>SVGブロブジェネレーター</h3> <p>有機的でランダムなブロブ形状を再利用可能なSVGパスとして生成。</p> </a> </div> </nav> </main> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"og:imageにはどのくらいの画像サイズを使うべきですか？","acceptedAnswer":{"@type":"Answer","text":"1200×630pxが広く推奨されるサイズです。Facebook、LinkedIn、その他ほとんどのリンクプレビュー画面で不自然な切り取りなく大きなカードとして表示されます。"}},{"@type":"Question","name":"なぜタイトル/説明に警告が表示されるのですか？","acceptedAnswer":{"@type":"Answer","text":"このツールは60文字を超えるタイトルや200文字を超える説明にフラグを立てます。ほとんどのプラットフォームはプレビューカードで長いテキストを切り詰めるためです。これはブロックしない提案であり、エラーではありません。"}}]}</script> <footer class="site"> <div class="container"> <span>© alltooldev.com — すべてクライアントサイドで動作します。データがアップロードされることはありません。</span> <span><a href="https://dec0de.dev" rel="noopener">dec0de.dev — 18 formatters & encoders</a></span> </div> </footer> <script type="module">const a=document.getElementById("lang-select");a?.addEventListener("change",()=>{const e=a.value,t=a.dataset.path??"";window.location.href=e==="en"?`/${t}`:`/${e}/${t}`});document.getElementById("theme-toggle")?.addEventListener("click",()=>{const e=document.documentElement,t=e.dataset.theme==="dark"?"light":"dark";e.dataset.theme=t,localStorage.setItem("theme",t)});document.addEventListener("click",async e=>{const t=e.target.closest("[data-copy]");if(!t)return;const n=document.getElementById(t.dataset.copy);if(!n)return;const o="value"in n?n.value:n.textContent??"";try{await navigator.clipboard.writeText(o);const c=t.textContent;t.textContent=t.dataset.copiedLabel||"✓",t.classList.add("copied"),setTimeout(()=>{t.textContent=c,t.classList.remove("copied")},1200)}catch{}});</script> </body> </html> <script type="module" src="/_astro/open-graph-generator.astro_astro_type_script_index_0_lang.Aj92YbMh.js"></script>