What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
A social media card is the preview a platform builds when someone shares a URL: usually a title, image and description, sometimes with a domain or other details. To give platforms useful information, add Open Graph metadata to each page, optionally add X-specific card tags, and test the live URL on the destinations that matter. The metadata is guidance, not a guarantee that Facebook, LinkedIn and X will render identical cards.
What a social media card contains
A link preview can include a page title, description, representative image, domain and shared URL. The platform fetching the page decides which fields to use and how to arrange them. A publisher supplies candidate information in the page’s HTML; it does not control the final card layout.
That distinction matters when looking at examples: two platforms can fetch the same URL and produce noticeably different previews, and a platform can omit a field or crop an image differently from the way its author expected.
Examples of social media cards that work
Article card
Use an image that signals the subject of the article, paired with a concise page-specific title and description in the metadata. If the platform displays the headline alongside the image, avoid baking the full headline into the image as well; it can make the card feel crowded or repetitive.
#1 Best Overall
Product or landing page
Choose a visual that identifies the product or brand at feed size. Let the page title and description explain the particular offer or purpose of that URL. A generic home-page preview reused on every product page gives people less context about the link they are considering.
Documentation page
A documentation card can use a logo or wordmark, a prominent package or feature name, a short tagline and an uncluttered background. Great Docs recommends simple composition, contrast and checking how the design reads when reduced. Its guidance is specific to its documentation and should be treated as a design example, not a platform-wide rule. Great Docs social cards guide
Page without a custom image
Still provide useful title and description metadata if you have no custom graphic. Great Docs describes a text-oriented summary card when no image is configured in its implementation, versus a large-image card when one is configured. Other platforms may behave differently, so do not assume that omitting an image will produce the same fallback everywhere. Great Docs social cards guide
A shared metadata baseline
Open Graph defines og:title, og:type, og:image and og:url as the four basic properties for a page. Add og:description for a useful summary; og:image:alt can provide an image description. X can also be given its own card type and title, description and image fields. The following is a practical starting point based on the fields in HubSpot’s implementation example:
<head>
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="A clear page-specific headline">
<meta property="og:description" content="One concise sentence explaining what the reader will find.">
<meta property="og:image" content="https://example.com/images/social-card.jpg">
<meta property="og:image:alt" content="A concise description of the image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="A clear page-specific headline">
<meta name="twitter:description" content="One concise sentence explaining what the reader will find.">
<meta name="twitter:image" content="https://example.com/images/social-card.jpg">
</head>Replace the example URL, headline, description, image URL and alt text with values for the actual page. The image should be reachable at a public URL by the services fetching it. The Open Graph protocol also documents image dimensions, MIME type and secure URL metadata. If a property is declared more than once, the protocol says the first tag is preferred when values conflict. Keep one consistent value for each property to avoid ambiguity. Open Graph protocol
Use page-specific values rather than copying one title, description and image across an entire site. HubSpot’s example includes twitter:url as well as the X card, title, description and image fields; the shared URL should identify the page being previewed. HubSpot implementation guide
Choose an image that survives cropping and reduction
A useful cross-platform starting point is 1200 × 630 pixels, a 1.91:1 aspect ratio. Great Docs recommends that size; HubSpot lists 1.91:1 for Facebook and LinkedIn and for featured images on X link posts. HubSpot distinguishes X link-post imagery from X photo-post imagery, listing 16:9 for photo posts. These are recommendations in the cited guidance, not a promise that every destination will preserve the exact crop. Great Docs social cards guide · HubSpot implementation guide
- Put the main subject and any essential text near the center so a crop is less likely to remove it.
- Use high contrast and large lettering. Great Docs suggests checking the design at 300 × 157 pixels, where small text and fine details are easier to spot as problems.
- Keep the composition simple: a focal image, a short phrase if needed, and a recognizable brand cue are usually easier to scan than a paragraph embedded in the graphic.
- Optimize the file so it loads promptly. Great Docs recommends staying below 1 MB and ideally below 300 KB for its own social-card guidance.
HubSpot lists image maximums of 8 MB for Facebook, 5 MB for X (15 MB for GIFs), 10 MB for LinkedIn and 8 MB for Instagram. File limits and platform behavior can change; check the destination’s current requirements before publishing rather than treating those listed values as permanent. HubSpot implementation guide
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesWhy the same URL looks different across platforms
Each destination controls its own crawler, field priorities, card layout and image treatment. Open Graph and X tags give a scraper suggested inputs; they do not impose a shared rendering standard across services. A 2020 experimental study presented at the Network and Distributed Systems Security Symposium examined 20 popular social platforms and identified 14 distinct link-preview layouts in that sample. It is evidence that previews varied across the platforms studied at that time, not a current specification or a count of every service available today. NDSS Symposium paper
As a result, judge a card on the actual destination rather than assuming one screenshot or markup check predicts every feed. Prioritize the services where the link will be shared, and use their own inspection tools to see what their fetchers receive.
How to preview and debug a link card
- Check the live page source. Open the exact URL you intend to share and inspect its HTML head. Confirm that the Open Graph values and any X tags are present, page-specific and not duplicated with conflicting values.
- Check URL and image access. The page and image need to be reachable by the platform crawler. Review site access rules, including
robots.txt, and verify that the image URL works without a private session or a browser-only interaction. HubSpot discusses crawler access and gives example user-agent entries for Facebook and X. HubSpot implementation guide - Run the destination’s current inspector. HubSpot lists Facebook’s Sharing Debugger, an X card validator and LinkedIn’s Post Inspector. Great Docs also lists a general Open Graph debugger for multi-platform previews. Tool names and availability can change, so follow the current links and instructions from the platform or tool before relying on an old workflow. HubSpot implementation guide · Great Docs social cards guide
- Compare the rendered result with the page. Look for a stale title, missing description, unexpected image, broken crop or incorrect URL. If one platform differs from another, inspect that destination’s fetch result rather than changing metadata blindly.
- Re-fetch after edits where possible. When an update does not appear, first confirm the live HTML and image have changed. Then use the destination’s inspector to request a re-fetch if the tool offers it. There is no single refresh interval established here that applies to all platforms.
A normal screenshot of your page can help check that the page itself loads and that an image asset is reachable, but it does not show the social platform’s generated card. For that, use the platform inspector or debugger; only its fetch result can confirm what that destination is using.
Or skip the browser setup
ScreenshotNeo can capture the live page at a URL for a quick visual check of its page rendering; it is not a substitute for a social platform’s card inspector. One GET request returns a screenshot in a chosen format or a PDF. See the ScreenshotNeo API documentation for the request options.
Recommended Free Tools
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webpScreenshotNeo can accept consent banners and remove more than 60 known consent platforms, newsletter popups and chat widgets before capture, with each step configurable. Bot checks, blank pages, timeouts, failed loads and cache hits cost nothing, and responses identify the page verdict and billing status in headers. Its MCP server offers take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. See ScreenshotNeo for product details. For checking what a social network actually displays, still run that network’s own inspector.
Sign up free for 1,000 screenshots a month, with no card required.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting common preview problems
The preview image is missing
- Confirm
og:imageexists in the live HTML and points to the intended image. - Open the image URL directly and verify it is publicly accessible and returns the image rather than an error or an authentication page.
- Check whether the destination crawler is blocked from the page or image by site rules. Use the platform inspector to see what it fetched.
The card shows old information
Inspect the live page first: a deployment or cache in your own publishing stack may still be serving old metadata. If the HTML is current, request a re-fetch with the destination’s inspector if available. Do not assume a fixed cache duration; no universal refresh interval is established across platforms.
The wrong title or description appears
Check that the page contains the intended values, that duplicate declarations are not conflicting, and that the first Open Graph value is the one you want where multiple values are present. Also compare the platform’s fetch result with the post composer: some destinations may expose their own presentation choices outside the page metadata.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallThe image is cropped badly or text is unreadable
Keep essential content central, reduce words on the artwork and test at small display size. Start with the 1200 × 630, 1.91:1 guidance, but account for the destination’s different formats and cropping behavior.
Best Value
One service works while another does not
That can happen because each platform fetches and renders independently. Check crawler access and metadata for the failing destination, then test it with that service’s inspector instead of treating success on one platform as proof that all others have the same result.
A practical publishing checklist
- Every shareable page has its own title, concise description, canonical URL and representative image metadata.
- The image URL is public, the file loads and the composition remains legible when reduced.
- Duplicate or conflicting Open Graph fields have been removed.
- The live page has been checked with the destination inspectors relevant to the audience.
- Changes have been re-fetched where a destination offers that option, then checked in the result rather than assumed to be live.
Frequently Asked Questions
Can metadata force every platform to use the same preview?
No. Open Graph and X tags provide input, but each destination controls its own fetching and rendering.
How often do platforms refresh a cached preview?
There is no universal refresh interval; use the destination’s inspection tool when it offers a re-fetch.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
