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.
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.
Once you have implemented both the steps test the mark up using Varvy Mobile SEO Site.