OpenGraph+
Get Started
Chapter 1

Getting Started

Add Open Graph meta tags to your Shopify store

Create a connection

  1. Sign in to OpenGraph+
  2. Go to your website’s Meta Tags page
  3. Create a new connection and copy your connection URL

Your connection URL looks like https://$OGPLUS_KEY.ogplus.net.

Find your theme layout

In your Shopify admin, go to Online Store → Themes → Edit code. Open layout/theme.liquid.

Add Open Graph meta tags

Add the following inside the <head> tag in theme.liquid:

<head>
  <!-- ... other tags ... -->
  <meta property="og:title" content="{{ page_title }}">
  <meta property="og:description" content="{{ page_description | default: shop.description }}">
  <meta property="og:url" content="{{ canonical_url }}">
  <meta property="og:site_name" content="{{ shop.name }}">
  <meta property="og:type" content="{% if template contains 'product' %}product{% elsif template contains 'article' %}article{% else %}website{% endif %}">
  <meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net{{ request.path }}">
  <meta name="twitter:card" content="summary_large_image">
</head>

Replace https://$OGPLUS_KEY.ogplus.net with your actual connection URL.

Tag reference

Tag Value Source
og:title Current page, product, or collection title page_title
og:description Page SEO description, falls back to store description page_description / shop.description
og:url Full canonical URL of the current page canonical_url
og:site_name Your store name shop.name
og:type product, article, or website based on page type template
og:image Dynamic social card image from OpenGraph+ Connection URL + page path
twitter:card Always summary_large_image for large preview cards Static value

What each variable does

  • page_title - Shopify sets this automatically for each page, product, collection, and blog post
  • page_description - the SEO description set in each page/product’s SEO settings
  • shop.description - your store description from Settings → General (used as fallback)
  • canonical_url - the full URL of the current page, set by Shopify
  • shop.name - your store name from Settings → General
  • template - identifies the current page type (product, article, collection, page, etc.)
  • request.path - the current page path, used to build the og:image URL

Remove existing og:image tags

Shopify themes typically include og:image tags already. Search your theme files for existing og:image meta tags and remove or comment them out to avoid duplicates. Common locations:

  • snippets/social-meta-tags.liquid
  • snippets/meta-tags.liquid

Verify

Open the preview tool in your OpenGraph+ dashboard and paste a URL from your store. View your page source and confirm all Open Graph meta tags are present with correct values.