When users share links to your SaaS product or blog posts on platforms like Twitter/X, LinkedIn, Slack, or Facebook, the platform displays a visual preview card. A shared link without an image or with a cropped preview card receives significantly lower click-through rates.
To ensure your shared links look professional and engaging, you must declare correct Open Graph (OG) and Twitter Card tags in your page HTML.
This guide explains how social previews work and how to optimize your card tags.
1. The Anatomy of a Preview Card
Social media cards are generated using metadata tags placed inside the <head> of your webpage:
- og:title & og:description: The title and summary displayed below or on the preview card.
- og:image: The absolute URL of the image displayed on the preview card.
- twitter:card: Specifies the card format (e.g.
summary_large_imagefor large header images orsummaryfor small square thumbnails).
If these tags are missing, platforms will attempt to scrape random images or text from your page, leading to broken or irrelevant previews.
2. Best Practices for OG Images
To prevent cropping or pixelated cards:
- Resolution: Use an image with a resolution of 1200 x 630 pixels (a 1.91:1 aspect ratio). This matches the standard container dimensions for Facebook, LinkedIn, and Twitter/X large cards.
- Absolute URLs: The
og:imageURL must be absolute (e.g.,https://yourdomain.com/og-image.jpg), not relative (/og-image.jpg), as external social scrapers cannot resolve relative links. - Crawlable Image Paths: Verify that the image path is not blocked by your
robots.txtfile, allowing social media bots to download it.
3. Auditing Your Social Preview Previews
Instead of posting links manually to check previews, you can analyze your tags programmatically.
Use the OG Share Image Checker to inspect your URLs. It fetches the page HTML, verifies og:image and twitter:image presence, validates that the image URL resolves, and checks that the dimensions meet standard requirements for rich preview cards.
- Audit your social preview tags: OG Share Image Checker