Open Graph and social preview on your business website: how to control how your content looks when shared

You share a link from your website on LinkedIn, WhatsApp or Slack and a generic thumbnail appears — a cropped title or an old article photo. That is not bad luck: it almost always means your Open Graph and social preview tags are missing or misconfigured. At aatsoft, a web development agency in Manresa (Barcelona), we audit corporate websites where the design works but sharing content costs the company credibility and clicks.

What Open Graph is and why it matters for your business website

Open Graph is a protocol created by Facebook (now Meta) that describes how a URL should appear when someone shares it on social networks, messaging apps or collaboration tools. The most common tags are og:title, og:description, og:image and og:url.

When a user pastes your link into WhatsApp or LinkedIn, the platform reads those tags and builds the preview card: image, headline and description. If they do not exist, the system tries to guess the content by scraping the page. The result is usually unpredictable: a small logo, irrelevant text or a cropped image.

For a business, every shared link is a micro landing page. A well-configured social preview conveys professionalism, reinforces your brand identity and increases the chance that someone clicks.

Signs your social preview is misconfigured

• Sharing a URL shows an image different from the article or product
• The title is truncated or shows a generic site name («Home — Company X»)
• The description repeats the navigation menu or footer legal text
• WhatsApp or LinkedIn take time to update the thumbnail even after you changed the image
• Different pages share the same generic OG image
• On mobile the card appears without an image or with a broken icon
• You have not defined twitter:card and the preview on X/Twitter is poor

If you recognise two or more of these symptoms, audit your meta tags before investing more in content or social media campaigns.

Essential tags every page should have

Basic Open Graph

• og:title — Page-specific headline, distinct from the H1 if you need a shorter version for social
• og:description — Persuasive summary of 150-200 characters aligned with the URL intent
• og:image — Absolute URL of the preview image (not relative)
• og:url — Canonical page URL, consistent with the canonical tag
• og:type — website for home, article for blog, product for product pages
• og:locale — Page language (es_ES, en_US, ca_ES)

Twitter / X Cards

Although the name refers to Twitter, these tags also influence other platforms:

• twitter:card — Use summary_large_image for a large image
• twitter:title and twitter:description — Can match OG or be adapted
• twitter:image — Same image as og:image or an optimised variant

Complement OG with strong meta titles and meta descriptions: Google and social networks do not share the same algorithm, but starting from a coherent base saves work.

How your og:image should look

The social preview image is the visual element with the most impact when sharing. Practical recommendations for business websites:

• Ratio: 1.91:1 (1200×630 px is the safest standard)
• Weight: below 300 KB when possible without losing readability
• Content: clear message, visible brand, no tiny text at the edges (WhatsApp crops)
• Format: JPG or PNG; avoid SVG because many platforms do not render it
• Absolute URL: https://yourdomain.com/storage/blog/image.jpg, not /storage/...

If you already work on image optimisation, apply the same criteria to OG images: visual quality with controlled weight.

How to audit your social preview step by step

1. Inspect the source code of each key template (home, services, blog, product pages) and locate OG tags
2. Use official debuggers: Meta Sharing Debugger, LinkedIn Post Inspector, Twitter Card Validator
3. Share in a real environment: paste the URL in WhatsApp and Telegram before a campaign
4. Check absolute URLs in og:image and og:url, especially on multilingual sites
5. Verify consistency with canonical and hreflang if you have a multi-language website
6. Document templates so every new landing or blog post inherits correct tags
7. Review after design changes — a redesign can break image paths without you noticing in the browser

Integrate this audit with your periodic review in Google Search Console: they measure different things, but spotting inconsistencies between SEO and social avoids surprises.

Common mistakes on corporate websites

One OG image for the entire site

The home page can use a generic brand image, but each article, case study or campaign landing needs its own og:image. Otherwise all shared links look the same.

Images that are too small or vertical

A 200 px square logo will look blurry or have empty bands. LinkedIn and Facebook prefer horizontal layouts.

Platform cache not invalidated

Meta and LinkedIn cache the preview. After fixing tags, use their debugging tools to force a refresh.

Confusing Open Graph with structured data

Schema structured data helps Google; Open Graph helps social networks and messaging. They are complementary, not substitutes.

Duplicate or contradictory tags

Plugins, CMS and manual code can generate two different og:title values. The crawler picks one at random.

What your business loses if you ignore social preview

• Fewer clicks on links shared by employees, clients or press
• Inconsistent brand image across digital channels
• Wasted content — a good article with a poor preview will not take off on LinkedIn
• Lower trust in email marketing or newsletter campaigns with visually «broken» links
• Problems in paid campaigns when social traffic lands with expectations different from the card shown

Quick checklist before publishing a new page

• Does og:title describe the page in under 60 characters?
• Does og:description invite a click without repeating the menu?
• Does og:image exist, return HTTP 200 and measure at least 1200×630 px?
• Does og:url match the canonical URL?
• Is twitter:card set to summary_large_image?
• Have you tested the link on WhatsApp and LinkedIn?

Conclusion: your website is also sold in the shared link

Open Graph is not a minor technical detail: it is the business card of every URL outside your domain. Configuring it properly takes a few hours of implementation and review, but the return multiplies every time someone shares your content.

At aatsoft we help businesses in Manresa, Barcelona and across Catalonia review meta tags, social previews and technical SEO so every link conveys the same quality as the website. Request a free quote and we will review how your site looks when shared.