Modified on: Thu, 28 Nov, 2019 at 12:47 PM

---

Compatibility:

WebSite X5 Pro

---

Google expressly approves separate URL configurations for desktop and mobile versions of the same website, but it recommends using specific tags to allow its algorithms to correctly interpret them:

• Add the link rel="alternate" tag in the desktop page, for addressing the URL of corresponding mobile devices.
• Add the link rel="canonical" tag in the mobile page, for addressing the URL of the corresponding desktop.

This type of tag tells Goggle's algorithms that the two URLs have equivalent contents and should be considered as a single entity rather than two separate ones. This is very important because, if the desktop and mobile versions of a page are considered as two distinct entities, both URLs will appear in search results. And this could also mean that both pages may drop in the rankings because they could be penalized for duplicate content.

When you add the tags, be careful that:

• you maintain a 1:1 ratio between desktop pages and corresponding mobile pages. In particular, avoid adding tags in lots of desktop pages that refer to the same mobile page (and vice versa).
• make sure redirections are implemented only between pages that are actually related to each other.

When you are working with WebSite X5, the easiest thing is to create the mobile version of the website as an exact copy of the desktop version: this will ensure that both websites have exactly the same pages (files with the same name) and it will be easy to keep a 1:1 ratio between them.

Let's suppose we have to add the tags that Google wants to manage 3 versions of the same website: desktop, tablet and smartphone. We need to:

• Open the website project for the desktop version and, in Step 1 - Website Settings > Advanced, open the Statistics, SEO and Code window and go to the Statistics, SEO and Code section.
• Now, in the Custom Code field, select the Before closing the HEAD tag option and write:

<link rel="alternate" media="only screen and (max-width: 480px)" href="http//www.mysite.com/smartphone/[CURPAGE]">



<link rel="alternate" media="only screen and (min-width: 481px) and (max-width: 1024px)" href="http//www.mysite.com/tablet/[CURPAGE]">

Save the changes and then you can start working on the tablet version of the website:

• Open the website project for the tablet version and, as above, go to Step 1 - Website Settings > Advanced, open the Statistics, SEO and Code window and go to the Statistics, SEO and Code section.
• Again, in the Custom Code field, select the Before closing the HEAD tag option and this time write:

<link rel="canonical" href="http//www.mysite.com/[CURPAGE]">

• Repeat the same operations for the Smartphone and Tablet version of the website: the link tag is the same.

For a better understanding of how this process works, remember that:

• When you set the tags in the Statistics, SEO and Code window, they are automatically added to the code of every page in the websites.
• When you write the tags, you must give the URL of the page you are working on as the href attribute: the [CURPAGE] string identifies the name of the page's file and this is automatically added by the program.
• You need to use the link rel="alternate" tag in the pages of the website's desktop version to declare all possible alternatives: in this case, it is repeated twice to link both the Tablet and the Smartphone versions.
• When you add the link rel="alternate" tag, you also have to declare when redirection is towards the Tablet version or the Smartphone version, rather than the desktop version. In the code of the example above, the media query strings indicate that Google must redirect to the URL of the smartphone version for resolutions less than 480px, and to the URL of the tablet version for resolutions between 481px and 1024px.

If the Desktop,Tablet and Smartphone versions of a website do not contain exactly the same pages and/or contain corresponding pages but with different names, you have to intervene manually in the code of each page to make the necessary corrections to the tags.

• Open the desktop version of the website. In Step 3 - Map select the page to work on and click on the Properties button.
• Open the Page Properties window, go to the Expert section and place the cursor in the Custom Code field.
• Select the Before closing the HEAD tag option and write the following tags:

<link rel="alternate" media="only screen and (max-width: 480px)" href="http//www.mysite.com/smartphone/page-1.html">



<link rel="alternate" media="only screen and (min-width: 481px) and (max-width: 1024px)" href="http//www.mysite.com/tablet/page-1.html">

where http//www.mysite.com/smartphone/page-1.html and http//www.mysite.com/tablet/page-1.html are the URLs of the Smartphone and Tablet versions that correspond to the desktop version you are working on.

• Repeat this last step for all the pages on the website, so that the tags with the URLs of the corresponding Smartphone and Tablet pages are added.

The same procedure must be followed for the pages in the Smartphone and Tablet versions of the website. This time, the tag to add is:

<link rel="canonical" href="http//www.mysite.com/desktop/page-1.html">

where http//www.mysite.com/desktop/page-1.html is the URL of the page in the desktop version of the website that corresponds to that in the smartphone or tablet version that you are working on.