Meta tags are, as the name suggests, pieces of html that you add to your web pages to provide meta data. In other words, meta tags describe your web page and can include things like who authored the page, the keywords to associate with the page, a general description of the page and various other pieces of data that apply to your web page but aren’t necesary for the end user to see
Meta tags are sometimes used to verify the ownership of a site. For example, if you want to hook up a Pinterest business account to your Shopify shop, Pinterest will ask you to add a meta tag to your site; the assumption being that only the owner of the site will have access to the underlying html and if you manage to shoe-horn your meta tag in, you’ve basically proven that you own the site.
The process of adding a meta tag to your Shopify site is pretty simple. It does, however, require you edit the template. Be warned, you’ll be diving into the actual code of your chosen theme and modifying that. This can seem scary, but it’s pretty simple in reality, and all you are doing is editing text.
Log in to Shopify, click on the Online Store
under Sales Chanel
in the left hand menu.
{: .center-block}
A secondary menu should slide in and Themes
should already be selected for you. If not, click on Themes
.
{: .center-block}
It’s always a good idea to backup your theme in case you break something so click on the elipses(three dots) towards the right hand side of the page near the Customize theme
button and select Download theme
to get a backup emailed to you.
Now you have your backup, click on the elipses again and this time select Edit HTML/CSS
.
{: .center-block}
You’ll see a file listing in and a helpful message saying ‘Pick a file from the left sidebar to start editing’.
In general, you’ll need to edit a file called theme.liquid
. Shopify uses a special type of markup or templating language which gets converted into HTML, which is why the file has a .liquid
extension. These template files are a combination of HTML and essentially ruby code which allows for things like loops and other coding constructs not normally available in plain HTML.
HTML pages (and by extension, liquid templates) contain various sections which are contained within opening and closing tags
. One of these sections is called the head
. As it’s name implies, the head
section sits at the top of the page and it’s here that meta tags are inserted. If you look at the template for your site, you’ll probably already have a few meta tags. That’s great.
To inlude your Pinterest meta tag, just copy the meta tag that Pinterest has supplied you and insert it somewhere between the <head>
and </head>
tags. If you have a few meta tags in your document, that’s great, just paste your new one in below those and hit the Save
button.
The Pinterest meta tag will probably look something like
<meta name="p:domain_verify" content="987e54321234a678909f7654321234"/>
Below you can see an example of the first few lines of a liquid template with a Pinterest meta tag included and highlighted in yellow.
{: .center-block}
Remember to save your work.