Open Graph Tags: How to Control Social Previews

You share a page on Facebook, LinkedIn or WhatsApp and the preview looks wrong. The image is your logo, cropped badly, or missing. The title is cut off, or the description is a random line from your footer. Open Graph tags fix this. They are a few lines of code in the head of your page that tell social platforms which title, description and image to show when someone shares your link.

Without them, each platform guesses. Sometimes it guesses well. Often it doesn’t. In this guide I explain what each tag does, how to add Open Graph tags to any site, the image sizes that work, and how to fix a preview that refuses to update.

What Open Graph Tags Are

Open Graph is a protocol (a shared set of rules) that Facebook introduced in 2010. It lets any web page describe itself in a way social apps can read. Each tag is a meta element in the page’s head, with a property that starts with og: and a content value.

Here is a basic set for a blog post:

<meta property="og:title" content="How to Price Your Cleaning Services" />
<meta property="og:description" content="A simple way to set prices that cover your costs and win jobs." />
<meta property="og:image" content="https://www.example.com/images/cleaning-pricing.jpg" />
<meta property="og:url" content="https://www.example.com/blog/cleaning-pricing/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Example Cleaning Co" />

When someone pastes that URL into a post, the platform’s crawler (a bot that fetches pages) visits it, reads these tags and builds the preview card. Facebook, LinkedIn, Pinterest, Slack, Discord, WhatsApp, Telegram and iMessage all read Open Graph tags to some degree. X (Twitter) has its own tags but falls back to Open Graph for the basics.

That is why I treat Open Graph as the default for every page. One set of tags covers almost every place a link gets shared.

Do Open Graph Tags Help SEO?

Not directly. Open Graph tags are not a Google ranking factor. Google ranks your page on its content, links and many other signals, not on what you put in og:title.

There is one small, direct link to Google Search. Google lists og:site_name as one of the sources it looks at when it picks the site name shown in search results, along with WebSite structured data, the title element and headings on your home page. You can read the details in Google’s site names documentation.

The bigger benefit is indirect. A clear, attractive preview gets more clicks when people share your page. More clicks mean more visitors and more chances for people to link to you or mention you. A broken preview with a missing image gets scrolled past. In my experience, fixing social previews is one of the cheapest wins on a site, because it takes an hour and it improves every share from then on.

So I put Open Graph tags in the same bucket as the other head tags on my on-page SEO checklist: not a ranking lever, but part of a page that is finished properly.

The Open Graph Tags Every Page Needs

You do not need dozens of tags. These are the ones I set on every page.

og:title

The headline shown in the preview card. It can match your page title, but it doesn’t have to. Your SEO title might include a keyword and your brand name. Your social title can be shorter and more natural, because people see it in a feed, not a list of search results.

Keep it under about 60 characters so it doesn’t get cut off on most platforms. Leave the site name out, because og:site_name and the domain already show where the link goes.

og:description

One or two sentences under the title. Some platforms show it in full, some cut it short, and some hide it on mobile. I write it to make sense even if only the first 100 or so characters show up. Often my meta description works well here too.

og:image

The most important tag, because the image is what people notice first. It must be a full, absolute URL that starts with https://. A relative path like /images/photo.jpg often fails, because the crawler doesn’t always work out the full address.

I always add the width and height tags too:

<meta property="og:image" content="https://www.example.com/images/cleaning-pricing.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A cleaner writing a price list on a clipboard" />

Facebook says that giving the width and height lets its crawler show the image right away. Without them, the very first share of a new page can appear with no image while Facebook downloads and processes it in the background. The og:image:alt tag describes the image for people using screen readers.

Og:url

The main address of the page. It should match your canonical URL (the version you want counted as the main one), with no tracking parameters. Facebook uses this URL to group shares and likes together, so a link shared with ?utm_source=newsletter still counts for the clean page.

Be careful here. If og:url points to a different page, Facebook will build the preview from that other page. I usually see this on sites where a template hard-codes the home page URL into every page.

Og:type

Tells platforms what kind of thing the page is. Use website for your home page and general pages, and article for blog posts and news. If you leave it out, Facebook treats the page as website. There are other types, such as product, video.movie or profile, but most business sites only need these two.

og:site_name and Og:locale

og:site_name is your brand or site name, like “Example Cleaning Co”. Keep it the same on every page. og:locale sets the language and region, such as en_US or en_GB. It is optional and defaults to en_US. I only set it on sites that publish in other languages.

X (Twitter) Cards and Open Graph

X uses its own tags, called Twitter Cards. The good news is that you only need one of them, because X falls back to your Open Graph title, description and image when the Twitter versions are missing.

<meta name="twitter:card" content="summary_large_image" />

This line tells X to show a large image card instead of a small square thumbnail. Without a twitter:card tag, your link may show as a small card or plain text. You can also add twitter:site with your brand’s X handle, like @examplecleaning.

Notice the difference in attributes. Open Graph tags use property="og:...", while Twitter tags use name="twitter:...". Mixing them up is a common reason a tag gets ignored.

Image Size and Format: What Actually Works

Each platform crops and displays images a little differently. One image size works well almost everywhere: 1200 x 630 pixels, which is a 1.91:1 ratio.

Here is what Facebook’s own guidance says:

• Use at least 1200 x 630 pixels so the image looks sharp on high-resolution screens.
• Images smaller than 600 x 315 pixels still show, but as a much smaller preview.
• The absolute minimum is 200 x 200 pixels.
• The file must not be bigger than 8 MB.
• Aim for a ratio close to 1.91:1 so the whole image shows in the feed without cropping.

Facebook explains this in its guide to images in link shares. Other platforms set smaller file size limits, so I aim much lower than 8 MB.

My own rules of thumb for share images:

• Keep files small. I aim for well under 1 MB. A compressed JPG at 1200 x 630 is usually enough. Some platforms, including WhatsApp, can skip large images, so smaller is safer.
• Use JPG or PNG. They work everywhere. I avoid SVG, because most platforms don’t show it.
• Keep key content in the middle. Some apps crop the image to a square or a narrower shape. Put your main subject and any text in the centre, away from the edges.
• Go easy on text. A short headline on the image can help it stand out in a feed. A paragraph of small text becomes unreadable on a phone.
• Don’t use your logo as the default for every page. A logo on a white square looks like a broken preview. A real photo or a simple branded graphic for each page works much better.

How to Add Open Graph Tags to Your Site

How you add the tags depends on how your site is built. Pick the option that fits.

WordPress

Most SEO plugins, such as Yoast SEO, Rank Math and All in One SEO, add Open Graph tags on their own. They fill in the title, description and featured image for each post. Each plugin also gives you a “Social” tab on the post editor, where you can set a different title, description or image just for social shares.

Check that only one plugin is doing this job. Some themes and social sharing plugins add their own Open Graph tags as well. Two sets of tags in one page often means the platform picks the wrong image. When I take over a WordPress site, this is one of the first things I check in the page source.

Shopify, Wix, Squarespace and Other Builders

These platforms create Open Graph tags for you. Look for a “Social sharing image” or “SEO and social” setting on each page or product, plus a site-wide default image in the main settings. Set the default image first, so no page ever shares without one.

Custom-Built Sites

Add the tags to the head of your page template, filled in with each page’s own data. Your developer only needs to do this once in the template, not page by page.

One warning for sites built with JavaScript frameworks. Social crawlers generally don’t run JavaScript. If your Open Graph tags are added by JavaScript after the page loads, Facebook and LinkedIn may never see them. The tags need to be in the HTML the server sends. Server-side rendering or pre-rendering solves this. Don’t rely on Google Tag Manager to inject them either, for the same reason.

How to Test Your Social Previews

Never assume your tags work. Test them before you share an important page. These are the tools I use:

1. Check the page source. Right-click the page and choose “View page source” (not “Inspect”, which shows the page after JavaScript runs). Search for og: and make sure each tag appears once, with the right values.
2. Use the Facebook Sharing Debugger. Paste your URL into the debugger at developers.facebook.com/tools/debug. It shows the preview, lists the tags it found and warns you about problems such as a missing image or a wrong og:url.
3. Use LinkedIn Post Inspector. At linkedin.com/post-inspector, paste your URL to see how LinkedIn reads it. It also refreshes LinkedIn’s stored copy of the page.
4. Test X in the post composer. X’s old Card Validator no longer shows previews. I paste the link into a new post, check the card, and then delete the draft without posting.
5. Send the link to yourself. For WhatsApp, Slack or iMessage, I paste the link into a chat with myself or a test channel. It is quick and shows exactly what other people will see.

Why Your Preview Shows the Wrong Image or Old Text

This is the question I hear most about Open Graph tags. Usually the cause is one of these.

The Platform Cached an Old Version

Platforms save a copy of your preview the first time a link is shared. If you change the image or title later, they keep showing the old version for a while. In the Facebook Sharing Debugger, click “Scrape Again” to make Facebook fetch the page fresh. LinkedIn Post Inspector refreshes LinkedIn’s copy when you inspect the URL.

Facebook also caches images by their URL. If you replace an image but keep the same file name, Facebook may keep the old one. I give a new image a new file name, for example adding -v2, and update the tag. Keep the old image online too, because past shares may still point to it.

Refreshing does not change posts that were already published with the old preview. It only affects new shares.

The Crawler Can’t Reach Your Page or Image

If the crawler is blocked, it can’t read your tags. Common causes are:

• A rule in robots.txt that blocks the crawler or your images folder. My robots.txt guide explains how to check your rules.
• A firewall, security plugin or bot protection setting that blocks unknown bots. Facebook’s crawler identifies itself as facebookexternalhit, so check it is allowed.
• A page behind a login or a password, such as a staging site.
• An image hosted on a domain that blocks hotlinking (loading files from another site).

The Tags Are Broken or Duplicated

Look for a relative image URL, an http:// image on an https:// site, an image smaller than the platform minimum, or two different og:image tags from a theme and a plugin. If you do want several images, you can list more than one og:image tag on purpose, and platforms usually pick the first. But accidental duplicates from two plugins are a different thing, and I always remove them.

Common Open Graph Mistakes to Avoid

Beyond the problems above, these are the mistakes I see most often on audits:

• The same title and image on every page. This happens when a template uses the site-wide default everywhere. Every share then looks identical, which tells people nothing about the page.
• og:url pointing to the home page. Every page then previews as your home page on Facebook.
• No default image. If a page has no featured image and there’s no fallback, the platform may grab any image on the page, including an ad or an icon.
• Forgetting old pages. Sites often fix new posts but leave years of older posts with no share image. I set a sensible default first, then add proper images to the pages that get shared most.

My Quick Open Graph Setup Routine

When I set up Open Graph tags on a site, I work in this order:

1. Make sure only one tool (an SEO plugin, the platform or the template) outputs Open Graph tags.
2. Set a site-wide default image at 1200 x 630 pixels, plus og:site_name.
3. Check the template fills in og:title, og:description, og:image and og:url from each page’s own data, with og:url matching the canonical URL.
4. Set og:type to website for the home page and article for posts, and add twitter:card set to summary_large_image.
5. Add custom social images and titles to the pages people share most, like key services, popular posts and offers.
6. Test a few page types in the Facebook Sharing Debugger and LinkedIn Post Inspector, and fix anything they flag.

After that, it mostly runs itself, as long as each new post gets a decent featured image.

Wrapping Up

Open Graph tags decide how your pages look every time someone shares them, on almost every social app and messenger. They won’t move your Google rankings, but they shape whether people click when your link turns up in a feed or a chat. Start with the core tags, use a 1200 x 630 image, add twitter:card, and always test with the platform tools before a big share.

If you are working through your site’s technical basics, the next step is to make sure your page structure is just as clear. My guide to heading tags and SEO shows how to set up H1 to H6 so both readers and search engines can follow your pages.