Налаштування мобільної версії сайту на піддомені

Обмовлюся відразу, пишу для таких же непрофесіоналів у сфері веб-розробки, як і я. За основним родом діяльності я фотограф. Сподіваюся, кому-то допоможе в аналогічній ситуації.
У певний момент часу (відверто кажучи, дуже пізній, треба було набагато раніше зробити) я перейнявся створенням мобільної версії свого сайту. Проаналізувавши основні способи реалізації цієї задачі (почитавши це і це), прийшов до висновку, що в моєму випадку (сайт фотографа) найпростіше створити сильно спрощену окрему версію на піддомені. Сильно вдаватися в подробиці не буду, спробую висвітлити ті моменти, на реалізацію яких витратив більше всього часу.
Отже, піддомен ми створили, розмістили на ньому необхідні нам сторінки. Основні завдання, що стоять перед нами після цього:
Правильний редирект мобільних і десктопних пристроїв на відповідні версії сайту
Можливість перегляду повної версії з мобільних пристроїв
Так як на урізаною версією сайту деякі сторінки з повною відсутні, то треба обробляти ці випадки, не втрачаючи відвідувачів
Зручність мобільної версії сайту для користувачів
Уникнення всіляких сеошних проблем — появи дублів і т. д.
Отже, по порядку.
Першу задачу з перенаправленням вирішуємо наступним чином:
В 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 ^(.*)$ [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 ^(.*)$ [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
В цьому файлі:

Четверта завдання: зручність для мобільних користувачів
Вирішується з допомогою всім відомого інструменту: developers.google.com/speed/pagespeed/insights
В принципі, там всі рекомендації розписані, підкреслю головне — в header мобільної версії додаємо
І стежимо за правильним розташуванням і масштабуванням контенту.
А, ну ще в стилі додав:
body{max-width:900px;margin:0 auto;}
щоб при горизонтальному перегляді сайт сильно не розтягувався в ширину.
І, нарешті, сеошные проблеми
У випадку, якщо у вас кожній сторінці повній версії відповідає сторінка мобільного, є мітки типу canonical.
Але я не став морочився, і тупо заборонив індексацію мобільної версії зовсім.
User-agent: *
Disallow: /
Все вищенаписане реалізовано і працює.
Автор: Matysh | Джерело: Habrahabr