Setting up Open Graph tags in Shopify
Good news: Shopify themes generate Open Graph tags automatically. Product pages use the first product image, the homepage uses your configured social image. The bad news: those defaults are rarely optimal — product photos often have the wrong ratio and the homepage preview is frequently just empty.
The free checker shows your previews for nine platforms — from X and WhatsApp to iMessage, Discord and Bluesky.
First check what is there now
Paste your store URL and a product page into the MetaPeek checker. Chances are the basics exist, but the image is off (wrong crop) or og:description is missing.
Set the site-wide social image
In the theme editor, go to Theme settings (usually under "Social media" or "Favicon & social"). Upload a 1200×630 social sharing image there. It becomes the fallback for pages without their own image.
Product pages: the first image wins
Shopify uses the featured (first) product image as og:image. Square product photos get cropped on most platforms. For perfect previews on top products, put a 1.91:1 image as the first media item — or accept the crop.
Older themes: check the code
If your theme does not produce the tags automatically, look in the code editor for snippets/social-meta-tags.liquid or the <head> in layout/theme.liquid. Modern (OS 2.0) themes handle this themselves — manual intervention is rarely needed there.
Code example
{% comment %} Only for older themes without a social-meta snippet — in layout/theme.liquid, inside <head> {% endcomment %}
<meta property="og:title" content="{{ page_title | escape }}" />
<meta property="og:url" content="{{ canonical_url }}" />
<meta property="og:type" content="{% if template contains 'product' %}product{% else %}website{% endif %}" />
{% if page_description %}
<meta property="og:description" content="{{ page_description | escape }}" />
{% endif %}
{% if template contains 'product' and product.featured_image %}
<meta property="og:image" content="https:{{ product.featured_image | img_url: '1200x' }}" />
{% elsif settings.share_image %}
<meta property="og:image" content="https:{{ settings.share_image | img_url: '1200x' }}" />
{% endif %}
<meta name="twitter:card" content="summary_large_image" />Common mistakes
- Apps injecting duplicate tagsSome SEO or review apps add their own og: tags next to your theme's. Check with MetaPeek that there is only one set.
- A square product photo as previewPlatforms crop to 1.91:1 — with a square photo the top and bottom disappear. Keep important elements centered.
- Homepage without a social imageWithout a configured share image, many stores have a bare homepage preview. Two minutes of work in theme settings.
Frequently asked questions
Do I need to edit code in Shopify?
Usually not. Modern themes generate og: tags automatically; you control them through theme settings and product images. Code changes are only needed for old or heavily customized themes.
Can I set a different social image per product?
Shopify uses the first product image by default. A custom og:image per product requires a theme change (e.g. via a metafield) — for most stores the first image is good enough.
Why does my preview look different from the editor?
Platforms cache previews. Check with MetaPeek what is in your HTML right now — that is what platforms see on the next scrape.
Paste your URL and see within two seconds whether everything is right — on every platform.