Implementing mobile site annotations

  • 1
  • May 15, 2014
John Iliopoulos

John Iliopoulos

Search Strategist

The world is turning mobile and with 32% of UK consumers making purchases with a smartphone online, it’s essential for existing ecommerce sites running a responsive mobile version (designed for mobile viewing) to implement the correct annotations that will help the site to also be search friendly.

Just recently, one of our clients had a mobile version of their site designed. The client also requested suggestions on the correct annotations for ensuring their mobile site was available for mobile search users, so I decided to write a post about the methods we used. Mobile sites use different formats compared to traditional desktop sites and the process can become confusing and time consuming.

Implementing the correct annotations assist Googlebot & Googlebot-Mobile discover mobile site content and help Google’s algorithms understand the relationships between mobile pages and desktop pages, treating them accordingly whilst avoiding massive traffic drops and/or duplicate content penalties. There are four steps we need to follow and I will be using as an example, (although it’s worth noting that our site is responsive and we don’t use an m.domain):

1. Desktop page required annotation

1.	Desktop page required annotation

Using rel=”alternate”indicates an alternative URL used for the desktop page. The media= attribute is used specifically to signal mobile devices. The max-width value is basically setting the device-width and is adjustable as algorithms look for max-width values reasonably expected to refer to mobile screen resolutions. The href= attribute is used as an input for an alternative URL mobile version.

2. Mobile page required annotation

2.	Mobile page required annotation

Google highly encourages the use of rel=”canonical” attribute on the mobile URL version pointing back to the desktop page. The above canonical implementation is an example and should be ensured for every indexed desktop page used on the mobile version.

Sitemap Annotation

3. Sitemap annotation

Sitemap Annotation

Google recommends laying out everything using a sitemap. The example above represents how the annotation is supposed to look like in a HTML sitemap.

4. Mobile sitemap

Mobile Sitemap

To complete the puzzle, a mobile sitemap in Google’s Webmaster should be submitted. Google offers specific guidelines on how they prefer sitemaps to look like. The sitemap above is an example copied from Google’s support. A mobile sitemap should only include URLs that serve mobile content.

It is worth noting that this step is not absolutely critical however it plays a role in indexing. When submitting the mobile sitemap make sure the <mobile:mobile/> attribute is included correctly as the mobile URLs won’t be properly crawled.

These are the four steps you need when considering taking your mobile site to a search friendly environment and avoid hurting your search rankings. Mobile internet use is growing extremely quickly and there is more to it that a visual responsive appearance.