Why Your Website Looks Bad When Shared on Social Media
You spent weeks designing a great website, but when someone shares the URL on social media, the preview card looks terrible — a missing image, a vague auto-generated description, or just your domain name with nothing else. This is one of the most common web presence problems, and most site owners have no idea it is happening because they never actually test how their URLs appear as link cards. This article explains the root causes and gives you a clear action plan to fix every one of them.
The Real Reason Your Site Preview Looks Wrong
Social media platforms do not render your website visually when generating a link preview. They send a simple HTTP request to your URL, read the HTML source — specifically the meta tags in the document head — and use those values to build the card. If those meta tags are missing, incomplete, or pointing to broken resources, the card will look bad. The most common root cause is that no one ever added Open Graph tags to the site. Many website builders, themes, and CMS templates do not include OG tags by default. If you built your site on a platform without an SEO plugin or without manually adding meta tags, there is a good chance your OG tags are either completely absent or set to generic default values. The second most common cause is a plugin conflict. In WordPress, for example, both a theme's built-in SEO settings and a plugin like Yoast or RankMath may output og:title and og:image. The last one in the HTML source wins — and that might be the theme's generic logo rather than your intended image. The third cause is incorrect image configuration. Even if og:image is set, the image might be using a relative path (which social crawlers cannot resolve), pointing to a file that has been moved or deleted, or using HTTP instead of HTTPS (which many platforms now refuse to load). Finally, some developers add OG tags dynamically using JavaScript, assuming that social platforms will execute their scripts before reading the page. Most do not. Open Graph tags must be present in the server-rendered HTML to be reliably read.
How to Check What Social Platforms Actually See
The most reliable way to see what is wrong is to use a tool that reads your page the same way a social crawler does. The OG Preview tool fetches your URL and renders simulated link cards for Twitter/X, Facebook, LinkedIn, WhatsApp, and iMessage — giving you a clear visual of what each platform will show. Alternatively, view your page's HTML source directly. In any browser, right-click and select View Page Source. Press Ctrl+F (or Cmd+F on Mac) and search for og:. You should see a series of meta tags like og:title, og:description, og:image, and og:url. If you find none of these, your OG tags are missing entirely. If you do find them, check: Are they in the static HTML or embedded inside a script tag? Are the URLs in og:image absolute (starting with https://)? Is the og:title the right text, not something like 'Home | Site Name' or your CMS's default value? For a platform-specific check, Facebook's Sharing Debugger (developers.facebook.com/tools/debug/) is the authoritative tool for Facebook and Instagram. It shows every tag it read and flags any issues with a detailed warning system. Twitter Card Validator (cards-dev.twitter.com/validator) does the same for Twitter. These official tools also let you force a cache refresh — critical if you made recent changes and want to verify that platforms will now show the updated data.
The Five Most Common Problems and Their Exact Fixes
After examining thousands of OG configurations, the same problems appear repeatedly. Here is each one with its fix. Problem 1: No image in the card. Fix: Add <meta property="og:image" content="https://yoursite.com/og-image.jpg" /> to your HTML head. Create a 1200×630 pixel image specifically for sharing — do not rely on a random page image. Problem 2: Title is the page filename or CMS default. Fix: Add <meta property="og:title" content="Your Actual Page Title" /> explicitly. Keep it under 60 characters. If you are using WordPress, install an SEO plugin and configure the OG title field per page. Problem 3: Description shows body text or is blank. Fix: Add <meta property="og:description" content="A compelling 130–155 character summary." />. Never leave this absent or platforms will scrape random text from your page. Problem 4: Image loads but looks wrong. Fix: Your og:image is likely the wrong size or aspect ratio. Facebook and LinkedIn want 1200×630 (1.91:1). Twitter large card wants 1200×600 (2:1). Create separate optimized versions if needed. Problem 5: Everything looks correct but the wrong card still shows. Fix: The platform is showing a cached version. Use Facebook Sharing Debugger and Twitter Card Validator to force a fresh crawl and reset the cache.
Quick Wins: OG Tags in Every Major Platform
The fix for missing OG tags depends on your platform. Here are the quickest paths to a correct configuration for the most common website builders and CMS platforms. WordPress: Install Yoast SEO or Rank Math (both free). In the plugin settings, enable the Social tab and set your default og:image. Then on each important page, set the individual og:title, og:description, and og:image via the plugin's page meta panel. Disable your theme's built-in Open Graph output if it has one — both outputting tags will cause conflicts. Webflow: Go to the page settings (click the gear icon on any page), scroll to Open Graph Settings, and fill in the OG title, description, and image fields. Webflow generates the correct absolute URLs automatically. Shopify: Most modern Shopify themes include OG tags automatically using product data. Check your theme.liquid file for og:image and og:title tags. If they are missing, add them to the head section. For product pages, use {{ product.title }} and {{ product.featured_image | img_url: '1200x630' }} as values. Squarespace: Go to Pages > Page Settings > Social Image for each page. Squarespace generates OG tags from this setting automatically. Static HTML sites: Manually add the five core OG tags (<meta property="og:title">, og:description, og:image, og:url, og:type) to the document head of every page you want to share.
Frequently Asked Questions
- My homepage looks fine but individual blog posts look broken when shared. Why?
- Your homepage likely has hardcoded or manually set OG tags, while your blog post template does not. The fix is to make your OG tags dynamic — they should pull from each post's own title, description, and featured image. In WordPress, a plugin like Yoast does this automatically per post. In a static site generator like Next.js or Gatsby, pass the post's metadata into a shared Head component that renders the OG tags dynamically for each page.
- Does having bad social share cards hurt my SEO?
- Open Graph meta tags are not a direct Google ranking factor — Google does not use them for indexing. However, they affect the click-through rate of shared links. If your link card looks broken or generic, fewer people click it, which means less traffic. More traffic and user engagement signals can indirectly benefit SEO over time. Additionally, a professional-looking link card improves brand perception and trust, which influences whether people choose to visit your site from a shared link.
- How often should I check my social share card previews?
- Check after any significant change to your site: a redesign, a new CMS or theme, a plugin update that touches meta tags, or any URL structure changes. For content-heavy sites, spot-check new pages before their first major promotion. It is also worth doing a full audit annually — OG image URLs can break over time if you change your CDN, reorganize your media library, or move to a different hosting provider.