How to Set Up Meta NOINDEX Tags Dynamically in Shopify Using Custom Metafields

By Tony Ng.
September 20th, 2024

How to Set Up Meta NOINDEX Tags Dynamically in Shopify Using Custom Metafields

Introduction

In the realms of SEO and eCommerce, there are instances when you may want specific pages of your Shopify store to be hidden from search engine crawlers. One efficient way to achieve this is by setting up Meta NOINDEX tags dynamically. This guide will walk you through the steps to accomplish this feat using Shopify Liquid, custom metafields, and a bit of coding magic. By the end of this tutorial, you will have a robust mechanism to control the meta NOINDEX tag for various objects in your store, such as products, collections, pages, and more.

Understanding the Problem

What is a Meta NOINDEX Tag?

A Meta NOINDEX tag is an HTML meta tag used to instruct search engines not to index a particular web page. This is especially useful for pages you don't want to appear in search engine results.

Challenges in Shopify

While Shopify is a powerful and flexible platform, it does present some challenges when it comes to dynamically setting meta tags. Some of the obstacles include:

Global Theme Settings: Theme settings in Shopify are global and don't offer dynamic sources.
Input Settings in Header Sections: Input settings for header sections cannot have dynamic sources.
Section Isolation: Liquid in one section cannot read or interact directly with settings in another section.
JavaScript Limitations: Using JavaScript to append or insert meta tags can be risky since some search engine crawlers do not execute JavaScript when rendering the DOM.

Solution: Utilizing Custom Metafields

Step 1: Create Custom Metafields

The first step is to create a custom metafield for each object you want to manage. This includes products, collections, pages, blogs, blog posts, and custom metaobjects.

Navigate to Shopify Admin: Go to your Shopify admin dashboard.
Create Metafield: Go to the settings section and select Metafields. Create a new metafield definition for each object type. Ensure that the metafield is a boolean (true/false) value and name it consistently across all objects, such as hide_from_search_engines.

Step 2: Create a Snippet for Meta Tags

Next, you'll create a new snippet where your meta tag logic will reside.

Create Snippet: In your theme editor, go to the Snippets folder and create a new snippet called meta-seo-tags.liquid.

Step 3: Insert the Snippet in theme.liquid

To make sure the snippet is rendered, insert it inside the <head> tag of your theme.liquid file.

Sample Code:

{% render 'meta-seo-tags' %}

Step 4: Write the Logic in Your Snippet

Now, you'll add the logic to check for the presence of each object (product, collection, page, etc.) and determine whether to print the NOINDEX tag based on the custom metafield value.

Sample Code:

{%- liquid 
 assign hide_from_search_engines = false 
%}

<!-- START: meta-seo-tags -->
{% comment %} 
 <p>Current template is: {{ template }}</p> 
{% endcomment %}

{%- if product %}
 {% assign hide_from_search_engines = product.metafields.custom.hide_from_search_engines %}
{%- elsif collection %}
 {% assign hide_from_search_engines = collection.metafields.custom.hide_from_search_engines %}
{%- elsif page %}
 {% assign hide_from_search_engines = page.metafields.custom.hide_from_search_engines %}
{%- elsif article %}
 {% comment %} Blog article page logic {% endcomment %}
 {% assign hide_from_search_engines = article.metafields.custom.hide_from_search_engines %}
{%- elsif blog %}
 {% comment %} For a whole Blog {% endcomment %}
 {% assign hide_from_search_engines = blog.metafields.custom.hide_from_search_engines %}
{%- elsif metaobject %}
 {% comment %} Custom MetaObject logic {% endcomment %}
 {% assign hide_from_search_engines = shop.metaobjects[metaobject.system.type][metaobject.system.handle].hide_from_search_engines %}
{%- else %}
 {% comment %}
 Fallback for other types of pages like the homepage.
 {% endcomment %}
{% endif %}

{%- if hide_from_search_engines -%}
 {% comment %} We are hiding! {% endcomment %}
 <meta name="robots" content="noindex, nofollow">
{%- endif -%}
<!-- END: meta-seo-tags -->

Step 5: Test Your Implementation

After setting up the code, ensure to test it on various objects to confirm it is working as expected. You can manually check the source code of your web pages to verify the presence or absence of the NOINDEX tag based on your metafield setting.

Frequently Asked Questions

Why isn't my meta NOINDEX tag showing up?

Ensure that you have correctly referenced the custom metafield with the correct namespace and handle (e.g., product.metafields.custom.hide_from_search_engines). Also, double-check that your snippet is correctly placed within the <head> section of your theme.liquid file.

Can I apply the same logic to other meta tags like NOFOLLOW?

Absolutely! You can extend the same logic to include other meta tags by simply adding additional conditions and metafields as needed.

Conclusion

Implementing dynamic meta NOINDEX tags in Shopify using custom metafields is a powerful way to control the visibility of your store's pages in search engine results. With some careful setup and coding, you can achieve this functionality efficiently. By following the steps outlined in this guide, you'll be well on your way to mastering this aspect of Shopify development and improving your store’s SEO strategy.