|
Optimizing Your <HEAD> Tag For SEO
Posted: 15 Apr 2010 01:36 PM PDT
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 section on our blog post click here.
| 
