If you are using a separate mobile site have you implemented the mobile markup?

You can divide all mobile sites into three categories

  • Responsive – Where a single URL is served to both mobile and desktop users. The content and the elements are same irrespective of the user agent.
  • Dynamic serving – Dynamic serving mobile sites also have a single URL but certain content and design aspects of its mobile version are served differently for better user experience.
  • Mobile Separate URLs – Mobile Separate URLs is a complete website altogether. Here all content and design elements are created specifically to give the mobile user a great experience. These websites usually have an m.domainname.com subdomain to host their mobile site.  Mobile Markup(this post) is only relevant to websites which fall under this bucket.

What is mobile markup?

As a webmaster who wants to optimize your mobile website, you want to do 2 things right.

  • The first is to inform Google Bot in the relationship between two URLs by <link> tag with rel=”canonical” and rel=”alternate” elements. This needs proper annotations between your mobile URL it’s corresponding desktop URL.
  • The second is to detect user-agent strings and redirect them to the appropriate URL correctly. Your server must detect the user agent and serve the desktop or the mobile URL accordingly.

Annotations for Desktop and Mobile URLs

There are two ways you can annotate or map your desktop and mobile URLs.

HTML Method – On the desktop page, add a special link rel=”alternate” tag pointing to the corresponding mobile URL. This helps Googlebot discover the location of your site’s mobile pages. On the mobile page, add a link rel=”canonical” tag pointing to the corresponding desktop URL.

On the desktop page (http://www.example.com/sample), add:

<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.example.com/page-1″>

in the <head> section.

and on the mobile page (http://m.example.com/sample), the required annotation should be:

<link rel=”canonical” href=”http://www.example.com/sample”>

in the <head> section.

Sitemap Method – The same can be implemented using the sitemap method using the below format in your sitemap.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.example.com/sample</loc>
<xhtml:link
rel="alternate"
href="http://m.example.com/sample" />
</url>
</urlset>

Note that in both the cases, it is necessary to add a canonical tag from the mobile site pointing to its desktop version.

Automatic Redirection

Once you have set up the right annotation it is time to guide the user agent to the appropriate URL(Desktop or Mobile) using an automatic redirection. There are 2 ways you can do this –

Using HTTP redirects – HTTP redirection is done based on the user-agent in the HTTP request headers. It is ideal to use a 302 status code for this HTTP redirect.

JavaScript redirects – If HTTP redirect is difficult to execute use a Javascript redirect. But be aware that this can lead to latency issues as the user agent might have to download the page and parse it before the redirect is triggered.

Once you have implemented both the steps test the mark up using Varvy Mobile SEO Site.

Keep Learning

Mobile SEO Guide by Google

The Massive Mobile SEO Guide by Distilled

Mobile SEO For Separate URLs

How to optimize a mobile site?

After working 7+ years as a digital marketer for startups and large enterprises I quit my job to start EcommerceYogi. Here I share the exact same tactics which I have used to drive millions of users per month to e-commerce stores. Follow me on Linkedin and Twitter to stay connected.