How do I add Open Graph meta tags?

(For a brief primer on Open Graph meta tags, visit this website:

Depending on how detailed you want to get with your meta tags, you'll need some HTML experience, and a little bit of time with our Liquid Documentation:

  • First, head over to edit code for the Site or Product, depending on where you're planning on adding the tags to:

  • Then, navigate to the "theme.liquid" or "index.liquid" file within the layouts/templates folder.
  • Within the <head> tag is where your meta tags will go:

In this example, we will add an og:image tag for the Categories and Posts in my Product.

  • Add the following code after the <head> tag:
{% if category %}
    <meta property="og:image" content="{{ category.poster_image_url }}" />
{% endif %}
{% if post %}
    <meta property="og:image" content="{{ post.poster_image_url }}" />
{% endif %}

This code is saying the following:

If the current page is a Category, render this Category's Poster Image as the og:image.

If the current page is a Post, render this Post's Poster Image as the og:image.

Was this article helpful?