The implementation of one of the variants of the mobile version of the site

I will make a reservation right away, I write for the same non-professionals in the field of web development, as I do. By the main activity I am a photographer. I hope someone will help in a similar situation.

At a certain point in time (frankly, very late, it was necessary to do much earlier), I attended to creating a mobile version of my site. After analyzing the basic ways to accomplish this task (by reading this and this ), I came to the conclusion that in my case (the photographer’s website) it would be easiest to create a greatly reduced separate version on the subdomain. I will not go into much detail, I will try to highlight those moments that I spent the most time on implementing.

So, we have created a subdomain, have placed on it the pages we need. The main tasks facing us after this:

1. The correct redirect of mobile and desktop devices to the appropriate versions of the site
2. The ability to view the full version from mobile devices
3. Since some of the full pages are missing on the reduced version of the site, it is necessary to handle these cases without losing visitors.
4. Convenience of the mobile version of the site for users
5. Avoiding all sorts of problems with seoshnyh - the appearance of duplicates, etc.

So, in order.

The first task with redirect is solved as follows:

In htaccess full version, add the code:
')

RewriteEngine on RewriteCond %{HTTP_USER_AGENT} ((.*iPhone.*)|(.*iPod.*)|(.*BlackBerry.*)|(.*Android.*Mobile.*)|(.*Windows\ CE.*)|(.*IEMobile.*)|(.*Opera\ Mini.*)|(.*Opera\ Mobi.*)) RewriteCond %{REQUEST_FILENAME} !\.(jpg|gif|png|css|js|txt|ico|pdf|bmp|tif|mp3|wav|wma|asf|mp4|flv|mpg|avi|csv|doc|docx|xls|xlsx|ppt|pptx|zip|rar|tar|gz|dmg|iso)$ [NC] RewriteCond %{HTTP_REFERER} !^http://yourdomain\.ru(/)? RewriteCond %{QUERY_STRING} !no_redirect=true [NC] RewriteRule ^(.*)$ http://m.yourdomain.ru/$1 [L,R=302] 

In the htaccess mobile version, we write the following:

 RewriteEngine on RewriteCond %{HTTP_USER_AGENT} !Windows\ NT.+Touch [NC] RewriteCond %{HTTP_USER_AGENT} Windows\ NT\ 6|Macintosh|Ubuntu|Linux\ (x86_64|i686)|CrOS [NC] RewriteCond %{QUERY_STRING} !no_redirect=true [NC] RewriteCond %{HTTP_REFERER} !^http://m\.yourdomain\.ru(/)? RewriteRule ^(.*)$ http://yourdomain.ru/$1 [L,R=302] 

Approximate decoding:

Desktop users who come to the mobile version (generally speaking, they should not get there, but just in case) redirect to the full version, mobile users from the full version to the mobile version.

The following exceptions are used:
- if there is a no_redirect = true parameter in the URL (it does not matter which user or version) - the redirect does not occur;
- if the user’s referrer is the version of the site where it is located now - the redirect does not occur;
- if the mobile user makes a request to a specific file on the full version of the site - the redirect does not occur.
The reason for the last exception is obvious, but the first two relate to the second item on our agenda - the ability to view the full version of the site from mobile devices.

So, suppose the mobile user needs the full version of the site.

What makes an adequate user? In the browser settings, pokes the checkbox "Full version" and happy. But. Firstly, not all users are so adequate, and secondly - probably, not all mobile browsers have such a check mark.

Therefore, we need a link. Okay, the link was notched up. But if the mobile user clicks on it, he will immediately be sent back to the mobile version of the site. To do this, we made an exception for the parameter no_redirect = true, and add it to the link to the full version. Great, the mobile user has switched to the full version. But if he tries to go to any other page of the site, he will again be thrown to the mobile version, because the parameter no_redirect = true will disappear from the URL. To do this, we need the second exception in htaccess - if the user follows the link to the full version, then you should not throw it on the mobile (and vice versa). I came up with this method myself, so I doubt a little about its reliability, but no matter how much I tested, everything works as it should.

The third point. 404 errors on the mobile version.

On the full version of the site I have about 70+ pages. But for the mobile, I made only the most necessary (about 8-10). Accordingly, mobile users, having come from a search engine, often stumbled upon 404. At first, I simply placed the information there, saying that the desired page in the full version, but the% of refusals was still very high. Therefore, I made a knight's move: if on the mobile site we get the 404th error, then redirect the user to the full version with the same URL, adding the unforgettable no_redirect = true. How it is done:

In htaccess mobile version:

 ErrorDocument 404 /404.php 

In this file:

 <? $ref=$_SERVER['REQUEST_URI']; if ($ref!='') $ref=$ref.'?no_redirect=true'; header('Location: http://yourdomain.ru'.$ref); ?> 

The fourth challenge: convenience for mobile users

It is solved with the help of the well-known tool: developers.google.com/speed/pagespeed/insights

In principle, all the recommendations are written there, I’ll only emphasize the main thing - in the header of the mobile version we add

 <meta name=viewport content="width=device-width, initial-scale=1"> 

And we follow the correct location and scaling of content.

And, well, in the styles added:

 body{max-width:900px;margin:0 auto;} 

So that when viewed horizontally, the site does not stretch much in width.

And finally, serious problems

In the event that each page of the full version corresponds to a page in the mobile, there are canonical tags.
But I did not bother, and stupidly forbade the indexation of the mobile version at all.

There is such a great Google guide on SEO for mobile devices.

The main point of interest is:

On a regular page (http://www.example.com/page-1), add the following code:

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

and on the mobile page (http://m.example.com/page-1) use the following attributes:

 <link rel="canonical" href="http://www.example.com/page-1" > 

In the URL, which is located on the page of the mobile site and indicates the analogue of this page for ordinary computers, it is necessary to add the tag rel = "canonical".

In addition, we indicate the mobility of the site in the sitemap file:

 <?xml version="1.0" encoding="UTF-8" ?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0"> <url> <loc>http://m.photocrew.ru/</loc> <lastmod>2015-05-26T18:07:54+06:00</lastmod> <changefreq>never</changefreq> <priority>1.0</priority> <mobile:mobile/> </url> 

And so for each url.

Yandex claims that it recognizes standard subdomains such as m.example.com, pda.example.com, etc.
For greater reliability, you can also specify the corresponding doctype for each mobile page:

 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> 

I think that after such a set of measures, search engines should adequately figure out where is the version of the site.

All of the above is implemented and works. Perhaps there are shoals, unaccounted cases, etc. - I will be glad to hear criticism and advice. In PM, I can send a link for testing.