16 DIY Magento SEO Tweaks

Over the past year, I’ve been learning more and more about optimizing a Magento store. Unfortunately, Magento is not search engine friendly, at least up to Community Edition 1.8 and Enterprise Edition 1.12.

Magento Tricks by Traffic MotionLater releases of the platform may have already solved some of these problems, but a lot of Magento sites out there are on these older versions. Even worse, the cost of upgrading from one version to the next can cost several tens of thousands of dollars, and there is little incentive to do that if the only benefit to doing to is some minor SEO improvements.

I’ve divided up this post into three sections. The first is attempting to speed up Magento, the second is on-site improvements including a subsection on structured data, and the final section is on collecting more data from third party tools like Google Analytics and Webmaster accounts from Google, Bing, and Yandex.

Speeding Up Magento

Server Speed – Hardware & Software

The first thing you should do is either read Magento Site Performance Optimization, or give a copy of the book to your IT team or Magento developers. While not every host will want you running HHVM or have a different type of PHP caching solution, you’ll want to familiarize yourself with how hardware and software on the server can improve your store’s speed.

Improve Speed from the Backend


There are a lot of little tricks and button to press in the Magento System Configuration panels, and some of them may be very useful for incremental gains in speed.

Disable These Four Caches

Oddly enough, disabling a handful of Magento’s caches may actually speed up your site. The reasoning is counterintuitive, but makes perfect sense once you realize the database is the bottleneck at which Magento can get stuck. Allowing Magento to generate these resources on the fly, rather than querying the database to find cached versions that may not exist, can make your server response time increase (or at least stabilize).

.htaccess Tweaks

Whether you’re on NGinx or Apache, there are a number of tweaks you can make to your store’s .htaccess file that can boost your speed. These mostly involve compression and setting expiry headers, but they can make your load faster for new and returning visitors.

On-Site Improvements for Better Crawling

Setting a Unique Home Page Title

While “best practice” for product pages is “Brand Product | Description | Site Brand,” the home page should have the site’s name first. But with how Magento handles title suffixes, you might have a home page title of “Site Brand | Site Brand” if you don’t use this very simple trick to set the home page’s title tag.

Turn Off Category Paths in URLs

This trick was confirmed from Everett Sizemore, but it’s something I’ve recommended. Instead of letting Magento build product URLs with all sorts of different category structures depending on how many categories a product is in, just turn them off. It’s an easy fix in the System > Configuration > Catalog > Search Engine Optimization tab. While you’re there, turn on the Canonical tags.

Cache Breadcrumbs

Magento has a problem in that breadcrumbs are generated the first time a user visits a page (although the breadcrumbs will be different depending on the path they took to get there). Unfortunately, the breadcrumbs are not added to the page cache, so subsequent users and search engines will not have the benefit of seeing the breadcrumb navigation links. This seems like a strange bug, but it’s an easy fix.

NoIndex Filtered Navigation Pages

In order to keep your site from having tons of duplicate content indexed by Google due to all of the different filtered navigation, use this simple extension to set the robots meta tag to NOINDEX,FOLLOW. That way, you can focus the search robots on crawling and indexing the more important pages – categories and product pages.

NoIndex Internal Search Results

While we’re using the scalpel on our pages to keep them out of the search index, let’s get internal searches out of the index. This easy layout update will set the robots meta tag to NOINDEX,FOLLOW on any search results pages that Google or Bing may crawl.

Structured Data Implementation

Basic Schema.org Markup

I can’t do any better than the job Robert Kent did in his book Magento Search Engine Optimization, so just buy that book, follow the instructions for modifying some of your template files, and enjoy easy, valid structured data for your product pages, logo, and any contact info you have on the site.

Extened Schema.org with ProductOntology

One thing I can help you add to your basic Schema.org markup is ProductOntology.org data, which provides external reference classes for each of your products. What’s the benefit? I don’t know. What’s the potential downside? None that I can think of.

Facebook/Pinterest Open Graph Cards

Facebook and Pinterest both use Open Graph markup to provide metadata that they can read and use in enhanced links and pins of your site’s content. Implementing this type of markup is actually very simple.

Twitter Cards

Similarly, Twitter has its own set of meta tags that you can add to your site. The result is more information contained in tweets of your products, including images, prices, and references to your site’s official Twitter page. Again, the implementation is easy.

Collect More Visitor and Search Engine Data

Increase Google Analytics Site Speed Sample Rate

By default, Google Analytics samples 1% of your site’s visitors for server response, page load, and other site speed data. For websites with 50,000 monthly page views, this is only 500 samples per month, which is definitely not enough data to determine if your store is fast or slow. This simple tutorial develops a custom extension to up that sample rate to 10%, which gives you a much better gauge of the performance of your website.

Add Webmaster Verification Meta Tags

Magento has a section in the backend to add miscellaneous tags and scripts to every page of the site. But what if you just want to add tags to your homepage and maintain them in a separate block? Google, Bing, and Yandex require a verification meta tag on the homepage, so why include it on all 10,000 other pages of your site? Let’s keep the HTML cleaner and implement the tags on just one page.

Disable Caches to Make Magento Site Faster? Yes!

Here’s a really cool, useful trick I learned from Mathieu Nayrolles’ new book Magento Site Performance Optimization, published just a couple months ago by PacktPub. While I don’t love every book from Packt, this one is a clear winner, and well worth the cost as either an ebook or paperback.

Magento Tricks by Traffic Motion

Surprisingly, by disabling some of the caches in the Magento store backend, you can actually increase the performance on the frontend. This is primarily reflected in the server response time, and I’ve seen noticeable improvements in server response time from a variety of analytics tools.

Months before reading this book, I wrote a very basic site optimization article on increasing Magento speed from the backend of the site. Consider this strategy an extension of what I wrote there, as most of that advice still holds valid. And remember not to disable the Full Page Cache, or you will have a noticeably slower Magento store.

How To Do It

Navigate to System > Cache Management in your Magento store, and simply disable the following caches:

  • Collections Data (Collection data files.)
  • EAV types and attributes (Entity types declaration cache.)
  • Web Services Configuration (Web Services definition files (api.xml).)
  • Web Services Configuration (Web Services definition files (api2.xml).)

At the end of it, you should have a screen that looks like this:

magento-cache

And that’s it. You’re done. Enjoy a noticeably faster Magento site.

Does This Really Work?

Sure, take a look. This first screenshot is from a Redis integration into a Magento Enterprise store.

Redis analytics

You can clearly see a drop in the response time that Redis is tracking once those caches are disabled.

And here is it from Google Analytics. A little harder to tell, but there is a clear drop-off in the server response time after the caches are disabled.

Google Analytics server response data

“What about the bots?” you ask. Google Webmaster Tools crawl stats shows an even greater differences in how quickly Google itself crawls a website before and after disabling these four caches.

Webmaster Tools crawl stats data

Look at how jagged the lines are before and after the caches are disabled. Googlebot was having a much harder, more inconsistent time crawling the website. It’s still not ideal (faster is always better), but the site is now responding faster for Google as it crawls the webnsite, and there aren’t huge spikes in the data.

All in all, disabling those four caches in Magento can provide a better experience for users and bots, which is what ecommerce and SEO are all about.

Why It Works

According to Nayrolles, this works because it takes Magento longer to check the database to see if these items are cached and then generate them if need be. By simply disabling the caches, Magento does not need to check the cache (a resource-intensive, slow process), and can just generate what it needs on the fly.

I’m not an IT guy, and I can’t say I understand in great depth why this works, but the three independent graphs really speak for themselves. Magento says it’s gotten faster, Google Analytics data gathered from users agrees, and Googlebot itself chimes in to confirm it.

So disable those caches, even for a few days or over the weekend, and see if you get the same results.

How to Add ProductOntology.org Markup to Magento Product Pages

I’ve been thinking of doing a Schema.org for Magento tutorial for some time now, but two things in particular has been stopping me.

For one, there’s little I can do to add to the wonderful job GotGroove.com did on their Evolving Ecommerce blog. They cover it all, from adding the Product Schema, the name, SKU, image, description, and all of the Offer data for every item in Magento.

Magento Tricks by Traffic Motion

Second, Robert Kent, in his book Magento Search Engine Optimization, does just as great of a job — although slightly differently — in implementing Schema.org structured data for Magento stores. He also covers all of the basics to get an ecommerce website using valid markup.

With that in mind, I won’t reinvent the wheel. There’s no point. Just go check out GrooveCommerce and buy Kent’s book from Amazon and do the basic implementation yourself.

What Is Product Types Ontology?

But what I can offer is one further integration for Magento stores. That is, the Product Types Ontology from ProductOntology.org. Product Types Ontology, according to the website, “provides ca. 300,000 precise definitions for types of product or services that extend the schema.org and GoodRelations standards for e-commerce markup.”

What’s the benefit of doing this? To be honest, I’m not quite sure. Google and Bing aren’t using ProductOntology.org class identifiers in their search results pages. However, Google and Bing, by implementing the “additionalType” property on Schema.org, obviously have services of this type in mind.

What ProductOntology.org markup helps us do is add an external link reference to each of our product pages, telling search engine robots, browsers, and other applications more about our products, without including a lot of extraneous, redundant information on the product page itself. Let the product page do what it does best — briefly and accurately describe the item and provide users the opportunity to purchase it. To do this, we’ll be utilizing Schema.org’s “additionalType” property, with a link reference to a class identifier on the ProductOntology.org website.

Implementation Guide for Magento

While I’m sure there would be a more elegant way to do this, for many small and medium sized stores, this should be more than sufficient, and is easy to do without spending precious resources on Magento development. In the future, this type of markup may be worth doing through a custom module or extension, but this guide will at least get us to be able to use ProductOntology.org markup on product pages in any Magento store.

Let’s start with the end. This is what we want the code to look like for each product page:

<link itemprop="additionalType" href="http://www.productontology.org/id/Product_Type">

With “Product_Type” being replace with the actual product type. And where do we get this product type? The Product_Type comes from Wikipedia. Using the Magento demo store’s Canon PowerShot A630 8MP Digital Camera with 4x Optical Zoom as an example, we would search for the most relevant page on en.wikipedia.org, in this case http://en.wikipedia.org/wiki/Point-and-shoot_camera and use the part after “wiki/” as the ID for the ProductOntology.

Creating the Product Ontology Attribute

The first step in Magento is creating a Custom Attribute. In the admin section of your store, navigate to Catalog > Attributes > Manage Attributes > Add New Attribute. We’ll use product_ontology as the Attribute Code, set the scope to Global, set it to a Text Field, and leave everything else as the default values. Use “Product Ontology” as the admin label.

Now, we have to associate the new attribute with a set. Navigate to Catalog > Attributes > Manage Attribute Sets, and click on Cameras. On the right side of the screen, drag product_ontology over to the General section under Groups.

While we’re in the admin area, let’s give a product an ontology! Search for the Canon PowerShot A630 item under Catalog > Manage Products, and navigate to the General tab on the left of the product edit screen. Under Product Ontology, put “Point-and-shoot_camera” in the text field and save the product.

Editing the Product View Template File

Great, so it’s there and associated with a product. But it’s not displaying anywhere on the frontend since we set it not to display on the frontend. We don’t want it in the specifications table since it doesn’t really belong there.

In your Magento installation folder, navigate to magentoroot/app/design/frontend/base/default/template/catalog/product/ and open the view.phtml file.

If you followed the GrooveCommerce Schema.org implementation guide, you should have the Product itemtype already in this file (or the corresponding view.phtml file in your theme). If not, go use their guide now to get up to speed.

Under the <h1> tag for the product name (on or around line 51 of the default store), we’re going to add this single snippet of code to make this whole thing work:

<?php if ($_product->getProductOntology()): ?>
<link itemprop="additionalType" href="http://www.productontology.org/id/<?php echo $_product->getProductOntology() ?>">
<?php endif; ?>

That’s it! We’re done. Check on the frontend that it’s displaying on your site for the Canon A630. The code should look exactly like this:

<div class="product-name">
	<h1 itemprop="name">Canon PowerShot A630 8MP Digital Camera with 4x Optical Zoom</h1>
	<link itemprop="additionalType" href="http://www.productontology.org/id/Point-and-shoot_camera">
</div>

Now, whatever type of product you have, you can go to Wikipedia, find the most specific Wiki, grab the last part of the URI, and paste it into the Product Ontology field for any product you offer.

We also used a php if statement that will only display the ProductOntology link reference if the attribute is populated for the product. That way, you won’t have empty href attributes if you add a product and fail to add the Wikipedia class right away.

Updating Product Ontology Data in Bulk

Whether you have a handful or thousands of products, you can easily update the Product Ontology data by doing an export of your product info from Magento, then simply uploading the updates back into Magento. All you need to do is match up the SKU field with the Product Ontology ID that you’ve chosen for each product.

Wrapping Up ProductOntology.org Markup

This solution is quick, clean, and easy enough for even Magento novices to use. It’s also a no-risk way to add more structured data to your website and give search engines and browsers more information about your products.

While this solution works for all products, it could probably be done in a more elegant manner if someone wants to take this idea and run with it and develop a full extension for Magento. If you add new products to your site on a daily basis, filling in the Product Ontology field may become quite a hassle, and leaving the field empty is fairly useless.

However, for smaller ecommerce sites that just want more structured data, and who don’t update their products daily or hourly, this is a great way to add the ProductOntology class identifiers to your site.

Again, is there any tangible benefit to it? I don’t know. That’s why I haven’t dug deeper into this. Unless I see Google rewarding this type of structured data, I can’t recommend going beyond this very simple implementation guide and spending a lot of resources having expensive Magento developers create a custom module for it.

Add Google AdWords Dynamic Remarketing Code to Magento CMS & Home Pages

In a previous tutorial, we looked at how to add Google AdWords Dynamic Remarketing code to Magento’s product pages. That gets us some of the way there, and you can start remarketing with just that bit of code on your site (verified working on a live Magento Enterprise website).

Integrate Google Dynamic Remarketing in Magento

However, there are a lot more pages we can tag with the remarketing code, including the home pages, category and subcategory pages and listings, and CMS pages. We’ll take a look at the home page and static CMS pages in this tutorial, and tackle category pages in future one.

The reason we do the home page and CMS pages at the same time is that Google has a separate pagetype for each of these pages. If you add the CMS code to your Magento home page, though, you won’t have the correct pagetype. And if you add the home page code just on that page, you’ll need to remove the CMS page code to prevent having both tags on the home page.

Let’s tackle the CMS pages first, since they are remarkably similar to the product pages.

Creating or Adding to the local.xml File

First, navigate to your magentoroot/app/design/frontend/base/default/layout/ directory, and open the local.xml file located there. If you don’t have one, you’ll need to create one, and if you’re using a different package/theme, navigate to the correct folder rather than base/default as I did here.

In that local.xml file, we’re going to add the following code to it:

<?xml version="1.0" encoding="UTF-8"?>
<!-- other code -->
<layout>
<!-- other layout code -->
	<cms_page>
		<reference name="before_body_end">
			<block type="core/template" name="trafficmotion.remarketingCms">
				<action method="setTemplate">
					<template>trafficmotion/remarketing/cms.phtml</template>
				</action>
			</block>
		</reference>
	</cms_page>
</layout>

Easy enough, right? Now, we have to get the proper directory so that Magento knows what file to pull from where, and put the right code in that file.

Directory Structure for AdWords Dynamic Remarketing Code Layout

Here are the folders that we need to navigate to if you’ve read my previous AdWords Remarketing on Magento tutorial, or create them if they don’t yet exist.

  • magentoroot/app/design/frontend/base/default/template/trafficmotion/
  • magentoroot/app/design/frontend/base/default/template/trafficmotion/remarketing/

Next, we’ll get the actual code for the CMS pages. Magento is looking for the block to insert before the closing <body> tag, so let’s give it what it wants.

Creating the cms.phtml File

Since we don’t need to call any paramaters like the SKU or total value on the CMS pages, we don’t need any fancy PHP code. Plain old HTML will do just fine, though we still need to name our file with the PHTML extension. Create cms.phtml and add the following code to it:

<!-- Begin Google Code for Remarketing Tag -->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: '',
ecomm_pagetype: 'siteview',
ecomm_totalvalue: '',
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>
<!-- End Google Code for Remarketing Tag -->

Remember to use the actual code that Google gives you for your site. Your conversion ID probably isn’t XXXXX. Also remember to set the ecomm_pagetype to ‘siteview’ so AdWords knows what pagetype these are.

Wrapping Up Dynamic Remarketing Integration for CMS Pages

That’s all there is to adding the remarketing tag to your CMS pages. The only problem is, the code now appears on the homepage, as well as all other CMS pages. We’ll look at getting rid of it on the homepage next, as well as inserting the correct code. But here’s how the code will look on the actual pages of your Magento store:

<p class="bugs">Help Us to Keep Magento Healthy - <a href="http://www.magentocommerce.com/bug-tracking" onclick="this.target='_blank'"><strong>Report All Bugs</strong></a> (ver. 1.8.1.0)</p>
        <address>&copy; 2013 Magento Demo Store. All Rights Reserved.</address>
    </div>
</div>
                
<!-- Begin Google Code for Remarketing Tag -->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: '',
ecomm_pagetype: 'siteview',
ecomm_totalvalue: '',
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>
<!-- End Google Code for Remarketing Tag -->
    </div>
</div>
</body>
</html>

Removing the CMS Remarketing Code from the Homepage

We’re going to go back to the local.xml file we used up above, located at magentoroot/app/design/frontend/base/default/layout/local.xml and add the following code to that file:

<?xml version="1.0" encoding="UTF-8"?>
<!-- other code  -->
<layout>
<!-- other layout code -->
	<cms_index_index>
		<reference name="before_body_end">
			<remove name="trafficmotion.remarketingCms" />
		</reference>
	</cms_index_index>

That gets rid of the remarketingCms block on the homepage, so now we’re free to add the correct code. We could do another local.xml layout update, but since we’re adding a block just to one page, we can more easily do this in the backend of Magento with a static block and a layout XML update to the homepage.

Creating the Static Block

Login to the admin area of your store, and navigate to CMS > Static Blocks and click +Add New Block in the upper right corner of the page. Let’s give it a Block Title of Google Remarketing Code – Homepage, an Identifier of google-remarketing-home, and choose your appropriate Store View. Enable the block and put the following code in the Content section:

<!-- Begin Google Code for Remarketing Tag -->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: '',
ecomm_pagetype: 'home',
ecomm_totalvalue: '',
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>
<!-- End Google Code for Remarketing Tag -->

Now, all we have to do is add that block to the before_body_end section of our homepage. Navigate to CMS > Pages > Manage Content and look for the page with the URL key of “home” and open that page.

In the Design tab, we’re going to add some XML code, and then we’ll be all done. Here’s what we need to add to that page.

<reference name="before_body_end">
<block type="cms/block" name="google_remarketing">
    <action method="setBlockId"><block_id>google-remarketing-home</block_id></action> 
</block>
</reference>

Wrapping Up Dynamic Remarketing Integration for the Homepage

Whew! We’re all done here. Take a look at the Page Source on the homepage, and you’ll see the correct dynamic remarketing code, without the extra reference to the CMS page remarketing code. Here’s what it looks like after we’re finished:

<p class="bugs">Help Us to Keep Magento Healthy - <a href="http://www.magentocommerce.com/bug-tracking" onclick="this.target='_blank'"><strong>Report All Bugs</strong></a> (ver. 1.8.1.0)</p>
        <address>&copy; 2013 Magento Demo Store. All Rights Reserved.</address>
    </div>
</div>
                
<!-- Begin Google Code for Remarketing Tag -->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: '',
ecomm_pagetype: 'home',
ecomm_totalvalue: '',
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>
<!-- End Google Code for Remarketing Tag -->
    </div>
</div>
</body>
</html>

That was one of our longest Magento tutorials yet, but was an important one for getting the AdWords Dynamic Remarketing code to display correctly on our static pages and our homepage. In our next tutorial, we’ll look at adding the code to the category view pages.

Magento Google AdWords Dynamic Remarketing Tutorials

How to Noindex Internal Search Results in Magento

If you’re like me, you’re tired of seeing twice as many pages indexed by Google as you have actual pages and products on your ecommerce website. One way to combat this is to use the Robots.txt file to Disallow Google, Bing, and other web bots from crawling the content of your pages.

Magento Tricks by Traffic MotionBut that doesn’t actually keep the pages out of the index! It only keeps them from being crawled and having their content indexed and searchable. The page URLs themselves can (and most likely will) still appear in search results, with a message on Google saying that the page’s content is blocked by the site’s Robots.txt file.

So using the Disallow command in Robots.txt won’t reduce the number of pages indexed by the search engines. The only way to do that (besides tedious manual removal requests) is to include a NOINDEX meta tag on pages that you do not want indexed. We already took a look at Noindexing filtered navigation pages of product listings.

In this article, we’ll take a quick look at Noindexing the search results. Why is this important? Well, read it from the man himself, Matt Cutts, who wrote a “Search Results in Search Results” post on his blog all the way back in 2007. So yes, keeping Magento search results pages out of the Google index is important. Let’s look at how to do it!

Updating the local.xml Layout File

Navigate to the magentoroot/app/design/frontend/base/default/layout/local.xml file and open it. If it doesn’t exist, create it.

The code that we have to add to the file is this:

<?xml version="1.0" encoding="UTF-8"?>
<!-- other code -->
<layout>
<!-- other layout code -->
	<catalogsearch_result_index translate="label">
		<reference name="head">
			<action method="setRobots"><value>NOINDEX,FOLLOW</value></action>
		</reference>
	</catalogsearch_result_index>
</layout>

Wrapping Up Noindexing Internal Search Results

That’s it? We’re done? Well, yea, that’s basically all there is to it. In some cases, you may also want to Noindex the catalog_advanced_index and catalog_advanced_result but you can use the exact same code snippet as above, just replacing catalog_result_index with the other two variations.

This is a pretty simple fix, and can help Google keep a lot of your internal search pages out of their index, especially if you occasionally link to a search result as the most relevant and user-friendly method to find a product or list of related products.

If you followed along with the tutorial in the base default theme, you can do a search for anything, get the results, and check out the Page Source. You’ll see something like the following code, indicating that this simple fix has worked.

<title>Search results for: 'nokia'</title>
<meta name="description" content="Default Description" />
<meta name="keywords" content="Magento, Varien, E-commerce" />
<meta name="robots" content="NOINDEX,FOLLOW" />

Adding Google, Bing, Yandex, and Pinterest Verification Meta Tags to Magento

Meta tags are an easy way to add verification to your Magento store for Google Webmaster Tools, Bing Webmaster Tools, Yandex.Webmaster, and Pinterest for Business accounts. In this article, we’ll go over two easy ways to add these tags to your Magento store.

Magento Tricks by Traffic Motion

One alternative to adding meta tags is to upload a file from each of these sites to your site’s root directory. Unfortunately, when developers, IT, and version control systems are involved, this can be a much longer process than it should be. Instead of taking a few seconds, it may take days or even weeks just to get a new file (let alone four) uploaded to the root directory of your store.

Thankfully, Magento provides a couple of workaround for this, one that is extremely simple, and one that is a little more sophisticaned but cleaner and easier to read and maintain. We’ll start with the simpler method.

Miscellaneous Head Scripts

Log in to the admin section of your store, and navigate to System > Configuration > Design > HTML Head > Miscellaneous Scripts, and simply copy-paste the verification code there.

The code for our TrafficMotion website would look like this:

<meta name="msvalidate.01" content="14B60B177AD73A9CB88E52E10DE81E9F" />
<meta name="google-site-verification" content="Y0KjL1s3sCz5_RnzmBPdNIiMKE7n-iPy3OzjlRlPvdI" />
<meta name="p:domain_verify" content="8c5c5b782d04896448cc802df0e4e97b" />
<meta name='yandex-verification' content='7754504dbf4109f0' />

Easy, right? So what’s the problem with this method?

There really isn’t one, but the scripts are added to the <head> of every page of your site, where Google, Bing, Yandex, and Pinterest only require it on the home page.

To put it simply, why clutter up every page of your site, when you don’t need to? Google or Bing aren’t going to bother verifying the tag on every single page of your store, so why bother including it? It’s just extraneous code for the vast, vast majority of your pages.

So let’s add these pieces of code a different way, and just get them on the home page.

Block & Layout Update

First, navigate to System > Configuration > General > Content Management > WYSIWYG Options. We’re going to change the setting for “Enable WYSIWYG Editor” to “Disabled by Default.” If we don’t do that, Magento’s WYSIWYG editor will strip out the meta tags we’ll be adding to a new static block.

Adding a New CMS Static Block

Once you’ve done that, go to CMS > Static Blocks > Add New Block. You can name it anything you want, but we’ll give it the Block Title of “Validation Codes” and the Identifier of “html_validation_codes” for the purposes of this tutorial.

Then, in the Content, copy-paste in your meta tag verification codes. Now, we just have to get that block into our home page.

Adding the Validation Codes Block to the Home Page

Now, go to CMS > Pages > Home page, and hit the Design Tab under Page Information. This is the part where it can get tricky for new store owners, but it’s really not too difficult.

There may already be some code in the Layout Update XML field if you’re using the base default theme, or it may be empty. In either event, we’re going to add a little snippet of code to reference our Validation Codes static block. Here’s what you would include if you’ve followed along so far:

<reference name="head">
<block type="cms/block" name="validation_code">
    <action method="setBlockId"><block_id>html_validation_codes</block_id></action> 
</block>
</reference>

Wrapping Up Validation Codes

Now, check the Page Source of your Magento store home page, and you should see the block of code just under our customized Google Analytics code. It looks just like this:

<!-- END GOOGLE ANALYTICS CODE -->
<meta name="msvalidate.01" content="14B60B177AD73A9CB88E52E10DE81E9F" />
<meta name="google-site-verification" content="Y0KjL1s3sCz5_RnzmBPdNIiMKE7n-iPy3OzjlRlPvdI" />
<meta name="p:domain_verify" content="8c5c5b782d04896448cc802df0e4e97b" />
<meta name='yandex-verification' content='7754504dbf4109f0' />
<script type="text/javascript">//<![CDATA[
        var Translator = new Translate([]);
        //]]></script></head>

Then, you can check for the code on any other page of your website, and it won’t be there! It’s not a huge savings in terms of the amount of HTML on the page, but it does keep a few lines of extraneous code off of them. No website would pay much attention to those meta tags if they were on every page anyway, so let’s keep the category, CMS, and product pages a little cleaner.

Fixing Magento’s Breadcrumbs – Cache and Microdata

Magento has a nice, built-in breadcrumbs feature, where breadcrumbs can appear on any type of page: static CMS page, product listings, or catalog product pages.

Picture of chocolate crumbs to illustrate breadcrumbs
I prefer chocolate over bread anyway. More paleo. So we’re going with chocolate crumbs in this article.

Frustratingly, though, Magento has not added in RDFa microdata to breadcrumbs by default, leaving it up to store owners to utilize this type of semantic markup or not.

There is also the problem of the breadcrumbs completely disappearing when the Full Page Cache is enabled! It would be especially annoying to add the microdata, but not have it be read by search engines when they crawl pages with the breadcrumbs completely missing.

So, in this article, we’ll dress up the default Magento breadcrumbs, adding RDFa markup and making sure the Full Page Cache remembers to grab and display them.

RDFa for Breadcrumbs

We’ll work with the base package and default theme in the basic Magento 1.8.1.0 installation. If you have your own package and theme, though, it would make more sense just to copy over this base theme file into your own theme and modify it from there. Here’s the file in its original status:

<?php if($crumbs && is_array($crumbs)): ?>
<div class="breadcrumbs">
    <ul>
        <?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
            <li class="<?php echo $_crumbName ?>">
            <?php if($_crumbInfo['link']): ?>
                <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->escapeHtml($_crumbInfo['title']) ?>"><?php echo $this->escapeHtml($_crumbInfo['label']) ?></a>
            <?php elseif($_crumbInfo['last']): ?>
                <strong><?php echo $this->escapeHtml($_crumbInfo['label']) ?></strong>
            <?php else: ?>
                <?php echo $this->escapeHtml($_crumbInfo['label']) ?>
            <?php endif; ?>
            <?php if(!$_crumbInfo['last']): ?>
                <span>/ </span>
            <?php endif; ?>
            </li>
        <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>

And here’s all we have to do to make the breadcrumbs more friendly to Google and other search engine robots that visit our store. Check out the added code to the <ul> and <li> lines, as well as the <a> and <strong> tags.

<?php if($crumbs && is_array($crumbs)): ?>
<div class="breadcrumbs">
    <ul xmlns:v="http://rdf.data-vocabulary.org/#">
        <?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
            <li class="<?php echo $_crumbName ?>" typeof="v:Breadcrumb">
            <?php if($_crumbInfo['link']): ?>
                <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->escapeHtml($_crumbInfo['title']) ?>" rel="v:url" property="v:title"><?php echo $this->escapeHtml($_crumbInfo['label']) ?></a>
            <?php elseif($_crumbInfo['last']): ?>
                <strong rel="v:url" property="v:title"><?php echo $this->escapeHtml($_crumbInfo['label']) ?></strong>
            <?php else: ?>
                <?php echo $this->escapeHtml($_crumbInfo['label']) ?>
            <?php endif; ?>
            <?php if(!$_crumbInfo['last']): ?>
                <span>/ </span>
            <?php endif; ?>
            </li>
        <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>

That’s it for the breadcrumbs! Now, you can copy the code from a product page on your development site (or live site) into the Google Webmaster Tools Structured Data Testing Tool and see how your pages may appear in search results.

That is, IF Google can read the breadcrumbs. Which it can’t do if the Full Page Cache disappears them.

Make Magento Cache the Breadcrumbs

Full credit for this fix goes to Luis Tineo of the “Memoir of a Magento Developer” website, who figured out how to fix the problem of Magento not caching breadcrumbs.

The fix is deceptively simple. In any of your modules (or you can create one if you want), just add a cache.xml file with the following code in it:

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<placeholders>
		<catalog_breadcrumbs>
			<block>page/html_breadcrumbs</block>
			<name>breadcrumbs</name>
			<placeholder>CONTAINER_BREADCRUMBS</placeholder>
			<container>Enterprise_PageCache_Model_Container_Breadcrumbs</container>
			<cache_lifetime>86400</cache_lifetime>
		</catalog_breadcrumbs>
	</placeholders>
</config>

Read Luis’ site for the full details of why Magento fails to cache the breadcrumbs, but this fix rewrites the placeholder for the cache so that the breadcrumbs will be included on cached pages.

Wrapping Up Magento Breadcrumbs Debug & Upgrade

So with these two easy fixes, we now have Magento caching breadcrumbs, and giving Google more information on the structure of your store’s category and product pages.

Add Google AdWords Dynamic Remarketing Code to Magento Product Pages

Google AdWords Dynamic Remarketing is an excellent way to entice customers back to your store, and one of the most effective uses of your pay per click budget. You can market the very products to them that they were considering while on your website. Get them there through ecommerce SEO or traditional search/display network Google/Bing ads or social media, and them continue to advertise to them through this channel with ads tailored to their personal tastes.

Integrate Google Dynamic Remarketing in Magento

However, the main sticking point is that the dynamic remarketing code needs to be added only to your product pages in your Magento store, as the code looks for the ecommerce product ID (ecomm_prodid), page type (ecomm_pagetype), and total value (ecomm_totalvalue). Also, the code needs to go before the closing <body> tag on these pages.

This means that simply adding the code in the backend of your Magento store is out, as the “Miscellaneous Scripts” section adds code right before the closing <head> tag. So let’s make a simply layout update to our Magento theme to get the Dynamic Remarketing code to show up on product display pages before the closing <body> tag.

Creating or Adding to the local.xml File

First, we need to open (or create, if it’s not there already) the local.xml file located in the magentoroot/app/design/frontend/base/default/layout/ folder, and add the following code to it:

<?xml version="1.0" encoding="UTF-8"?>
<!-- other code -->
<layout>
<!-- other layout code -->
	<catalog_product_view>
		<reference name="before_body_end">
			<block type="catalog/product_view" name="trafficmotion.remarketing">
				<action method="setTemplate">
					<template>trafficmotion/remarketing/code.phtml</template>
				</action>
			</block>
		</reference>
	</catalog_product_view>
</layout>

This adds the layout update to the product pages and references the file that will insert the code into the pages (, as well as tells Magento where to put it (before_body_end).

Directory Structure for AdWords Dynamic Remarketing Code Layout

Next, we create the folders that are referenced in the layout.xml file, so Magento finds what it’s looking for in the place we told it to look. Create these folders:

  • magentoroot/app/design/frontend/base/default/template/trafficmotion/
  • magentoroot/app/design/frontend/base/default/template/trafficmotion/remarketing/

If you read some of my earlier articles on integrating Open Graph and Twitter Cards into Magento, you should already have the /trafficmotion/ folder, so all you’d have to do is create the /remarketing/ folder.

Creating the code.phtml File

Now, finally, we can insert the dynamic remarketing code into Magento. You’ll need to grab this code snippet from your AdWords account. Set up at least one remarketing campaign, and then you can grab the code there, or grab it from the “Shared Library” link in your list of AdWords Campaigns.

Either way, the raw code from Google will look something like this, which we’ll have to modify a bit.

<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: 'REPLACE_WITH_VALUE',
ecomm_pagetype: 'REPLACE_WITH_VALUE',
ecomm_totalvalue: 'REPLACE_WITH_VALUE'
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXXX;
var google_conversion_label = "YYYYYYYYYY";
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&amp;label=YYYYYYYYYY&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

Take that code, and create a code.phtml file. Inside of it, modify the lines for the ecomm_prodid, ecomm_pagetype, and ecomm_totalvalue so that the values will be inserted dynamically on different product pages.

BUG FIX – in the prior version of this code, we were echoing the currency before including it before the getFinalPrice call. Turns out, AdWords doesn’t need the currency, so we’re just going to take that out of it. Here’s the updated version of the code.phtml file.

<?php
$_helper = $this->helper('catalog/output');
$_product = $this->getProduct();
$currency = Mage::app()->getLocale()->currency(Mage::app()->getStore()->getCurrentCurrencyCode())->getSymbol();
if($_product):
?>

<!-- Begin Google Code for Remarketing Tag -->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: '<?php echo $_product->getSku() ?>',
ecomm_pagetype: 'product',
ecomm_totalvalue: '<?php echo Mage::helper('tax')->getPrice($_product, $_product->getFinalPrice(), true); ?>',
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>
<!-- End Google Code for Remarketing -->
<?php endif; ?>

Wrapping Up Dynamic Remarketing Integration

And that’s all! However, remember to match up your product ID with whatever you’re sending Google in your product feed. If you’re sending the SKU, make sure that’s what you’re grabbing from Magento. Also remember to make the page type ‘product’ and make sure that your code is showing your actual account number, rather than all those XXXXXX lines in the sample code.

In any event, if you did everything correctly, you can go to any of the product pages in your store, and see this before the end of the page. We’ll look at the Nokia 2610 page from the default Magento 1.8.1.0 install with the sample data. It looks like this, including some of the last bits of the footer:

<p class="bugs">Help Us to Keep Magento Healthy - <a href="http://www.magentocommerce.com/bug-tracking" onclick="this.target='_blank'"><strong>Report All Bugs</strong></a> (ver. 1.8.1.0)</p>
        <address>&copy; 2013 Magento Demo Store. All Rights Reserved.</address>
    </div>
</div>
                
<!-- Begin Google Code for Remarketing Tag -->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: 'asc',
ecomm_pagetype: 'product',
ecomm_totalvalue: '134.99',
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>
<!-- End Google Code for Remarketing -->
    </div>
</div>
</body>
</html>

Magento Google AdWords Dynamic Remarketing Tutorials

How to Add Open Graph Cards for Products to Magento

In our last article, we looked at adding Twitter Cards to our Magento store, and specifically Twitter Product Cards. The next step is to integrate the Open Graph protocol, which is used by Google+, Facebook, and Pinterest, to name a social networks.

Open Graph Integration with Magento Product Pages

If you were able to follow along in adding Twitter Cards to your Magento store, then adding Open Graph cards will be a breeze. Essentially, we’ll be following the same exact process, targeting the Catalog Product View, and adding a new template file to the <head> section of the document, then inserting the Open Graph meta data for that particular product.

So, without further ado, let’s get started adding Facebook, Google+, and Pinterest integration to our Magento store! And then let us never speak of Magento layout updates again, shall we?

Creating or Adding to the local.xml File

Navigate to your theme’s local.xml file. For the vanilla Magento install with the base theme, the location is magentoroot/app/design/frontend/base/default/layout/local.xml

We’ll be adding the following code to this file:

<?xml version="1.0" encoding="UTF-8"?>
<!-- other code -->
<layout>
<!-- other layout code -->
	<catalog_product_view>
		<reference name="head">
			<block type="catalog/product_view" name="trafficmotion.opengraph">
 				<action method="setTemplate">
					<template>trafficmotion/social/opengraph.phtml</template>
				</action>
			</block>
		</reference>
	</catalog_product_view>
</layout>

Remember, if you went through our tutorial on the Twitter Card integration, you should already have some of this code. In particular, you’ll have the xml doctype declaration, the opening and closing <layout> tags, and the opening and closing <catalog_product_view> tags. You can just insert the above code that is applicable.

If you didn’t follow the Twitter Card integration, and you don’t have a local.xml file, then you’ll have to create one and all of the above code.

Directory Structure for Open Graph Layout

Next up, let’s set up a couple of new folders so we can add the actual Open Graph meta data. Create this directory structure:

  • magentoroot/app/design/frontend/base/default/template/trafficmotion/
  • magentoroot/app/design/frontend/base/default/template/trafficmotion/social/

If you followed along in our article on adding Twitter Card support, you should already have the /trafficmotion/ and /social/ folders, so you would not need to create them here. Now that the folders are there, we just have to add one file to the /social/ folder.

Creating the opengraph.phtml File

Our last step is another easy one, just copying and pasting in some PHP and HTML code. Create a file named opengraph.phtml and place it in the magentoroot/app/design/frontend/base/default/template/trafficmotion/social/ directory. Then, include the following code in the opengraph.phtml file:

<?php
$_helper = $this->helper('catalog/output');
$_product = $this->getProduct();
$currency = Mage::app()->getLocale()->currency(Mage::app()->getStore()->getCurrentCurrencyCode())->getSymbol();
if($_product):
?>
<!-- BEGIN OPEN GRAPH CARDS -->
<meta property="og:site_name" content="<?php echo Mage::app()->getStore()->getName(); ?>" />
<meta property="og:type" content="og:product" />
<meta property="og:title" content="<?php echo $_product->getName() ?>" />
<meta property="og:image" content="<?php echo $_product->getImageUrl() ?>" />
<meta property="og:description" content="<?php echo $this->htmlEscape($_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description')) ?>" />
<meta property="og:url" content="<?php echo $_product->getUrlModel()->getUrl($_product, array('_ignore_category' => true)) ?>" />
<meta property="og:price:amount" content="<?php echo Mage::helper('tax')->getPrice($_product, $_product->getFinalPrice(), true); ?>" />
<meta property="og:price:currency" content="<?php echo Mage::app()->getStore()->getCurrentCurrencyCode() ?>" />
<meta property="og:availability" content="<?php echo ($_product->isAvailable() ? 'in stock' : 'out of stock') ?>" />
<!-- END OPEN GRAPH CARDS -->
<?php endif; ?>

Wrapping Up Open Graph Integration

That’s all there is to it! Open a product page in your Magento store frontend, and take a look at the Page Source. You should see something like the following code.

<!-- BEGIN OPEN GRAPH CARDS -->
<meta property="og:site_name" content="English" />
<meta property="og:type" content="og:product" />
<meta property="og:title" content=" Olympus Stylus 750 7.1MP Digital Camera" />
<meta property="og:image" content="http://localhost/mage-test/media/catalog/product/cache/1/image/265x/9df78eab33525d08d6e5fb8d27136e95/o/l/olympus-stylus-750-7-1mp-digital-camera-2.jpg" />
<meta property="og:description" content="A technically sophisticated point-and-shoot camera offering a number of pioneering technologies such as Dual Image Stabilization, Bright Capture Technology, and TruePic Turbo, as well as a powerful 5x optical zoom." />
<meta property="og:url" content="http://localhost/mage-test/olympus-stylus-750-7-1mp-digital-camera" />
<meta property="og:price:amount" content="161.94" />
<meta property="og:price:currency" content="USD" />
<meta property="og:availability" content="in stock" />
<!-- END OPEN GRAPH CARDS -->

How to Add Twitter Cards for Products to Magento

With social media signals becoming an increasingly important factor in search engine optimization, being able to share your products properly on Twitter, Facebook, Google+, Pinterest, and other social networks is imperative for Magento store owners. In this article, we’ll look at adding Twitter Product Cards to product display pages.

Integrating Twitter Cards into Magento

First of all, what are Twitter cards? Twitter has developed their own meta tag vocabulary to help websites share information on the popular microblogging platform. Read up on Twitter cards at the Twitter Developers website, or check out the specifications for Product Cards.

In a previous article here on TrafficMotion, I wrote about the importance of social signals, but didn’t go into how to do it specifically for WordPress, Magento, or other CMS platforms. If you’re just starting with social signals for SEO, read that article first and them come back here.

For Magento, let’s start with setting up the local.xml file, and then we’ll create a file just for Twitter Cards. In our next article, we’ll look at Open Graph integration, which is used by Facebook, Google+, and Pinterest. But first, Magento.

Creating or Adding to the local.xml File

I’ll be using the base/default template of the vanilla Magento install for this tutorial, so I start by going to the magentoroot/app/design/frontend/base/default/ folder and looking for the /layout/ directory. If it’s not there, I create it.

Next, we have to create or add to the local.xml file, and add the following information to it:

<?xml version="1.0" encoding="UTF-8"?>
<!-- other code -->
<layout>
<!-- other layout code -->
	<catalog_product_view>
	    <reference name="head">
	        <block type="catalog/product_view" name="trafficmotion.twitter">
	            <action method="setTemplate">
	                    <template>trafficmotion/social/twitter.phtml</template>
	            </action>
	        </block>         
	    </reference>
	</catalog_product_view>
</layout>

Directory Structure for Twitter Card Layout

Now, we have to set up the folder and file structure for our layout update. Create the following directory structure:

  • magentoroot/app/design/frontend/base/default/template/trafficmotion/
  • magentoroot/app/design/frontend/base/default/template/trafficmotion/social/

Creating the twitter.phtml File

Our last step is to set up the file that will include the Twitter Card data in the <head> section of each product display page.

Create a file called twitter.phtml in the magentoroot/app/design/frontend/base/default/template/trafficmotion/social/ folder, and include the following code in that file:

<?php
$_helper = $this->helper('catalog/output');
$_product = $this->getProduct();
$currency = Mage::app()->getLocale()->currency(Mage::app()->getStore()->getCurrentCurrencyCode())->getSymbol();
if($_product):
?>
<!-- BEGIN TWITTER PRODUCT CARDS -->
<meta name="twitter:card" content="product" />
<meta name="twitter:domain" content="<?php echo Mage::getBaseUrl() ?>" />
<meta name="twitter:site" content="@yourtwitterhandle" />
<meta name="twitter:creator" content="@yourtwitterhandle" />
<meta name="twitter:title" content="<?php echo $_product->getName() ?>" />
<meta name="twitter:description" content="<?php echo $this->htmlEscape($_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description')) ?>" />
<meta name="twitter:image" content="<?php echo $_product->getImageUrl() ?>" />
<meta name="twitter:data1" content="<?php echo $currency ?><?php echo Mage::helper('tax')->getPrice($_product, $_product->getFinalPrice(), true); ?>" />
<meta name="twitter:label1" content="PRICE" />
<meta name="twitter:data2" content="<?php echo Mage::getStoreConfig('shipping/origin/country_id') ?>" />
<meta name="twitter:label2" content="LOCATION" />
<!-- END TWITTER PRODUCT CARDS -->
<?php endif; ?>

Remember to update the “yourtwitterhandle” lines to your actual site and creator Twitter accounts.

Wrapping Up Twitter Card Integration

That’s all there is to it — even easier than adding a custom module, and possibly more useful. Here’s how it looks in the Page Source of the default store with example data. Also check out the working 10% Google Site Speed Sample Rate, which we set up in a previous article.

<!-- BEGIN TWITTER PRODUCT CARDS -->
<meta name="twitter:card" content="product" />
<meta name="twitter:domain" content="http://localhost/mage-test/" />
<meta name="twitter:site" content="@trafficmotion" />
<meta name="twitter:creator" content="@trafficmotion" />
<meta name="twitter:title" content=" Olympus Stylus 750 7.1MP Digital Camera" />
<meta name="twitter:description" content="A technically sophisticated point-and-shoot camera offering a number of pioneering technologies such as Dual Image Stabilization, Bright Capture Technology, and TruePic Turbo, as well as a powerful 5x optical zoom." />
<meta name="twitter:image" content="http://localhost/mage-test/media/catalog/product/cache/1/image/265x/9df78eab33525d08d6e5fb8d27136e95/o/l/olympus-stylus-750-7-1mp-digital-camera-2.jpg" />
<meta name="twitter:data1" content="$161.94" />
<meta name="twitter:label1" content="PRICE" />
<meta name="twitter:data2" content="US" />
<meta name="twitter:label2" content="LOCATION" />
<!-- END TWITTER PRODUCT CARDS -->

The one question you might have is why not put the Open Graph and Twitter Cards in the same layout.xml tag and same socialtags.phtml file? That’s a very good idea, and you can definitely do that if you want.

However, it is likely that Twitter and Open Graph will continue to evolve in separate directions, so it will be easier in the future to go in and change the file that only deals with one type of social sharing, depending on the changes made.

For your next project, take a look at our Magento Open Graph protocol integration, used by Facebook, Google+, and Pinterest!