SEOLyzerPro

Open Graph and Twitter Cards: Fix Your Link Previews

By: Safdar Waraich | Last updated: 31 October 2026

You paste a link into a chat, and instead of a neat card with a picture and a headline, you see a bare web address. Or worse, the card shows the wrong image, an old title, or a logo that has nothing to do with the page. Visitors judge that preview in a second, and many will skip a link that looks broken or untrustworthy.

The good news is that you control these previews, and the fix is a handful of small tags in your page’s code. In this guide you will learn what Open Graph and Twitter Card tags are, what each one does, which image size to use, how to add the tags, how to test them, and what to do when a platform keeps showing an old preview.

What is a link preview?

A link preview (also called a link card or an unfurled link) is the small box that appears when you share a web address on a social network or in a messaging app. It usually contains a picture, a title, a short description and the name of the website.

The platform does not invent this box. When someone shares your link, the platform’s crawler visits your page, reads some special tags in the HTML head, and builds the card from them. If the tags are missing, the platform guesses. It might pick the wrong image, cut the title in an odd place, or show nothing but the address.

What is Open Graph?

Open Graph is a set of tags that Facebook introduced in 2010. A page uses them to say: “This is my title, this is my description, and this is the image to show when someone shares me.” The idea spread, and today many services read these tags, including Facebook, LinkedIn, WhatsApp, Telegram, Slack, Discord, iMessage and many others.

The tags start with og: and look like this:

<meta property="og:title" content="Free Word Counter">
<meta property="og:description" content="Count words, characters and sentences as you type.">
<meta property="og:image" content="https://www.example.com/images/word-counter.jpg">

What are Twitter Cards?

Twitter Cards are a similar set of tags for the platform now called X. They start with twitter:, and the name has stayed the same even after the rebrand. The most important one is twitter:card, which chooses the layout:

• summary shows a small square image next to the title and description.
• summary_large_image shows a wide image above the title and description. It takes more space in the feed and usually attracts more attention.

If you do not add Twitter tags, X can fall back to your Open Graph tags for the title, description and image. But the large layout needs twitter:card set to summary_large_image. Without it, X shows the small card, even if your image is big.

Do these tags help SEO?

Not directly. Google does not use Open Graph or Twitter Card tags as a ranking signal. They affect how your page looks when it is shared, not where it ranks in search.

That does not make them unimportant. A clear preview makes people more likely to click a shared link, and more clicks mean more visitors. When your link is shared in groups and chats, the preview is your first impression. If you use WhatsApp, Telegram or any other chat to send your own pages to friends and clients, the same tags decide how those messages look. A good preview also makes a page look more professional and trustworthy, which helps a new site.

The tags you need

A complete example

Here is a full set for a tool page. Put it inside the head section of the page:

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Free Word Counter">
<meta property="og:description" content="Count words, characters and sentences as you type. Free, no sign-up needed.">
<meta property="og:url" content="https://www.example.com/word-counter">
<meta property="og:image" content="https://www.example.com/images/word-counter-1200x630.jpg">
<meta property="og:site_name" content="Example Site">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Word Counter">
<meta name="twitter:description" content="Count words, characters and sentences as you type. Free, no sign-up needed.">
<meta name="twitter:image" content="https://www.example.com/images/word-counter-1200x630.jpg">

You can generate these tags without typing them by hand, using the Open Graph Generator and the Twitter Card Generator. If you also need the normal title and description tags, the Meta Tag Generator creates them.

The image: the part that matters most

People notice the picture first, so it is worth getting right.

Size. Use an image of 1200 × 630 pixels, which has a ratio of about 1.91 to 1. This is the size that Facebook recommends, and it works well on LinkedIn, WhatsApp, Telegram, Slack and X. X’s large card officially prefers a 2:1 ratio (for example 1200 × 600), but a 1200 × 630 image also displays well there, so one image is enough for most sites. Very small images, below about 600 × 315, may be shown as a small thumbnail instead of a large card, and some platforms ignore very small images completely.

Use an absolute address. The value of og:image must be a full web address starting with https://. A relative path such as /images/card.jpg is not reliable, because the crawler does not know which site it belongs to.

Keep the file reasonably small. Platforms set limits on file size, commonly around 5 to 8 MB, but a card image should be far smaller. Aim for a few hundred kilobytes, so that crawlers fetch it quickly. If you need to reduce or change the size, use the Image Resizer and, if necessary, the Image Converter.

Use a common format. JPG and PNG are supported everywhere. Other formats may work on some platforms and fail on others, and animated formats and SVG files are generally not shown as card images. When in doubt, use JPG for photos and PNG for graphics.

Keep the important part in the centre. Different platforms crop the edges slightly. Place text and logos away from the edges, and use large, clear letters, because the card is often seen on a small phone screen.

Make sure the image is public. If the file is behind a login, or if your robots.txt file blocks the folder that holds it, the crawler cannot fetch it, and the card will have no picture. (Our guide to robots.txt explains how this happens.)

Use the same host. If your pages live on https://www.example.com, host the image on the same address, not on a different version of the domain. A mismatch can cause an extra redirect, and some crawlers do not follow it.

Do not mislead. The picture should show what the page is about. A card that promises one thing and delivers another loses trust fast.

Writing the title and description

• Title. Keep it clear and short, ideally under about 60 characters, so that it is less likely to be cut off. It can be the same as your page title, or a slightly more engaging version.
• Description. One or two sentences are enough. Some platforms show only a part of it, so put the most important words first. A length of around 150 to 200 characters is a safe range, but platforms differ.
• Match the page. What you promise in the card must be what the page delivers.
• Write for people. The preview is a small advertisement for your page. Our guide on writing a meta description covers many ideas that work here too.

Different pages, different cards

Each important page should have its own title, description and image where possible. A tool page, an article and your home page are not the same, and sharing them should not produce the same card.

For the pages where you cannot make a special image, create one default image for the whole site, such as your logo on a clean background at 1200 × 630. It gives every page a presentable fallback.

Where to put the tags

The tags must be inside the <head> section of the page, and each page needs its own set. How you add them depends on your system:

• In plain HTML or PHP, place them in the head, using each page’s own values.
• In a content management system or an SEO plugin, look for fields called “social” or “Open Graph” in the page settings.
• In an admin panel with fields such as page title and short description, find out whether the system already creates the social tags from those fields. View the page source to see what it produces, and add what is missing.

Be careful about duplicates. If both a theme and a plugin add Open Graph tags, a platform might read the wrong set. Keep only one source for each tag.

How to test your tags

1. View the page source. Right-click the page, choose “View page source”, and search for og:. Check that each tag appears once and has the right value.
2. Use the Meta Tags Analyzer. Enter the address of your page and read the tags it finds, including the image address and any warnings.
3. Open the image address in your browser. It should load without a login.
4. Use the platforms’ own tools. Facebook offers the Sharing Debugger, and LinkedIn offers the Post Inspector. Both show the preview and let you fetch the page again. X has had a card validator in the past, but the tools available to you can change, so check what is currently offered. WhatsApp does not provide an official debugger, so test by sharing the link to yourself in a chat.
5. Test on a phone. Many people will see your card on a small screen.

Why do I still see the old preview?

This is the most common frustration. Platforms store a copy of the preview, so after you change your tags or your image, the old card can stay for hours or days. The fix is to ask the platform to fetch the page again.

• On Facebook, open the Sharing Debugger, enter the address, and choose to scrape it again.
• On LinkedIn, enter the address in the Post Inspector.
• On X and WhatsApp, there is usually no quick button, so the update may take longer. For a quick test only, you can share the address with a harmless extra parameter at the end (such as ?v=2), which many platforms treat as a new address. Do not use this as your permanent link.

Also remember that a card that was already posted in a chat or a feed does not change. The new tags apply to new shares.

Common problems and how to fix them

A quick checklist

• Does each page have og:title, og:description, og:image and og:url?
• Is the image 1200 × 630, public, and given as a full https address?
• Is twitter:card set to summary_large_image if I want the big card?
• Are the tags in the head, and does each appear only once?
• Does the preview describe the page honestly?
• Did I test with the Meta Tags Analyzer and at least one platform’s debugger?
• Do I have a default image for pages without their own?
• Did I check how the card looks on a phone?

Common questions

Are Open Graph tags the same as meta tags for SEO?
They are both meta tags in the head, but they do different jobs. SEO meta tags help search engines, and Open Graph tags control how shared links look.

Do I need both Open Graph and Twitter Card tags?
It is best to have both. X can use Open Graph tags if the Twitter tags are missing, but twitter:card is needed for the large layout.

What is the best image size?
1200 × 630 pixels works well almost everywhere.

Can I use the same image for every page?
You can, as a fallback, but unique images for important pages work better.

Will a good preview improve my Google ranking?
No, not directly. It can bring more clicks from the people who see your shared links.

Why does WhatsApp show an old image?
WhatsApp keeps previews in a cache. It can take a while for a new image to appear.

Final thoughts

Link previews are a small detail with a big effect on first impressions. Write a clear title and description, make one good 1200 × 630 image, put the tags in the head of each page, and test the result.

Start with your home page and your three most important pages. Create their tags with the Open Graph Generator, check them in the Meta Tags Analyzer, and share each link with yourself to see the card.