Peekly

Open Graph tags in Shopify

A Shopify theme prints Open Graph tags in Liquid, in the HTML the storefront sends. On a product or collection, the image is the featured image, then the social sharing image. Paste the public product or collection URL into the checker above.

Free. No signup. Public pages only.

Tags on a product and a collection

  • What Dawn prints. Shopify's Dawn theme renders snippets/meta-tags.liquid from layout/theme.liquid, before content_for_header. og:title is page_title, or the shop name when that is empty. og:url is canonical_url, or the shop origin. og:description is page_description, then the shop description, then the shop name. og:type is product on a product page, article on an article, and website on every other template, including a collection. On a product, Dawn also prints og:price:amount from product.price passed through money_without_currency, and og:price:currency from cart.currency.iso_code. That property is og:price. The product namespace a rich Pin reads is product:price:amount, which the Pinterest Link Preview page covers. twitter:card is summary_large_image. twitter:title and twitter:description copy the Open Graph text. Dawn leaves twitter:image unset, so the image falls back to og:image. twitter:site is added when the theme's X link is filled in. The X (Twitter) Link Preview page is that card type and that fallback.
    <meta property="og:site_name" content="{{ shop.name }}">
    <meta property="og:url" content="{{ canonical_url }}">
    <meta property="og:title" content="{{ page_title | escape }}">
    <meta property="og:type" content="product">
    <meta property="og:description" content="{{ page_description | escape }}">
    <meta property="og:image" content="http:{{ page_image | image_url }}">
    <meta property="og:image:secure_url" content="https:{{ page_image | image_url }}">
    <meta property="og:image:width" content="{{ page_image.width }}">
    <meta property="og:image:height" content="{{ page_image.height }}">
    <meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html }}">
    <meta property="og:price:currency" content="{{ cart.currency.iso_code }}">
    <meta name="twitter:card" content="summary_large_image">
  • Products, collections, and page_image. Shopify's page_image object is the featured image on a product, a collection, and a blog post. On every other page, and when that featured image is missing, it is the social sharing image. Set that image in the Shopify admin under Online Store → Preferences, in Social sharing image and SEO. Shopify's help lists a priority when several images exist: an image hard-coded in the theme, then an image in theme settings, then the Preferences image. Dawn's snippet is theme code, so the og:image in the HTML is the one it prints from page_image. Their help also says that when no social sharing image is uploaded, a theme logo can be used, and a logo that is small or on a transparent background is padded with the theme background color. A collection with no collection image, or a product with no featured image, shares that fallback. Set the featured image on the product or the collection when the card should show the product. If the rendered page contains no og:image tag, Shopify's page_image docs say the platform adds og:image, og:image:secure_url, og:image:width, and og:image:height from page_image. Dawn already prints those tags when page_image is present.
  • The image URL Dawn writes. Dawn writes og:image as http: plus page_image | image_url, and og:image:secure_url as https: plus the same filter. image_url returns a protocol-relative URL, so the first tag is an http:// file on the Shopify CDN and the second is https://. This checker reads the first og:image and warns on an http:// image, because some platforms refuse it. A consumer that reads og:image:secure_url receives the https URL Dawn also printed. The filter in that snippet is called with no width, so the file can be the original upload. Facebook's cap is 8 MB. X's summary_large_image cap is 5 MB. Request a width of 1200 and put that https URL in og:image. page_image.width is the original file, so leaving it next to a resized URL declares a size the URL does not serve. Set og:image:width and og:image:height to the resized file, or leave them off. A square product photo is still square at 1200 wide, and this checker will say so. The Open Graph Image Size page is the 1200×630 baseline and the published caps.
    <meta property="og:image" content="https:{{ page_image | image_url: width: 1200 }}">
    <meta property="og:image:secure_url" content="https:{{ page_image | image_url: width: 1200 }}">
  • Check the storefront URL. A password-protected store serves the password page to a logged-out fetch. On that template Dawn points og:url at the shop origin, and the product tags are not in the response. Check a URL the crawler can open. A tag an app inserts with JavaScript in the browser is missing from that HTML. Liquid in the theme is in the response. A second set of og: tags from an SEO app, later in the head, does not replace the first, because content_for_header comes after the meta-tags snippet and the protocol keeps the first value. Paste the public https product or collection URL. Peekly grades og:title, og:description, og:image, and twitter:card, downloads the image, and reports the dimensions and the file size. It does not log into the shop, and it does not clear a card a platform already stored. The How to Add Open Graph Tags page is the same four tags on a site you edit as HTML.

Tags covered: og:title · og:description · og:image · og:image:secure_url · og:type · og:url · twitter:card · og:price:amount

More checkers

Twitter Card ValidatorOpen Graph CheckerLinkedIn Link Preview CheckerDiscord Embed PreviewWhatsApp Link Preview CheckerSlack Link Preview CheckeriMessage Link Preview CheckerFacebook Link Preview CheckerOpen Graph Image SizeTelegram Link Preview CheckerReddit Link Preview CheckerNext.js Open GraphRefresh a Link Preview CacheBluesky Link Preview CheckerMastodon Link Preview CheckerMicrosoft Teams Link Preview CheckerFix a Broken Open Graph PreviewInstagram Link Preview CheckerPinterest Link Preview CheckerTikTok Link Preview CheckerYouTube Link Preview CheckerThreads Link Preview CheckerSnapchat Link Preview CheckerHow to Add Open Graph TagsOpen Graph Image Not UpdatingDiscord Link PreviewX (Twitter) Link PreviewWordPress Open GraphAll platforms

What each platform reads

  • X / Twittertwitter:card, twitter:* → og:* fallback1200×630 (min 300×157), < 5 MB
  • Facebookog:title, og:description, og:image1200×630, 1.91:1
  • LinkedInog:title, og:image (og: only)1200×627, 1.91:1
  • Discordog:site_name, og:*, theme-color, twitter:cardLarge image needs summary_large_image
  • Slackog:site_name, og:title, og:description, og:image1200×630
  • WhatsAppog:title, og:description, og:imageKeep < 300 KB

Guidance based on each platform's public documentation and observed behavior. Platforms change their rules without notice.

FAQ

+Is Peekly free?

Yes. Checking a single URL is free forever — no signup and no limit on one-off checks. Batch watching and monitoring may arrive later as a paid Pro plan; the free single-URL tool stays.

+Why does my link show no image when I share it?

Usually one of four things: there's no og:image tag, the image URL is relative instead of absolute, the image is behind a login, firewall or bot block, or the file is too big or in an unsupported format like SVG. Peekly checks all four and tells you which one it is.

+What size should my og:image be?

1200×630 pixels (a 1.91:1 ratio) as a PNG or JPG under about 300 KB. That size works for large cards on X, Facebook, LinkedIn, Discord, Slack and WhatsApp.

+Do I need twitter: tags if I already have Open Graph tags?

X reads og:title, og:description and og:image as fallbacks, but you still need twitter:card set to summary_large_image if you want the big image card. Without it, X shows a small thumbnail.

+I fixed my tags but the old preview still shows. Why?

Platforms cache link previews, sometimes for days. Facebook and LinkedIn let you force a refresh with their own debugging tools. On X, Slack and Discord the cache usually expires on its own, or you can add a query string such as ?v=2 to the URL.

+Do you store the pages I check?

No. We fetch the page once to read its <head>, show you the result, and don't save the page or the result. We only fetch public http(s) URLs, and private or internal addresses are blocked.

+Are the previews pixel-perfect?

They're close approximations of each platform's current card layout, built from the same tags the platforms read. Platforms change their designs from time to time, so treat them as a very good guide rather than a screenshot.

$9

One time

A written fix for the batch.

Up to 25 URLs. We check og:image, Twitter cards, size, redirects, and cache, then send copy-paste meta tags within 48 hours. The free single-URL check stays free.

Get the fix report — $9