Open Graph Tags: Better Link Previews on Social Media
Learn how Open Graph tags control your social share previews, the correct image sizes for each platform, and how to fix and refresh cached link previews.
8 min read
··Updated: 24 May 2026·By Helperzy Team
When you share a link on social media, the preview card that appears, the image, title, and description, is not chosen by the platform at random. It is controlled by Open Graph tags in your page's code. Get them right and your links look polished and clickable. Get them wrong, or omit them, and your shares appear as bare URLs or grab the wrong image entirely. This guide explains how Open Graph tags work, the correct image sizes for great previews, how Twitter Cards relate, and the frequently frustrating problem of cached previews that refuse to update.
What Open Graph Tags Are
Open Graph is a protocol originally created by Facebook that lets any web page describe how it should appear when shared on social platforms. The tags are meta elements in your page's head section, each carrying a property starting with og: and a content value.
When someone pastes your URL into Facebook, LinkedIn, WhatsApp, Slack, Discord, or many other platforms, that platform sends a crawler to fetch your page and read its Open Graph tags. It uses those values to build the preview card: the rectangle with an image, a bold title, a short description, and your site name. This card is what users actually see and click in their feed.
Without Open Graph tags, platforms fall back to guessing. They might grab the page title, pull a random image from the page, or worse, show nothing but the raw URL. Guessed previews are unpredictable and usually unappealing, which directly reduces clicks.
The protocol has become a universal standard well beyond Facebook. Almost every platform that generates link previews reads Open Graph tags, which is why setting them once benefits sharing everywhere. Even messaging apps and collaboration tools rely on them.
It is worth being clear about scope: Open Graph tags are about social presentation, not search ranking. They do not influence where you appear in Google. Their value is making your content look professional and inviting wherever people share it, which drives engagement and referral traffic from social channels.
The Essential Open Graph Tags
A complete, reliable share card needs a small set of core tags. Here is what each one does and how to write it well.
og:title is the headline of the preview card. It can match your SEO title or be written more conversationally for social audiences. Keep it concise so it does not get truncated, roughly under 60 to 70 characters.
og:description is the supporting text below the title. Use it to expand on the title and entice the click. Around 60 to 110 characters displays cleanly on most platforms before truncation.
og:image is the preview image and the most impactful element. Posts with a strong image get dramatically more engagement than those without. Always set it, point it to an absolute URL, and use a high-quality, relevant image.
og:url is the canonical URL of the page. This ensures that no matter which variation of the link gets shared, the preview and any engagement counts consolidate around one address.
og:type describes the content, most commonly website for general pages or article for blog posts and news. The article type enables extra properties like publish time and author.
og:site_name provides your brand or site name, which platforms display for context and consistency.
For articles specifically, you can add article:published_time, article:modified_time, article:author, and article:section to enrich the metadata. Set the core six first, then layer in the article-specific tags where they apply.
Advertisement
Getting Image Sizes Right
The Open Graph image is where most previews succeed or fail, and sizing is the key detail people overlook.
The recommended size is 1200 by 630 pixels, which produces a 1.91 to 1 aspect ratio. This is the format platforms use for the large, full-width preview card that performs best. At this size your image renders crisply on high-resolution displays and fills the preview without awkward cropping.
Keep the file reasonable, generally under about 5MB, and use a widely supported format like JPG or PNG. JPG is usually best for photographic images, while PNG suits graphics with text or flat color. Very large files can slow down or fail the platform's crawl.
Mind the safe zone. Different platforms crop the edges slightly, and some contexts show a smaller or squarer version. Keep essential text and logos toward the center rather than the edges so nothing important gets cut off. Avoid filling the image edge to edge with tiny text that becomes unreadable when scaled down in a mobile feed.
Make each important page's image relevant and ideally unique. Using one generic site-wide image for every share is a missed opportunity, because a tailored image that reflects the specific content earns more clicks. For a blog post, an image that conveys the topic, perhaps with a short, legible title overlay, tends to outperform a plain logo.
Finally, always reference the image with a full absolute URL in the og:image tag. Relative paths often fail because the social crawler does not resolve them the way a browser does.
Open Graph and Twitter Cards
Twitter, now X, has its own metadata system called Twitter Cards, but it interoperates with Open Graph in a convenient way.
When Twitter builds a preview, it first looks for Twitter-specific tags that start with twitter:. If those are missing, it falls back to your Open Graph tags. This means that if you have set solid og:title, og:description, and og:image tags, your links will already preview reasonably well on Twitter without any extra work.
You would add Twitter Card tags in two situations. First, when you want different content on Twitter than elsewhere, such as a punchier title or a different image tailored to that audience. Second, when you want to control the card type explicitly. The twitter:card tag accepts values like summary, which shows a small square thumbnail, and summary_large_image, which shows a large banner image similar to the big Open Graph preview. For most content with a good 1200 by 630 image, summary_large_image gives the most striking result.
Other useful Twitter tags include twitter:site and twitter:creator, which attribute the content to your brand account and the author's account respectively, adding context and a clickable handle to the card.
The practical approach for most sites is to set complete Open Graph tags as the foundation, then add a twitter:card value to choose your preferred card style. Only invest in fully separate Twitter content if your strategy genuinely calls for platform-specific messaging. For everyone else, the Open Graph fallback does the job well.
Fixing and Refreshing Cached Previews
One of the most common and confusing Open Graph issues is the preview that will not update. You fix a typo in your title or swap the image, share the link again, and the old version stubbornly reappears. This is caching, not a bug in your tags.
When a URL is shared for the first time, the platform crawls it and stores the Open Graph data so it does not have to re-fetch on every subsequent share. That cache can persist for a long time, which is great for performance but frustrating when you have made changes.
The solution is to force a re-scrape using the platform's debugging tool. Facebook's Sharing Debugger lets you paste a URL and click to fetch fresh data, which updates the cache immediately. LinkedIn provides the Post Inspector for the same purpose. After you re-scrape, new shares will reflect your updated tags. Twitter historically offered a Card Validator, though access to such tools changes over time, so the general principle is to find the platform's link inspection or debugging feature.
These debuggers do double duty as diagnostic tools. Before you ever promote a link, run it through the Sharing Debugger to preview exactly how the card will look and to catch problems: a missing image, an image that fails to load, a description pulling from the wrong place, or a tag the crawler could not read. Fixing issues before launch saves you from a poor first impression on social media.
A useful habit is to test every important page's preview proactively rather than reactively. If you are about to run a campaign or publish a flagship article, inspect the share card first, confirm the image and text are correct, and only then share it widely. Combining clean Open Graph tags with a quick pre-launch check ensures your links always look intentional and professional.
Open Graph tags decide how your links look every time someone shares them, turning bare URLs into polished, clickable preview cards. Set the core tags, og:title, og:description, og:image, and og:url, use a 1200 by 630 image with important content kept centered, and add a Twitter Card value to control your X preview. When you update a page, re-scrape it with the platform's debugger to clear the cached preview. These tags will not affect search rankings, but they make your content far more inviting wherever it travels.
Advertisement
Advertisement
Frequently Asked Questions
What is the ideal Open Graph image size?
Use 1200 by 630 pixels, a 1.91:1 ratio, which displays well as a large preview across Facebook, LinkedIn, and most platforms. Keep the file under about 5MB and use JPG or PNG. Avoid putting important text near the edges, since some platforms crop slightly. For smaller square previews on certain layouts, the same large image usually still works because platforms scale it down.
Why is my link preview showing an old image or title?
Social platforms cache Open Graph data the first time a URL is shared, so they keep showing the old preview even after you update the tags. To fix it, use the platform's debugging tool to re-scrape the URL. Facebook's Sharing Debugger and LinkedIn's Post Inspector both fetch fresh data and clear the cache. After re-scraping, new shares will show the updated preview.
Do I need separate Twitter Card tags if I have Open Graph tags?
Not necessarily. Twitter, now X, falls back to Open Graph tags when Twitter-specific tags are missing, so your og:title, og:description, and og:image will usually work. Add Twitter Card tags only if you want a different title, description, or image on Twitter, or to specify the card type like summary_large_image. For most sites, solid Open Graph tags cover Twitter adequately.
Do Open Graph tags affect my Google rankings?
No. Open Graph tags are not a Google ranking factor. They control how your links look when shared on social media, not how they rank in search. That said, they matter indirectly: attractive share previews earn more clicks and engagement on social platforms, which can drive traffic and build awareness. Think of them as social media optimization that complements, rather than replaces, your search SEO.
What are the essential Open Graph tags to include?
Four are essential: og:title (the headline in the preview), og:description (the supporting text), og:image (the preview image), and og:url (the canonical URL). Two more are commonly added: og:type, usually website or article, and og:site_name for branding. With these in place, most platforms can build a complete, attractive share card. Always set og:image, since previews without an image get far less engagement.
