Open Graph Preview

When you share a link on WhatsApp, Facebook, LinkedIn or X, the app builds a preview card from the page’s Open Graph tags. This tool fetches any page, shows you how the card will look on each app, lists every tag it found and tells you which ones are missing or broken.

What Open Graph tags are

Open Graph is a set of meta tags created by Facebook that almost every app now reads to build link previews. When someone pastes your link, the app looks for:

• og:title: the headline on the card.
• og:description: one or two lines of text under the title.
• og:image: the picture on the card.
• og:url: the main address of the page.
• og:type: website, article, product and so on.
• og:site_name: the name of your site.

X also reads its own twitter:card tag to decide between a large image card and a small summary card, and falls back to Open Graph for the rest.

Without these tags, apps guess. They may pick a logo, an ad image, a random line of text or nothing at all. A good preview looks trustworthy and gets far more clicks, especially on WhatsApp, where most links in Pakistan are shared.

How to use the preview tool

1. Paste the full page address, like https://example.com/blog/post/. You can test any public page.

2. Press Preview link. The tool loads the page like a social app would.

3. Look at the three cards: WhatsApp, Facebook and LinkedIn, and X. They show the title, description, image and domain.

4. Read the tag list below the cards. Every important tag is shown with its value, or marked Missing.

5. Fix what is missing, publish, and test again.

The ideal share image

The tool also checks whether the image address actually loads. A broken image link is one of the most common reasons a preview shows no picture.

Why the preview on WhatsApp is different

WhatsApp reads Open Graph tags but shows them in its own style: a small image beside the text for some links, or a wide image on top for others, depending on image size. It also caches previews. If you shared a link before fixing the tags, WhatsApp may keep showing the old preview for a while. Sharing the link fresh in a new chat, or adding a small query string like ?v=2 to the end, usually shows the new version.

Facebook caches previews too. Use the Facebook Sharing Debugger, paste your URL and press Scrape Again to refresh it. LinkedIn has a similar Post Inspector tool.

Common problems and fixes

No image appears

Either og:image is missing, the address is wrong, the image is too small, or the server blocks the app’s crawler. Add a 1200 x 630 image as og:image with a full https address, and make sure security plugins do not block social crawlers.

The wrong image appears

Without og:image, apps pick any image from the page, often the logo or an ad. Set og:image for every important page. In WordPress, SEO plugins use the featured image automatically, so set a good featured image on every post.

The title is the site name only

The page has no og:title, and the HTML title is generic. Write a clear title per page with the Meta Tag Generator.

The description is a cookie notice or menu text

og:description and the meta description are missing, so the app took the first text it found. Add a real description.

The preview shows an old version

The app cached it. Use the platform’s debugger tool to refresh, or share the link with a small change at the end.

Different titles on different apps

Some apps use og:title, others fall back to twitter:title or the HTML title. Set og:title and keep the HTML title close to it for consistent results.

Setting Open Graph tags in WordPress

• Yoast SEO and Rank Math add Open Graph tags automatically. In each post, the Social tab lets you set a custom title, description and image for sharing.
• Themes with built-in SEO, like the one on this site, print Open Graph tags for every page using the featured image and description.
• No plugin and no theme support: add the tags from the Meta Tag Generator into the page head, or install a lightweight SEO plugin.

Avoid running two systems at once. If both a plugin and your theme print Open Graph tags, apps see two sets and may pick the wrong one.

Canonical and robots in the results

The tool also shows the page’s canonical URL and robots tag. These are not part of the preview, but they are worth a quick look: a canonical pointing to the wrong page, or a stray noindex, can hide a page from search even while its preview looks perfect.

Writing a share title and description that get clicks

Your Open Graph title and description do not have to be the same as your search title and meta description. Search snippets are read by people who are already looking for something. Shared links are seen by people who were not searching, scrolling through chats and feeds. So share text can be a little more human and curious:

• Search title: “Domain Availability Checker: Is My Domain Taken?”
• Share title: “Is your dream domain name still free? Check in 2 seconds”

Keep it honest. Clickbait that the page does not deliver makes people stop clicking your links.

Designing a share image that works

1. Start with a 1200 x 630 canvas in any design app.

2. Use a bold background colour that matches your brand, so your links are recognisable in a busy chat.

3. Add a short headline, five words or fewer, in large text.

4. Add your logo or site name in a corner.

5. Keep important parts in the centre. Some apps crop the sides or show a square thumbnail.

6. Export as JPG under about 300 KB and set it as the featured image or og:image.

A template that you reuse for every post saves time and gives all your shared links a consistent look.

Testing before you share widely

Before you send a link to a big WhatsApp group or post it on a page with many followers, run it through this tool. Fixing a preview after hundreds of people have seen a broken one is too late, because many apps keep the first version they cached. Make testing part of your publishing routine: publish, preview here, fix, then share.

Open Graph for different page types

Set og:type to match the page. Use website for the home page and general pages, article for blog posts and guides, and product for shop items where your plugin supports it. For articles, adding the published time and author helps some apps show extra details. For products, a clear photo on a plain background works better than a busy lifestyle image at small sizes.

Frequently asked questions