В определенный момент времени (откровенно говоря, очень поздний, надо было гораздо раньше сделать) озаботился я созданием мобильной версии своего сайта. Проанализировав основные способы реализации этой задачи (почитав это и это), пришел к выводу, что в моем случае (сайт фотографа) проще всего будет создать сильно урезанную отдельную версию на поддомене. Сильно вникать в подробности не буду, постараюсь осветить те моменты, на реализацию которых потратил больше всего времени.
Итак, поддомен мы создали, разместили на нем требуемые нам странички. Основные задачи, стоящие перед нами после этого:
- Правильный редирект мобильных и десктопных устройств на соответствующие версии сайта
- Возможность просмотра полной версии с мобильных устройств
- Так как на урезанной версии сайта некоторые страницы из полной отсутствуют, то надо обрабатывать эти случаи, не теряя посетителей
- Удобство мобильной версии сайта для пользователей
- Избегание всевозможных сеошных проблем — появления дублей и т.д.
Итак, по-порядку.
Первую задачу с редиректом решаем следующим образом:
В 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">Думаю, уж после такого комплекса мер, поисковики должны адекватно разобраться, где какая версия сайта.
Все вышенаписанное реализовано и работает. Возможно, есть косяки, неучтенные кейсы и т.д. — буду рад выслушать критику и советы. В личку могу отправить ссылку для тестирования.
Комментарии (16)
gonzazoid
31.05.2015 18:21>Но я не стал заморачивался, и тупо запретил индексацию мобильной версии совсем.
это вы зря, с гугля траф просядет.
Matysh Автор
31.05.2015 18:24А почему? Основной сайт ведь мы не трогали, он в индексе как был, так и останется, просто не появится ничего нового? Или я чего-то не учитываю?
gonzazoid
31.05.2015 18:47+1у гугля сейчас сайты с мобильными плюшкаи в фаворе, а вы его ботам доступ режете. На серче посмотрите, буквально на прошлой неделе пара новостей была по этой теме. Да и на форуме обсуждения есть.
Matysh Автор
31.05.2015 19:28Это я допускаю, но ведь это по сути разные сайты, разве нет?
Egor3f
31.05.2015 20:35+1Гугл с недавнего времени при поиске с мобильного понижает в выдаче сайты, не оптимизированные под смартфоны, и не имеющие мобильной версии.
Подробности 1
Подробности 2
Matysh Автор
01.06.2015 10:39В общем, отредактировал последний пункт. Я, опять же, не сеошник, мог наляпать ошибок, но брал информацию в основном с официальных хелпов гугла и яндекса.
mvs
31.05.2015 22:21+2Отличный пример, делайте побольше таких сайтов!
Мне же (и другим разработчикам) достанется больше клиентов, которые захотят после вас нормальный сайт и индексацию в поиске.Matysh Автор
01.06.2015 04:27-2Простите, а вы внимательно читали, то что я написал? Я не разработчик. Я фотограф. (хотя мой сайт в топе по основным целевым запросам по региону). И уверен, то что я сделал в плане мобильной версии — идет на пользу моему сайту. У подавляющего большинства подобных сайтов-визиток нет даже намека на мобильную версию, поэтому я поделился своим опытом. И 100+ человек уже почему-то добавили материал в закладки. Значит, какая-то польза есть. Так что про нормальный сайт — это вы зря.
Могу допустить, что последний шаг ошибочен, впрочем, мне никто пока не объяснил, какие негативные последствия он несет. Подчеркиваю, негативные, а не отсутствие позитивных.
foxmuldercp
01.06.2015 00:55насчёт WAP'а комментаторы, конечно пошутили, это до-смартфонная эпоха.
А насчёт этих адских редиректов и отображения — откройте для себя хотя бы Twitter Bootstrap, после которого сайт будет а) нормально работать с гуглем (адаптивность) и б) нормально отображаться практически на всех мобильных устройствах, останется только «пошаманить» с размерами (именно файла, а не разрешения) картинок, чтобы на edge не приходилось полчаса грузить сайт.Matysh Автор
01.06.2015 04:35-1Еще раз, повторю то, что ответил предыдущему комментатору. Я не разработчик, я фотограф, и занимаюсь только своим сайтом. Про фреймворки слышал краем уха, но не более. И в любом случае, насколько я понимаю, это влечет переделку всего сайта. А это совсем другие временные и\или финансовые затраты, чем набросать с нуля упрощенную копию сайта.
Да, есть разные пути решения (и в начале я привел пару ссылок, где описываются основные варианты, в т.ч. адаптивный дизайн), но для каждого случая нужно выбирать наиболее целесообразный.foxmuldercp
01.06.2015 19:52+1Из своей практики могу сказать только то, что даже системному администратору сложно, реально сложно совмещать еще и программирование/разработку.
Это я веду к тому, что mvs был прав. Не занимайтесь тем, в чём можете сделать только хуже. Я не говорю, что надо пойти к Лебедеву, который выкатит вам «вау-сайт» с суммой годового бюджета небольшого городка.
А этот набор костылей и припарок — вредите, Вы, в общем-то себе.
Ну и твиттер бутстрап я упомянул не зря.
newkamikaze
02.06.2015 20:36Мне кажется, вы усложняете там, где этого совершенно не требуется. Я в своей работе использую CSS с медиа-запросами + уже упомянутый выше Mobile Detect. Последний даёт возможность а) выдавать с сервера разные шаблоны под разные устройства и б) «выпиливать» какие-то элементы из шаблона (например, фоновое видео, чтоб вообще не грузилось).
Так же для мобильной версии очень полезны будут объединение и минификация CSS- и JS-файлов. Ещё я часто использую иконочные шрифты. Они достаточно «тяжелые», но на экранах, где pixel ratio > 1, не появляется «мыло».
egorsmkv
Кейсы хоть и рабочие, но очень простые и не решают всех проблем мобильного веба (или как его называют в «народе» — WAP'a).
Главная из них — много разных устройств. Чтобы убедиться в этом, достаточно посмотреть статистику в рейтингах сайтов, например, mobtop.ru/stat/models или waplog.net/ru/html/stat/1/models, а также статистику по разрешениям экранов. Поэтому для простого телефона и смартфона нужно делать отдельную версию (правда, сперва нужно проанализировать ваших посетителей), это затратно, но клиентов терять не хочется.
Для определения типа устройства лучше использовать парсеры User-Agent'a, например, github.com/serbanghita/Mobile-Detect, а оставлять на определенной версии — через cookie.
Matysh Автор
Безусловно, для крупных проектов такой упрощенный подход неправилен. Но в моем случае (а таких случаев немало), когда сайт достаточно простой и имеет не более 100 посетителей в день — думаю, вполне оправдан.
Статистику мобильных устройств по своему сайту мониторил, из них таких, которым бы не подошла бы моя мобильная версия — не наблюдал. Наверное, они есть, но их процент ничтожно мал, и в любом случае, среди их владельцев нет моих потенциальных клиентов, хотя бы потому что основной контент сайта — фотографии, которые вряд ли можно адекватно разглядеть с простого телефона.
kAIST
Как фотограф с клиентами в среднем сегменте, поделюсь своими наблюдениями.
Смотрят все чаще и чаще со смартфонов и планшетов. Соглашусь пожалуй с тем, что можно отсеять посетителей с обычными телефонами с какой нибудь оперой мини.
Но с другой стороны сейчас очень тонкая грань между между настольными клиентами и мобильными. Некоторые, например, отдают ipad'у pda версию, хотя разрешение экрана у него выше, чем у многих современных ноутбуках. Для меня решением стал как раз таки адаптивный сайт с подходящей галереей (что самое главное для сайта фотографа). Фотографии при заливке резайзятся в 8 разрешений от 60Х60 для мелких превьюшек, до 2500х2500 для retina дисплеев и при показе подгружается нужный размер.
Matysh Автор
Грань не то чтобы тонкая, скорее размытая)
В моем случае айпаду отдается десктоп-версия.
В любом случае, есть ссылка на полную версию (или галка в настройках браузера), так что не пропадут.
Пы.Сы. насчет отдачи фотографий в разных разрешениях — в этом отношении открыл для себя апи фликра, дико удобно. Закинул фотки в альбом, и все, все отдается красиво и правильно.