Open Graph Tags: Control How Links Look on Social

Every time someone shares your page on Facebook, LinkedIn, WhatsApp, Slack or many other apps, the platform builds a preview card: a title, a short description and an image. That card is often the first impression someone has of your content, and it is decided by a handful of meta tags most site owners never look at.

Those tags come from the Open Graph protocol. When they are missing or wrong, platforms guess, and the guess might be your cookie banner text, a tiny logo or a cropped stock photo. When they are set properly, your shared links look intentional, consistent and clickable.

This guide explains what Open Graph tags are, which ones you need, how to choose images, how to add and test the tags, and how they relate to SEO in 2026.

Key Takeaways

Open Graph tags are <meta> tags in the page head that tell sharing platforms what title, description, image and URL to use.
The core properties are og:title, og:type, og:image and og:url, with og:description strongly recommended.
Use a large, relevant, uncluttered image with absolute HTTPS URLs and an og:image:alt description.
Platforms cache previews; change the image URL and use their debugging tools to refresh.
Open Graph tags are not a direct ranking factor, but Google can use og:title and og:image as signals for title links and image thumbnails.

What Is the Open Graph Protocol?

The Open Graph protocol was introduced by Facebook to let any web page describe itself as a rich object when shared. It is now read by most major social networks and messaging apps. The tags sit in the <head> of your HTML and use the property attribute with an og: prefix.

Without them, platforms fall back on guesswork. Meta's own documentation for webmasters notes that its crawler uses internal heuristics to make a best guess at the title, description and preview image when Open Graph tags are absent.

The Open Graph Tags That Matter

Tag	Status	What it does	Tips
`og:title`	Required	Title shown on the card	Can differ from the title tag; write it for social, not search
`og:type`	Required	Type of object, e.g. `website` or `article`	Use `article` for blog posts, `website` for most other pages
`og:image`	Required	Image shown on the card	Absolute HTTPS URL; large and relevant
`og:url`	Required	Canonical URL of the page	Match your canonical tag; no tracking parameters
`og:description`	Recommended	Short summary under the title	One or two sentences that make people want to click
`og:site_name`	Recommended	Name of the overall site	Your brand name
`og:locale`	Optional	Language and territory, e.g. `en_US`	Defaults to `en_US` if omitted
`og:image:alt`	Recommended with images	Text description of the image	Describe what is shown, not a caption
`og:image:width` / `height`	Optional	Image dimensions in pixels	Helps the image render correctly on first share

The Open Graph specification also defines properties for audio, video and alternate locales, and extra properties for types such as article (for example published time and author).

A Complete Example

Here is a typical set of tags for a service page. Replace the example values with your own, and always use absolute URLs:

<head>
  <title>Commercial Roof Repair in Austin | Example Roofing</title>
  <meta property="og:title" content="Commercial Roof Repair in Austin">
  <meta property="og:description" content="Same-week inspections and fixed-price repair quotes for flat and metal roofs.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.example.com/services/commercial-roof-repair/">
  <meta property="og:image" content="https://www.example.com/images/roof-repair-1200x630.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Roofer replacing a damaged section of a flat commercial roof">
  <meta property="og:site_name" content="Example Roofing">
  <meta property="og:locale" content="en_US">
  <meta name="twitter:card" content="summary_large_image">
</head>

The twitter:card line is not Open Graph; it is X's own card markup, which chooses the card layout. X documents its own twitter: tags, and many sites add just this one alongside Open Graph tags.

Choosing the Right Image

The image does most of the work on a social card. Guidance from Google on preferred images for Search applies well to social images too: its image documentation advises choosing an image that is relevant and representative of the page, avoiding generic images such as a site logo or images containing text, and avoiding extreme aspect ratios.

Size: a landscape image around 1200 × 630 pixels is a widely used convention for link cards. Google's Discover documentation separately recommends large images at least 1200 px wide.
Safe area: keep the subject near the centre, as platforms crop differently.
File weight: compress images so crawlers can fetch them quickly; see our guides to image compression and WebP and AVIF. Check which formats each platform accepts before switching your social images.
Dimensions in tags: Meta's documentation recommends specifying height and width so the image loads properly the first time it is shared.
Alt text: add og:image:alt; the Open Graph spec says pages that specify an image should also describe it.

How to Add Open Graph Tags

Check what you have. View the page source and search for og:. Many themes and SEO plugins add tags automatically, sometimes twice.
Choose one source of truth. In WordPress, an SEO plugin usually manages Open Graph tags; disable duplicate output from the theme or other plugins. Our WordPress SEO guide covers plugin set-up.
Set sensible defaults at site level: site name, locale and a fallback image.
Customise key pages: homepage, service pages, high-value posts and product pages deserve a hand-picked image and description.
For custom builds, output the tags server-side in the HTML head. Many crawlers do not run JavaScript, so tags injected only by client-side scripts may be missed. Our guide to JavaScript SEO explains rendering issues.
Test before sharing with the tools below.

Testing and Refreshing Previews

Platforms cache what they scrape. Meta's documentation is explicit about images:

“Images are cached based on the URL and won't be updated unless the URL changes.”
— Meta for Developers, A Guide to Sharing for Webmasters

So if you replace a social image, upload it under a new file name and update og:image. Then use the platform tools to re-scrape:

Platform	Tool	What it shows
Facebook (Meta)	Sharing Debugger	Scraped tags, warnings, and a button to fetch new information
LinkedIn	Post Inspector	How the link will appear and which tags were read
X	Post composer preview	The card layout when you paste a link
Any site	Browser "View source" or a crawler	Whether tags are present, duplicated or wrong

For site-wide checks, crawlers such as Screaming Frog can extract Open Graph tags for every URL; see our Screaming Frog guide.

Do Open Graph Tags Affect SEO?

Not directly as a ranking factor. Their main value is better-looking, more clickable shares, which supports traffic and brand visibility. There are indirect links to search, though. Google's title link documentation lists content in og:title meta tags among the sources it can use when generating title links, and in March 2026 Google documented that it uses both schema.org markup and the og:image tag as sources when determining image thumbnails. Keeping these tags accurate therefore helps both social and search presentation. For the social side, see our guides to social media SEO and social media content ideas.

Common Mistakes

Relative image URLs. Use full HTTPS URLs; crawlers may not resolve relative paths.
Duplicate tag sets from a theme and a plugin, leaving platforms to pick one.
The same image on every page, usually the logo, which makes all shares look identical.
Text-heavy images that become unreadable on small cards.
og:url pointing to the wrong page, such as the homepage, which can merge share data incorrectly.
Blocking social crawlers in robots.txt or a firewall, so they cannot fetch the page or image.
Forgetting the cache and assuming a changed image will appear immediately.

Frequently Asked Questions

What are Open Graph tags?

They are meta tags in a page's HTML head, defined by the Open Graph protocol, that tell social and messaging platforms which title, description, image and URL to show when the page is shared.

What size should an Open Graph image be?

A landscape image around 1200 x 630 pixels is a common convention. Keep the subject centred, avoid heavy text and specify width and height in the tags.

Platforms cache previews. Upload the new image under a new URL, update og:image and use the platform's debugging tool to fetch the page again.

Are Open Graph tags a ranking factor?

No direct ranking effect is documented. Google can use og:title when generating title links and og:image when choosing image thumbnails, so accurate tags still help how pages appear.

Do I need separate Twitter tags?

Many sites add twitter:card to choose X's card layout and rely on Open Graph tags for the rest. Check X's card documentation for the fields it supports.

Conclusion

Open Graph tags take minutes to set up and shape every share of your content. Define the core tags on every page, choose strong images with alt text, avoid duplicates and test with each platform's tools. Your links will look professional wherever they travel, and search engines get clearer signals too.

Want your technical SEO and social metadata audited and fixed? Our on-page optimisation and social media management services can help. Get a free quote.

References

#open graph #social media #meta tags #technical seo #og image

Written byRohit ChoudharyCo-Founder, My SEO Experts

Rohit Choudhary is the co-founder of My SEO Experts and has more than 14 years of hands-on experience in SEO, paid advertising and digital marketing. Since starting out in 2011 he has helped hundreds of businesses grow through practical, data-driven search strategies, and he also serves as a consulting Digital Marketing Director for several US-based companies.

Website All articles by Rohit →

Keep reading

Ready to grow your business online?

Get a free, no-obligation proposal tailored to your goals and budget.

Get a Free Quote Call Us