Open Graph tag generator
Build the og: tags that control your link preview on Facebook, LinkedIn, Slack, Discord and messaging apps.
Previews are close approximations. Each platform changes its layout from time to time, and Google may rewrite titles and snippets.
Your tags
Paste inside <head>. Tags without a value are left out.
<!-- fill in the form to generate tags -->The four required properties, and the useful extras
The Open Graph protocol requires og:title, og:type, og:image and og:url. Everything else is optional, but og:description, og:site_name and og:image:alt are worth the extra three lines. Declaring og:image:width and og:image:height lets Facebook render the card on the first share instead of waiting to download the image.
Use property=, not name=, on Open Graph tags; that is what the protocol specifies, although most parsers accept both. X's own tags use name=.
Already published? Test the result with the Open Graph checker.
Questions
What are Open Graph tags?
Open Graph is a protocol created by Facebook that turns a web page into a rich object in a social graph. In practice it is a set of <meta property="og:…"> tags that tell apps what title, image and description to show when your link is shared.
Where do Open Graph tags go?
Inside the <head> of the page, in the HTML your server sends. Link-preview crawlers do not run JavaScript, so tags added by client-side code are often missed.
What is the best og:image size?
1200 × 630 pixels (about 1.91:1) is the size Meta recommends for link shares, and it also crops well on LinkedIn, Slack and X's large card. Keep the key content inside the centre so a 2:1 or square crop does not lose it.
Should og:title be the same as my <title>?
It can be, and often is. Some sites drop the brand suffix from og:title because og:site_name already shows it, or write a punchier headline for social feeds.