Magento Search Engine Optimization (2014)
Chapter 2. Product and Category Page Optimization
In the previous chapter, we touched upon the importance of category pages for keyword distribution. Generally speaking, category pages are perfect to optimize "broader" search phrases as the names and content of our categories tend to automatically relate with those types of phrases.
For example, if we were optimizing for "Wooden Dining Chairs" and we had a wooden dining chairs category, it would make sense to use it to optimize this keyword rather than create a separate landing page. The category page is the most obvious place for users to look for "Wooden Dining Chairs".
Within this chapter, we will be looking at how to best format category pages for both visitors and search engines. We'll also be looking at optimizing our product pages to bring better conversions through our website and how to improve their appearance in theSERPs (search engine result pages).
In this chapter, we will be learning how to:
· Edit our title, meta description, and URL key to better optimize product and category pages for SEO and their appearance in the SERPs
· Create and format our content to better suit customers and search engines
· Better sell our products on our product pages
· Implement semantic SEO using schema markup
· Use Twitter, Facebook, and Google widgets to help share our product page
Optimizing titles and descriptions for the SERPs
Adjusting Page Title and Meta Description are the easiest and most obvious optimization improvements we can make to our category and product pages.
As mentioned previously, the role of the Page Title and Meta Description fields is to represent our page in the SERPs.
Although Page Title certainly plays a role in search engine ranking factors, Meta Description is deemed to be of far less value when it comes to ranking websites. What is clear however is that, when displayed in the SERPs, both of these elements play vital roles in advertising our page.
When optimizing our page titles and descriptions, the main questions we should be asking ourselves are:
· Is this relevant to the page?
· Is it descriptive of the content and the search intent of the user?
The common problem when incorporating keywords into page titles and descriptions is that, if we're not careful, it's all too easy to lose relevance.
Firstly, let's consider page titles. The general rules for well-structured page titles are that:
· They must be no greater than 70-75 characters
· They must contain our keywords
· The keywords should appear towards the beginning of the page title (unless it is the home page, where our brand name would appear towards the beginning)
· In all other cases other than the home page, we would generally see our brand name at the end of our page title separated by a dash (-) or pipe (|)
These are general rules of course, but there are many exceptions, and it all depends on the SEO strategy we are implementing for our website.
If we take a look at the top five organic results for the phrase "Wooden Dining Chairs" on Google.com, we will see a variety of page titles and meta description implementations and some interesting results as shown in the following screenshot:
From these results, we can clearly see that these pages are not all using the same title and description format, but they are obviously still ranking well in the search results.
The obvious patterns we can see when we compare these results to our general rules are that:
· All results contain the brand name in the page title
· Four out of five contain the brand name in the description
· All results contain at least one combination related to our search term
We can see that the top most results in our list are exceptions to our basic rules, so we cannot simply contribute their rankings to how their page titles and descriptions are set out. Most if not all of these websites are well-known brand names; they are naturally more prominent in the search results due to other important SEO factors, such as domain authority and the links they have accumulated.
For instance, Amazon.com ranks position one (top of the first page—organically) for this phrase—even though it checks the least number of boxes in our general title and description rules. Although we can't all be lucky enough to be optimizing a website with so much domain authority, what we can take heart from is that four of the other five results are also well-known brands and are mostly following our page title convention.
Tip
These results highlight that when analyzing search listings and our competition, it's important to keep in mind that what is shown is not always the best practice. There are numerous factors involved, and those who rank at the top may be making up for lack of best practice in other more important areas.
If we now take a look at the meta description of these results, we can see that not only does each result contain a mention of our keyword (or a keyword that Google deems to be a close/relevant match), but also the context of each description relates to "purchasing" or "buying" these particular items.
Each result features the word "shop", "buy", "prices", "product", or "deal" among many other similar terms related to purchasing. Although not necessarily a ranking factor in itself, the use of these terms prepares the user for the product-related content they will see when visiting these pages.
Due to the fact that search engines such as Google highlight relevant search terms within the results, there has been a common mistake among webmasters to try to fit in as many mentions of the search term as possible—simply to try to stand out from the crowd. This type of "spamming" meta descriptions will almost certainly lead to problems maintaining relevance and purpose.
What we should be aiming towards is a fair balance between mentioning our keyword and the context of that keyword within the description.
My favorite two descriptions from these results and those which I personally would naturally find myself reading and clicking on are:
The search term appears very naturally within these descriptions (it has maintained its relevance), there's important additional information present (for example, free shipping), and the entire message leaves the user in no doubt as to what the content of each of these pages will contain.
Adjusting our category titles and descriptions
In order to implement these general principles into our Magento categories, we would first of all want to set our brand name up as an automatic title suffix.
To do this, within the administration panel:
1. Navigate to System | Configuration | Design | HTML Head.
2. Within this section, set Title Suffix to "- Brand Name" (using either "-" or "|" as shown in the following screenshot) and click on Save Config.
Now that our suffix has been set up, we will not need to manually enter this into every page title. This will be done for us automatically.
We should now see that our Magento category names will be (by default):
[Category Name] [Title Suffix], for example, Wooden Furniture – Furniture Co
In many cases this would suffice, as our search term may automatically match our category name; however, if we do need to tweak our category page title, Magento provides us with the ability to change it through the admin interface using the following steps:
1. Navigate to Catalog | Manage Categories.
2. Select a category on the left by clicking on the name of our category and then, within the General Information tab, enter our new page title. Finally, click on Save Category.
Tip
Changing Page Title within Manage Categories is useful if we wish to modify our page title slightly but keep our category name the same—for use within navigation elements and so on.
In order to edit our category meta descriptions, we can do so with the following step:
1. Within the General Information tab of our chosen category, set our Meta Description field to a 160 character customer-targeted description mentioning our chosen search term.
An example of a targeted category description for "Wooden Dining Chairs" would be:
Shop at Furniture Co Ltd for a wide range of wooden dining chairs available at unbelievable prices. We offer free shipping for any order over $100.
Note
As mentioned in the previous chapter, it is imperative that we make sure we have entered our meta description for all of our categories; otherwise, we may be penalized for duplicate meta description tags.
Unfortunately, unlike the page title, our default fallback for our description will not take into account our category name, but will instead bring back the default description that was set within System | Configuration | Design | HTML Head.
Adjusting our product titles and descriptions
All of the examples mentioned in the preceding section have been specific to category pages; however, our product pages are slightly different, and that is once again due to the Magento meta-data fallback process.
A Magento store could have any number of categories and products. Generally, the number of categories on a Magento store is relatively small and, therefore, specifying the page title and meta description for each is relatively easy. However, there can sometimes be hundreds of thousands of products and, therefore (depending on the resources at hand), it is a long and arduous process to write quality, relevant descriptions for each product.
The fallback for products takes this into account, and rather than serving up the default meta description will endeavor using a snippet from our product description used on the page.
The downside of this is that only the first 200 or so characters are taken from our product description, which may or may not be the most relevant of all the text we have written. These 200-220 characters might also contain HTML—which should not be used within a meta description.
Tip
It is advisable that (where possible) simple custom meta descriptions that are hand-written would be more beneficial for display in search engines. The fallback should only be used as a temporary fix until this can be achieved.
Page titles, however, are generally automatically created using our product name and are therefore already optimized for our product-specific keywords. Much like categories, both our page titles and meta descriptions for our products can be edited via the administration panel:
1. Navigate to Catalog | Manage Products and select a product.
2. Click on the Meta Information tab and enter Meta Title (if the page title needs to be slightly different to the product name) and Meta Description.
The same rules of relevance and purpose apply when writing our meta descriptions and titles for products. We need to make sure that when viewed in the SERPs, the intention of what our page is about is clear to the user—essentially prequalifying our visitors to those interested in perhaps purchasing our product.
The following screenshot shows a few good examples of product pages within the search results:
A few key pieces of information to note:
· Product name always comes first
· Brand name is always mentioned in the title and description
· Meta description is either a clear indication of selling the item or can be a detailed description of the key features of the product
Tip
If the brand of our products happens to be our own company's brand name, we would restrict the usage of our brand term to just one instance.
If pricing details are fixed or changes infrequently, it may also be beneficial to include pricing information within the meta description.
Optimizing our URL keys
The other obvious element on a search engine's results page, besides the title and description (and other schema implementations, which we'll move onto in a moment), is the page URL.
The general consensus within the SEO community is that URL keys should be relevant to our destination page, in lowercase, and simple for the user to interpret.
By default, Magento will try to set our URL key as our product or category name followed by our chosen file extension. For SEO purposes, this is perfectly acceptable, and we wouldn't want to change these from their defaults too much.
As covered in the previous chapter, we would simply want to make sure that our URLs are as clean and simple as possible by performing simple tasks such as:
· Removing the index.php file from our URLs
· Using our canonical URL for products (www.mydomain.com/my-product-url.html)
URLs should be user-friendly wherever possible—this means short and descriptive of the content. A shorter URL is also more likely to be shared via social networks and other websites, mainly due to character limitations.
If our URL keys are too long or contain redundant words that may not be used by search engines for a given search query (such as "and" and "for"), we can edit our URL keys using the following steps:
For products:
1. Navigate to Catalog | Manage Products and select a product. Within the General Information tab (by default), we can set our URL Key field and click on Save Product.
For categories:
1. Navigate to Catalog | Manage Categories and select a category from the left-hand side menu. Then, within the General Information tab, set our URL Key field and click on Save Category.
Layout and content considerations
When optimizing the content on our pages, we must always make sure that the primary purpose of our content is to engage our visitors—not pander directly to search engines. The more beneficial our page is to our users, the greater the chance that search engines will want to present our page to its own users.
Well-structured category and product pages are essential for any e-commerce website. The ease in which a customer can browse the website and add a product to the cart is fundamental in making sure that our store converts visits into sales.
This is normally dependent on the layout of the website and not only affects our conversion rates, but also visitor bounce rates and time on page, which are both important ranking factors for SEO.
Category page layout
For categories, Magento provides us with the following default tools in which to display content to the user:
· The ability to add a category description, image, and thumbnail
· The ability to display a static block/products or both
· The ability to show products in a grid or list view format, change how they are sorted, and change how many to show per page
· The ability to show layered navigation (product filters)
· The ability to define our own layout (and with this the ability to change any aspect of the page)
As we can see, Magento has provided us with a lot of options to change the way our categories appear to our customers. A skilled frontend developer will be able to create a bespoke design for any category page and move any of the elements around in order to meet the design brief.
We won't go into too much detail about design principles here, but instead we'll focus on the SEO aspects of how a category page is put together, what the best practices are, and how best to configure those settings to better serve our visitors.
If we use our example from before of the top five sites for the phrase "Wooden dining chairs", we will see a general pattern emerge for our layout as shown in the following screenshot:
The general pattern that emerged for our layout is as follows:
· Filters are located on the left-hand side, and this section takes up roughly 25 percent of the screen space. This is so that visitors can find them quickly and easily but at the same time not be distracted too greatly from our most important area—the products.
· The product area is roughly 70-75 percent of the screen space and, with the exception of eBay (on the far right-hand side), is laid out in a grid structure. This leaves the visitor in no doubt as to the primary subject of the page.
· The pagination and sort by attributes are located just above (and below) the product grid—again another accessibility feature, but one that does not detract from the focus of the products.
This setup is deemed to be the best practice (particularly for desktop users) at this moment in time, and we should try to replicate a similar setup in our Magento store.
The general steps to take in order to set our category pages to a similar layout are to make sure that:
1. We are using the two-column template with the left-hand side bar for our category pages. We can either change this by default within our layout XML or, if we want to do it per category, navigate to Manage Categories | Custom Design | Page Layout and set it to 2 columns with left bar.
2. To make sure our category has layered navigation enabled, we can do this by checking that within Display Settings, Is Anchor is set to Yes.
3. We have set grid mode as our default display mode. To do this, we must check that System | Configuration | Catalog | Frontend | List Mode is set to Grid (default) / List or simply Grid Only.
Product page layout
Product pages, as we saw with category pages, tend to maintain a standard layout. If we were to take a look at the product page layout of the first result on each of those previous categories, we would notice the following similarities:
· Every product page has the product image on the left
· They all either use a two-column or three-column layout to display information
· The primary viewing space (above the fold) is used to display the most important key pieces of information—name, price, quantity, and product options
· Detailed product descriptions and other related products are generally separated below this area but are easily accessible to the user
By default, Magento will set our product pages to use the 2 columns with left bar template. If, however, we need to change this for any reason, we can do so by default within our layout XML or alternatively change the layout of each product individually by following the given steps:
1. Navigate to Catalog | Manage Products and click on our product.
2. Within the Design tab, we can set Page Layout to either a two-column or three-column layout.
The main product area in Magento exists within the content block; in other words, not in the left or right column. It is within this area that we would need to focus our attention when we are deciding how to best layout our product page, especially when deciding how large our image area should be and where to place our product title, price, and add-to-cart button.
There is no true "one-size-fits-all" for layouts. Although the similarities of the results shown earlier are very common, there are many occasions when some aspects of a page may require more prominence than others. For example, on a product page where the item is medicine, it would make sense to reduce the size of our product image (perhaps a generic plastic tub of pills) and instead highlight the medical ingredients, directions for use, and possible side effects.
Optimizing our headings
The most important aspect of any landing page is that when the visitor arrives, they should be presented with a heading that relates to their original search query.
This heading should be:
· At the top of the main content area in plain sight
· Unique to the page it appears on (not duplicated on other pages)
Magento automatically populates our category page heading (an <h1> tag) with our category name. In most cases, this should be perfectly acceptable, but if we wanted to adjust our heading (in order to tailor it more specifically to our chosen search phrase), we would have to do so by changing our category name—this is not ideal.
Unfortunately, it is quite common for categories and products to have the same name and, therefore, the same heading. For categories, this is normally seen when double-categorizing for the sake of usability, for example as seen in the following screenshot:
In order to resolve these issues for categories, we could:
1. Change our category structure so Mens and Womens are children of one single Deodorant.
2. Change our category names so that they read Mens Deodorant and Womens Deodorant.
3. Use the Creare SEO extension, which will provide us with a new input field so that we can edit the heading tag on each of our categories—much like with page titles (covered in Chapter 8, Purpose-built Magento Extensions for SEO/CRO).
For our product pages, Magento will automatically set our <h1> tag to our product name, so we should try to make sure that every product has a unique name. We wouldn't want to change our heading by adding in any extra keywords as the product name is exactly what our customers would expect to see on this page and is the most relevant heading.
Optimizing product and category descriptions
There are some common opinions within the SEO community about how much content we should have on an optimized page. The general consensus is that the length of the content should be appropriate to the type of page we are serving and should be relevant, unique, and engaging.
When we look back at our top five search results for "Wooden dining chairs", we will notice one important and glaringly obvious mistake: not a single one of these high-ranking pages features a dedicated category description.
So why should we bother? Well, as mentioned previously, search engines look at many aspects of a web page in order to judge how well suited it is for people searching for a particular phrase.
From our results, we can see that although they're not providing a dedicated category description, these web pages are obviously making up for lack of descriptive copy in other ways. In fact, on these websites, they have probably decided that a description would interfere with the usability of the page in some way and have therefore decided not to provide one.
Unless our website has already built up enough authority to avoid using category descriptions, it is definitely recommended to add relevant copy to our optimized category pages. We must, however, make sure that by doing so we are adhering to the following guidelines:
· The category description is unique and worthy of our visitors attention, perhaps even mentioning a notable product from a specific range
· It does not impede the visitors view of product images or other important elements on the page
· It is written for humans—not simply for search engines
· If we're struggling to write more than 100 words for our page, leave it at 100 words—at least those words will be relevant
An example of a high-ranking category page that features a category description can in fact be found within the results of our Google.com search for wooden dining chairs (just under our top five). IKEA has used the space above the product listing grid to display a brief introduction to the category, which is shown in the following screenshot:
However, in this case, it would appear as though the description is in fact causing users to scroll further than necessary to get a good look at the grid of products, especially on a smaller screen size.
Product descriptions obviously need to describe the product on that specific page, and there are a few general rules to consider when writing them:
· Wherever possible, keep product descriptions unique. Do not simply copy the standard manufacturers description (this may lead to problems with duplicate content as it has undoubtedly been used on many other websites selling the same product as ours).
· Make sure that the description is well formatted and easy for the visitors to find. Try not to hide the description inside a tab (especially if this tab is not immediately visible to the user).
Additional tips for content
Within Magento, there are many other ways in which we can add relevant content to our category and product pages, such as:
· Related products: These are a good way of internally linking our products together and are also extremely useful for customer navigation.
· Displaying attribute information on our product pages so that our Additional Information section is shown.
· Enabling product reviews: These will help to bring unique, relevant content to our pages without having to write additional content ourselves.
Note
Even mediocre reviews can have a positive impact on SEO rankings. As mentioned previously, good content is unique, engaging, and relevant, so don't be so quick to delete a 3/5 star review—these types of reviews will actually make our website appearmore credible to our customers.
By default, Magento will show our product reviews on a separate page (for example, http://www.mydomain.com /review/product/list/id/132/category/25/). Ideally, we would want to make sure that any reviews for our product are shown on our initial product page. We will cover how to do this in Chapter 4, Template/Design Adjustments for SEO and CRO.
Optimizing images and selling your product
The most frustrating aspect of running an online store is that it's physically impossible to personally pitch our product to each and every e-commerce visitor. It is therefore crucial that our product page contains as much persuasive material and useful information as possible.
One of the simplest and most beneficial ways to get across the sheer quality of our product is through good product photography.
The following are a few guidelines on how best to go about adding product photography to the product page:
· The main product image should be large—at least 25 percent of the main content column width
· The image should be of high quality and an option for the user to zoom-in or expand the image should be provided
· The image should be in context (for example, a wooden dining chair should be situated on the floor next to a dining table, not floating in space)
· If you provide multiple color choices, or your product comes bundled with accessories, provide an image of each
When optimizing our images, we should ensure that both the alt tag (alternate text) of our image and the filename (for example, myfilename.jpg) have been set to contain either our product name or the specific keyword that we are optimizing on this page.
To set our image alternate text, we must enter it when editing our product:
1. Navigate to Catalog | Manage Products and select a product.
2. Click on the Image tab and within Label, enter our chosen keyword (or product name) as shown in the following screenshot:
Another massively expanding element that we find on product pages across the Internet these days are product videos. Product videos are typically short, informative, and (if done correctly) are extremely persuasive in getting across all the best aspects of our product to our customers in the shortest amount of time.
Tip
One of the best company-based videos I have seen in a long time is Dollar Shave Club. They advertise a single product but in such an imaginative and truly hilarious way (this may be taking it a little too far) at goo.gl/UzcMNn.
When it comes to writing copy for our product pages, we should think about adding personality. The more personality that goes into a product description, the more inclined a customer is to read and be affected by it. However, we must ensure that the important aspects of our product are still covered, especially when it comes down to technical data—not adding this can be a very costly mistake. For example, if we were selling a technical item such as a camera and failed to provide all the necessary information such as megapixels and zoom, a potential customer may not be sure if our product is the correct one for them. This may lead to the customer leaving our website in search of another company who has clearly listed the full product specification.
One of the most important features that we can implement on Magento product pages is customer reviews. Reviews are fast becoming vital for product pages, mainly for the following reasons:
· They provide the page with fresh content (if configured to show up on the product page itself—covered within Chapter 4, Template/Design Adjustments for SEO and CRO).
· They provide us with the means to use structured data markup or schema so that we can provide search engines with a user rating of our product. This rating is then used in the SERPs.
· A good rating generated by a high number of reviews quite naturally helps with a customer's buying decision about our item.
Implementing schema (rich snippets)
When visitors browse our website, they instinctively understand the meaning behind certain elements on the page. They understand when they are viewing a product page, reading reviews of our product, and even understand the difference between our recommended retail price (RRP) and our special price simply due to the layout of the page and how we have styled those elements.
Although search engines are becoming smarter every year, we can't rely on them to instinctively pinpoint the exact locations of these elements on our page. Microdata introduced with HTML5 helps to specify these elements for major search engines, such as Google, Bing, and Yahoo!.
Note
There are a number of different canonical tag vocabularies on the Internet that are compatible with major search engines. For e-commerce, one of the better vocabularies is called Good Relations, and is well worth taking a look at goo.gl/4R96K9.
The main reason why we would want to implement the schema.org structured data format (aka schema) into our Magento website is to increase our click-through rate (CTR) in the SERPs by providing us with a rich snippet. Rich snippets are essentially special display options that Google can activate on a specific listing in the SERPs—dependant on the interpreted content of that particular web page.
When searching for Sea Foam Nail Head Parsons Chairs, we can see many types of results (randomly taken from the result page):
From the preceding screenshot, we can see three different structured data implementations and one listing without a rich snippet:
· Listing 1: Contains the Product, Offer, and AggregateRating schema all on one page. This allows Google to pick up on the aggregated rating of the product based on the number of reviews for that product (which is also shown) and also the current price (or price range).
· Listing 2: Contains only the Product schema; therefore, Google picks up on this and simply displays the price of the product.
· Listing 3: Contains authorship markup—this is to highlight the need to make certain that the structured data we are using matches the page type (this example would be appropriate, however, if the listing were a review of the product).
· Listing 4: Does not display any rich snippets and looks rather plain in comparison.
Although it is possible to combine several different types of structured data on any one page, many search engines will only display a single rich snippet depending on which type of structured data takes priority on the page. However, microdata within the same categorization (such as product, offer, and rating) will be combined in the SERPs to provide a more comprehensive snippet.
In our case, we would want to implement the Product, Offer, and AggregateRating schema onto our product pages as these type of structured data formats complement each other and will be used together.
Note
For more information on these schema types, please visit http://schema.org/.
Adding the schema.org markup to our templates
In order to provide Google with our structured data, we must first add tags to our template file and wrap these tags around our dynamic product data.
There are many ways to insert our schema into our template files, and the following may not prove to be best practice, but for the sake of simplicity within this book, we will enter our schema in the following steps:
1. Within the app/design/frontend/[package]/[theme]/ template/catalog/product/view.phtml file, add the following schema and custom code (highlighted):
2. <div class="product-view" itemscope itemtype="http://schema.org/Product">
3. <!-- code not shown -->
4. <h1 itemprop="name">[our product name code]</h1>
5. <!—this is our normal review block-->
6. <?php echo $this->getReviewsSummaryHtml($_product, false, true) ?>
7. <!-- code not shown -->
8. <!-- new section to add our availability and price -->
9. <?php if($_product->isAvailable()): ?>
10. <div class="no-display" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
11. <span itemprop="price"><?php echo Mage::helper('core')->currency($_product->getFinalPrice()) ?></span>
12. <link itemprop="availability" href="http://schema.org/InStock" />
13. </div>
14.<?php endif; ?>
15.
16.<?php if ($_product->getShortDescription()):?>
17. <!-- code not shown -->
18. <div class="std" itemprop="description">[short description code here]</div>
19. <!-- code not shown -->
<?php endif;?>
20. Within the app/design/frontend/[package]/[theme]/ template/catalog/product/view/media.phtml file, edit both instances of the following variable to add our image into our product schema (schema highlighted):
21.<!-- code not shown -->
22. $_img = '<img itemprop="image" [rest of image code here]
<!-- code not shown -->
23. Within the app/design/frontend/[package]/[theme]/ template/review/helper/summary.phtml file, enter the following schema and custom code (highlighted):
24.<?php if ($this->getReviewsCount()): ?>
25.<div class="ratings" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
26.<span class="no-display" itemprop="reviewCount"><?php echo $this->getReviewsCount() ?> reviews</span>
27.<?php if ($this->getRatingSummary()):?>
28.<!-- code not shown -->
29.<!-- for % rating
30.<span class="no-display" itemprop="worstRating">0</span>
31.<span class="no-display" itemprop="bestRating">100</span>
32.<span class="no-display" itemprop="ratingValue"><?php echo $this->getRatingSummary() ?></span>
33.-->
34.<!-- for /5 star-rating -->
35.<span class="no-display" itemprop="worstRating">0</span>
36.<span class="no-display" itemprop="bestRating">5</span>
37.<span class="no-display" itemprop="ratingValue"><?php echo round($this->getRatingSummary()/20,1) ?></span>
<-- code not shown -->
Tip
With the ratings schema, we can specify either a percentage-based rating or an out-of-five rating. I have provided both options in the preceding code for you to use.
Once all the preceding steps are complete, we will have specified our:
· The Product schema consisting of the name, description, and image as well as containing:
· AggregateRating: Which contains reviewcount, worstrating, bestrating, and ratingvalue
· Offer: Which contains price and availability
We can then preview our rich snippets using the Structured Data Testing Tool provided by Google (goo.gl/K6HpFg) simply by entering our URL or HTML of our page. We should see a preview of our results listing similar to the following screenshot:
The structured data testing tool provides us with a good preview of how our listing will look no matter how many schema elements we add to our templates. It will also act as a good measure for our schemas that Google may decide to implement (for example, showing authorship over product data).
Note
Wherever possible, schema should be entered into the HTML and rendered visibly on the page. In this instance, I have chosen to add the AggregateRating and Offer schema as hidden elements. This was to keep the editing to a minimum. When adding your own schema, it is recommended to look deeper into the code to find the specific areas to tie your schema into (for example, catalog/product/view/type/default.phtml—for simple product types).
Please note that rich snippets like our product schema may take up to six weeks to appear in Google. As long as the testing tool is showing the information, it means it has been applied correctly and we just have to be patient for Google to begin to display our snippets.
Implementing social sharing for products
The main aim when using social sharing buttons on a website is to allow visitors the option of sharing our page/website within their own social circle. In turn, this would lead to the possibility of other like-minded web users being made aware of and possibly visiting our website.
As shown in the preceding section, there is evidence to suggest social shares (or signals) are becoming a search engine ranking factor. The number of social shares being representative of a vote for our web page is similar to how links are treated by search engines currently.
Note
For more information on search engine ranking factors, please see the following link (moz.com): goo.gl/Rz171o.
There have been mixed opinions on whether or not social widgets are applicable to product pages; however, due to the release of product-specific social tags, such as Twitter product cards and Open Graph, the relevance is now clear.
With these two simple implementations, it's now easy to add an advertisement of our product when the user tweets our page or likes it on Facebook using any number of social sharing widgets—some of which we will look at in Chapter 8, Purpose-built Magento Extensions for SEO/CRO.
It is relatively straightforward to implement Twitter cards and the Open Graph format on our product pages; all we need to do is add some meta information to our <head> tag. I have written a blog post of how to integrate both of these types into our Magento product pages at goo.gl/nTnAz8.
When configured correctly, our product becomes a part of the users' Tweet/Like/Pin and would look similar to the following screenshot:
Summary
In this chapter, we have covered a lot of factors that govern how well our product and category pages can be optimized. We've looked at the general rules for setting up our page titles, descriptions, and layout, and how these differ between categories and products. We've also seen that there are many other ranking factors besides meta information that govern how high a page ranks in the SERPs.
With a few simple lines of code, it is really easy to implement product schema and social elements such as Twitter cards into our Magento templates. This is highly recommended for any e-commerce store—especially when we have enabled our reviews and ratings that help to increase our CTR within the SERPs.