I *scoured* the interwebs for weeks on how to do this for my wife's Shopify site (https://www.SkoshieAndFriends.com), and was unable to find anything. Which blew my mind.
We were trying to get SEO buttoned up for her site. Adding proper SEO plugs, titles, descriptions, alt image tags... the works. But one thing I was looking to do, was take the tags section for each product, and add that as meta keyword tags.
What are Meta Tags?
Meta tags are HTML elements that provide information about a web page to search engines and other clients. They are placed within the <head> section of an HTML document and can be used to specify various details such as:
- Title: The main title of the page that appears in search engine results.
- Description:
- Keywords:
- Author: The name of the author of the page.
- Viewport:
Here's a basic example:
<head>
<title>My Website Title</title>
<meta name="description" content="This is a brief description of my website.">
<meta name="keywords" content="keywords, related, to, my, website">
</head>
Why are meta tags important?
- Search Engine Optimization (SEO):
- User Experience: They can provide users with a better understanding of the page's content before clicking on it.
- Social Media Sharing:
While meta tags were once a crucial factor in SEO, their importance has diminished somewhat in recent years. Search engines now rely more heavily on on-page content and other factors to determine a website's ranking. However, they still play a valuable role in providing context and information to both search engines and users.
Product Tags
What I am talking about are THESE tags in the product pages for Shopify:
These tags are used for many things in Shopify... Search, collections, and more. But they ARE NOT used by default in Shopify for Meta tags. So I had to find a way to do this...so I dove into the liquid.
NOTE: Liquid is Shopify's templating language that allows users to customize their online store without needing extensive technical knowledge. It's used to load dynamic content, such as product details, price, and quantity, onto Shopify stores.
It's also the code behind the scenes.
{% if request.page_type == 'product' %}
<meta name="keywords" content="
{% for tag in product.tags %}
{{ tag }},
{% endfor %}
">
{% endif %}
How To Implement This...
First.. log into your Shopify admin via https://admin.shopify.com. Then, under Sales Channels, go to Online Store
Then, under Themes. select the menu via the ellipses (...) next to Customize, and select Duplicate. This will create a backup copy of your theme, in case this change doesn't go so well... you can revert back to this copy of your theme and restore it. I suggest doing this before making ANY changes to your site via the theme or adding any sort of plugins (as they all inject something into the theme). It's just a good practice to follow!
Once you have backed up/duplicated your theme, then select the Customize button.
Next, select the ellipses menu (...) at the top left of the screen and select Edit code
You are now going to see something like this:
On the left side click on theme.liquid
This will open up the main "liquid" theme code for the site. If you're familiar with HTML, and any sort of scripting (PHP, JavaScript, etc.), this should all look pretty familiar...
Now, this can pretty much go anywhere within the <HEAD> ... </HEAD> area of the code, but here is where I placed mine, after where it says render 'meta-tags'
add in the code shown above in this article, and you should be good to go! Just click Save in the upper right hand corner of the screen.
One other tidbit of information...
(Note: these next examples are not from this site, but from my wife's Shopify store - www.SkoshieAndFriends.com - she is a children's book author and illustrator - go check her out!)
Now, when you go to your website, and visit a product page, and you view the source of the page from your browser (usually available via the right-click menu, depending on your browser... I think they are all the same-ish?)
you will see it in the source:
One thing you may want to do, is add a tag or tags at the end of the code you inserted, so the keywords do not END with a comma. They will do this by default, because it just loops through all of the tags, and it has no concept of what the last tag is - as it's simple code. You may be able to code around this, but, I personally have not implemented that in this code.
{% if request.page_type == 'product' %}
<meta name="keywords" content="
{% for tag in product.tags %}
{{ tag }},
{% endfor %}
Skoshie and Friends,Skoshie & Friends">
{% endif %}
You can see this addition highlighted in bold above. So all her product pages include the tags "Skoshie and Friends", and "Skoshie & Friends".
So, that's it! You should now be able to add your product tags as meta keywords into ONLY your product pages in Shopify!
Any other good Shopify hacks that are lesser known that you stumbled upon you want to share? Leave them in the comments below!