Open Graph Tag Generator Online

About this tool

Open Graph tags are a small block of extra `` tags in a page's `` that tell Facebook, LinkedIn, Discord, Slack and most other platforms how to render a link preview when someone shares the URL — which title, description and image to show instead of a bare link. Without them, most platforms fall back to guessing from the page's own `` and first image, which often looks wrong or incomplete.</p><p data-astro-cid-zpu62n3h>This generator builds the `og:title`, `og:description`, `og:url`, `og:image`, `og:type` and optional `og:site_name` tags for you, with a live preview approximating how the card typically renders. Because rendering details (image crop, character limits, caching behavior) vary slightly between platforms, it is still worth testing the final result with the target platform's own debugger or preview tool before publishing widely — everything here runs locally in your browser, nothing is uploaded.</p> <h2>Frequently asked questions</h2> <div class="faq-item"> <h3>What image size should I use for og:image?</h3> <p>1200×630px is the widely recommended size — it displays well as a large card on Facebook, LinkedIn and most link-preview surfaces without cropping awkwardly.</p> </div><div class="faq-item"> <h3>Why is my title/description showing a warning?</h3> <p>The tool flags titles over 60 characters or descriptions over 200 characters, since most platforms truncate longer text in the preview card. It's a non-blocking suggestion, not an error.</p> </div> </article> <nav class="related" aria-label="Related tools"> <h2>Related tools</h2> <div class="tool-grid"> <a class="tool-card" href="/css-gradient-generator/"> <span class="icon">▧</span> <h3>CSS Gradient Generator</h3> <p>Design linear, radial and conic gradients and copy the CSS.</p> </a><a class="tool-card" href="/box-shadow-generator/"> <span class="icon">❏</span> <h3>Box Shadow Generator</h3> <p>Build layered CSS box-shadows with a live preview.</p> </a><a class="tool-card" href="/border-radius-generator/"> <span class="icon">⌒</span> <h3>Border Radius Generator</h3> <p>Craft rounded corners and organic blob shapes, then copy the CSS.</p> </a><a class="tool-card" href="/flexbox-generator/"> <span class="icon">⧉</span> <h3>Flexbox Generator</h3> <p>Play with flex properties and copy the layout CSS.</p> </a><a class="tool-card" href="/css-variables-generator/"> <span class="icon">🎨</span> <h3>CSS Variables Generator</h3> <p>Build a :root CSS custom-properties block from name/value pairs.</p> </a><a class="tool-card" href="/svg-blob-generator/"> <span class="icon">🫧</span> <h3>SVG Blob Generator</h3> <p>Generate organic, randomized blob shapes as reusable SVG paths.</p> </a> </div> </nav> </main> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What image size should I use for og:image?","acceptedAnswer":{"@type":"Answer","text":"1200×630px is the widely recommended size — it displays well as a large card on Facebook, LinkedIn and most link-preview surfaces without cropping awkwardly."}},{"@type":"Question","name":"Why is my title/description showing a warning?","acceptedAnswer":{"@type":"Answer","text":"The tool flags titles over 60 characters or descriptions over 200 characters, since most platforms truncate longer text in the preview card. It's a non-blocking suggestion, not an error."}}]}</script> <footer class="site"> <div class="container"> <span>© alltooldev.com — Everything runs client-side. Your data is never uploaded.</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>

Open Graph Tag Generator 🔒 Runs locally in your browser — nothing is uploaded.

Link preview

Generated meta tags

About this tool