Open Graph and X Cards: Make Shared Links Look Right

Open Graph tags decide how a link looks when someone shares it. Paste a page address into a social network, a messenger or a team chat, and the preview card that appears, with its image, headline and short description, usually comes from a few lines in the page’s head section. If those lines are missing or wrong, the preview shows a blank box, a cropped logo or a generic title, and far fewer people click. For a business that shares every new article, product and announcement, this is one of the cheapest improvements available.

This guide explains what Open Graph and X Cards are, which tags matter, how to size images, how to test and refresh previews, and how the tags affect automated posting. It is written for site owners, marketers and developers, and it connects to the way tools such as PostRSS pick images for automatic posts.

What Open Graph and X Cards Actually Are

Open Graph is a set of meta tags originally created by Facebook and now used by almost every platform that shows link previews. The tags live in the head of the HTML page and describe the page as an object: its title, type, image, address and description. The protocol is documented at ogp.me.

X, formerly Twitter, has its own card tags, which start with “twitter:”. X falls back to Open Graph tags when its own are missing, so most sites need only a few extra lines. LinkedIn, Telegram, Slack, Discord, WhatsApp, iMessage and many other services read Open Graph tags as well, sometimes with their own quirks.

Search engines do not use Open Graph tags as a direct ranking factor. The benefit is indirect but real: a good preview earns more clicks and more shares, which brings more traffic to the page and more people who may link to it.

The Tags That Matter

You do not need dozens of tags. A reliable base set covers nearly every platform. The table lists the tags to include on every page that can be shared.

X documents its own tags in its developer pages for Cards. In practice, adding twitter:card and keeping the Open Graph tags complete is enough for most sites. Facebook describes how its crawler reads these tags in the sharing documentation for webmasters.

Choosing and Sizing the Share Image

The image is the most important element of a link preview. It fills most of the card, and it is what people notice first in a busy feed.

• Use a landscape ratio of about 1.91 to 1. A common size is 1200 by 630 pixels. A larger image of the same ratio, for example 2400 by 1260, looks sharper on high-density screens.
• Keep important content in the middle. Some platforms crop the edges or show a square version in lists, so place text and the main subject well inside the frame.
• Keep the file reasonably small. Crawlers may time out on very large images. Aim for a few hundred kilobytes by using JPEG or optimized PNG.
• Use a public address. The image must be reachable without logging in, and the address must start with https.
• Do not rely on a logo alone. A logo on a blank background tells people nothing about the page. A distinct image for each article, with a readable headline if you add text, performs better.
• Avoid tiny text. Previews are often shown small on phones, so use large, high-contrast lettering.

If you publish many pages, generate share images from a template so that every article gets a consistent but unique picture. Many content management systems let you set a default share image and override it per page.

Writing the Title and Description for Sharing

The title and description in a preview are read in a different context than a search result. In a feed, people are scanning, and the card competes with friends’ photos and other links. A few principles help.

1. Lead with the benefit or the question. “How to cut checkout abandonment” is clearer than the brand name followed by a category label.
2. Do not duplicate the post text. If the post already says the headline, the card description can add a new fact, a number or a promise of what the reader will learn.
3. Keep it honest. Misleading previews may get clicks once, but they harm trust and increase bounce rates.
4. Test the length. Titles beyond roughly 60 to 70 characters are often truncated on mobile.

It is fine for the Open Graph title to differ from the search title tag. The search title is optimized for results pages, as described in our article on title tags and meta descriptions, while the Open Graph title is optimized for a social feed.

How to Add the Tags

The method depends on your platform.

• WordPress. Most SEO plugins generate Open Graph and card tags automatically and let you set a share image and text for each post. Check the generated output rather than assuming it is right.
• Online store platforms. Shopify, WooCommerce and similar systems add basic tags, but they often use the first product image or a low-resolution version. Review a few product pages.
• Custom sites. Add the tags to the head section of your page template and fill the values from the page data. Make sure every value is escaped correctly, so a quotation mark in a title does not break the markup.

A minimal set in the head looks like this in words: a title, a description, an image address, the page address, a type, a site name and a card type. Put them in the server-rendered HTML. Crawlers that build previews usually do not run scripts, so tags added only by JavaScript are often ignored.

Testing and Refreshing Previews

Platforms cache previews, sometimes for days. After you change tags, an old preview may continue to appear for links that were already shared.

1. View the source. Open the page, view the HTML source and confirm that the tags are present and the image address opens in a browser.
2. Use platform debuggers. Facebook offers a sharing debugger that shows how its crawler sees a page and lets you request a fresh scrape. LinkedIn has a similar post inspector. X now shows the card when you compose a post.
3. Test in real messengers. Send the link to yourself in Telegram, Slack or WhatsApp, because each reads the tags slightly differently.
4. Check status codes. The page and the image must return a success status without redirects through a login or consent wall.
5. Watch for blocking. If robots.txt or a firewall blocks the social crawlers, no preview is generated.

You can also check a page quickly with a tool that reads titles, descriptions and Open Graph tags. The Page and SEO audit tool in Ask Mio, described in our article on quick website checks in one chat, lists the Open Graph tags it finds on a page along with the title, headings and canonical address.

Open Graph and Automated Posting

If you publish through an RSS feed and an automatic poster, the image in the final post depends on your tags. PostRSS takes the picture from the feed item or from the page’s Open Graph tags, so a well-prepared og:image means each automatic post carries the real article image instead of a blank link. The same logic applies to networks that build their own link cards from your page: they read your tags when the post is published.

That makes a few habits worthwhile for anyone who automates sharing.

• Set the share image before the post is published. If the tags are added later, the first preview may be cached without an image.
• Keep the feed and the page consistent. If the feed provides one image and the page tags another, you may see different pictures on different networks.
• Add tracking parameters correctly. Links with campaign parameters should still point to a page whose og:url is the clean canonical address. Our guide to UTM parameters for auto-posted social traffic explains how to do it.
• Troubleshoot missing images step by step. If posts appear without pictures, our guide to troubleshooting RSS feeds lists the common causes.

Common Mistakes

• Relative image addresses. Always use a full address starting with https.
• The same image on every page. A default is a fallback, not a strategy. Unique images produce better previews and make a feed look more varied.
• Images that are too small. Below the minimum size, platforms may show a small thumbnail beside the text instead of a large card.
• Tags added by JavaScript only. Many crawlers do not execute scripts.
• Conflicting tags from two plugins. Two sources of Open Graph tags can output duplicates, and crawlers may pick the wrong one.
• Forgetting the cache. After a fix, use the debugger to refresh the preview before you decide that nothing has changed.
• Using the preview for the wrong promise. The image and text should reflect what is on the page.

If you would like a review of your tags, share images and sharing workflow, you can contact us.

Frequently Asked Questions

Do Open Graph tags affect SEO?

They are not a direct ranking factor. They influence how your links look when shared, which affects clicks, shares and the traffic and links that can follow.

What size should my Open Graph image be?

Use a landscape image with a ratio of about 1.91 to 1. A size of 1200 by 630 pixels is the usual minimum recommendation, and a larger image of the same ratio looks sharper on modern screens.

Do I need separate X Card tags?

Usually only one. X falls back to Open Graph for title, description and image, so adding twitter:card with the value summary_large_image is normally enough to get a large image card.

Why does my old preview still show after I changed the tags?

Platforms cache previews. Use the sharing debugger of the network or wait for the cache to expire. Links already posted may keep the old card even after a refresh.

Can Open Graph tags be different for each page?

They should be. Each page needs its own title, description, image and address. A site-wide default is only a safety net for pages where nothing more specific is set.

Why does my preview have no image on some networks?

Typical causes are an image that is too small, an address that is not public, a redirect or login in front of the image, a blocked crawler or tags that were added only by JavaScript. Check each in turn.

The Bottom Line

Open Graph tags are a small piece of markup with a large effect on how your content travels. Include the title, description, image, address, type and site name on every shareable page, add a card tag for X, and give each page a purpose-made landscape image. Render the tags on the server, test with the platforms’ own debuggers and real messengers, and remember that cached previews need a refresh. If you automate posting, good tags mean every post goes out with the right picture and headline without extra work. Spend an hour fixing the template once, and every future link you share will look better.