Open Graph tags generator
Fill in the fields below to generate the Open Graph and Twitter Card meta tags to paste into the <head> of your page.
How it works
When a link to your site is shared on Facebook, LinkedIn, Slack, Discord, or X (Twitter), these platforms look for Open Graph meta tags in the page's <head> to build a preview card with a title, description, and image. Without these tags, the social network often displays a bare link or an unengaging generic preview. This tool generates the og:title, og:description, og:url, og:image, and og:type tags, as well as the equivalent twitter:card tags so the card also displays correctly on X.
Where should these tags be placed?
Paste the result directly into the <head> section of your HTML page, before the closing </head> tag. On most frameworks (Nuxt, Next.js, etc.), there's a dedicated component for managing the head that accepts these same meta tags.
What image size should I use for og:image?
The recommended size is generally 1200x630 pixels (1.91:1 ratio), which matches the format expected by Facebook, LinkedIn, and X for large card display. An image that is too small or in the wrong ratio may be cropped unflatteringly by the platform.
Why hasn't my preview changed after editing?
Most social networks cache the Open Graph tags of a URL the first time it is shared. After modifying your tags, use the platform's official debugging tool (for example Facebook's "Sharing Debugger") to force a new scan of the page.
100% local processing in your browser — nothing is sent to a server.