Open Graph Generator
Create the Open Graph and X (Twitter) Card meta tags that control how your page looks when it is shared. Fill in the details, see live previews for six platforms, check the share image, and copy tags that are ready to paste.
- Live previews for 6 platforms
- Checks your share image
- Imports tags from a live page
Want to see how an existing page looks when shared? Use the Social Media Preview Tool.
The Open Graph tags every page should have
Open Graph is a set of meta tags, started by Facebook, that nearly every social platform and messaging app reads when a link is shared. Six tags cover almost everything.
og:title
The headline shown on the card. Aim for about 60 characters. It can differ from your title tag if a social headline reads better.
og:description
A one or two sentence summary, roughly 100 to 160 characters. Platforms cut it off after a line or two.
og:image
The picture. Use an absolute https address, 1200 x 630 pixels, under 1 MB. It matters more than any other tag.
og:url
The canonical address of the page. It makes shares of URL variants count as one.
og:type
What the page is: website, article, product, profile or video. It decides which extra tags apply.
twitter:card
Chooses the layout on X. Use summary_large_image for a big picture. X reads the Open Graph tags for the rest.
Image sizes and text lengths by platform
These are the recommended sizes. Platforms crop and truncate differently, so design with a safe margin around the edges.
| Platform | Image | Text behaviour |
|---|---|---|
| 1200 x 630 px (1.91:1). Below 600 x 315 it shows a small thumbnail; the minimum is 200 x 200. Up to 8 MB. | Title up to about two lines, one line of description. | |
| X (Twitter) | Large card: 2:1, at least 300 x 157. Small card: 1:1, at least 144 x 144. Up to 5 MB. | Reads og: tags when twitter: tags are missing. The card type comes from twitter:card. |
| 1200 x 627 px (about 1.91:1). | Shows the title and domain. The description is not shown. | |
| Landscape or square. Keep files small, ideally under 300 KB. | Shows title, description and domain. Reads og: tags. | |
| Slack | Landscape. The image is shown up to about 360 pixels wide. | Shows site name, title and description. Reads og: tags, then twitter: tags. |
| Discord | Landscape for a large image. Needs twitter:card summary_large_image for the big layout. | Shows site name, title and description. theme-color sets the embed's accent colour. |
How to add Open Graph tags to a page
Four steps take you from a blank form to a page that shares well.
Choose the page type
Pick website, article, product, profile or video. You can also import the current tags from the live page.
Fill in the details
Add the title, description, canonical address and a 1200 x 630 image. Use the Preview tab and the Checks tab as you go.
Paste into the head
Copy the tags into the head section of the page, or into the social fields of your SEO plugin or CMS.
Publish and re-test
Test the live page with the Social Media Preview Tool and refresh each platform's cache with its own debugger, because platforms remember old tags.
How to get share previews right
Most broken previews come from a handful of avoidable mistakes.
Use absolute https addresses
A relative image path like /images/share.jpg doesn't work. Facebook and others need the full address.
Make every page unique
Each page needs its own title, description and image. One site-wide image on every page makes every share look the same.
Keep text away from the edges
Platforms crop to different ratios. Put the key content in the centre of the image.
Add image alt text
og:image:alt describes the picture for screen readers and some platforms.
Match your canonical
og:url should equal the canonical address, so shares and likes are counted against one URL.
Expect caching
Platforms cache previews for days. After a change, scrape the URL again in the platform's debugger.
What Open Graph tags are and why every page needs them
Open Graph tags are meta tags in a page's head that tell social networks and messaging apps what to show when someone shares your link. The Open Graph protocol is read by Facebook and other platforms and apps. It defines four required properties for every page: og:title, og:type, og:image and og:url. Others, such as og:description, og:site_name and og:image:alt, are optional but recommended.
Without these tags, the platform guesses. Facebook's documentation says that when Open Graph tags are missing, its crawler guesses the title, description and preview image, so a shared link can show a random picture or none at all. A good share card gets more clicks, and it makes a page look looked after wherever it lands. Open Graph is not a separate ranking system, but Google lists og:title among the sources it can use for a title link, so a clear one helps in more than one place.
This generator builds the tags from a short form, shows previews for several platforms, checks the share image and warns about the usual mistakes. It also writes twitter: card tags where they help. Paste the result into the head of your page, or into the social fields of your CMS, then test the live page and refresh each platform's cache, because platforms remember what they saw the first time.
When to create Open Graph tags
Create or review them whenever a page is likely to be shared, which is most pages.
Before launching a page or campaign
Build the tags with the real title, description and image so the first share already looks right. Fixing a card after people have shared it is slower.
Blog posts and articles
Use the article type and a post-specific image so each share carries its own headline. A shared logo on every post makes all links look the same.
Product and landing pages
Give product pages a product photo and a clear description. Shoppers decide from the card whether to click, so it needs the offer and the item.
Fixing a site with broken previews
Import the current tags from a live page, correct the image address, title length or missing type, and copy the clean set back into your template.
Working with a CMS or SEO plugin
Many sites set Open Graph through a plugin or theme field. Use the generator to prepare the values, then enter them in those fields to avoid duplicate tags.
Sharing in chat and messaging apps
Links are often shared in messaging apps and team chats. The same tags control the card there, so one set of correct tags covers many places.
Open Graph mistakes and how to fix them
Most broken previews come from a small set of avoidable errors.
A relative or missing image address
What goes wrong: An og:image such as /images/share.jpg gives crawlers no domain to fetch it from. All examples in the protocol use full addresses, and a missing image leaves the card empty.
The fix: Use a full https address that is public and loads without a login. Check that your robots.txt and firewall do not block the platform's crawler.
An image that is too small
What goes wrong: Facebook's documentation sets a minimum of 200 x 200 pixels, and says images smaller than 600 x 315 show as a much smaller preview.
The fix: Use an image of at least 1200 x 630 pixels, as Facebook recommends for high-resolution screens, and keep it under its 8 MB limit. Keep key content away from the edges.
Expecting an updated image to refresh
What goes wrong: Facebook says images are cached by URL and are not updated unless the URL changes. Replacing the file on the server under the same name leaves the old card showing.
The fix: Save the new image under a new file name and update og:image. Then scrape the page again in the platform's debugger.
og:url that disagrees with the canonical
What goes wrong: Facebook says og:url should be the canonical, undecorated address. If it differs from your canonical tag, shares and likes can be split across URL variants.
The fix: Make og:url match the canonical address exactly, with no tracking parameters, session values or counters.
Duplicate tags from several sources
What goes wrong: A theme, an SEO plugin and a social plugin can each output og:title. Crawlers may take the first one, which may not be the one you meant.
The fix: Pick one source of Open Graph tags and turn the others off. View the page source and confirm each property appears once.
The same tags on every page
What goes wrong: A site-wide image, title and description make every shared link look identical and give no hint of what the page is about, so people have no reason to click.
The fix: Give every page its own title, description and image. Use a good default image only for pages that truly have none.
Open Graph terms explained
- Open Graph protocol
- A set of
metatags that describe a page as an object in a social graph. It lets any page control the title, image and description that platforms show when the link is shared. - og:title
- The title shown on the share card. It can differ from the title tag, and Google can also use it as one source when it builds the title link for a search result.
- og:image
- The image for the card. It should be a full
httpsaddress. The protocol recommends pairing it withog:image:alt, andog:image:widthandog:image:heightare optional extras. - og:url
- The canonical address of the page. Facebook says it should be the undecorated URL without session variables, user identifying parameters or counters.
- og:type
- The kind of object the page is, such as website, article, profile or video.other. If a page has no type markup, the protocol says to treat it as website.
- Twitter Card tags
twitter:meta tags that X reads to build its link cards. The exact rules and fallbacks are set by X and can change, so check X's own documentation before relying on them.- Sharing Debugger
- Facebook's tool that fetches a URL, shows which tags its crawler read, lists errors and warnings, and triggers a fresh scrape after you change the page.
- Scrape and cache
- A platform's crawler fetches your page once and keeps what it found. Changes will not show until it fetches the page again, so ask for a new scrape after editing.
Related tools, guides and services
Social cards are one part of the page head. These tools check the rest.
Social Media Preview Tool
Enter a live URL and see its share card on six platforms, with a checklist of problems.
ToolMeta Tag Checker
Audit the title, description, canonical, robots and social tags together.
ToolTitle & Meta Description Preview
See how the title and description will look in Google results before you publish.
ToolCanonical URL Checker
Confirm that your canonical tag and og:url point to the same clean address.
ToolUTM Builder
Tag the links you share with campaign details so you can measure which posts bring visits.
ServiceOn-page SEO service
Get titles, descriptions, headings and metadata reviewed and fixed across your site.
Built by
Madhav Kushwaha
SEO, AEO, GEO & Digital Marketing Consultant in Kathmandu, Nepal, and trainer at ODcrU Academy and TechAxis Institute. I built this generator because most share-preview problems I find on audits are simple: a missing image, a relative image address, a title cut off at 60 characters, or a canonical that disagrees with og:url. The checks here are the ones I run by hand, and the previews let you see the result before you publish.
Open Graph Generator: Frequently Asked Questions
More free SEO tools
Social sharing is one part of how a page presents itself. These tools cover the rest of the page's head: titles, schema and tracking.