Social CRO & Share Testing

Page Title

66 chars (Optimal: 40-60)

Meta Description

153 chars (Optimal: 120-160)

OG Image URL (1200x630 recommended)

Display Domain

Live Social Previews

Ready-to-Paste HTML Meta Tags

Sharing products every week?

We build a check that previews every new product page before it goes live and flags a missing image, a cut off title or a broken description.

Book a free 30 minute call →

What is an Open Graph preview?

An Open Graph preview is the card a platform shows when someone shares your link: the image, title and description. It is built from the Open Graph tags in your page, so if the card looks wrong, the tags are what you fix.

Which Open Graph tags you need

Four tags do almost all the work: og:title, og:description, og:image and og:url. X also reads twitter:card; set it to summary_large_image for the big image layout. If a tag is missing, each platform guesses, which is how a product link ends up showing your logo or a random image from the footer.

The right image size

Use an image 1200 by 630 pixels, which is a ratio of about 1.91 to 1. Keep the important part in the centre, because some apps crop the edges, and keep the file small so it loads before the preview gives up. Put the full https address in og:image, not a relative path.

Why your preview still shows the old image

Facebook, LinkedIn and messaging apps cache previews, sometimes for days. After you change your tags, ask each platform to scrape the page again with its own sharing debugger, or the old card keeps showing no matter what your page says now.

Common Shopify problems

Themes often set one default share image for every page, so every product shares with the same picture. Product titles that are too long get cut off, and descriptions pulled from the first line of a product page can read like a shipping note. Preview your top ten product links here before you post them anywhere.

Share this open graph preview tool

Writing a guide, a newsletter or a resource page for your readers? Link to this tool with the snippet below. It is free to use and always will be.

<a href="https://dailyneedsassociation.com/tools/social-card-previewer/">Open Graph preview tool</a> by Daily Needs Association

Embed the Open Graph preview tool on your site

Free to embed, no signup, no attribution needed beyond the link. Paste this where your readers are already asking the question, and the calculator sizes itself to fit.

<iframe src="https://dailyneedsassociation.com/tools/social-card-previewer/?embed=1" title="Open Graph preview tool by Daily Needs Association" width="100%" height="560" loading="lazy" style="border:1px solid #d9d2c4;border-radius:12px;max-width:100%"></iframe>
<p style="font:13px/1.5 system-ui,sans-serif;margin:8px 0 0"><a href="https://dailyneedsassociation.com/tools/social-card-previewer/" rel="noopener">Open Graph preview tool by Daily Needs Association</a></p>
<script>
window.addEventListener("message",function(e){
  var d=e.data;if(!d||d.type!=="dna-tool-height")return;
  var f=document.querySelector('iframe[src*="social-card-previewer"][src*="embed=1"]');
  if(f&&e.source===f.contentWindow)f.style.height=d.height+"px";
});
</script>

Works on any site that allows an iframe, including WordPress, Shopify, Webflow, Ghost and Notion.