Hosting a separate mobile device site can create duplicate content in search engines. You need to tell search engine bots that your mobile pages are simply copies of your desktop pages but optimized for mobile apps and devices. This article discusses how to set a canonical link tag to help bots crawl your site and differentiate between a mobile page and a desktop page. The result is better indexing and rank for your mobile site that brings in more mobile search users.

Although responsive sites are the trend in web design, some companies prefer to keep a mobile site separate from a desktop site. The standard for this type of design is to create a subdomain (something such as m.mydomain.com) and redirect users from the desktop site to the mobile subdomain when a smaller screen is detected.

The problem is that the mobile site creates duplicate content in search engines, so you need to indicate which pages are for mobile and which ones are for desktop searches. Google came up with a solution for the SEO problem. You can use link tags to set canonical pages to differentiate your mobile pages from desktop pages.

Related Reading: 5 Old Web Development Trends That You Should Remove from Your Site

Annotating HTML

Meta tags are like miscellaneous tags on a web page. Anyone can add their own meta tag that specifies any content for a crawler. Remember that when you work with Google’s meta tag standards, Bing might have different standards to follow. If any company wants to use a unique identity in web page HTML, they use the meta tag. Google uses meta tags for various reasons to give webmasters a way to create settings specific for the crawler.

When working with separate mobile sites, you need to create similar link tags on both the mobile site HTML pages and the desktop pages. If you forget to annotate either page, it can affect your ranking.

What You Need to Set on the Main Desktop Page

The desktop HTML contains a link tag that points to your mobile pages. The following code is an example of the link tag you use in your desktop pages:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.yourdomain.com/myproduct/" >

Let’s dissect the above code. First, notice the media property. The media property sets the screen size for redirection to 640px. You can use any number of link tags for any number of screen sizes. To get full visibility across any mobile device, you should support variable sizes including smartphones and tablets. The mobile device industry continues to evolve, so web developers are forced to add size layouts to mobile websites.

Next, the link tag gives you an HREF property. Most coders will recognize this as the property used for links or the “a” HTML tag. The property in this line of code works similarly, except it’s specific for crawlers. This property tells Googlebot that it can find the related mobile site page at “http://m.yourdomain.com/myproduct/”. Take note that there is a one-to-one relationship between a desktop page and a mobile site page. In other words, this link should have the same content and images as your desktop page except it’s optimized for mobile devices. If the pages don’t match, you frustrate users and lose customers.

Each page that has a corresponding mobile site page should have this link tag with its mobile link relative. After you finish with the desktop page HTML code, it’s time to move on to the mobile site pages.

Setting Canonical Tags For Mobile Site HTML Pages

Most mobile sites have fewer pages than desktop versions, so it’s less work for the developer. You need to tell the search engines that the corresponding mobile page is a canonical for the desktop page. Search engines see a canonical tag and understand not to index the corresponding page as duplicate content. In the case of canonical mobile pages, this link tag tells search engines to index the mobile pages for mobile users and desktop pages for desktop users. You can also use canonical tags between your websites and internal desktop pages to limit duplicate content indexed by search engines.

The following code is placed on your corresponding mobile page:

<link rel="canonical" href="http://www.yourdomain.com/myproduct" >

Notice that the “rel” property indicates to bots that the content is a canonical. The desktop HREF property points to the same product as the mobile page’s content. A mobile site should have a one-to-one relationship with your desktop pages, so users can switch back and forth between versions of your site.

Some users even prefer the desktop pages on a mobile device, so you should give users the option to switch to the desktop site from your mobile site.

The process of adding an alternative mobile site to your desktop pages is tedious, but the result is better visibility in mobile search engines. Search engines such as Google have made huge strides in supporting mobile sites and mobile users. Check your site’s logs, and you might find that your site has several visitors with mobile devices. If you have a large portion of traffic that uses mobile devices, it’s time to make your site responsive or set up a separate site specifically for mobile users.