Automatically add product title to SEO meta

[earthtoplanet]

Hello! I just moved my site to Shopify from Wordpress.org. On WP, when I created the title of a post it dynamically inputted that title into the SEO elements

I see with Shopify that you need to manually input the SEO content (Page Title, Description, URL). Is there a free way to make this process dynamic  so that when I input the product title it would automatically input the same title into the SEO fields? I would plan to use a template which mirrors the screenshot below.

If there is no solution for doing this with a dynamic variable or code tweak, I'm open to an app though am not looking to spend money on an SEO app at this moment.

Really appreciate the help!

[Niki_K · Accepted solution]

Hi @earthtoplanet,

no, it's my bad, I didn't explain it well. Sorry. Keep just product there as it is. 

I've tried it in my development store and it's working.

Try this:

{% if template contains 'product' %}
    	<title>{{ product.title | append: " | Earth To Planet Cartoons" | strip_html | escape }}</title>
{% else %}
    	<title>{{ page_title | append: " | Earth To Planet Cartoons" | escape }}</title>
{% endif %} 

[Niki_K]

Hi @earthtoplanet,

you'll need to edit the code. Go to your theme.liquid file and find the section with title. 

Remove the title tag and paste this: 

{% if template contains 'product' %}
    	<title>{{ product.title | strip_html | escape }}</title>
{% else %}
    	<title>{{ page_title | escape }}</title>
{% endif %} 

Since I don't know what theme you're using, I've written only if template contains 'product' – to be more specific, you can insert the name of the product file instead of just 'product' such as 'main-product'. This should be also working. 

[earthtoplanet]

Hi @Niki_K. Thanks for your help. I'm using the Minimal theme. 

I apologize, but I don't know what should be substituted in for 'product'

My goal is to have the same template for every product which inputs the product name and appends " | Earth To Planet Cartoons" so it would look like "Product Name | Earth To Planet Cartoons. I tried modifying your code but didn't do it correctly. Any ideas?

{% if template contains 'product' %}
    	<title>{{ product.title | strip_html | escape | append: " | Earth To Planet Cartoons"}}</title>
{% else %}
    	<title>{{ page_title | escape }}" | Earth To Planet Cartoons"</title>
{% endif %} 

  {% if page_description %}
  <meta name="description" content="{{ page_description | escape | append: " | Earth To Planet Cartoons"}}">
  {% endif %}

[Niki_K · Accepted solution]

Hi @earthtoplanet,

no, it's my bad, I didn't explain it well. Sorry. Keep just product there as it is. 

I've tried it in my development store and it's working.

Try this:

{% if template contains 'product' %}
    	<title>{{ product.title | append: " | Earth To Planet Cartoons" | strip_html | escape }}</title>
{% else %}
    	<title>{{ page_title | append: " | Earth To Planet Cartoons" | escape }}</title>
{% endif %} 

[earthtoplanet]

Awesome- thank you, @Niki_K 

1. I created a test product and can see that the HTML header is now working: 

However, in the actual product creation page, it still shows as 

Is there an additional update I could make to have the UI accurately display the HTML Title?

Also, do you have the bandwidth to help me make a similar update for the HTML Description? The template I'm using is: This Earth To Planet cartoon is appropriately titled, "PRODUCT NAME". Some will see it and laugh, others will become stark raving mad.

Thank you for your help!

[Niki_K · Accepted solution]

Hi @earthtoplanet,

1. Earth to Planet Cartoons is hardcoded, so I don't think that you can see it in the UI

2. Meta description

{% if template contains 'product' %}
      <meta name="description" content="This Earth To Planet cartoon is appropriately titled, {{ product.title | escape }}. Some will see it and laugh, others will become stark raving mad.">
{% else %}
      <meta name="description" content="{{ page_description | escape }}">
{% endif %}

I have two notes.

1. From SEO point of view, the meta descriptions could be seen as a duplicity. The only thing which changes is the product title, which isn't enough in my opinion.

2. Google has started overwriting titles and meta descriptions. This means that even if you write unique titles and meta descriptions for each product, it might happen that they will show up differently in SERP. I've put together information about this in one of my blog posts, if interested, here is a link: https://www.nikikozak.me/marketing/2021/07/25/titles-metadescriptions/

Hope this helps!

[earthtoplanet]

Great! Thank you for the help and insight, @Niki_K.

[davidculbertson]

Hi Niki,

Question for you: Does your solution work for product pages that already have a manually added page title or META description tag?

[Niki_K]

Hi @davidculbertson,

yes, this works as well. Basically, this solution will overwrite the manually added page titles and meta descriptions.

When you use this solution, view the source code of the page to make sure it works. Besides this, keep in mind that it might take some time before you see the new titles and meta descriptions displayed in the SERP. Plus, as mentioned in one of my previous comments, Google has started overwriting the titles and meta descriptions. You can find more information in my article here: https://www.nikikozak.me/marketing/2021/07/25/titles-metadescriptions/

Hope this helps!

[davidculbertson]

Thank you, that's good to know.

I know that titles and tags are subject to rewrite by Google for SERP
display but I still like to add just in case Google doesn't do a rewrite.
🙂

[davidculbertson]

Niki,

I was about to implement your title automation until I looked at the theme.liquid and see a ton of automation already in there. Does this code block look "standard" to you? Do I just insert your recommended code at the top?

<title>
{{- page_title -}}

{%- if current_tags -%}
{%- include 'advanced-tag-loop' -%}
{% assign title_tags = '' %}
{% assign meta_tags = current_tags | join: ', ' %}
{%- for tag in current_tags -%}
{% assign is_advanced_tag = false %}
{% assign cat = tag | split: '_' | first %}

{%- unless cat == tag -%}
{%- if cat_array contains cat -%}
{% assign is_advanced_tag = true %}
{% assign title_tags = title_tags | append: ', ' | append: tag | replace_first: '_', ': ' %}
{%- endif -%}
{%- endunless -%}

{%- unless is_advanced_tag -%}
{% assign title_tags = title_tags | append: ', ' | append: tag %}
{%- endunless -%}
{%- endfor -%}
{{ 'general.title.tags' | t: tags: title_tags | remove_first: ', ' }}
{%- endif -%}

{%- if current_page != 1 -%}
{{- 'general.title.page' | t: page: current_page -}}
{%- endif -%}

{%- unless page_title contains shop.name -%}
{{- 'general.title.shop' | t: shop: shop.name -}}
{%- endunless -%}
</title>

[Niki_K]

Hi @davidculbertson,

sorry for my late response. What theme are you using? Could you share me your site URL? Have you added any SEO apps to your store? 

I see that the piece of code adds tags to the meta titles and shop name (if not already included). Normally, the titles equal the page titles. 

Looking forward to your reply!

[davidculbertson]

The site is https://www.purelyintegrative.com/

In the past, I've added titles and META tags manually, but adding/removing
products too quickly for that manual process to be effective.

[PedroGS]

Hello @Niki_K 

In my case when I pull an SEO crawl from the site I get a title tag like this:
"Natural Baby Water Toys | i play.® by Green Sprouts®\n\n \n \n \n\n \n\n \n – green sprouts"

The "/n" are tags added to the product backend as it varies the amount of "/n" from product to product.

I tried applying your solution but it modifies the title tag on the browser showing "<title>" and </title>" so I had to revert any changes

This is our current code for <title> 

<title>
{{ page_title }}

{% if current_tags %}
&ndash; "{{ current_tags | join: ', ' }}"
{% endif %}

{% if template == 'list-collections' %}
Sustainable Baby and Toddler Products | i play.® by Green Sprouts®
{% endif %}

{% if current_page != 1 %}
&ndash; {{ 'general.pagination.seo_title' | t }} {{ current_page }}
{% endif %}

{% unless page_title contains shop.name %}
&ndash; {{ shop.name }}
{% endunless %}
</title>

my site is greensproutsbaby.com and we are using the theme Atlantic 14.0.1 by PixelUnion

Thank you for your help!

[Niki_K]

Hi @PedroGS,

sorry for the radio silence. Thanks for sharing your solution! I'm happy to hear that you found one! 

[TankT]

Hi Niki, Thanks for your suggestion! I fixed this issue, but I met a new problem. What should I do if the store name has been inserted into the title of some pages? Is it possible to add judgment to analyze whether the title contains the store name?