Share a link on social media or in a messaging app, and it usually expands into a preview card: an image, a title and a short description. That preview is often the only thing people see before deciding whether to click. A great preview attracts attention. A broken one, with the wrong image, a cropped logo or no image at all, gets scrolled past.
These previews are controlled by Open Graph tags, a small set of meta tags in your page’s HTML. WordPress doesn’t add them by default, but most SEO plugins do. Getting them right takes a few minutes per page and makes every share of your content more effective.
Here’s how Open Graph works and how to set it up properly on WordPress.
What Open Graph is
Open Graph is a protocol originally created by Facebook that lets web pages describe how they should appear when shared. It’s now used by most social networks and messaging apps, including Facebook, LinkedIn, WhatsApp, Slack, Discord and many others.
The core tags look like this:
When a platform fetches your link, it reads these tags and builds the preview.
X, formerly Twitter, uses its own card tags, but falls back to Open Graph tags when its own are missing:
The summary_large_image card type shows a large image above the title, which usually performs better than the small thumbnail version.
What happens without Open Graph tags
If your pages don’t have Open Graph tags, platforms guess. They might pick the first image on the page, which could be your logo, an icon or an advertisement. They might use the page title without your branding, and pull a random piece of text as the description. Results are unpredictable and often unattractive.
Setting up Open Graph in WordPress
Use your SEO plugin
Most popular WordPress SEO plugins generate Open Graph and X card tags automatically. In the plugin settings, look for a Social section. Typically you can:
- Enable Open Graph output.
- Set a default image for pages without a featured image.
- Connect your social profiles.
- Override the title, description and image for individual posts and pages.
By default, these plugins use your SEO title, meta description and featured image for the social preview. For most content, that’s a good starting point.
Avoid duplicate tags
If both your theme and an SEO plugin output Open Graph tags, or you have two SEO or social plugins installed, pages can end up with duplicate or conflicting tags. Platforms might pick the wrong one. Check your page source for multiple og:title or og:image tags, and disable the extra source.
Choosing the right image
The image matters more than anything else in a social preview.
Size and ratio
A widely recommended size for Open Graph images is 1200 by 630 pixels, roughly a 1.91 to 1 ratio. Images in this ratio display well as large previews on most platforms.
- Use at least 1200 pixels wide for sharp display on high-resolution screens.
- Keep file sizes reasonable, ideally well under a few hundred kilobytes, using JPEG or PNG for maximum compatibility. Some platforms have inconsistent support for newer formats like WebP and AVIF.
- Use an absolute URL starting with https.
Keep important content central
Different platforms crop images slightly differently, and some show square versions in certain contexts. Keep text and key visuals near the centre, with some margin around the edges.
Use featured images designed for sharing
Featured images double as social images by default, so design them with sharing in mind. A consistent template, with your branding, a clear visual and optionally the post title in large text, makes your content recognisable when shared.
Set a good default image
For pages without featured images, set a default image in your SEO plugin, like a branded image with your logo and tagline. That’s much better than letting platforms pick something random.
Writing titles and descriptions
Social titles and descriptions can differ from your SEO title and meta description. Search results reward clarity and relevance; social feeds reward attention and curiosity.
- Titles: keep them concise and compelling. Long titles get truncated.
- Descriptions: one or two sentences explaining why the content is worth reading. Some platforms show little or no description, so the title and image need to work on their own.
Avoid misleading clickbait. It damages trust and can reduce how platforms show your content.
Other useful tags
- og:type: usually website for the homepage and article for posts.
- og:locale: the language and region, like en_US or en_GB.
- article:published_time and article:modified_time: dates for articles.
- og:image:alt: a text description of the image, helpful for accessibility on platforms that support it.
- og:image:width and og:image:height: help platforms render previews immediately.
SEO plugins usually add these automatically.
Testing and refreshing previews
Platforms cache previews. If you change your Open Graph tags or images after a link has been shared, old previews may continue to show. Use each platform’s tools to check and refresh:
- Facebook Sharing Debugger: shows the tags Facebook sees and lets you scrape the page again.
- LinkedIn Post Inspector: shows LinkedIn’s preview and refreshes its cache.
- Other platforms and messaging apps often refresh on their own over time.
Test new important pages before sharing them widely, so the first impression is right.
Fixing common problems
Wrong image appears
Check the page source for the og:image tag. If it’s missing, set a featured image or default image. If there are multiple og:image tags, find and remove the duplicate source. Then refresh the platform’s cache.
No image appears
Possible causes:
- The image URL is incorrect or uses HTTP instead of HTTPS.
- The image is too small.
- Your server or firewall blocks the platform’s crawler. Some security tools block unfamiliar bots, including social media crawlers.
- The image is behind authentication or hotlink protection.
Check that the image URL opens in a private browser window and that social crawlers aren’t blocked.
Old title or description appears
The platform has cached an older version. Use its debugging tool to refresh.
Preview shows the site’s homepage details for every page
This usually means a theme or plugin is outputting the same tags on every page, or caching is serving the wrong meta tags. Check different pages’ source code.
WooCommerce product previews
For products, make sure the main product image is used and the description summarises the product clearly. SEO plugins usually handle products well, but check a few product pages.
Privacy and performance
Open Graph tags are simple meta tags in your HTML, so they don’t affect page speed. Social sharing buttons, on the other hand, can load heavy scripts from social networks, which slow pages and may track visitors. If you add share buttons, use lightweight versions that are simple links rather than embedded widgets.
Design a reusable social image template
If you publish regularly, creating a fresh social image for every post can feel like a chore, so it often gets skipped. A reusable template solves this. Design one layout at 1200 by 630 pixels with your brand colours, logo position and a space for the post title, then reuse it for every article. Keep the title large enough to read on a phone, use high contrast between text and background and leave generous margins so nothing important gets cropped.
Consistent images make your content instantly recognisable in busy social feeds. Over time, people start to associate the look with your brand, which makes them more likely to stop and click when they see it. If your featured images already follow a consistent template, as many well-run blogs do, they’ll serve as excellent social images without any extra work.
Check how your template looks in a real feed before rolling it out. Share a test post privately, or use the platforms’ preview tools, and look at it on a phone. Small text that looks fine on a desktop monitor often becomes unreadable in a mobile feed.
Frequently asked questions
Do Open Graph tags help SEO?
Not directly in search rankings. They improve how your content appears when shared, which can increase clicks, traffic and visibility, indirectly supporting your overall online presence.
What size should Open Graph images be?
1200 by 630 pixels is the widely recommended size. Keep key content near the centre to survive cropping.
Why isn’t my new image showing when I share?
The platform has cached the old preview. Use the platform’s debugging tool to fetch the page again.
Do I need a separate image for X?
Not usually. X uses Open Graph tags when its own card tags aren’t present. Setting the card type to summary_large_image ensures a large preview.
Final thoughts
Every time someone shares your link, the preview is your first impression. Use your SEO plugin to output clean Open Graph tags, design featured images at 1200 by 630 pixels with sharing in mind, set a strong default image, write titles that earn the click, avoid duplicate tags and test important pages before sharing. A few minutes of setup makes every share of your content work harder.
