Open Graph tags, in short
Open Graph tags are <meta property="og:..."> tags in a page's head that tell social networks and messaging apps which title, description, image and URL to show when the page is shared. The protocol requires four: og:title, og:type, og:image and og:url. Twitter Cards are X's own twitter: tags. X falls back to Open Graph for the title, description and image, so in practice you need the Open Graph set plus one tag, twitter:card, to get the large image card.
- Write the full Open Graph set once, then add twitter:card.
- Use a 1200 x 630 JPG or PNG under 5 MB, with an absolute https URL.
- Not a Google ranking factor, but Google can use og:title, og:site_name and og:image in search features.
Open Graph was created by Facebook so any web page could become a rich object when shared. It is now read far beyond Facebook: LinkedIn requires og: tags for its link previews, Slack builds its previews from Open Graph and X Card metadata, and X uses og: tags whenever its own twitter: tags are missing. Write them once and most of the places your links travel will use them.
Without them, each platform guesses. Some pull the HTML title and the first image they find, which might be a logo, a tracking pixel or nothing at all. With them, you decide exactly what the card says, which matters because the card is the whole first impression of the page for everyone who sees it in a feed.
The Tags, and What Each One Does
This is a complete, copy-ready set for an article. Replace the values, keep the structure. Every URL must be absolute.
<!-- Open Graph --> <meta property="og:title" content="How to fix a link preview that won't update" /> <meta property="og:description" content="Why platforms cache old previews and the three steps that refresh them." /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://example.com/blog/link-previews" /> <meta property="og:image" content="https://example.com/images/link-previews-card.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:alt" content="A LinkedIn post showing a large link preview card" /> <meta property="og:site_name" content="Example" /> <meta property="og:locale" content="en_GB" /> <!-- X (Twitter): title, description and image fall back to og: --> <meta name="twitter:card" content="summary_large_image" />
| Tag | What it does | Status | Note |
|---|---|---|---|
| og:title | The headline shown on the card. | Required by the spec | Can differ from your HTML <title>. Write it for someone scrolling a feed. |
| og:type | What the object is: website, article, profile, video.movie and others. | Required by the spec | Use article for posts and website for everything else. |
| og:image | Absolute URL of the preview image. | Required by the spec | The tag that decides whether a share looks like a card or a bare link. |
| og:url | The canonical URL, used as the object's permanent ID. | Required by the spec | Match your canonical tag, so shares of URL variants count as one object. |
| og:description | One or two sentences under the title. | Optional, but expected | LinkedIn lists it among the tags that must exist. |
| og:image:width / og:image:height | The image size in pixels. | Optional | Lets Facebook render the image on the very first share. |
| og:image:alt | A description of what is in the image. | Optional | The spec says a page with og:image should specify it. X uses it as alt text. |
| og:site_name | The name of the overall site. | Optional | Also one of the inputs Google considers for the site name in search results. |
| og:locale | Language and territory, such as en_GB. | Optional | Defaults to en_US when missing. |
| twitter:card | X card type: summary, summary_large_image, app or player. | Needed for X's large card | The one twitter: tag with no Open Graph equivalent. |
Two rules from the specification are easy to miss. Tags use the property attribute, not name. And when the same tag appears twice, the first one (from top to bottom) wins, which is how a theme's default image can beat the one your SEO plugin adds further down.
Open Graph and Twitter Cards Together
X (formerly Twitter) has its own vocabulary of twitter: tags and four card types: summary, summary_large_image, app and player. You do not need to duplicate your Open Graph tags to use them. X's card documentation describes a fallback for each content tag:
| X tag | Falls back to | Limit or note |
|---|---|---|
| twitter:card | No equivalent | Without it, X may still render a small summary card from og:type, og:title and og:description. |
| twitter:title | og:title | Maximum 70 characters on X. |
| twitter:description | og:description | Maximum 200 characters on X. |
| twitter:image | og:image | Under 5 MB; JPG, PNG, WEBP or GIF (first frame only). No SVG. |
| twitter:image:alt | og:image:alt | Maximum 420 characters. |
So the efficient pattern is the full Open Graph set plus twitter:card. Add a separate twitter:title or twitter:image only when you want X to show something different, for example a shorter title to fit X's 70 character limit. The X rebrand did not change the tag names: X's own documentation pages still serve twitter: tags, and Slack's docs refer to "X (formerly known as Twitter) Card metadata".
One change worth knowing: X removed the preview from its Card Validator in 2022. To see how a card looks on X now, paste the link into the post composer without publishing.
What Each Platform Reads and Requires
From each platform's own documentation. The image rules differ more than most guides admit.
| Platform | Tags it reads | Image rules | How to test |
|---|---|---|---|
| og:url, og:title, og:description, og:image | At least 1200 x 630 for the best display; 600 x 315 minimum for large link previews; 200 x 200 absolute minimum; 1.91:1; max 8 MB | Sharing Debugger (re-scrapes the URL) | |
| og:title, og:image, og:description, og:url | Minimum 1200 x 627; 1.91:1; max 5 MB; under 401 px wide shows as a thumbnail | Post Inspector | |
| X (Twitter) | twitter:card, then twitter: tags with og: fallbacks | Large card: 2:1, from 300 x 157 up to 4096 x 4096. Summary card: 1:1, from 144 x 144. Under 5 MB | Preview in the post composer; card data cached up to 7 days |
| Slack | Open Graph and X Card metadata | Not specified in Slack's docs; a card built for the platforms above works | Paste the link in a test channel |
One image that works everywhere
A 1200 x 630 pixel JPG or PNG under 5 MB satisfies all four. It meets Facebook's recommended minimum for high resolution screens, clears LinkedIn's 1200 x 627 minimum and 5 MB cap, and fits X's large card. X uses a 2:1 ratio for that card, so a 1.91:1 image can lose about 15 pixels at the top and bottom. Keep text and logos inside the central area and the crop never matters.
Worked Example: Fixing a Missing Preview Image
A team publishes a new guide and shares it on LinkedIn and X. On LinkedIn the post shows a tiny thumbnail; on X it shows a plain link. Here is the order to check things in, which finds the cause fastest.
- 1
Confirm the tags are in the HTML your server sends
Open the page source (view-source:, or curl the URL), not the Elements panel. X's developer forum checklist warns that its crawler cannot execute JavaScript, so tags injected client-side may never be seen. In our example the og:image tag was only added by a script after load.
- 2
Check the image URL on its own
It must be an absolute https URL that returns 200 to a request from outside your network. Relative paths such as /images/card.png are a common cause of missing images.
- 3
Check the image against each platform's limits
A 400 x 210 image passes Facebook's 200 x 200 minimum but shows as a small thumbnail on LinkedIn, which needs 401 pixels of width for a full image. Export a 1200 x 630 version.
- 4
Declare the dimensions
Add og:image:width and og:image:height. Facebook says this lets its crawler render the image immediately, instead of the first sharer seeing a card with no image.
- 5
Add twitter:card
Set it to summary_large_image so X shows the full-width image instead of a small summary card. The title, description and image can fall back to your og: tags.
- 6
Force a fresh scrape
Run the URL through Facebook's Sharing Debugger and LinkedIn's Post Inspector. For X, cards refresh within 7 days; X suggests adding a unique parameter to the URL to prompt an earlier re-crawl. Because Facebook caches images by URL, give a replaced image a new file name.
# What the crawlers see: the raw HTML, no JavaScript curl -s https://example.com/guide | grep -iE 'og:|twitter:' # Does the image itself load? curl -sI https://example.com/images/guide-card.png | head -1
Do Open Graph Tags Affect SEO?
Not as a ranking signal. Google's documentation does not list Open Graph tags among the things it uses to rank pages. But Google does read them, in three places worth knowing:
- Title links. Content in og:title is one of the sources Google may use when it writes the clickable title for a page in results, alongside the title element and headings.
- Site names. Google's site name system considers og:site_name, although WebSite structured data matters most.
- Images. Google suggests og:image as a way to specify a page's preferred image, and says it can influence the thumbnail chosen in Discover.
So a sloppy og:title can leak into how your page appears in Google, and a good og:image can help it in Discover. For the title and description that Google shows by default, see our guide to writing page titles and meta descriptions and the anatomy of a search snippet. For image choice, our image SEO guide covers the rest.
Common Open Graph Mistakes
Copying the HTML title into og:title word for word
Search titles are written for a results page. A card in a feed has an image beside it and more room, so it can lead with the benefit rather than the keyword.
Using one generic image for every page
A site-wide logo card makes every share look the same. Give your most shared pages their own image, even a simple one with the page title on it.
Putting important text near the image edges
X's large card uses a 2:1 ratio, so a 1.91:1 image can lose a few pixels at the top and bottom. Keep words in the centre.
Pointing og:url at a different page
og:url is the object's permanent ID. If it points at the homepage on every page, platforms can treat every share as the homepage.
Testing on the live post
Use the debuggers before you publish the post. Once a platform has cached a broken preview, old shares keep it.
Check what Google does with your titles
Murkuz does not read your meta tags. It reads your Search Console data, which shows the result of them. Ask Live_CTR_Opportunities which queries get plenty of impressions and almost no clicks; a page on that list is worth a look at its title, its og:title and the title link Google is actually showing. See the Search Console connector.
Further reading
The specification and each platform's own documentation. Each one was read in full before it was added here.
Specificationogp.me
The Open Graph protocolThe specification itself, and shorter than you expect. Lists the four required properties, every og:image sub-property, the og:type values and how conflicts between duplicate tags are resolved.
Official docsMeta for Developers
Images in link sharesFacebook's image rules: minimum and recommended sizes, the 1.91:1 ratio, the 8 MB limit, and why the first share of a new URL can appear without an image unless you pre-cache it or declare its dimensions.
Official docsLinkedIn Help
Make your website shareable on LinkedInThe og: tags LinkedIn requires and its image specifications for shared links, including the detail that images under 401 pixels wide shrink to a thumbnail.
Official noticeX Developer Community, XDevelopers
Card Validator preview removalX's own announcement that the Card Validator no longer shows previews, that cards are cached for up to 7 days, and how to nudge the crawler to fetch a page again.
Official docsSlack Developer Docs
Unfurling links in messagesExplains what Slack does with a pasted link: it crawls the URL and builds the preview from Open Graph and X Card metadata. Useful when a link looks right on social but wrong in Slack.
Official docsGoogle Search Central
Influencing title links in Google SearchLists og:title among the sources Google may use when it writes a page's title link in search results, which is the main reason Open Graph tags are not purely a social concern.
Frequently Asked Questions
Does X (Twitter) use Open Graph tags?
Yes, as a fallback. X's card documentation says twitter:title, twitter:description, twitter:image and twitter:image:alt fall back to og:title, og:description, og:image and og:image:alt when the twitter: version is missing. What Open Graph cannot set is the card type, so add twitter:card with the value summary_large_image if you want the large image layout.
What is an Open Graph card?
It is the preview box that appears when a link is shared on a social network or in a messaging app: an image, a title, a short description and the site's domain. The platform builds it by reading the Open Graph meta tags in the page's head, so the card is only as good as those tags.
Do I need both Open Graph tags and Twitter Card tags?
You need the full Open Graph set plus one Twitter tag: twitter:card. The other twitter: tags are optional because X falls back to the matching og: tags. Add twitter:title, twitter:description or twitter:image only when you want X to show something different from Facebook, LinkedIn and Slack.
What size should an og:image be?
Use 1200 x 630 pixels, a 1.91:1 ratio, as a JPG or PNG under 5 MB. That meets Facebook's recommendation of at least 1200 x 630, LinkedIn's minimum of 1200 x 627 and its 5 MB limit, and X's large image card, which uses a 2:1 ratio and can trim a little from the top and bottom. Keep text and logos away from the edges.
Do Open Graph tags affect SEO?
Not as a ranking factor: Google's documentation does not list Open Graph tags as a ranking signal. Google can use them in other ways, though. og:title is one of the sources it may use for a page's title link, og:site_name feeds its site name system, and og:image can influence which image is shown for the page, including Discover thumbnails.
Why is my link preview not updating after I changed the tags?
Platforms cache previews. Facebook caches images by URL and refreshes scraped pages on its own schedule, and X caches card data for up to 7 days. Re-scrape the URL in Facebook's Sharing Debugger and LinkedIn's Post Inspector, and give a changed image a new file name so the old one is not reused.
Why is my og:image not showing?
The usual causes are a relative image URL instead of an absolute https one, an image that returns an error or is blocked, an image that is too small or too large for the platform, or tags that are added by JavaScript after the page loads. Social crawlers read the HTML your server returns, so check the page source, not the browser's live DOM.