Set Meta Title and Description for Blog Tags in Shopify

Question

I'm starting to migrate my blog from wordpress to shopify. I'm trying to use the blog tags to split posts into categories.

The problem is the meta titles for tags are auto generated, and the meta description is auto copied from the blog pages meta description. This is going to be awful SEO for the high level category/tag pages.

I spoke to support who say there is no way of editing this info. Could anyone suggest a way of editing the theme files to add unique titles and descriptions for each tag? There will only be about 10 but using conditionals on every page load seems pretty terrible? I'm not a coder...

The closest I've found would be something like this?

How to edit content on pages for Collection Tags in Shopify

...few hours later in theme.liquid I've tried doing the following in the title which seems to work.



    
        {% if current_tags contains 'News' %}
        News page title
        {% elsif current_tags contains 'How To' %}
        how to page title
        {% else %}
      {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}
      {% endif %}

I could do something similar for the meta description. Just wondering if this is a terrile way to do it, would it cost much page load time?

drip drip · Accepted Answer · 2017-06-21T05:23:05

Your solution is not very dynamic.

There is a few ways you can approach this and make it fully dynamic, so that you don't have to write any code for each additional tag.

Here is one example:

Create a navigation with Web Address links. The title will be the tag name and the URL will be title/description.

So something like so:

Linklist Menu:

title.................../ URL...............
This is the meta title / #meta_title_tag1 
This is the meta desc / #meta_desc_tag1

And in the head section you will have similar code:

{% assign tag_size = current_tags | size %}
{% assign meta_title = current_tags | prepend: 'meta_title_' %}
{% assign meta_desc = current_tags | prepend: 'meta_desc_' %}

{% if tag_size == 1 %}
    {% for link in linklists[settings.meta_nav].links %}
        {% assign url = link.url | split: "#" %}
        {% if url[1] == meta_title %}
            {{ link.title }}
        {% endif %}
        {% if  url[1] == meta_desc %}
            {{ link.title }}
        {% endif %}
    {% endfor %}
{% endif %}

Break Down of the code:

{% assign tag_size = current_tags | size %}

We create the tag_size variable so that we can check if we are on a tag page and if there is only 1 tag, because the user can add a second tag and then our logic won't work. ( But if you like you can get the first tag and apply the meta title and descriptions only for him )

{% assign meta_title = current_tags | prepend: 'meta_title_' %}
{% assign meta_desc = current_tags | prepend: 'meta_desc_' %}

We prepend a prefix to the current tag in order to check the title and description.

{% if tag_size == 1 %}
....
{% endif %}

This is the if that checks if the tag is only 1.

{% for link in linklists[settings.meta_nav].links %}
...
{% endfor %}

Here we loop all of the links in the navigation menu we created. Where settings.meta_nav is a link_list field in the Settings Schema of the theme. You can hard code the navigation handle if you like here, it's your choice.

{% assign url = link.url | split: "#" %}

Here we strip the URL from the "#" that we added.

{% if url[1] == meta_title %}
    {{ link.url }}
{% endif %}
{% if url[1] == meta_desc %}
    {{ link.url }}
{% endif %}

And here is where we check if the current link.title is equal to the prefixed tags we created and if they are, we output their link.url which is the title/description we are looking for.

All of this can be done with a global section as well if you are looking for a large content and you like to use a textarea instead of a text field.

Set Meta Title and Description for Blog Tags in Shopify

1 Answers

Break Down of the code: