Open Graph in 2026: Why Shared Links Often Look Broken
Simon Heistermann
Owner
This article was written with AI assistance and editorially reviewed.
A link with no og:image lands in WhatsApp, LinkedIn or Slack as a grey box with no image, sometimes with a random snippet of the page as a preview instead. To the person receiving it, that does not look like a missing meta tag - it looks like a broken website. That is the impression a surprising number of business websites leave, even though the fix is a single line of code.
In short
Open Graph and Twitter Cards determine how a shared link looks on WhatsApp, LinkedIn, X and Slack. Missing og:image makes every shared link look unprofessional, regardless of how good the page behind it actually is.
Why shared links often look broken
The preview generated when a link is shared is not designed by the person sharing it - it comes from the meta tags in the target page's <head>. If they are missing, the platform decides for itself what to show, often an arbitrarily chosen image from the page, sometimes nothing at all. The effect is the same as a broken business card: the substance behind it might be fine, but the first impression says nobody bothered to tidy up. When a link lands in a WhatsApp message or a LinkedIn note as part of a pitch, that first impression is often the only one a prospect gets before deciding whether to click at all.
The mandatory tags at a glance
Six tags in every page's <head> are enough for a clean preview on virtually any platform:
| Tag | Purpose | Note |
|---|---|---|
| og:title | Title shown in the preview | Short and self-contained, does not need to match the SEO title exactly |
| og:description | Short description under the title | Some platforms truncate it, so lead with the most important point |
| og:image | Preview image | Absolute URL, not a relative path |
| og:url | The page's canonical URL | Prevents duplicate previews from URL parameters |
| og:type | Content type | Usually website or article |
| twitter:card | Rendering on X | Usually summary_large_image for a large image |
The most common mistake is a relative rather than an absolute URL for og:image - a path like /images/preview.jpg works fine in a browser, but not as the value of this tag, because the platform fetching it has no base context to resolve the path against.
The image format that works everywhere
1200 by 630 pixels has become the practical standard, rendering without awkward cropping on most major platforms. More important than the exact pixel count is readability at small size: many feeds show the image only as a thumbnail, and a title that stops being legible at that size defeats the purpose. A generic stock illustration with no obvious connection to the content adds little - an image with a clearly readable page title and a small, unobtrusive brand mark reliably beats the interchangeable alternative in practice.
Why caches outlast the fix
A corrected og:image does not show up automatically the next time a link is shared. Most platforms fetch a URL only the first time it is shared and cache the result from then on, regardless of what changes on the page afterwards. Seeing a new preview requires forcing a re-fetch through that platform's own debugging tool:
- Facebook Sharing Debugger for Facebook, Instagram and partly WhatsApp - use the Scrape Again function
- LinkedIn Post Inspector, run once before any important campaign
- X Card Validator to check rendering on X
Reloading your own website after a change shows the update immediately - on the platform itself, it stays invisible until the cache has been actively refreshed. That gap is why a fix that already works still looks broken in tests days later.
Dynamic images instead of manual upkeep per article
For a website with many individual pages - a blog, for instance - a manually designed image per article rarely makes sense. Next.js offers the ImageResponse function from next/og to generate an og:image per page automatically from React components: title and branding are produced at build or request time from the same data driving the rest of the page. That prevents the preview from ever being forgotten for new content, because it is no longer a manual extra step but something that comes into being automatically alongside the page itself.
Concrete steps for the next 90 days
- Days 1-30: check and add og:title, og:description, og:image, og:url, og:type and twitter:card on your most important pages
- Days 31-60: decide on an og:image strategy, introducing dynamic generation instead of manual images if you run many pages
- Days 61-90: test previews with the major platforms' debugging tools and refresh the caches of any URLs already shared
Conclusion
Send yourself a link to your most important page over WhatsApp, and one over LinkedIn. What you see there is what everyone recommending your site sees too, every day, without you ever finding out. The fix usually takes longer to discuss than to implement. How this visibility complements clean schema markup is covered in our article on Schema.org for local businesses. What role loading speed plays once someone actually clicks is covered in our article on Core Web Vitals 2026. What a technical SEO audit including a meta tag review costs is covered in our article on SEO costs. For a no-obligation review of your current previews, feel free to get in touch.
Want to know how your links look on WhatsApp and LinkedIn?
Get in touchYou might also like
WordPress or Custom Build? Run the Five-Year Numbers
WordPress powers a large share of the web, and for good reasons. What it actually costs to run, where it wins outright, and when a custom build makes sense.
Websites for IT Service Providers: Your Own Site Is the Work Sample
An IT provider with a slow, insecure website refutes its own pitch. What an IT manager checks in the first few minutes, and what follows from it.
Website Maintenance in 2026: What It Costs and What Must Be In It
What website maintenance actually covers, what the market charges for it, and how to spot an empty maintenance contract before you sign it.
Website Hosting for Businesses: What Actually Matters in 2026
Shared hosting, managed hosting or a platform: what the difference means for load time and resilience - and who actually owns the domain at the end.
SEO Costs 2026: What Visibility Really Costs
What SEO realistically costs small and mid-sized businesses: one-off optimisation versus ongoing management, and what should be included in the price.
A GDPR Check for Your Website: The Gaps That Are Almost Always There
Fonts from someone else's server, maps without consent, analytics before agreement: the typical gaps on SME websites, as a list you can actually check.
Frequently asked questions
Simon Heistermann
Owner
Heistermann Solutions is the web studio run by Simon Heistermann. We build custom websites for small and medium-sized businesses that want to achieve more online.
Every article grows out of day-to-day project work and is reviewed editorially before publication.
- Borken, Münsterland region
- simon@heistermann-solutions.de
Get it for free
Enter your email address. You'll immediately receive a confirmation link - after clicking it the checklist is available right away.
Let's talk about your project
Free introductory call