How to use the open graph tag generator
- Enter the title, description and canonical URL of the page you are sharing.
- Add an image address. Use a wide image, ideally 1200 × 630 pixels, hosted on https.
- Check the previews, then copy the generated tags into the head of your page.
- Test the live URL in Facebook's Sharing Debugger or LinkedIn's Post Inspector, which also clear their cached previews.
What Open Graph tags do
Open Graph is a protocol, created by Facebook, that lets a page say how it should appear when its link is shared: the title, description, image and type. LinkedIn, WhatsApp, Slack, Discord, iMessage and many others read the same tags. Without them, platforms guess from the page, and often show a bare link or the wrong image.
The tags that matter
og:title: the headline of the card.og:description: one or two sentences below it.og:image: the picture. The most important tag for click-through.og:url: the canonical address, so shares of different URL versions count together.og:type: usuallywebsiteorarticle.twitter:card: tells X to show a large image card. X falls back to Open Graph tags for the rest.
Image guidelines
Use an image with a 1.91:1 ratio, 1200 × 630 pixels, as the safe default across platforms. Keep text and faces away from the edges because some apps crop. Use JPG or PNG; SVG images are not supported by the major social platforms. Keep the file reasonably small, and serve it over https from a stable address.
Do social tags help SEO?
Open Graph tags are not a Google ranking factor. Their value is on the social side: a good card earns more clicks and shares, which brings traffic. Google may use some of these signals, such as the image, for display in some surfaces, but do not rely on it. Pair this tool with the SERP snippet preview to polish how the page looks in search.
Why your preview may look stale
Platforms cache link previews. After you change tags, run the URL through the Facebook Sharing Debugger or the LinkedIn Post Inspector to refresh the cache. Pages behind a login or blocked by robots.txt cannot be previewed at all.
How platforms use these tags differently
Facebook, LinkedIn, WhatsApp, Slack and Discord all read Open Graph tags, but each renders the card a little differently. Some crop images to a different ratio, some show the description longer or shorter, and some ignore the site name. X reads its own twitter tags first and falls back to Open Graph. That is why the live preview here shows two layouts: it helps you check that the title and image still work when they are cropped or shortened.
Always preview with the platform's own debugger before a big launch, since each caches results and may show an old version for days.
Designing a good share image
A share image is often the first thing a potential visitor sees. Use a clear focal point, high contrast and large text that remains readable when the image is displayed at about 500 pixels wide. Leave a margin around the edges, because some apps crop. If the image includes text, keep the same wording as your page title so the card feels consistent.
Use a distinct image for important pages where you can, such as articles and tools, and a branded default for everything else. A unique image per page usually earns more clicks than the same logo repeated everywhere.
Fixing a card that will not update
If you changed the tags but the old preview still shows, the platform has cached the previous version. Open the Facebook Sharing Debugger or the LinkedIn Post Inspector, paste the URL and choose to scrape it again. For X, post the link in a draft to see the current card. Messaging apps such as WhatsApp may keep the old preview longer and sometimes only refresh after a day or so.
If nothing changes, check that the page is publicly reachable, is not blocked by robots.txt and that the image address works in a private browser window.
Open Graph checklist before you publish
- The og:title is under about 60 characters and matches the page topic.
- The description is one or two clear sentences, under about 200 characters.
- The og:url is the canonical address of the page.
- The image is 1200 by 630 pixels, JPG or PNG, served over https and under a few megabytes.
- An image alt text is set for accessibility.
- The twitter:card tag is present.
- You tested the live URL in at least one debugger.
Where to put the tags and who can help
Open Graph tags go inside the head of each page, one set per page, each with its own title, description and image. In a content management system, an SEO plugin or the theme settings usually provides fields for these, and you can paste the generated values in. On a custom site, add them to the page template and fill the values from your page data.
If you are not sure how to edit your template, send the generated code and the page address to your developer. They only need to place it inside the head. After that, test the live address in the Facebook Sharing Debugger and the LinkedIn Post Inspector to confirm that the card looks right.
Frequently asked questions
What size should an Open Graph image be?
1200 × 630 pixels (1.91:1) is the safe standard. Facebook accepts smaller images but they may display small. Keep the file under a few megabytes.
Do I need both Open Graph and Twitter tags?
X reads Open Graph tags as a fallback, so og tags plus a twitter:card tag are enough. Add twitter:site only if you want to attribute the card to an account.
Why is my image not showing?
Common causes: the image is http instead of https, blocked by robots.txt, behind a login, too small, or the platform has cached an old version.
Can I use an SVG as the image?
No. Major social platforms do not render SVG for link previews. Use PNG or JPG.
Is my content uploaded?
No. Tags are generated in your browser. The preview loads your image directly from its own address.