Why WordPress and WooCommerce links do not show correctly on Facebook and social media

You publish a new blog post, product, landing page, or WooCommerce offer. Everything looks fine on your website. The title is correct, the image looks good, and the page loads normally.

Then you copy the link and share it on Facebook, Messenger, LinkedIn, WhatsApp, Slack, Discord, X, or Bluesky.

And the preview looks wrong.

Maybe the image is missing. Maybe Facebook shows an old product photo. Maybe LinkedIn pulls the wrong title. Maybe WhatsApp shows no preview at all. Sometimes the link looks like a plain URL, which is not exactly great if you are trying to get clicks.

This is a very common WordPress and WooCommerce problem. The good news is that it is usually not difficult to fix once you understand how social media previews work.

Social media platforms do not see your page like a normal visitor

When you open your website in a browser, you see the final page: text, images, layout, menus, products, buttons, and maybe some content loaded by JavaScript.

Social media platforms do something different.

When you share a URL, platforms like Facebook, LinkedIn, WhatsApp, Slack and Discord send a crawler to your website. That crawler reads the HTML of the page and looks for specific metadata. The most important metadata is usually called Open Graph.

Open Graph metadata tells social platforms what title, description, image, and URL should be used for the link preview.

A simplified example looks like this:

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="Short page description" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page-url/" />

If this information is missing, duplicated, blocked, outdated, or badly configured, social platforms have to guess. And when they guess, they often guess badly.

That is when Facebook picks a random logo from your footer, WooCommerce product links show the wrong image, LinkedIn shows an old title, or WhatsApp shows no preview at all.

First, check how your link looks

Before changing plugins, clearing caches, or editing product images, it is worth checking what your page is actually sending to social media crawlers.

I created a tool for that here:

• Social Media Preview Tool

Paste your WordPress page, blog post, or WooCommerce product URL into the tool. It will show how the link may appear on different platforms such as Facebook, X, Bluesky, LinkedIn, Slack, Discord and others.

It also checks the metadata that social platforms usually care about, including Open Graph tags and Twitter Card tags.

This is useful because the problem is not always visible when you simply open the page in your browser. Your page might look perfect to you, but still have missing or incorrect social metadata in the source code.

The tool can help you notice problems such as a missing preview image, wrong title, missing og:image, incomplete Twitter Card data, or metadata that only appears after JavaScript loads.

That last point matters. Most social crawlers expect the metadata to be present in the initial HTML response. If your metadata only appears after JavaScript runs, some platforms may not see it.

The easiest WordPress fix is usually an SEO plugin

In most WordPress websites, you should not manually add Open Graph tags to your theme.

The easier solution is to use an SEO plugin that generates this metadata for you. I usually recommend Yoast SEO because it handles Open Graph data for posts, pages, WooCommerce products, categories, archives, and the homepage.

After installing Yoast SEO, check that social sharing metadata is enabled.

Go to:

Yoast SEO → Settings → Site features → Social sharing

Make sure Open Graph data is turned on.

Yoast usually enables this by default, but if your previews are broken, it is still worth checking. Sometimes settings get changed, another plugin takes over metadata, or a theme/plugin conflict prevents the correct tags from appearing.

Once enabled, Yoast can automatically generate the important social tags, including title, description, image, and URL.

Featured images matter more than many people think

A missing or weak featured image is one of the most common reasons WordPress links look bad on social media.

If a post or page does not clearly tell Facebook which image to use, Facebook may choose whatever it finds. That could be your site logo, a banner, a footer icon, a payment method image, or something completely unrelated.

For WooCommerce, this can be even more noticeable. A product link without a proper product image can look unfinished or untrustworthy when shared.

For each important post, page, or product, make sure you have a good featured image or product image. Then, for important pages, set a custom social image in Yoast SEO instead of relying only on the default.

In the WordPress editor, scroll to the Yoast SEO section and look for the social appearance settings. There you can set a custom Facebook title, description, and image. Depending on your Yoast setup, you may also see settings for X / Twitter.

This is helpful because the best SEO title is not always the best social media title.

For example, a WooCommerce product title might be:

Premium Handmade Wooden Desk Organizer – Oak Finish – Free Delivery

That may be fine on the product page, but it can feel too long in a Facebook feed.

A better social title might be:

Handmade Wooden Desk Organizer

Social previews work best when they are simple, clear, and easy to scan.

Set a default image for the whole website

Not every page on your website will have a perfect custom image. That is why you should also set a default social sharing image.

In Yoast SEO, go to:

Yoast SEO → Settings → Social sharing

Add a default image for your site.

This image can be used when a page, post, category, archive, or product does not have its own social image.

A good default image is much better than leaving platforms to choose random images from your layout. It is especially useful for older blog posts, category pages, product categories, custom post types, and pages that were created before your SEO settings were properly configured.

Your default image does not need to be complicated. A clean branded image with your website name and a simple visual is usually enough.

Recommended image size for social previews

For most social sharing previews, a safe image size is:

1200 × 630 px

This size works well for Facebook, LinkedIn, and many Open Graph previews.

Try to use a clear JPG or PNG image with a reasonable file size. Keep the important part of the image near the center because different platforms may crop previews slightly differently.

Avoid using very small logos as the main preview image. Also avoid images that are too tall, too narrow, or full of tiny text. Remember that most people will see your preview on a phone, so the image needs to be understandable at a small size.

For WooCommerce products, use a clean product image with enough space around the item. If you add text to the image, keep it short and readable.

Why Facebook keeps showing the old image

One of the most confusing parts of fixing social previews is caching.

You may update the image in WordPress, clear your website cache, test the page again, and still see the old preview on Facebook.

This does not always mean your website is still wrong. It may mean Facebook is showing a cached version of the preview.

To fix this, use Facebook’s official tool:

• Facebook Sharing Debugger

Paste your URL, click Debug, then click Scrape Again.

This tells Facebook to check the page again and refresh its saved preview data.

Before doing that, it is a good idea to clear your WordPress cache, hosting cache, and CDN cache if you use something like Cloudflare. Otherwise Facebook may scrape the same old version again.

If Facebook still refuses to update the image, try uploading the image again with a new file name. For example, instead of reusing:

product-image.jpg

upload it as:

product-image-new.jpg

This works because social platforms sometimes remember the old image URL even after the file itself has changed.

Each platform has its own cache and habits

Open Graph metadata is widely used, but every platform behaves a little differently.

Facebook has its Sharing Debugger. LinkedIn has its Post Inspector. X has its Card Validator. Slack, Discord, WhatsApp and other apps also read preview metadata, but their caching behavior can vary.

That is why I suggest starting with my:

• Social Media Preview Tool

Use it to check whether your page metadata looks correct in general. Then, if one specific platform still shows old information, use that platform’s own debugger or inspector.

Useful external tools:

• Facebook Sharing Debugger

• LinkedIn Post Inspector

• X Card Validator

• Open Graph Protocol

WooCommerce product links need special attention

WooCommerce product pages often have more moving parts than normal blog posts.

A product page may include a product image, gallery images, related products, review stars, price, stock status, structured data, categories, and dynamic content from plugins.

Social media platforms usually do not care about most of that. They mainly want a title, description, image, and URL.

If your WooCommerce product link does not show correctly, first check whether the product has a proper product image and whether the og:image points to that image.

If Facebook shows your homepage image instead of the product image, it usually means the product page does not have its own correct Open Graph image. Set a product image, then set a custom social image in Yoast SEO if needed.

Also make sure the product is public. If the product is private, hidden behind a membership plugin, protected by a coming soon plugin, or blocked by a firewall rule, social crawlers may not be able to read it.

A normal visitor who is logged in as admin may see the product perfectly. Facebook may see a login page, maintenance page, security challenge, or nothing useful at all.

Security and caching plugins can cause preview problems

Caching plugins are good for speed, but they can make preview debugging confusing.

After changing titles, descriptions, or images, always clear your cache. This includes WordPress cache, hosting cache, object cache, and CDN cache if you use one.

Security plugins and firewall services can also block social media crawlers. Cloudflare settings, bot protection, hotlink protection, rate limiting, country blocking, or “under attack” mode can prevent platforms from reading your page or images.

If a social platform cannot access your HTML or image, it cannot create a proper preview.

A quick test is to open the preview image URL in a private browser window. If the image does not load without being logged in, social platforms may not be able to load it either.

Common issues and fixes

Facebook shows the wrong image

This usually means the page does not have a correct og:image, or Facebook cached an older version.

Add a featured image, set a custom social image in Yoast SEO, clear your cache, test the page with the Social Media Preview Tool, and then refresh the preview with Facebook Sharing Debugger.

Facebook shows an old image

This is usually Facebook cache.

Clear your website cache first. Then use Facebook Sharing Debugger and click Scrape Again. If the old image still appears, upload the new image with a different file name.

No image appears

This can happen when the image is missing, too small, blocked, or not included in the metadata.

Use a 1200 × 630 px image, make sure it is public, and check that your page has an og:image tag. Also make sure the page and image return a normal HTTP 200 response and are not blocked by security settings.

WooCommerce product image does not show

Check that the product has a product image and that the product is published publicly. Then check the social metadata using the preview tool. If needed, set a custom social image in Yoast SEO for that product.

Facebook shows the homepage image instead of the product image

This usually happens when the product page does not provide its own social image.

Add or update the product image, set a custom social image in Yoast SEO, clear cache, and scrape the URL again.

The title is wrong

Social platforms often use og:title, not just the browser title.

Update the WordPress title, Yoast SEO title, and Yoast social title. Then clear cache and retest.

The description is missing or bad

The social description usually comes from og:description.

Add a clear meta description in Yoast SEO. For important pages, add a custom social description too. Keep it short, human, and useful.

X does not show a large image card

X often uses Twitter Card metadata. For a large image preview, your page should usually have twitter:card set to summary_large_image.

Yoast SEO can generate this metadata. After updating it, test with the X Card Validator and also check the page using the Social Media Preview Tool.

LinkedIn shows old information

LinkedIn caches previews too.

Update your Open Graph metadata, clear your cache, then use the LinkedIn Post Inspector to refresh the URL.

WhatsApp shows the wrong preview

WhatsApp can use Open Graph metadata, but it may cache previews differently.

Make sure your og:title, og:description, and og:image are correct. Then test the link in a new chat.

Slack or Discord show no preview

Slack and Discord usually need the same basic metadata: title, description, image, and a public page URL.

If there is no preview, check if the page is blocked, redirected too many times, protected by login, or missing Open Graph tags.

FAQ

Do I need Open Graph tags for every WordPress page?

If you want your links to look good on social media, yes.

You do not need to write them manually. A plugin like Yoast SEO can generate them automatically.

Is Yoast SEO required?

No. Yoast SEO is just an easy and popular option.

Other SEO plugins can also create Open Graph metadata. The important thing is that your page outputs correct og:title, og:description, og:image, and og:url tags.

Can two SEO plugins break social previews?

Yes.

Using multiple SEO plugins at the same time can create duplicate Open Graph tags. When platforms see duplicate metadata, they may choose the wrong version.

Use one plugin to handle your SEO and social metadata.

What is the best image size for social previews?

A good general size is 1200 × 630 px.

It works well for most Open Graph previews and is large enough to look good on high-resolution screens.

Can I use the same image for Facebook, LinkedIn and WhatsApp?

Yes, in most cases.

A 1200 × 630 px image is a safe general choice. Just keep the important content near the center because platforms may crop previews differently.

Why does WooCommerce product price not show in the preview?

Most social previews show only title, description, image, and URL.

They usually do not show WooCommerce price, stock status, reviews, or product variations. Product price display in Google search is a separate topic and depends more on structured data / schema markup.

Does JavaScript metadata work for social previews?

Do not rely on it.

Most social crawlers expect metadata to be available in the original HTML response. If the metadata only appears after JavaScript runs, some platforms may miss it.

The Social Media Preview Tool can help you check what metadata is visible in the server-rendered HTML.

Final checklist

Before sharing your WordPress or WooCommerce link again, make sure the page has a clear title, a good description, and a proper social image.

Use Yoast SEO or another SEO plugin to generate Open Graph metadata. Add custom social images for important posts, pages, and products. Use a 1200 × 630 px image when possible. Clear your website cache after making changes.

Then test the URL with the Social Media Preview Tool. If Facebook, LinkedIn, or X still shows old information, use the official debugger for that platform and refresh the preview.

Once the metadata is correct, the image is accessible, and the platform cache is refreshed, your WordPress posts, pages, and WooCommerce products should look much better when shared on social media.