Shopify Open Graph & Social Card Validator

Shopify's e-commerce architecture relies on social sharing cards to drive viral referral traffic and social commerce sales across Instagram, Facebook, Twitter/X, and WhatsApp.

1. The Square Product Image Cropping Problem

By default, e-commerce product photos are shot in square (1:1) or vertical (3:4 / 4:5) aspect ratios for storefront gallery display. When shared on social networks, platforms expect a 1.91:1 aspect ratio (1200x630px).

If a Liquid template outputs a raw product image URL without center-cropping, social crawlers crop the top and bottom of the image, cutting off product packaging, model heads, or logos:

<!-- UNOPTIMIZED SHOPIFY LIQUID (Causes aggressive edge cropping) -->
<meta property="og:image" content="https:{{ product.featured_image | img_url: 'master' }}">

<!-- OPTIMIZED SHOPIFY LIQUID (1200x630 1.91:1 Standard) -->
<meta property="og:image" content="https:{{ product.featured_image | image_url: width: 1200, height: 630, crop: 'center' }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

2. Resolving App Collisions & Duplicate OG Tags

When Shopify store owners install review apps (Judge.me, Loox, Yotpo) or page builder apps (Shogun, PageFly), these apps often inject their own social meta tags into layout/theme.liquid. Crawlers that parse multiple og:title or og:image tags may choose an outdated fallback image or fail to render the card entirely.

Ensure that your layout/theme.liquid renders a single, centralized {% render 'social-meta-tags' %} snippet and that installed apps do not duplicate head meta tags.

3. Protocol Prefixing on Shopify CDN URLs

Shopify Liquid filters like image_url return protocol-relative URLs starting with //cdn.shopify.com/.... Social media crawlers (especially Twitterbot and LinkedInBot) strictly require absolute URLs with the https: protocol. Always prepend https: before the Liquid tag.

<!-- snippets/social-meta-tags.liquid (Shopify Online Store 2.0) -->
<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:title" content="{{ page_title | default: shop.name }}">
<meta property="og:type" content="{% if template contains 'product' %}product{% else %}website{% endif %}">
<meta property="og:description" content="{{ page_description | default: shop.description | strip_html | truncatewords: 30 | escape }}">

{%- if template contains 'product' and product.featured_image -%}
  <meta property="og:image" content="https:{{ product.featured_image | image_url: width: 1200, height: 630, crop: 'center' }}">
  <meta property="og:image:secure_url" content="https:{{ product.featured_image | image_url: width: 1200, height: 630, crop: 'center' }}">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
{%- elsif template contains 'article' and article.image -%}
  <meta property="og:image" content="https:{{ article.image | image_url: width: 1200, height: 630, crop: 'center' }}">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
{%- elsif settings.share_image -%}
  <meta property="og:image" content="https:{{ settings.share_image | image_url: width: 1200, height: 630, crop: 'center' }}">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
{%- endif -%}

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ page_title | default: shop.name }}">
<meta name="twitter:description" content="{{ page_description | default: shop.description | strip_html | truncatewords: 30 | escape }}">