Utilising Meta Tags in your Ecommerce Site

Ecommerce sites will always want to capitalise their electronic footfall by making their shopfront the best it can be to help drive sales. Search Engine Optimisation has blazed a trail as the way to get passers-by to enter your online store and this article will look to offer an introduction to presenting your site on Google as richly as possible, as well as exploring how you can distinguish your site on Social Media.

Metadata (The clues to give to Google) can be added to the code of most pages and templates, and make a huge difference to the success of Product Pages online. The particularly technically savvy can take on embedding the code into their site from an example we will discuss later, but approaching Keystone Data motivated to improve your NetSuite site’s visibility is a great way run your store at peak performance online.

After a brief run-through of the standard Title and Description Meta tags, we will delve into the tags used for Social Media and Google’s extra Snippets.

Titles and Descriptions

When your website is presented as a search result, most likely on Google, there is a standard appearance you can dictate. Like a shop’s signage, it is important to make your store look presentable in the list of results.

The Meta Title is the title most prominently displayed on the search result. The title isn’t just about throwing in keywords as it is important for the title to be readable and engaging for the potential customer too. Best practice is to keep the title around 69 characters so it is not limited or replaced by the Search Engine; so ensure it is snappy as well as sweet. Obviously with an Ecommerce site generating pages for potentially thousands and thousands of products auto-generation would be a big draw. However our recommendation would be auto-generate within a template using tags from your Product Database, as can be seen in the example below, [Ecommerce Solution] would be the dynamic Product Tag.

Choose Your [Ecommerce Solution] with Keystone Data

The Meta Description is the additional text displayed below the Title and URL and is recommended to be around 140 Characters in length. Webstores should really look to offer a call-to-action at this stage in a short but interesting passage of text, so don’t over-do the keywords as they will have little effect on the result’s ranking anyway. A best practice would be to use a unique template for whole product categories with the unique product tag inserted. For example, one for all women’s running shoes.

As a NetSuite Partner, we would recommend that NetSuite ecommerce sites consider using a semi-programmatic method to place fields from NetSuite as tags within the Title and Description. For more information please don’t hesitate to Contact Us.

Top Tip: Avoid regurgitating Manufacturer’s supplied descriptions in both the product page and the search description as Google doesn’t look fondly on duplication.

Rich Snippets

Search Engines and particularly Google allow sites to present content in a richer format within Search Results by facilitating the display of: additional information, author details, video information, images or reviews alongside the Title and Description.

An example could be displaying the track listings and year of an album; but most importantly for ecommerce Google supports Rich Snippets for Products. This means it is possible to display the price, availability and review ratings directly in the results. However it is worth considering whether being this easily compared and reviewed may impact your click-through rate.

Top Tip: Having user reviews means customers are doing some of the work for you by updating your pages with relevant and new content that will increase your rating with Google.

Offering more information to Google with Microdata can help to make your Search Result more distinctive, but the snippet information is also used for sharing your page in Google+, and thus getting your page started on Social Media.

We would recommend reading up on the Schema.org structure that Google uses to source this information before getting started and using Google’s Rich Snippet Tool as a platform for testing how your results will look.

Social Media Markup Tags

Hopefully customers will want to share your pages and products on Social Media and it is definitely worth ensuring when they do the link will look its best. Adding Social Media tags to your page’s code will define how they will appear when shared on the different Social Streams. Dodgy Thumbnails and incorrectly-sourced Descriptions are commonplace but easily avoidable if the time is taken to think about how you want your store to be viewed across the web.

Ensuring that your defined Titles, Images and Descriptions look their best across Facebook, Twitter, LinkedIn, Google+, Pinterest and many more is a great way to help the Content spread and increase your stores visibility. Optimising your content is a great distribution strategy as it opens a new, well-presented door to your ecommerce site through increasingly powerful Social Media platforms.

Making your webstore shareable is a great way to give off the professional big-business impression to your customers

Simply put, most Social Media uses OpenGraph protocol as default for checking how to display a page; it’s the protocol Facebook and LinkedIn look to for example. Twitter has slightly different requirements and displays as something referred to as a Twitter Card. We will be exploring the make-up of these after running through an example template.

A Product Social Media Meta Tag Template

The example template below displays a logical example of how a Product Page could implement the benefits of shareable content. The process would require a developer to implement on a large scale but the fundamentals can be defined by anyone on a small scale. The Schema.org markup section supplies details for Google, the Twitter Card for Twitter and Open Graph for Facebook among others. The addition of price and currency can offer a window into the webstore from social sources while effectively tailoring Images and Titles is an effective way to control brand image across the web whilst making content more distinctive.

Product Social Media Tag Template

< !-- Update your html tag to include the itemscope and itemtype attributes. -- >
< html itemscope itemtype="http://schema.org/Product">

< !-- Place this data between the tags of your website — >
< title>Page Title. Maximum length 60-70 characters
< meta name="description" content="Page description. No longer than 155 characters.” / >

< !-- Schema.org markup for Google+ — >
< meta itemprop="name" content="The Name or Title Here” >
< meta itemprop="description" content="This is the page description” >
< meta itemprop="image" content="http://www.keystonedata.co.uk/image.jpg" >

< !-- Twitter Card data –>
< meta name="twitter:card" content="product" >
< meta name="twitter:site" content="@publisher_handle” >
< meta name="twitter:title" content="Page Title” >
< meta name="twitter:description" content="Page description less than 200 characters” >
< meta name="twitter:creator" content="@author_handle” >
< meta name="twitter:image" content="http://www.keystonedata.co.uk/image.html” >
< meta name="twitter:data1" content="£3” >
< meta name="twitter:label1" content="Price” >
< meta name="twitter:data2" content="Black” >
< meta name="twitter:label2" content="Color” >

< !-- Open Graph data –>
< meta property="og:title" content="Title Here” / >
< meta property="og:type" content="article" / >
< meta property="og:url" content="http://www.keystonedata.co.uk/” / >
< meta property="og:image" content="http://keystonedata.co.uk/image.jpg” / >
< meta property="og:description" content="Description Here” / >
< meta property="og:site_name" content="Site Name, i.e. Moz” / >
< meta property="og:price:amount" content="35.00” / >
< meta property="og:price:currency" content="UGBP” / >


OpenGraph

OpenGraph is probably the most important protocol as it is used as default for the largest number of Social Media Platforms like Facebook and LinkedIn. To use Facebook as an example, the platform will look at the following useful tags:

    • og:title – Facebook will use the Meta Title if this isn’t populated, but you may want to introduce a new one applicable to sharing and it is recommended to stick between 60-90 characters.
    • og:url – This will be the displayed Canonical URL attached to the Facebook share, useful if you have a page with many URLs to keep the routes to your page simple.
    • og:type – This section describes the type of object being shared, an “article” for example. In terms of ecommerce, the og:type would predominantly just be “website”.
    • og:description – This is the description displayed below the link and should be kept below 200 characters. Forget about keywords and make this interesting to read as what’s written here won’t affect SEO.
    • og:image – Adding an image here will ensure a specific thumbnail is shared and Facebook recommend using a 1.91/1 ratio as best practice. Any image with a resolution of less than 400 x 209 pixels will be cropped and displayed as a smaller square thumbnail, so we recommend including a nice lifestyle product shot to help the posts standout.

OpenGraph supports many other tags like Videos or Facebook applications (e.g. Facebook Comments), and it is well worth reading more here.

Pinterest also uses OpenGraph in much the same manner as Facebook. However it offers retailers the opportunity to add in Product Pins to share real-time pricing and availability information straight on to a user’s page. This addition offers the opportunity to use someone’s Pinterest as a window directly into your web store. For more information we recommend you visit: https://developers.pinterest.com/docs/rich-pins/products/

Twitter Cards

Twitter uses Summary Cards to display the sharing of websites that allow for a great opportunity to cheat the limited character format of Tweets. The twitter:card tag acts in much the same as the “Type” tag for OpenGraph and allows the Summary Card to format the tweet more appropriately for the page type. Twitter offers great guides on the Card types here.

The Tweet itself will be limited to 140 characters but a summary adds tags for: a 70 character Title in bold, a 200 character Description with the same requirements as OpenGraph and two options for an Image (Either Small or Large, with Small being displayed at 120 x 120 pixels and Large being displayed at 120 x 90 pixels).

In Summary

Search Engine Optimisation is an embedded practice for all Online Stores now and utilising Meta and Markup Tags are further expanding the need to make your website relate effectively to the rest of the web. Optimising your content is a growing necessity to keep ahead of the competition by helping you better target your messages while allowing a bit more control of the Word-of-Mouth marketing Social Media can offer.

Social Media Testing Tools

One thing definitely worth noting is that a lot of Social Media sites will require that you confirm your website with them for sharing first. With that in mind please find below links to the site tools for the most popular.

Twitter Validation Tool

Twitter requires prior approval, but this is just a simple case of entering your URL into the validation tool and selecting “Submit for Approval”.

https://dev.twitter.com/docs/cards/validation/validator

Facebook Debugger

Facebook doesn’t require any approval, but the following link is a great tool for debugging your tags.

https://developers.facebook.com/tools/debug

Google Structured Data Testing Tool

The Google Testing Tool is a great way to preview the effect of your tags and see what other data Google can extract from your site.

http://www.google.com/webmasters/tools/richsnippets

Pinterest Rich Pins Validator

Pinterest does require approval, and by using the following tool you can test and approve your pages at the same time.

http://developers.pinterest.com/rich_pins/validator/