Best way to have input settings that can be bound to different objects for setting meta NOINDEX

masebase · ‎09-19-2024

I have been learning Liquid and Shopify development over the past couple weeks and I've gotten pretty comfortable with most of it.

Now I am looking to develop a way to control the Meta NOINDEX tag in the <head> using an input setting. The idea here would be to have a "Hide from search engines" checkbox metafield on each object (Product, Page, Collection, Custom Metaobjects). Then to use this data to determine on each object record whether to hide from search engines, and if so, print the Meta NOINDEX tag in the header.

Here are my challenges:

Theme settings are global and cannot have dynamic sources.
Header sections' input settings cannot have dynamic sources.
Liquid in one section (ie, metatags component) cannot reach into or read settings in another section (right?)
Appending or inserting these tags via javascript runs the risk of them not being seen by crawlers if they don't execute javascript when rendering the DOM

Curious what ideas other shopify developers might have?

masebase · ‎09-19-2024

I've found a solution! I think this would be valuable for others, so I will explain here.

It's not the best design, but it works. Here is the overall approach:

Create a custom metafield on each object you want to use this for. If you want control over printing NOINDEX (to hide it from search engines) in your store, then do this on all your main objects: Product, Collection, Page, Blogs, Blog Posts, Metaobjects, etc... Be sure to: make it a boolean (true / false) value, and name the metaobject the same for all objects, to make it easy. Here is just one screenshot from Products object, but you will do this across all objects that you wish to have this control.
Create a new "snippet" or component in your theme called `meta-seo-tags.liquid` in the /snippets folder (call it whatever you like)
Render this new snippet in your theme.liquid file, and ensure it is being rendered inside the <head> tag. Like here:

Here is the code for the snippet. You can check if each object exists which will indicate to you what kind of page you're on. So if the `product` object is present, then you are on a product page. If the `collection` object is present, then you're on a collection page, etc. Then you need to a big IF ELSIF statement or CASE / WHEN statement to extract the data on the given object.

snippets/meta-seo-tags.liquid

{%- 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 -->

View solution in original post

beauxbreaux · ‎09-19-2024

(Edit: this did not work - I just tested it + I had a few syntax errors I had to fix but still nothing)

This is totally a guess and I have no idea if I am understanding you correctly but are you able to establish this with using metafields?

So for example:

And then putting the code into your <head> right before the meta render tag like this:

{% if page.metafields.seo.hide_from_search_engines %}
      <meta name="robots" content="noindex">
    {% endif %}

This would be just for pages only. But then for the individual pages you would then check the box if it is hidden or not:

I honestly have not idea if it would work. It is a good question and one I have never even thought of.

Beaux Barker
Developer
Hire me on Fiverr

masebase · ‎09-19-2024

So close @beauxbreaux ! ANd thanks for the suggestion. It got my brain firing and was able to get to the solution I posted here.

I think the reason yours isn't working is b/c you're not referencing the custom metafield properly with the namespace (custom) and handle (seo_hide_...).

You have: page.metafields.seo.hide_from_search_engines

Should be: page.metafields.custom.seo_hide_from_search_engines

masebase · ‎09-19-2024

I've found a solution! I think this would be valuable for others, so I will explain here.

It's not the best design, but it works. Here is the overall approach:

Create a custom metafield on each object you want to use this for. If you want control over printing NOINDEX (to hide it from search engines) in your store, then do this on all your main objects: Product, Collection, Page, Blogs, Blog Posts, Metaobjects, etc... Be sure to: make it a boolean (true / false) value, and name the metaobject the same for all objects, to make it easy. Here is just one screenshot from Products object, but you will do this across all objects that you wish to have this control.
Create a new "snippet" or component in your theme called `meta-seo-tags.liquid` in the /snippets folder (call it whatever you like)
Render this new snippet in your theme.liquid file, and ensure it is being rendered inside the <head> tag. Like here:

Here is the code for the snippet. You can check if each object exists which will indicate to you what kind of page you're on. So if the `product` object is present, then you are on a product page. If the `collection` object is present, then you're on a collection page, etc. Then you need to a big IF ELSIF statement or CASE / WHEN statement to extract the data on the given object.

snippets/meta-seo-tags.liquid

{%- 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 -->

Best way to have input settings that can be bound to different objects for setting meta NOINDEX

Best way to have input settings that can be bound to different objects for setting meta NOINDEX

Community Blog Articles