Optimizing Your <HEAD> Tag For SEO
You have likely seen that section in the administration panel under the Edit Store screen…”HEAD Tag Content/CSS”. If you’re like most of us, you generally start with something like this in there:
<base href="&mvt:global:basehref;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/miva.css" rel="stylesheet" type="text/css" media="screen, projection" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
Then you go about building out the site, adding all sorts of JavaScript files and some CSS files. Hopefully, with the importance of Search Engine Optimization on every store owner’s mind, you go into the Domain Settings, click on SEO Settings and enable the SEO-Friendly Store Front as well as the Short Links, giving your site easy-to-share links to help bring in customers.
Now you are looking good. The links are short and you have JavaScript & CSS in external files. So you are done…right? Not quite. With all your products sitting in multiple categories, you have the dreaded problem of duplicate content that search engines really don’t like. This is where the great rel=“canonical” links come in handy. So to help clear up your category and product pages, the HEAD tag changes:
<base href="&mvt:global:basehref;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<mvt:if expr="g.Screen EQ 'SFNT'">
<link rel="canonical" href="http://&mvt:global:domain:name;/" />
<mvt:elseif expr="g.Screen EQ 'CTGY'">
<link rel="canonical" href="http://&mvt:global:domain:name;/category/&mvta:category:code;.html" />
<mvt:elseif expr="g.Screen EQ 'PROD'">
<link rel="canonical" href="http://&mvt:global:domain:name;/product/&mvta:product:code;.html" />
</mvt:if>
<link href="css/miva.css" rel="stylesheet" type="text/css" media="screen, projection" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
All right…you’re set with the canonical tag. Now you think, let me get some specific keywords and descriptions going for the category & product pages. With the addition of the Tool Kit module by Emporium Plus you can add conditionals to your HEAD tag to make the search engines happier. Additionally, you can add a rel=“canonical” for all your other pages that are not the store front, a category or product. Finally, for good measure, you toss in some instructions for the robots and conditionals addressing secure pages. All these changes make your final HEAD tag look like this:
<base href="&mvt:global:basehref;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<mvt:item name="toolkit" param="pageinfo" />
<mvt:if expr="g.Screen EQ 'SFNT'">
<link rel="canonical" href="http://&mvt:global:domain:name;/" />
<mvt:elseif expr="g.Screen EQ 'CTGY'">
<link rel="canonical" href="http://&mvt:global:domain:name;/category/&mvta:category:code;.html" />
<mvt:elseif expr="g.Screen EQ 'PROD'">
<link rel="canonical" href="http://&mvt:global:domain:name;/product/&mvta:product:code;.html" />
<mvt:else>
<link rel="canonical" href="http://&mvt:global:domain:name;/&mvt:pageinfo:code;.html" />
</mvt:if>
<mvt:if expr="'https' CIN g.basehref">
<meta name="robots" content="noindex,nofollow" />
</mvt:if>
<mvt:item name="toolkit" param="productmeta|CODE|l.all_settings:product:code" />
<mvt:if expr="l.settings:meta:keywords">
<meta name="keywords" content="&mvte:meta:keywords;" />
<mvt:else>
<mvt:item name="toolkit" param="categorymeta|CODE|l.all_settings:category:code" />
<mvt:if expr="l.settings:meta:keywords">
<meta name="keywords" content="&mvte:meta:keywords;" />
<mvt:else>
<meta name="keywords" content="" />
</mvt:if>
</mvt:if>
<mvt:item name="toolkit" param="productmeta|CODE|l.all_settings:product:code" />
<mvt:if expr="l.settings:meta:description">
<meta name="description" content="&mvte:meta:description;" />
<mvt:else>
<mvt:item name="toolkit" param="categorymeta|CODE|l.all_settings:category:code" />
<mvt:if expr="l.settings:meta:description">
<meta name="description" content="&mvte:meta:description;" />
<mvt:else>
<meta name="description" content="" />
</mvt:if>
</mvt:if>
<link href="css/miva.css" rel="stylesheet" type="text/css" media="screen, projection" />
<mvt:if expr="g.secure">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<mvt:else>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</mvt:if>
Have any questions or suggestions about the code above? Leave them in the comments so I can update as needed. That’s all there is to it. Until next time, happy coding.
Join the Discussion
- July 25, 2011
I have also considered this question previously, yet haven’t reached the conclusion, Sigh ~
- September 09, 2011
I’m a miva merchant newbie. I do have ToolKit installed but haven’t opened my store to the public yet.
I’m getting ready to open it in a couple of days. SEO is going to be very critical to me because I have a product, electronic cigarettes, that are not allowed to advertise with Google AdWords or with FaceBook ads. So, I’m wondering, since this article was written over a year ago, is this the most up-to-date version of this code for Miva 5.5, PR8? And, if so, just copy and paste the entire piece, as is?
The only thing that is currently in my HEAD Tag Content/CSS is the following line, inserted by Kemper Strategics for Google Analytics. Do I paste the code above or below this?
<mvt:item name=“kse-analytics” param=“async” >
Thanks for any help.
Gary Lee
