Оговорюсь сразу, пишу для таких же непрофессионалов в сфере веб-разработки, как и я. По основному роду деятельности я фотограф. Надеюсь, кому-то поможет в аналогичной ситуации.
В определенный момент времени (откровенно говоря, очень поздний, надо было гораздо раньше сделать) озаботился я созданием мобильной версии своего сайта. Проанализировав основные способы реализации этой задачи (почитав это и это), пришел к выводу, что в моем случае (сайт фотографа) проще всего будет создать сильно урезанную отдельную версию на поддомене. Сильно вникать в подробности не буду, постараюсь осветить те моменты, на реализацию которых потратил больше всего времени.
Итак, поддомен мы создали, разместили на нем требуемые нам странички. Основные задачи, стоящие перед нами после этого:
Итак, по-порядку.
В htaccess полной версии добавляем код:
В htaccess мобильной версии пишем следующее:
Примерная расшифровка:
Десктопные пользователи, пришедшие на мобильную версию (вообще говоря они туда никак не должны попадать, но на всякий случай) редиректятся на полную версию, мобильные пользователи с полной версии — на мобильную.
При это используются следующие исключения:
— при наличии в УРЛе параметра no_redirect=true (неважно у какого пользователя и на какой версии) — редирект не происходит;
— если реферером пользователя является та версия сайта, на которой он находится сейчас — редирект не происходит;
— если мобильный пользователь делает запрос к конкретному файлу на полной версии сайта — редирект не происходит.
Причина для последнего исключения очевидна, а вот первые два относятся уже ко второму пункту нашей повестки дня — возможности просматривать полную версию сайта с мобильных устройств.
Что делает адекватный пользователь? В настройках браузера тыкает галку «Полная версия» и счастлив. Но. Во-первых, не все пользователи столь адекватны, а во вторых — вероятно, не во всех мобильных браузерах есть такая галочка.
Поэтому нужна ссылка. Окей, ссылку запилили. Но если мобильный пользователь по ней перейдет, его тут же снова отправит на мобильную версию сайта. Для этого мы сделали исключение для параметра no_redirect=true, и добавим его в ссылку на полную версию. Отлично, мобильный пользователь перешел на полную версию. Но если он попытается перейти на любую другую страницу сайта, его снова кинет на мобильную версию, ведь параметр no_redirect=true из урла исчезнет. Для этого нам нужно второе исключение в htaccess — если пользователь перешел по ссылке на полной версии, то на мобильную его кидать не надо (и наоборот). Данный способ я придумал сам, поэтому несколько сомневаюсь в его надежности, но сколько ни тестировал — все работает как надо.
На полной версии сайта у меня примерно 70+ страниц. Но для мобильной я сделал только самые необходимые (около 8-10). Соответственно, мобильные пользователи, придя с поисковика, часто натыкались на 404. Сперва я просто разместил там информацию, что мол, нужная страничка в полной версии, но % отказов все равно был очень высок. Поэтому я сделал ход конем: если на мобильном сайте получаем 404-ю ошибку, то редиректим пользователя на полную версию с тем же урлом, добавив незабвенный no_redirect=true. Как это сделано:
В htaccess мобильной версии:
В этом файле:
Решается с помощью всем известного инструмента: developers.google.com/speed/pagespeed/insights
В принципе, там все рекомендации расписаны, подчеркну только главное — в header мобильной версии добавляем
И следим за правильным расположением и масштабированием контента.
А, ну еще в стили добавил:
Чтобы при горизонтальном просмотре сайт сильно не растягивался в ширину.
В случае, если у вас каждой странице полной версии соответствует страница в мобильной, есть метки типа canonical.
Но я не стал заморачивался, и тупо запретил индексацию мобильной версии совсем.
Есть такое замечательное руководство гугла по сео-оптимизации для мобильных устройств
Основной интересующий нас момент:
Помимо этого указываем мобильность сайта в файле sitemap:
И так для каждого url.
Яндекс утверждает, что он сам распознает стандартные поддомены типа m.example.com, pda.example.com и т.п.
Для пущей надежности можно еще каждой мобильной страничке указать соответствующий доктайп:
Думаю, уж после такого комплекса мер, поисковики должны адекватно разобраться, где какая версия сайта.
Все вышенаписанное реализовано и работает. Возможно, есть косяки, неучтенные кейсы и т.д. — буду рад выслушать критику и советы. В личку могу отправить ссылку для тестирования.
В определенный момент времени (откровенно говоря, очень поздний, надо было гораздо раньше сделать) озаботился я созданием мобильной версии своего сайта. Проанализировав основные способы реализации этой задачи (почитав это и это), пришел к выводу, что в моем случае (сайт фотографа) проще всего будет создать сильно урезанную отдельную версию на поддомене. Сильно вникать в подробности не буду, постараюсь осветить те моменты, на реализацию которых потратил больше всего времени.
Итак, поддомен мы создали, разместили на нем требуемые нам странички. Основные задачи, стоящие перед нами после этого:
- Правильный редирект мобильных и десктопных устройств на соответствующие версии сайта
- Возможность просмотра полной версии с мобильных устройств
- Так как на урезанной версии сайта некоторые страницы из полной отсутствуют, то надо обрабатывать эти случаи, не теряя посетителей
- Удобство мобильной версии сайта для пользователей
- Избегание всевозможных сеошных проблем — появления дублей и т.д.
Итак, по-порядку.
Первую задачу с редиректом решаем следующим образом:
В htaccess полной версии добавляем код:
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]В htaccess мобильной версии пишем следующее:
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]Примерная расшифровка:
Десктопные пользователи, пришедшие на мобильную версию (вообще говоря они туда никак не должны попадать, но на всякий случай) редиректятся на полную версию, мобильные пользователи с полной версии — на мобильную.
При это используются следующие исключения:
— при наличии в УРЛе параметра no_redirect=true (неважно у какого пользователя и на какой версии) — редирект не происходит;
— если реферером пользователя является та версия сайта, на которой он находится сейчас — редирект не происходит;
— если мобильный пользователь делает запрос к конкретному файлу на полной версии сайта — редирект не происходит.
Причина для последнего исключения очевидна, а вот первые два относятся уже ко второму пункту нашей повестки дня — возможности просматривать полную версию сайта с мобильных устройств.
Итак, предположим мобильному пользователю нужна полная версия сайта.
Что делает адекватный пользователь? В настройках браузера тыкает галку «Полная версия» и счастлив. Но. Во-первых, не все пользователи столь адекватны, а во вторых — вероятно, не во всех мобильных браузерах есть такая галочка.
Поэтому нужна ссылка. Окей, ссылку запилили. Но если мобильный пользователь по ней перейдет, его тут же снова отправит на мобильную версию сайта. Для этого мы сделали исключение для параметра no_redirect=true, и добавим его в ссылку на полную версию. Отлично, мобильный пользователь перешел на полную версию. Но если он попытается перейти на любую другую страницу сайта, его снова кинет на мобильную версию, ведь параметр no_redirect=true из урла исчезнет. Для этого нам нужно второе исключение в htaccess — если пользователь перешел по ссылке на полной версии, то на мобильную его кидать не надо (и наоборот). Данный способ я придумал сам, поэтому несколько сомневаюсь в его надежности, но сколько ни тестировал — все работает как надо.
Третий пункт. Ошибки 404 на мобильной версии.
На полной версии сайта у меня примерно 70+ страниц. Но для мобильной я сделал только самые необходимые (около 8-10). Соответственно, мобильные пользователи, придя с поисковика, часто натыкались на 404. Сперва я просто разместил там информацию, что мол, нужная страничка в полной версии, но % отказов все равно был очень высок. Поэтому я сделал ход конем: если на мобильном сайте получаем 404-ю ошибку, то редиректим пользователя на полную версию с тем же урлом, добавив незабвенный no_redirect=true. Как это сделано:
В htaccess мобильной версии:
ErrorDocument 404 /404.phpВ этом файле:
<?
$ref=$_SERVER['REQUEST_URI'];
if ($ref!='') $ref=$ref.'?no_redirect=true';
header('Location: http://yourdomain.ru'.$ref);
?>Четвертая задача: удобство для мобильных пользователей
Решается с помощью всем известного инструмента: developers.google.com/speed/pagespeed/insights
В принципе, там все рекомендации расписаны, подчеркну только главное — в header мобильной версии добавляем
<meta name=viewport content="width=device-width, initial-scale=1">И следим за правильным расположением и масштабированием контента.
А, ну еще в стили добавил:
body{max-width:900px;margin:0 auto;}Чтобы при горизонтальном просмотре сайт сильно не растягивался в ширину.
И, наконец, сеошные проблемы
Но я не стал заморачивался, и тупо запретил индексацию мобильной версии совсем.
Есть такое замечательное руководство гугла по сео-оптимизации для мобильных устройств
Основной интересующий нас момент:
На обычной странице (http://www.example.com/page-1) добавьте следующий код:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >
а на странице для мобильных устройств (http://m.example.com/page-1) используйте такие атрибуты:
<link rel="canonical" href="http://www.example.com/page-1" >
В URL, который размещен на странице мобильного сайта и указывает на аналог этой страницы для обычных компьютеров, обязательно нужно добавить тег rel=«canonical».
Помимо этого указываем мобильность сайта в файле sitemap:
<?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>И так для каждого url.
Яндекс утверждает, что он сам распознает стандартные поддомены типа m.example.com, pda.example.com и т.п.
Для пущей надежности можно еще каждой мобильной страничке указать соответствующий доктайп:
<!DOCTYPE html PUBLIC
"-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">Думаю, уж после такого комплекса мер, поисковики должны адекватно разобраться, где какая версия сайта.
Все вышенаписанное реализовано и работает. Возможно, есть косяки, неучтенные кейсы и т.д. — буду рад выслушать критику и советы. В личку могу отправить ссылку для тестирования.
