<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Google Archives - gj</title>
	<atom:link href="https://blog.gaiterjones.com/tag/google/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.gaiterjones.com/tag/google/</link>
	<description>gaiterjones</description>
	<lastBuildDate>Thu, 08 Dec 2011 09:26:57 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.4.3</generator>
	<item>
		<title>Rich Snippet Data for Magento Product Pages Improves Google Search Results</title>
		<link>https://blog.gaiterjones.com/rich-snippet-data-for-magento-product-pages-improves-google-search-results/</link>
					<comments>https://blog.gaiterjones.com/rich-snippet-data-for-magento-product-pages-improves-google-search-results/#comments</comments>
		
		<dc:creator><![CDATA[PAJ]]></dc:creator>
		<pubDate>Fri, 18 Nov 2011 13:34:44 +0000</pubDate>
				<category><![CDATA[Magento]]></category>
		<category><![CDATA[Marketing]]></category>
		<category><![CDATA[META Tags]]></category>
		<category><![CDATA[Rich Snippet Data]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[microformat tags]]></category>
		<category><![CDATA[rich snippet data]]></category>
		<guid isPermaLink="false">http://blog.gaiterjones.com/?p=595</guid>

					<description><![CDATA[&#160; &#160; &#8220;Rich Snippets&#8221; are a standardised markup format used by Google to improve search results by including more specific or &#8220;rich&#8221; information relating to a web page, i.e. for...<a class="more-link" href="https://blog.gaiterjones.com/rich-snippet-data-for-magento-product-pages-improves-google-search-results/" title="Continue reading">Continue reading</a>]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&#8220;<a href="http://www.google.com/support/webmasters/bin/topic.py?topic=21997" target="_blank">Rich Snippets</a>&#8221; are a standardised markup format used by Google to improve search results by including more specific or &#8220;rich&#8221; information relating to a web page, i.e. for product pages, price and ratings info. Google says &#8220;(we try) to present users with the most useful and informative search results. The more information a search result snippet can provide, the easier it is for users to decide whether that page is relevant to their search.&#8221;</p>
<p>By editing Magento product page templates we can include the Rich Snippet markup data readable by Google and improve the organic Google search results for our product pages.</p>
<p>There are various standards available to markup Rich Snippet Data on web pages &#8211; microdata, microformats, RDFa etc. We are going to use the microformat markup, although it does not provide as many options as other formats it does fit more easily into Magentos existing default product page design.</p>
<h2><span class="Apple-style-span" style="font-weight: normal; line-height: 20px; text-transform: none;">This Rich Snippet data will not affect the look of our product page, microformats use the </span><code style="line-height: 20px; text-transform: none;">class</code><span class="Apple-style-span" style="font-weight: normal; line-height: 20px; text-transform: none;"> attribute in HTML tags (often </span><code style="line-height: 20px; text-transform: none;">&lt;span&gt;</code><span class="Apple-style-span" style="font-weight: normal; line-height: 20px; text-transform: none;"> or </span><code style="line-height: 20px; text-transform: none;">&lt;div&gt;</code><span class="Apple-style-span" style="font-weight: normal; line-height: 20px; text-transform: none;">) to assign brief and descriptive names to entities and their properties.</span></h2>
<p>We are going to use simple microformat conventions or entities to markup our product page html so that Google spiders can read Rich data from our product information such as the price, availability or review rating of a product from all our pages.</p>
<p>We will implement two main microformat entities, <strong>hproduct</strong> and <strong>hreview-aggregate</strong> coded within the correct sections of our product page html so that the microformat markup looks something like:</p>
<figure id="attachment_596" aria-describedby="caption-attachment-596" style="width: 244px" class="wp-caption alignnone"><img fetchpriority="high" decoding="async" class="nohang        " title="Rich Snippet product microformat tree" src="https://blog.gaiterjones.com/wp-content/uploads/2011/11/magento-rich-snippet-microformat.jpg" alt="" width="244" height="207" /><figcaption id="caption-attachment-596" class="wp-caption-text">Rich Snippet product microformat tree</figcaption></figure>
<p>&nbsp;</p>
<h1>How to Markup the Default Magento Theme with Rich Snippet Information</h1>
<p>&nbsp;</p>
<p>Lets start with the hproduct microformat tag. This needs to encapsulate the main product information, including product description, image, price etc. If we look at the structure of the default magento product page we can see that the html document division with the product-essential class contains all the product information that we need, so we will add the main hproduct microformat tag here by adding hproduct to the DIV class.</p>
<figure id="attachment_597" aria-describedby="caption-attachment-597" style="width: 440px" class="wp-caption alignnone"><a href="https://blog.gaiterjones.com/wp-content/uploads/2011/11/magento-product-wrapper-div.jpg"><img decoding="async" class="nohang        " title="HTML document division containing Magento product information" src="https://blog.gaiterjones.com/wp-content/uploads/2011/11/magento-product-wrapper-div-440x263.jpg" alt="" width="440" height="263" /></a><figcaption id="caption-attachment-597" class="wp-caption-text">HTML document division containing Magento product information</figcaption></figure>
<p>&nbsp;</p>
<h2>hproduct</h2>
<p>Open up your Magento theme template folder, browse to  /template/catalog/product and open up view.phtml for editing. Here you will find the html document division with the class <strong>product-essential</strong>, we simply append the new <strong>hproduct</strong> microformat class to it to add the hproduct rich snippet tag.</p>
<pre class="brush:xml">&lt;div class="product-essential hproduct"&gt;</pre>
<h2>item fn</h2>
<p>Within our microformat markup tree we now want to markup the product item, price and image sections of our Magento product html.</p>
<p>Still looking at view.phtml within the product-essential div we will find the product-name division. Here we will add the<strong> item fn</strong> microformat tags to markup the product name.</p>
<pre class="brush:xml">&lt;div class="product-name item fn"&gt;</pre>
<h2>description</h2>
<p>Within view.phtml we can also add the markup for the microformat description tag. An ideal place for this is the quick overview html division where we can simply append the description tag to the existing DIV class.</p>
<pre class="brush:xml">&lt;div class="std description"&gt;&lt;?php echo $_helper-&gt;productAttribute($_product, nl2br($_product-&gt;getShortDescription()), 'short_description') ?&gt;&lt;/div&gt;</pre>
<h2>price</h2>
<p>To markup the product price open up price.html in the same folder. This template file is responsible for returning product pricing in all areas of the Magento frontend. You will notice that all the pricing document divisions already have the class name <strong>price. </strong>We don&#8217;t need to change anything here. However if you want to include the price-range microformat tag you can include it here by adding it to the divisions with the class name <strong>price-box</strong>.</p>
<h2>image</h2>
<p>To tag the product image navigate to the template/catalog/product/view folder and open up media.phtml for editing. Here you will see the product image html. The product image URL is specified within an IMG tag that has the ID &#8220;image&#8221;. Simply add a new class to the IMG tag with the name <strong>photo fn</strong>.</p>
<pre class="brush:xml">$_img = '&lt;img id="image" class="photo fn" src="'.$this-&gt;helper...</pre>
<h2>hreview-aggregate</h2>
<p>The most effective data we can microformat tag is the product review and rating data which will be displayed in Google search results showing our Magento product rating information. This data is encapsulated within the hreview-aggregate tag.</p>
<p>Navigate to the template/review/helper folder and you will see two files responsible for rendering review and rating html. summary.phtml and summary_short.phtml. Open up summary.phtml for editing.</p>
<p>First we need to add the hreview-aggregate tag to the html division that contains the rating data for the product. Here you will see the DIV with the class name ratings. Append the hreview-aggregate tag to this DIV class name.</p>
<pre class="brush:xml">&lt;div class="ratings hreview-aggregate"&gt;</pre>
<p>Next you will see that Magento already uses a division with a class name of rating. This will confuse Google as the microformat name we want to use is also &#8220;rating&#8221;. However there is a method to work around this using a SPAN class. Edit the existing rating division to include the new SPAN element as show below.</p>
<pre class="brush:xml">            &lt;div class="rating-box"&gt;
                &lt;div class="rating" style="width:&lt;?php echo $this-&gt;getRatingSummary() ?&gt;%"&gt;
					&lt;span class="value-title" title="&lt;?php echo number_format($this-&gt;getRatingSummary() / 20,1); ?&gt;"&gt;&lt;/span&gt;
				&lt;/div&gt;
            &lt;/div&gt;</pre>
<h2>count</h2>
<p>Now we markup the number of reviews the product has received with the <strong>count</strong> tag. Still within summary.phtml we add a SPAN element with the class name count to the existing code.</p>
<pre class="brush:xml">        &lt;p class="rating-links"&gt;
			&lt;a href="&lt;?php echo $this-&gt;getReviewsUrl() ?&gt;"&gt;&lt;span class="count"&gt;&lt;?php echo $this-&gt;getReviewsCount()?&gt;&lt;/span&gt;&lt;?php echo $this-&gt;__(' Review(s)') ?&gt;&lt;/a&gt;
            &lt;span class="separator"&gt;|&lt;/span&gt;
            &lt;a href="&lt;?php echo $this-&gt;getReviewsUrl() ?&gt;#review-form"&gt;&lt;?php echo $this-&gt;__('Add Your Review') ?&gt;&lt;/a&gt;
        &lt;/p&gt;</pre>
<h1>author</h1>
<p>Finally lets consider the author tag. To identify the author of a blog or article, Google checks for a connection between the content page (such as an article), an author page, and a <a href="http://www.google.com/profiles">Google Profile</a>. I am unsure if any real benefit will come from applying the author tag to your product content but for completeness one way to do it is to add the author tag to a link in the footer of your Magento pages. i.e.</p>
<pre class="brush:xml">&lt;p class="author"&gt;&lt;a rel="author" href="http://my.google.profile "&gt;g a i t e r j o n e s&lt;/a&gt; / &lt;?php echo $this-&gt;__('(ver. %s)', Mage::getVersion()) ?&gt;&lt;/p&gt;</pre>
<h1>Testing</h1>
<p>After saving all our edited files, we can check whether our product pages are returning rich snippet data using the <a href="http://www.google.com/webmasters/tools/richsnippets" target="_blank">Google Rich Snippet Testing Tool</a>. Goto the testing page and enter the URL of a product page from your Magento site.</p>
<figure id="attachment_598" aria-describedby="caption-attachment-598" style="width: 440px" class="wp-caption alignnone"><a href="https://blog.gaiterjones.com/wp-content/uploads/2011/11/rich-snippet-testing-tool-preview.jpg"><img decoding="async" class="nohang        " title="Google Rich Snippet Testing Tool Magento Product Preview" src="https://blog.gaiterjones.com/wp-content/uploads/2011/11/rich-snippet-testing-tool-preview-440x103.jpg" alt="" width="440" height="103" /></a><figcaption id="caption-attachment-598" class="wp-caption-text">Google Rich Snippet Testing Tool Magento Product Preview</figcaption></figure>
<p>&nbsp;</p>
<p>The rich snippets testing tool will show you all the rich snippet data for your product page including information that comes from non microformat tags such as Meta tags or Facebook Open Graph tags. Make sure you are making best use of these tags too to ensure that Google is gleaning as much useful SEO information from your pages as possible.</p>
<h1> Conclusion</h1>
<p>The main question now is will Google use our Rich Snippet data in search results and how long will it take before the Rich Snippet data shows up* &#8211; SEE UPDATE BELOW!</p>
<p>I am still unsure if Rich Snippet data is being used across all Google search engines and countries at this moment. The data will certainly not show up until your site is spidered, and there is no guarantee it seems that even when Google has your RIch Snippet data if they will use it or not in search results &#8211; Google says &#8220;Note that there is no guarantee that a Rich Snippet will be shown for this page on actual search results.&#8221; The FAQ page which was written in 2010 seems to suggest the use of Rich Snippet Data is limited and suggests that interested users complete an &#8220;<a href="http://www.google.com/support/webmasters/bin/request.py?contact_type=rich_snippets_feedback" target="_blank">interested in Rich Snippets</a>&#8221; form. See the Rich Snippets Google <a href="http://knol.google.com/k/google-rich-snippets-tips-and-tricks#Frequently_Asked_Questions" target="_blank">FAQ </a>for more infomation.</p>
<p>If and when Rich Snippet data is widely used by Google in search results it certainly can&#8217;t do any harm to ensure your Magento product pages are ready!</p>
<p>* <span class="Apple-style-span" style="font-weight: bold; line-height: 15px; text-transform: uppercase;">UPDATE</span></p>
<p>I wrote this blog entry on 18th November 2011 and around the same time implemented rich snippet data in one of my webshops I just performed a Google search for one of our products today (8th December) and the rich snippet product review data is now being shown. So it took approximately three weeks for Google to pick up the new rich snippet data in our Magento products and reflect them in relevant search results.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.gaiterjones.com/rich-snippet-data-for-magento-product-pages-improves-google-search-results/feed/</wfw:commentRss>
			<slash:comments>18</slash:comments>
		
		
			</item>
		<item>
		<title>Google Plus One button for Magento Products</title>
		<link>https://blog.gaiterjones.com/google-plus-one-button-for-magento-products/</link>
					<comments>https://blog.gaiterjones.com/google-plus-one-button-for-magento-products/#comments</comments>
		
		<dc:creator><![CDATA[PAJ]]></dc:creator>
		<pubDate>Fri, 01 Jul 2011 10:18:30 +0000</pubDate>
				<category><![CDATA[5 Minute Fix]]></category>
		<category><![CDATA[Google Plus One Button]]></category>
		<category><![CDATA[Magento]]></category>
		<category><![CDATA[Social Media Marketing]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[google plus one button]]></category>
		<category><![CDATA[plus one]]></category>
		<guid isPermaLink="false">http://blog.gaiterjones.com/?p=448</guid>

					<description><![CDATA[Google launched their Plus (+) range of products this week, Google + integrates existing products from Google along with some new social products into a new &#8220;social networking&#8221; service. Obviously...<a class="more-link" href="https://blog.gaiterjones.com/google-plus-one-button-for-magento-products/" title="Continue reading">Continue reading</a>]]></description>
										<content:encoded><![CDATA[<p><a href="https://blog.gaiterjones.com/wp-content/uploads/2011/07/Use-the-Google-Plus-one-1-button-on.jpg"><img loading="lazy" decoding="async" class="hang-1-column    alignnone" title="Google Plus one Button for Magento" src="https://blog.gaiterjones.com/wp-content/uploads/2011/07/Use-the-Google-Plus-one-1-button-on.jpg" alt="Google Plus one Button for Magento" width="240" height="218" /></a></p>
<p>Google launched their Plus (+) range of products this week, Google + integrates existing products from Google along with some new social products into a new &#8220;social networking&#8221; service. Obviously Google want to challenge Facebook as a new social networking hub. While Facebook already have a huge user base, it is nothing compared with the number of users interacting with Google on a daily basis.</p>
<p>Interestingly, as Facebook attempts to assimilate the Internet into its own social networking open graph database populated with millions of people, Google , who already have the Internet indexed and cached in its huge databases now want to pull in the millions of people to create a social networking environment built around existing, new products and of course their number one business their search engine.</p>
<p>Enter the Plus One Button</p>
<p>The Google plus one button is to Google searches what the Facebook like button is to web content. Google <a href="http://www.google.com/+1/button/" target="_blank">says </a>&#8220;The +1 button is shorthand for &#8220;this is pretty cool&#8221; or &#8220;you should check this out.&#8221;&#8221;. When you or someone in your Google social circle &#8220;plus one&#8221; something by clicking the plus one button on a site, this information will be used by Google to manipulate/improve Google search results so that when you search for something you will be able to see for example if your friends have already recommended the product returned in the search. If your best buddy likes it, it must be good right? Whether its &#8220;pretty cool&#8221; or not lets wait and see, no doubt Google Plus will be THE next big thing. The plus one button is a clever way for Google to rewarding good web content and personalise search results, as (in theory) only humans will be able to &#8220;Plus One&#8221; something.</p>
<p>I am still getting my head around Google plus one and all of its implications but needless to say if there is a new social media marketing opportunity out there, especially one so tightly integrated with Google search then we need to take advantage of it and enable plus one buttons for our Magento products. Content with a large amount of +1s will get higher rankings in Google’s organic search results, create more visibility for your products and drive more traffic to your site. Google says &#8220;Think of the +1 button as a way for fans of your business to recommend what you offer, for all their friends and contacts to see. By helping searchers see more personal, relevant ads, we believe you’ll see more qualified traffic.&#8221;</p>
<p align="center"><img decoding="async" src="http://services.google.com/fh/files/newsletters/04_annotation.png" alt="" /></p>
<p>Here is a 5 minute fix to add the plus one button to all Magento product pages.</p>
<h2>Adding Plus One</h2>
<p>For Magento 1.4+ stores:</p>
<p>We can place the Google plus one button next to our <a title="Magento Product Social Media Marketing Part 1 – the Facebook Like Button" href="https://blog.gaiterjones.com/magento-social-media-marketing-facebook-like-button/" target="_blank">Facebook Like button</a> with a few lines of code. Locate <em>view.phtml</em> in your theme, it will be located in the <em>default/template/catalog/product </em>folder of your theme.</p>
<pre class="brush:php">&lt;!-- Google Plus One Button BEGIN --&gt;
&lt;div id="google-plusone"&gt;
&lt;script type="text/javascript" src="https://apis.google.com/js/plusone.js"&gt;
{"parsetags": "explicit"},
{"lang": "&lt;?php echo $this-&gt;__('en-GB') ?&gt;"}
&lt;/script&gt;
&lt;g:plusone size="medium" count="false" href="&lt;?php echo trim(Mage::registry('current_product')-&gt;getProductUrl()) ?&gt;"&lt;/g:plusone&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
gapi.plusone.go("google-plusone");
&lt;/script&gt;
&lt;!-- Google Plus One Button END --&gt;</pre>
<p>If you already have implemented a Facebook Like button, insert the following code below the existing code You can also position the google-plusone DIV wherever you would like the button to appear on the page with CSS.</p>
<p>To translate the locale code correctly add a line to your themes locale file and refresh your cache. For example for a German language store use</p>
<p><strong>&#8220;en-GB&#8221;,&#8221;de&#8221;</strong></p>
<figure id="attachment_450" aria-describedby="caption-attachment-450" style="width: 495px" class="wp-caption alignnone"><a href="https://blog.gaiterjones.com/wp-content/uploads/2011/07/googleplusonebutton.jpg"><img loading="lazy" decoding="async" class="hang-1-column        " title="Google Plus One Button for Magento" src="https://blog.gaiterjones.com/wp-content/uploads/2011/07/googleplusonebutton.jpg" alt="Google Plus One Button for Magento" width="495" height="293" /></a><figcaption id="caption-attachment-450" class="wp-caption-text">Google Plus One Button for Magento</figcaption></figure>
<p>For Magento 1.4+ make sure you have canonical URLs enabled in admin (see my Facebook Like button <a title="Magento Product Social Media Marketing Part 1 – the Facebook Like Button" href="https://blog.gaiterjones.com/magento-social-media-marketing-facebook-like-button/" target="_blank">post</a> for more info), we have specifed the URL in the Google API code to ensure Google uses the Magento enabled canonical URL. They say that the code will default to look for the canonical tag but better to be safe than sorry &#8211; in my tests it was not always used. The size and appearance of the button can be modified by changing the <em>size </em>and <em>count </em>options. See the Google <a href="http://code.google.com/apis/+1button/" target="_blank">documentation </a>for more details.</p>
<h2>Further Reading</h2>
<p><a href="http://en.wikipedia.org/wiki/Google%2B">http://en.wikipedia.org/wiki/Google%2B</a></p>
<p><a href="http://googleblog.blogspot.com/2011/06/introducing-google-project-real-life.html">http://googleblog.blogspot.com/2011/06/introducing-google-project-real-life.html</a></p>
<p><a href="http://www.ibtimes.com/articles/172678/20110701/google-plus-facebook-killer-google-zynga-android-developers-facebook-losing-users-google-plus-next-b.htm">http://www.ibtimes.com/articles/172678/20110701/google-plus-facebook-killer-google-zynga-android-developers-facebook-losing-users-google-plus-next-b.htm</a></p>
<p><a href="http://www.aaronpeters.nl/blog/google-plus1-button-performance-review">http://www.aaronpeters.nl/blog/google-plus1-button-performance-review</a></p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.gaiterjones.com/google-plus-one-button-for-magento-products/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
		<item>
		<title>Automatic jQuery Translator for Magento</title>
		<link>https://blog.gaiterjones.com/automatic-google-jquery-translator-for-magento/</link>
					<comments>https://blog.gaiterjones.com/automatic-google-jquery-translator-for-magento/#comments</comments>
		
		<dc:creator><![CDATA[PAJ]]></dc:creator>
		<pubDate>Thu, 26 May 2011 10:21:57 +0000</pubDate>
				<category><![CDATA[Google Translation]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Language]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[Magento]]></category>
		<category><![CDATA[translator]]></category>
		<guid isPermaLink="false">http://blog.gaiterjones.com/?p=402</guid>

					<description><![CDATA[GOOGLE API DEPRECATED Google announced on the 26th of May 2011 (the day I blogged about this solution!) that the translation API used by the jQuery plugin is now deprecated and will...<a class="more-link" href="https://blog.gaiterjones.com/automatic-google-jquery-translator-for-magento/" title="Continue reading">Continue reading</a>]]></description>
										<content:encoded><![CDATA[<h1>GOOGLE API DEPRECATED</h1>
<p>Google <a href="http://code.google.com/apis/language/translate/overview.html">announced on the 26th of May 2011</a> (the day I blogged about this solution!) that the translation API used by the jQuery plugin is now <em><strong>deprecated </strong></em>and will be <em>shut off completely </em>in December 2011. The author of the jQuery plugin will develop it to use the <a href="http://msdn.microsoft.com/en-us/library/ff512404.aspx">Microsoft translation API</a>. Google are shutting down the API due to &#8220;extensive abuse&#8221; and recommend using the <a title="Magento Google Element Translation Tool Implementation in 5 Minutes" href="https://blog.gaiterjones.com/magento-google-translation-tool-implementation/">Google Translate Element</a>. Whether the Microsoft translation service will be as good as Google we will need to wait and see. The author of the plugin <a href="http://code.google.com/p/jquery-translate/issues/detail?id=70">comments </a>&#8220;&#8230; <em>the Microsoft API provides a method for array translation (just as Google&#8217;s v2 API), which eliminates almost all bugs with this plugin, and will make it a bit faster too. The quality of the translation is not any worse I think, so there&#8217;s <span style="text-decoration: underline;">nothing to worry about.</span></em>&#8221; If you want to implement this solution bear in mind that changes to the plugin will take place at some point and the Google API will certainly stop working in December 2011.</p>
<p>&nbsp;</p>
<h1>Automatic jQuery Translator for Magento</h1>
<p>Having looked at integrating the <a title="Magento Google Element Translation Tool Implementation in 5 Minutes" href="https://blog.gaiterjones.com/magento-google-translation-tool-implementation/">Google element translation tool</a> into Magento to provide a <em>quick fix</em> content translation service I wanted to improve this tool by automatically translating content based on visitor browser language without the visitor having to manually select a language on every page.  <img loading="lazy" decoding="async" class="hang-1-column        alignnone" title="Automatic Google jQuery Translator for Magento" src="https://blog.gaiterjones.com/wp-content/uploads/2011/05/jquery-magento-translator.jpg" alt="Automatic Google jQuery Translator for Magento" width="348" height="158" /> Despite spending a lot of time looking at ways to manipulate the Google element translator code I couldn&#8217;t come up with a good solution until I came across the<a href="http://code.google.com/p/jquery-translate/"> jQuery dynamic google translation plugin</a> which integrates the Google Ajax Language API to jQuery and provides a really flexible and powerful method of dynamically translating content.  Using jQuery and the jQuery translation plugin we can create an automatic language translation service for Magento that detects the visitors browser language and automatically translates every Magento page to that language when it is loaded, or alternatively does the same when a new language is manually selected from the language drop down selector.  This is quite an easy solution to implement but should be thoroughly tested on your development platform as it requires some changes to existing javascript libraries as well as the addition of new jQuery libraries and plugins.  I have included the new jQuery libraries and plugin files required to implement this solution in a <a href="https://blog.gaiterjones.com/dev/extension.php?id=eb4bee963f22f61f7c865960f1359b62">download which you can access here</a>. Download and extract the files, copy them to your Magento installation folder and then follow the instructions below to implement automatic jQuery Google translations in your Magento store.</p>
<p><span style="font-weight: bold; line-height: 15px; text-transform: uppercase;">jQUERY &amp; script.aculo.us<br />
</span>According to <a href="http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/javascript_related/how_to_use_jquery_1.2.6_lastest_with_prototype">this Magento blog post</a> jQuery should have no problems working with other javascript frameworks and should &#8220;<em>work out of the box</em>&#8221; with Magento but doesn&#8217;t due to a conflict with an older version of scriptaculous.The Magento conflict lies with the code in <em>effects.js</em> which we will upgrade to the latest <a href="http://script.aculo.us/downloads">version</a> (<strong>1.9.0</strong> as of <strong>December 23, 2010</strong>).</p>
<h1>jQuery, jQuery Translator plugin and UIBlock plugin</h1>
<p>The other libraries required are the <a href="http://jquery.com/">jQuery library</a> which provides the jQuery framework, the <a href="http://code.google.com/p/jquery-translate/">jQuery Translator plugin</a> which currently integrates with the Google API to do the translations and the <a href="http://jquery.malsup.com/block/">UIblock plugin</a> which I&#8217;ve used to provide a neat way of updating the user interface when translations are taking place. These are included in the <a href="https://blog.gaiterjones.com/dev/extension.php?id=eb4bee963f22f61f7c865960f1359b62">download package</a>.  After copying the new libraries across to the Magento /js folder we need to update the page layout XML in Magento so that the new libraries are loaded. Locate <em>page.xml</em> in the layout folder of your Magento stores theme and open it for editing.</p>
<h1>Installation</h1>
<p>First find the XML that loads the existing scriptaculous <em>effects.js</em> file and modify the line that loads the effects.js library and change it to load the new upgraded version as shown below. Double click the code box and use CTRL C to copy.</p>
<pre class="brush:xml"> &lt;action method="addJs"&gt;&lt;script&gt;scriptaculous/effects-1.9.js&lt;/script&gt;&lt;/action&gt;</pre>
<p>Next we need to add some new XML to tell Magento to use the new jQuery library and plugins, add the following three lines before the existing line of XML that loads the <em>prototype</em> library in page.xml</p>
<pre class="brush:xml">&lt;action method="addJs"&gt;&lt;script&gt;jquery/jquery-1.2.6.noConflict.min.js&lt;/script&gt;&lt;/action&gt;
&lt;action method="addJs"&gt;&lt;script&gt;jquery/jquery.translate-1.4.7.js&lt;/script&gt;&lt;/action&gt;
&lt;action method="addJs"&gt;&lt;script&gt;jquery/jquery.blockUI.js&lt;/script&gt;&lt;/action&gt;</pre>
<p>Save the modified page.xml file.  The dynamic translation jQuery code can be placed in the <em>footer.phtml</em> template file of your Magento theme so that it runs when the page is fully loaded, this file is usually located in the <em>template/page/html </em>folder of your theme. Locate the file, open it for editing and append the following code at the bottom:</p>
<pre class="brush:php">	&lt;?php
	/**
	 * Automatic jquery translator for Magento
	 * blog.gaiterjones.com
	 * v0.3
	 *
	 */
	?&gt;
	&lt;script type="text/javascript"&gt;
	//&lt;![CDATA[
	jQuery(function($){

			var defaultLang = '&lt;?php echo substr(Mage::app()-&gt;getLocale()-&gt;getDefaultLocale(), 0, 2) ?&gt;';

			$('#langSelect').change(function() {
				var pathname = window.location.pathname;
				window.location = pathname + '?translateTo=' + $('#langSelect').val();
				if ($('#langSelect').val() == defaultLang) {
					$.blockUI({
					message: '&lt;h1&gt;Language is being reset to default...&lt;/h1&gt;',
					timeout: 2000
					});
				}
			});

			function doTranslateTo( destLang ){
			$('body').translate(defaultLang, destLang, {
			  not: '.doTranslate',
              start:     function(){   $.blockUI({ message: '&lt;h1&gt;Translating, please wait...&lt;br /&gt;(' + defaultLang + ' &gt; ' + destLang + ')&lt;/h1&gt;' })   },
              complete:  function(){   $.unblockUI()  },
			  error:  	 function(){   $.growlUI('Translation Error', 'An error occured during translation...');   },
			  toggle: true
			});
	}

		&lt;?php

		$defaultLang=substr(Mage::app()-&gt;getLocale()-&gt;getDefaultLocale(), 0, 2); // default store language

		// determine browser langugage
		if (isset($_SERVER['HTTP_ACCEPT_LANGUAGE'])) {
			// get languages from server header and assign quality rating
			foreach (explode(",", strtolower($_SERVER['HTTP_ACCEPT_LANGUAGE'])) as $accept) {
				if (preg_match("!([a-z-]+)(;q=([0-9.]+))?!", trim($accept), $found)) {
					$langs[] = $found[1];
					$quality[] = (isset($found[3]) ? (float) $found[3] : 1.0);
				}
			}
			// Order the codes by quality
			array_multisort($quality, SORT_NUMERIC, SORT_DESC, $langs);
			$browserLang=substr($langs[0],0,2);

		} else {
			$browserLang=$defaultLang;
		}

		$requestedLang=Mage::app()-&gt;getRequest()-&gt;getParam('translateTo');
		//$requestedLang=$_REQUEST["translateTo"];
		$storeCode=Mage::app()-&gt;getStore()-&gt;getCode(); // store code
		$cookieName=$storeCode. "-". $defaultLang. "-jquery-translateTo"; // derive cookie name

		echo "// defaultlang - ". $defaultLang. "\n";
		echo "// requestedLang - ". $requestedLang. "\n";
		echo "// browserLang - ". $browserLang. "\n";
		echo "// storeCode - ". $storeCode. "\n";
		echo "// cookieName - ". $cookieName. "\n";
		echo "// langfromcookie - ". Mage::getModel('core/cookie')-&gt;get($cookieName). "\n"; 

		if(!empty($requestedLang)) // check for language setting in REQUEST key
		{
			if (strtolower($requestedLang) !== strtolower($defaultLang)) { // translate if requested language != to store default
				if (!empty($requestedLang))
				{
					echo "// translating to requested language from url variable.\n";
					echo "doTranslateTo('". $requestedLang. "');\n"; // Translate and write cookie data
					Mage::getModel('core/cookie')-&gt;set($cookieName, $requestedLang, time()+36000);
				} else {
					echo "// Requested Language not detected.\n";
				}
			} else {
				Mage::getModel('core/cookie')-&gt;set($cookieName, strtolower($defaultLang), time()+36000); // set cookie i.e. keep default lang when default selected
				//Mage::getModel('core/cookie')-&gt;delete($cookieName); // remove cookie i.e. revert to browser lang when default selected

			}
		} else { // check for language data in cookie

			$langFromCookie = Mage::getModel('core/cookie')-&gt;get($cookieName); // read cookie

			if (!empty($langFromCookie))
			{
				if (strtolower($langFromCookie) !== strtolower($defaultLang)) { // translate if language data in cookie != to store default
					echo "// translating to requested language from cookie data.\n";
					echo "doTranslateTo('". $langFromCookie. "')\n";
				} else {
					echo "// cookie requesed language same as store default language - no translation required.\n";
				}
			} else { // no cookie	

				if (strtolower($browserLang) !== strtolower($defaultLang)) { // translate to browser language and set cookie
					if (!empty($browserLang))
					{
						echo "// setting language to browser language.\n";
						echo "doTranslateTo('". $browserLang. "');\n";
						Mage::getModel('core/cookie')-&gt;set($cookieName, strtolower($browserLang), time()+36000); // set cookie
					} else {
						echo "// Browser language not detected.\n";
					}
				} else {
					Mage::getModel('core/cookie')-&gt;set($cookieName, strtolower($browserLang), time()+36000); // set cookie
				}
			}
		}
		?&gt;			

	})
	//]]&gt;
	&lt;/script&gt;</pre>
<p>The code includes two jQuery functions, one that performs the jQuery automatic translation, and the other that monitors the language dropdown box used to manually change the page translation. The PHP code controls the automatic translation of pages based on the visitors browser language, using a cookie to store the visitors language which is subsequently used to translate every visited page to the browser language, or the language selected from the select Language dropdown box which is passed to the script via a URL request variable. Note that the code detects the default locale for the Magento store and uses this as the default language for translations.</p>
<p>To add the dropdown box, locate the <em>languages.phtml</em> file in the <em>template/page/switch</em> folder of your theme. Make a backup of the original file and then edit it to add the Language selector drop down box, replacing the contents of the file with the following code which includes all the languages supported by Google. This file is also included in the download package.</p>
<p>The language dropdown has been updated to show the current language as selected in the drop down list.</p>
<pre class="brush:php">&lt;?php
/**
 * Language switcher for jQuery Automatic Translator for Magento
 * blog.gaiterjones.com
 *
 */

$defaultLang=substr(Mage::app()-&gt;getLocale()-&gt;getDefaultLocale(), 0, 2); // default store language
$storeCode=Mage::app()-&gt;getStore()-&gt;getCode(); // store code
$cookieName=$storeCode. "-". $defaultLang. "-jquery-translateTo"; // derive cookie name
$langFromCookie = Mage::getModel('core/cookie')-&gt;get($cookieName); // read cookie
$requestedLang=Mage::app()-&gt;getRequest()-&gt;getParam('translateTo');

if (!empty($requestedLang))
{
	$languageSelected=$requestedLang;
} else {
	$languageSelected=$langFromCookie;
}

$languagesSelection =
		array(''=&gt;'Select Language',
				substr(Mage::app()-&gt;getLocale()-&gt;getDefaultLocale(), 0, 2)=&gt;'Default Language',
				'af'=&gt;'Afrikaans',
				'sq'=&gt;'Albanian',
				'ar'=&gt;'Arabic',
				'be'=&gt;'Belarusian',
				'bg'=&gt;'Bulgarian',
				'ca'=&gt;'Catalan',
				'zh-CN'=&gt;'Chinese (Simplified)',
				'zh-TW'=&gt;'Chinese (Traditional)',
				'hr'=&gt;'Croatian',
				'cs'=&gt;'Czech',
				'da'=&gt;'Danish',
				'nl'=&gt;'Dutch',
				'et'=&gt;'Estonian',
				'tl'=&gt;'Filipino',
				'fi'=&gt;'Finnish',
				'fr'=&gt;'French',
				'gl'=&gt;'Galician',
				'de'=&gt;'German',
				'el'=&gt;'Greek',
				'ht'=&gt;'Haitian Creole',
				'iw'=&gt;'Hebrew',
				'hi'=&gt;'Hindi',
				'hu'=&gt;'Hungarian',
				'is'=&gt;'Icelandic',
				'id'=&gt;'Indonesian',
				'ga'=&gt;'Irish',
				'it'=&gt;'Italian',
				'ja'=&gt;'Japanese',
				'ko'=&gt;'Korean',
				'lv'=&gt;'Latvian',
				'lt'=&gt;'Lithuanian',
				'mk'=&gt;'Macedonian',
				'ms'=&gt;'Malay',
				'mt'=&gt;'Maltese',
				'no'=&gt;'Norwegian',
				'fa'=&gt;'Persian',
				'pl'=&gt;'Polish',
				'pt'=&gt;'Portuguese',
				'ro'=&gt;'Romanian',
				'ru'=&gt;'Russian',
				'sr'=&gt;'Serbian',
				'sk'=&gt;'Slovak',
				'sl'=&gt;'Slovenian',
				'es'=&gt;'Spanish',
				'sw'=&gt;'Swahili',
				'sv'=&gt;'Swedish',
				'th'=&gt;'Thai',
				'tr'=&gt;'Turkish',
				'uk'=&gt;'Ukrainian',
				'vi'=&gt;'Vietnamese',
				'cy'=&gt;'Welsh',
				'yi'=&gt;'Yiddish');
?&gt;
&lt;div class="form-language"&gt;
	&lt;div class="language-switcher"&gt;
		&lt;select id="langSelect" &gt;
&lt;?php
	foreach($languagesSelection as $langCode=&gt;$LangName)
	{
		if ($languageSelected === $langCode)
		{
			echo '&lt;option selected value="'. $langCode. '"&gt;'. $LangName. '&lt;/option&gt;';
		} else {
			echo '&lt;option value="'. $langCode. '"&gt;'.$LangName. '&lt;/option&gt;';
		}
	}
?&gt;
		&lt;/select&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
<p>Save the file and refresh the Magento cache to load the new jQuery libraries and modified template files.</p>
<h1>Testing</h1>
<p>Now refresh your Magento front end and you should see the new language dropdown selector in the header of your page. This is where it appears in the default theme.</p>
<figure id="attachment_405" aria-describedby="caption-attachment-405" style="width: 345px" class="wp-caption alignnone"><img loading="lazy" decoding="async" class="hang-1-column        " title="Automatic Google jQuery Translator for Magento" src="https://blog.gaiterjones.com/wp-content/uploads/2011/05/jquery-magento-translator1.jpg" alt="Automatic Google jQuery Translator for Magento" width="345" height="373" /><figcaption id="caption-attachment-405" class="wp-caption-text">Drop down language selector</figcaption></figure>
<p>If your browser language differs from your stores default language then the page should automatically translate. If your browser language is the same as your stores, then perform a manual translation by selecting a language from the select language box. You will notice that a new request variable is appended to the site URL which triggers the dynamic translation. Navigate to other pages which should also become dynamically translated as the code reads the selected language from the cookie file. To turn off the automatic translation select the stores default language from the drop down, or select the second &#8220;default&#8221; option from the language dropdown list.</p>
<figure id="attachment_406" aria-describedby="caption-attachment-406" style="width: 496px" class="wp-caption alignnone"><img loading="lazy" decoding="async" class="hang-1-column        " title="Automatic Google jQuery Translator for Magento" src="https://blog.gaiterjones.com/wp-content/uploads/2011/05/jquery-magento-translator2-620x351.jpg" alt="Automatic Google jQuery Translator for Magento" width="496" height="281" /><figcaption id="caption-attachment-406" class="wp-caption-text">User interface is updated during translation using the UIBlock jQuery plugin.</figcaption></figure>
<figure id="attachment_407" aria-describedby="caption-attachment-407" style="width: 620px" class="wp-caption alignnone"><a href="https://blog.gaiterjones.com/wp-content/uploads/2011/05/jquery-magento-translator3.jpg"><img loading="lazy" decoding="async" class="hang-2-column          " title="Automatic jQuery Google Translation for Magento" src="https://blog.gaiterjones.com/wp-content/uploads/2011/05/jquery-magento-translator3-620x158.jpg" alt="Automatic jQuery Google Translation for Magento" width="620" height="158" /></a><figcaption id="caption-attachment-407" class="wp-caption-text">Manual language selection is passed as a URL request variable and stored as a cookie.</figcaption></figure>
<p>To manually link to a specific language for your site, specifiy the translation request variable in the URL with the two letter language code as shown above. i.e. for a German translation use <strong>http://www.webshop.com/?translateTo=de</strong></p>
<figure id="attachment_423" aria-describedby="caption-attachment-423" style="width: 503px" class="wp-caption alignnone"><a href="https://blog.gaiterjones.com/wp-content/uploads/2011/05/jquery-magento-translator4.jpg"><img loading="lazy" decoding="async" class="hang-1-column         " title="Automatic jQuery Google Translation for Magento" src="https://blog.gaiterjones.com/wp-content/uploads/2011/05/jquery-magento-translator4.jpg" alt="Automatic jQuery Google Translation for Magento" width="503" height="231" /></a><figcaption id="caption-attachment-423" class="wp-caption-text">Returning to default language turns automatic translations off.</figcaption></figure>
<p>Tested with Magento community editions v1.3.x and 1.5.x  Please provide feedback if you experience any problems, have successfully implemented this solution or if you have any other ideas for further development.</p>
<h1>Resources used in creating this solution</h1>
<p><a href="http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/javascript_related/how_to_use_jquery_1.2.6_lastest_with_prototype">http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/javascript_related/how_to_use_jquery_1.2.6_lastest_with_prototype</a></p>
<p lang="de">h<a href="http://code.google.com/p/jquery-translate/">ttp://code.google.com/p/jquery-translate/</a></p>
<p lang="de"><a href="http://jquery.malsup.com/block/">http://jquery.malsup.com/block/</a></p>
<p lang="de"><a href="http://jsbin.com/ozenu/1007/edit">http://jsbin.com/ozenu/1007/edit</a></p>
<h1 lang="de">Update Links</h1>
<p><a href="http://code.google.com/apis/language/translate/overview.html">http://code.google.com/apis/language/translate/overview.html</a></p>
<p>http://msdn.microsoft.com/en-us/library/ff512404.aspx</p>
<p>&nbsp;</p>
<p lang="de">&nbsp;</p>
<p lang="de">Blogged in <a href="http://www.kempinski.com/de/berlinadlon/Seiten/Welcome.aspx">Berlin</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.gaiterjones.com/automatic-google-jquery-translator-for-magento/feed/</wfw:commentRss>
			<slash:comments>46</slash:comments>
		
		
			</item>
		<item>
		<title>Magento SEO &#8211; Generate META Description Tags Automatically</title>
		<link>https://blog.gaiterjones.com/magento-seo-generate-meta-description-tags-automatically/</link>
					<comments>https://blog.gaiterjones.com/magento-seo-generate-meta-description-tags-automatically/#comments</comments>
		
		<dc:creator><![CDATA[PAJ]]></dc:creator>
		<pubDate>Mon, 10 Jan 2011 17:04:57 +0000</pubDate>
				<category><![CDATA[Magento]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[META Tag]]></category>
		<category><![CDATA[Product Description]]></category>
		<guid isPermaLink="false">http://blog.gaiterjones.com/?p=46</guid>

					<description><![CDATA[Whilst some may argue that the META description tag has little SEO value, it is used by search engines to compile page &#8220;snippets&#8221; that are displayed next to the search...<a class="more-link" href="https://blog.gaiterjones.com/magento-seo-generate-meta-description-tags-automatically/" title="Continue reading">Continue reading</a>]]></description>
										<content:encoded><![CDATA[<p>Whilst some may argue that the META description tag has little SEO value, it is used by search engines to compile page &#8220;snippets&#8221; that are displayed next to the search results, and these snippets should contain meaningful and good SEO content. When you add a new product in Magento you need to think about your SEO keywords, page title and META tag content. If you have a lot of products and have not created META description tag content for them then it can be a lot of work to update all the products maually, and more work to keep them up to date. There are a couple of ways to make this easier, you can export all your products, and edit the META description for each product and then reimport them into Magento which is a very slow process, or you can automatically create the META description based on your products long description, your products should at least have good descriptions!</p>
<p>Product descriptions in our Magento shop usually contain the product name in bold type on the first line, followed by a few good SEO keyword rich product description sentences. We can use this product description to create a nice META description tag with just a few lines of code in the head.phtml template file of your theme.</p>
<p>For example, if we look at the sample database products, the Nokia 2610 product description looks like this</p>
<figure id="attachment_49" aria-describedby="caption-attachment-49" style="width: 519px" class="wp-caption alignnone"><a href="https://blog.gaiterjones.com/wp-content/uploads/2011/01/magento-seo-description-meta-tag-2610-product2.jpg"><img loading="lazy" decoding="async" class="hang-1-column    " style="border: 1px solid black;" title="Automatic product description META tags in Magento" src="https://blog.gaiterjones.com/wp-content/uploads/2011/01/magento-seo-description-meta-tag-2610-product2.jpg" alt="" width="519" height="231" /></a><figcaption id="caption-attachment-49" class="wp-caption-text">Sample database product description</figcaption></figure>
<p>The description META tag from the sample database for this product looks like this &#8220;<em><strong>Offering advanced media and calling features without breaking the bank, The Nokia 2610 is an easy to use</strong></em>&#8221;</p>
<p>How about we use the product name and the first sentence from the description as the product description META tag for all our products? This can easily be accomplished by replacing the META description tag code in <strong>head.phtml </strong>located in your themes <em>template/page/html/</em> folder.</p>
<p>Replace:</p>
<pre class="brush:applescript">&lt;meta name="description" content="&lt;?php echo htmlspecialchars($this-&gt;getDescription()) ?&gt;" /&gt;</pre>
<p>With:</p>
<pre class="brush:php">&lt;?php if (Mage::registry('current_product')) : ?&gt;
&lt;?php if (strip_tags(str_replace("&lt;br /&gt;",", ",substr(Mage::registry('current_product')-&gt;getDescription(), 0, strpos(Mage::registry('current_product')-&gt;getDescription(), '.')+1)))=="") : ?&gt;
&lt;?php echo '&lt;meta name="description" content="'.htmlspecialchars($this-&gt;getDescription()).'" /&gt;' ?&gt;
&lt;?php else: ?&gt;
&lt;?php echo '&lt;meta name="description" content="'.strip_tags(str_replace("&lt;br /&gt;",", ",substr(Mage::registry('current_product')-&gt;getDescription(), 0, strpos(Mage::registry('current_product')-&gt;getDescription(), '.')+1))).'" /&gt;' ?&gt;
&lt;?php endif; ?&gt;
&lt;?php else: ?&gt;
&lt;?php echo '&lt;meta name="description" content="'.htmlspecialchars($this-&gt;getDescription()).'" /&gt;' ?&gt;
&lt;?php endif; ?&gt;</pre>
<p>This code will first check that we are working with a product page, it then takes the long product description text, replaces the first html line break with a comma, extracts the text to the first full stop and then strips out any markup tags. If the resulting description is empty then we revert to using the normal product META description.</p>
<p>The resulting slightly better looking META description tag for our product now looks like this <em>&#8220;<strong>Nokia 2610 Phone, The Nokia 2610 is an easy to use device that combines multiple messaging options including email, instant messaging, and more.</strong>&#8221; </em>Google will use this as the description snippet in search results. I use this same text for my <a href="https://blog.gaiterjones.com/automatic-magento-product-marketing-tweets-for-twitter/">automated product marketing tweets</a> and Facebook content too &#8211; more on that later.</p>
<p><strong>All </strong>our products should now have nicely formatted META description tags.  Play around with the str_replace function to extract the text you want from your product descriptions,  make sure you have your main SEO keywords in both the first sentence of your product description and your HTML Title and you are now on your way to better SEO content for all your products, and good looking content for your search engine description snippets.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.gaiterjones.com/magento-seo-generate-meta-description-tags-automatically/feed/</wfw:commentRss>
			<slash:comments>24</slash:comments>
		
		
			</item>
	</channel>
</rss>
