How to Enable OG Tags for Blog in Shopify?

The way your blog pages appear on social media definitely influences the clicks they get. Besides, once you configure social sharing buttons for your blog in Shopify, you need to make sure they are displayed properly. 

Shopify usually handles OG tags on a theme level. So, for them to appear on some specific pages, like blog, you need to make certain changes to the theme.

In this article, you'll learn how to do that step by step and make your Shopify Blog pages more attractive and clickable on social media.

To enable OG tags for the Shopify blog:

1. Navigate to Sales channels > Online Store.

Shopify online store settings

2. Go to Themes, click on the three dots (near the Customize button) and select the Edit code option.

Edit Shopify theme code

3. Find the theme.liquid file and open it. 

Edit theme liquid file in shopify

4. Find in theme.liquid file row with the {% render 'meta-tags' %} code. All you need is to move OG tags from the meta-tags file to the theme.liquid file so our Blog app can use the OG tags.

5. Insert the following code before the {% render 'meta-tags' %}:

<meta property="og:title" content="{|{ page_title | escape }}">
<meta property="og:description" content="{|{page_description | default: shop.description | default: shop.name }}">
 {% if canonical_url contains 'a/blog' %}
<meta property="og:image" content="{|{ page_image | escape }}">
 {% else %}
<meta property="og:image" content="http:{|{ page_image | img_url: 'master' }}">
<meta property="og:image:secure_url" content="https:{|{ page_image | img_url: 'master' }}">
 {% endif %}

 Note: the a/blog is a default value we provide a an example here. If you've changed the app proxy in the blog URL structure, you should add it instead of the a/blog here.

Inserting new code in shopify theme

6. Find the meta-tags.liquid file. It is usually located in the snippets folder.

Select shopify theme meta tags file

7. Delete the following strings from the meta-tags.liquid file: 

<meta property="og:title" content="{|{ og_title | escape }}">
<meta property="og:description" content="{|{ og_description | escape }}">
<meta property="og:image" content="http:{|{ page_image | img_url: 'master' }}">
<meta property="og:image:secure_url" content="https:{|{ page_image | img_url: 'master' }}">

deleting code from meta tags liquid file in shopify theme

Don't forget to save the changes once you finish editing the theme files and go to any of your blog posts and share them on social media.

add shopify posts on social media

Attractive posts drive clicks and encourage more people to come to your blog and store. That's why it's important to enable OG tags for blog in Shopify and benefit from better-looking posts on social media. And now you know how to do that.

However, note that to keep all those new visitors, you need to configure your blog in a way that makes it easy to read, navigate and engage with.