редирект на мобильную версию сайта javascript
Делаем мобильный редирект 3-мя способами
Недавно один человек написал мне с просьбой подсказать, как перенаправить пользователей мобильных устройств на другую страницу. Он занимается арбитражом трафика и нужно отделить «мобильных» посетителей от «немобильных» и автоматически отправить первых на адаптированный лендинг, причём сделать это с помощью JavaScript.
Делаем мобильный редирект на PHP
Суть здесь в том, что каждое устройство сообщает серверу свой т.н. User Agent («юзер-агент»). В этом юзер-агенте находится информация о данном устройстве. Соответственно, с помощью PHP мы эту информацию извлекаем и, если по ней ясно, что устройство — мобильное, делаем редирект.
У мобильных устройств существует просто куча разных юзер-агентов. Я нашёл код, где учтены, наверное, почти все эти агенты:
Вставьте код в самое начало документа, а вместо http://site.ru/mobile/ подставьте URL, на который должны улетать мобильные пользователи. Обратите внимание, что перед этим кодом не должно быть даже пробельных символов и переводов строк — таковы уж особенности редиректов на PHP.
Передача меток и субаккаунтов на мобильный лендинг с помощью PHP
Обычно при ведении рекламных кампаний нужно получить как можно больше информации о трафике. Для этого используются, в основном, UTM-метки и субаккаунты для CPA-сетей. Хорошо бы при перенаправлении посетителя на мобильный лендинг передать и все эти данные.
Передача UTM-меток
Передача субаккаунтов
Чтобы понять принцип действия, почитайте статью про UTM-метки и субаккаунты в CPA.
Т.е. здесь мы из UTM-меток получили данные для субаккаунтов.
Эта конструкция должна идти после строки RewriteEngine On (если её нет — добавьте).
Если же нужно отправить всех мобильных посетителей на mobile-версию сайта (с любой страницы на http://m.site.ru/ ), то последняя строчка из кода выше может иметь такой вид:
Перенаправление на мобильную версию сайта в HTML (JavaScript)
Иногда нет возможности что-то редактировать на сайте на стороне сервера — например, вы используете конструктор сайтов. Тут-то и пригодится редирект на HTML, а точнее — на JavaScript, т.к. на простом HTML нужные условия не прописать.
В этом случае все посетители, у которых ширина экрана меньше 600 px улетят на http://site.ru/mobile/. Если нужна меньшая ширина — меняйте 600 на меньшее значение.
Передача меток и субаккаунтов на мобильный лендинг с помощью JavaScript
При перенаправлении этим способом также можно сохранить данные о трафике.
Передача UTM-меток
Передача субаккаунтов
Т.е. из UTM-меток получили субаккаунты.
Какой способ мобильного редиректа лучше?
С JavaScript-редиректом юзер-агент не важен, т.к. проверяется только ширина экрана. Но здесь посетитель может заметить, как сначала попадает на одну страницу, а потом его перекидывает на другую.
Способ на ява скрипт наиболее оптимальный, но само перенаправление происходит медленнее.
Очень хорошая статья, но почему то у меня не работает способ Передача меток на мобильный лендинг с помощью PHP.
Может есть какая то хитрость?
А способ со скриптом не работает в некоторых телефонах, хотя разрешение у них явно меньше 800 px.
Хитростей нет, возможно, что-то упустили — не поставили кавычки где-нибудь и т.п.
Ошибка может быть либо при передаче меток на лендинг, либо при приёме их на лендинге.
Огромнейшее СПАСИБО. я все голову ломала, как перекинуть пользователей на мобильную версию, все сработало ОТЛИЧНО. Подробно и ясно, особенно для меня, чайника просто все разжевано. Еще раз вам ОГРОМНОЕ спасибо! =) =) =)
Пиз*дец как у меня пригорело, когда не мог допереть почему у меня телефон не редиректит на мобильную версию. Это статья баян. И телефоны уже с расширениеМ экрана получше. ВЫСТАВЛЯЙТЕ СМЕЛО 1200 ЗА МЕСТО 600. *HELP* *MACHO*
Спасибо большое! Пробовал много вариантов, но именно ваш скрипт помог =)
статья очень полезная — спасибо! но в жизни вопрос гораздо сложнее))) владельцы сайтов хотят чтоб смартфоны/телефоны получали мобильную версию, но при этом видели бы кнопку или ссылку на полную версию сайта, и могли бы ее тоже открыть. а этож надо еще что-то придумывать — куки или может еще что-то
Спасибо за информацию неделю маялся как с не адаптивного битрикса перекидывать на мобильную версию сайта, попробую сделать по вашей рекомендации — если получится отпишусь с рекомендацией
Петр, спасибо огромное! Статья крайне полезная и четкая.
Отдельное спасибо за информацию по передаче UTM!
Я, наверное, перерыл всю информацию о мобильных версиях в сети. Изначально хотел сделать самостоятельно отдельную мобильную версию сайта на поддомене. Но узнал, что поисковые системы гораздо лучше относятся именно к адаптации сайта под рвзные устройства. Потому что используется один контент и одна ссылка. Начал пробовать сделать адаптацию своими руками, но там очень много подводных камней. Стили нужно прописывать чуть ли не под каждый гаджет. Т.е. под каждую ширину экрана нужно создавать новые параметры отображения всех блоков. Решил найти специалиста, который разбирается в этом. Это тоже оказалось не так просто. Разброс цен аховый. От 500 руб до 100 000 руб. Понятное дело — решил начать с 500))
После общения, конечно же, оказалось что адаптация моего сайта стоит не 500 руб, а 17 000 руб)))
Но после долгих поисков нашел оптимальный вариант по всем параметрам. Адаптацию сайта поручил им mobile-version.ru и не пожалел. Сразу сказали адекватную стоимость уже на своем сайте и потом она не изменилась. Все мои пожелания выполнени и даже внесли свои предложения бесплатно! Теперь мой сайт проходит тесты от гугла, и яндекс вебмастер тоже счастлив, наблюдая за моим сайтом.
Для тех, кто еще сомневается — делать или не делать адаптацию — ДЕЛАЙТЕ. 8)
Поисковики заставят сделать мобильные версии всем сайтам. Вопрос времени.
Подскажите пожалуйста, у меня на хостинге нет поддержки php, сайт prestigechat.ru. В страницу HTML вписываю код:
Возможно, в других скриптах в коде этой страницы есть ошибки.
Реализация одного из вариантов мобильной версии сайта
Оговорюсь сразу, пишу для таких же непрофессионалов в сфере веб-разработки, как и я. По основному роду деятельности я фотограф. Надеюсь, кому-то поможет в аналогичной ситуации.
В определенный момент времени (откровенно говоря, очень поздний, надо было гораздо раньше сделать) озаботился я созданием мобильной версии своего сайта. Проанализировав основные способы реализации этой задачи (почитав это и это), пришел к выводу, что в моем случае (сайт фотографа) проще всего будет создать сильно урезанную отдельную версию на поддомене. Сильно вникать в подробности не буду, постараюсь осветить те моменты, на реализацию которых потратил больше всего времени.
Первую задачу с редиректом решаем следующим образом:
В htaccess полной версии добавляем код:
В htaccess мобильной версии пишем следующее:
Десктопные пользователи, пришедшие на мобильную версию (вообще говоря они туда никак не должны попадать, но на всякий случай) редиректятся на полную версию, мобильные пользователи с полной версии — на мобильную.
При это используются следующие исключения:
— при наличии в УРЛе параметра no_redirect=true (неважно у какого пользователя и на какой версии) — редирект не происходит;
— если реферером пользователя является та версия сайта, на которой он находится сейчас — редирект не происходит;
— если мобильный пользователь делает запрос к конкретному файлу на полной версии сайта — редирект не происходит.
Причина для последнего исключения очевидна, а вот первые два относятся уже ко второму пункту нашей повестки дня — возможности просматривать полную версию сайта с мобильных устройств.
Итак, предположим мобильному пользователю нужна полная версия сайта.
Что делает адекватный пользователь? В настройках браузера тыкает галку «Полная версия» и счастлив. Но. Во-первых, не все пользователи столь адекватны, а во вторых — вероятно, не во всех мобильных браузерах есть такая галочка.
Поэтому нужна ссылка. Окей, ссылку запилили. Но если мобильный пользователь по ней перейдет, его тут же снова отправит на мобильную версию сайта. Для этого мы сделали исключение для параметра no_redirect=true, и добавим его в ссылку на полную версию. Отлично, мобильный пользователь перешел на полную версию. Но если он попытается перейти на любую другую страницу сайта, его снова кинет на мобильную версию, ведь параметр no_redirect=true из урла исчезнет. Для этого нам нужно второе исключение в htaccess — если пользователь перешел по ссылке на полной версии, то на мобильную его кидать не надо (и наоборот). Данный способ я придумал сам, поэтому несколько сомневаюсь в его надежности, но сколько ни тестировал — все работает как надо.
Третий пункт. Ошибки 404 на мобильной версии.
На полной версии сайта у меня примерно 70+ страниц. Но для мобильной я сделал только самые необходимые (около 8-10). Соответственно, мобильные пользователи, придя с поисковика, часто натыкались на 404. Сперва я просто разместил там информацию, что мол, нужная страничка в полной версии, но % отказов все равно был очень высок. Поэтому я сделал ход конем: если на мобильном сайте получаем 404-ю ошибку, то редиректим пользователя на полную версию с тем же урлом, добавив незабвенный no_redirect=true. Как это сделано:
В htaccess мобильной версии:
Четвертая задача: удобство для мобильных пользователей
В принципе, там все рекомендации расписаны, подчеркну только главное — в header мобильной версии добавляем
И следим за правильным расположением и масштабированием контента.
А, ну еще в стили добавил:
Чтобы при горизонтальном просмотре сайт сильно не растягивался в ширину.
И, наконец, сеошные проблемы
В случае, если у вас каждой странице полной версии соответствует страница в мобильной, есть метки типа canonical.
Но я не стал заморачивался, и тупо запретил индексацию мобильной версии совсем.
Есть такое замечательное руководство гугла по сео-оптимизации для мобильных устройств
Основной интересующий нас момент:
На обычной странице (http://www.example.com/page-1) добавьте следующий код:
а на странице для мобильных устройств (http://m.example.com/page-1) используйте такие атрибуты:
В URL, который размещен на странице мобильного сайта и указывает на аналог этой страницы для обычных компьютеров, обязательно нужно добавить тег rel=«canonical».
Помимо этого указываем мобильность сайта в файле sitemap:
И так для каждого url.
Яндекс утверждает, что он сам распознает стандартные поддомены типа m.example.com, pda.example.com и т.п.
Для пущей надежности можно еще каждой мобильной страничке указать соответствующий доктайп:
Думаю, уж после такого комплекса мер, поисковики должны адекватно разобраться, где какая версия сайта.
Все вышенаписанное реализовано и работает. Возможно, есть косяки, неучтенные кейсы и т.д. — буду рад выслушать критику и советы. В личку могу отправить ссылку для тестирования.
Редирект на мобильную версию сайта, используя JavaScript
Нужно реализовать редирект пользователей мобильных устройств на мобильную версию сайта, когда пользователь заходит на десктоп версию сайта. Но на мобильном сайте мне нужно дать пользователю возможность выбрать полную версию сайта, если ему так хочется. Но в таком случае, если пользователь захочет на мобильном телефоне открыть десктоп версию сайта, то скрипт его перекинет на мобильную версию. Собственно, как устранить такую зацикленность? Как сделать так, чтобы скрипт не делал редирект, когда пользователь осознанно хочет открыть десктоп версию сайта с мобильного телефона?
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Редирект на мобильную версию сайта
Добрый день. Сделал сайт, но резиновым его не делал, и сделал стабильную ширину 1580 пикселей.
Как сделать мобильную версию сайта?
Всем, добрый вечер. Есть у меня сайт некоммерческой тематики, иногда до него доходят руки и вот.
После перехода на мобильную версию сайта пункты меню становятся не кликабельны
Приветствую всех. Во всех разрешениях экрана пункты меню работают исправно при переходе в мобильную.
Решение
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Редирект на мобильную версию
Добрый день! Сайт на вордпресс Пытался сделать редирект на мобильную версию (одна страница этого.
CURL редирект на мобильную версию
Мне нужно если отправлен curl запрос по адресу vk.com/. сделать редирект на m.vk.com/. Как.
Убрать мобильную версию сайта
Привет. Народ, подскажите пожалуйста, сижу разбираюсь с готовым скриптом понять не могу как.
Как сделать мобильную версию сайта?
Есть у меня сайт некоммерческой тематики, иногда до него доходят руки и вот решил я всё-таки самостоятельно сделать ему мобильную версию, чтобы людям было удобно читать. Сам я не занимаюсь программированием связанным с Web разработками, поэтому хотел спросить у пользователей, может есть где-то инструкция пошаговая, с чего вообще начинать? Знаю Java, немного javascript.
Если пользователь заходит с мобильного устройства, нужно показать ему картинку, текст, пару кнопок, а также ссылку на другую страницу. Также понять как это внедрить в текущий код страницы.
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Редирект на мобильную версию сайта
Добрый день. Сделал сайт, но резиновым его не делал, и сделал стабильную ширину 1580 пикселей.
После перехода на мобильную версию сайта пункты меню становятся не кликабельны
Приветствую всех. Во всех разрешениях экрана пункты меню работают исправно при переходе в мобильную.
Редирект на мобильную версию сайта, используя JavaScript
Здравствуйте. Нужно реализовать редирект пользователей мобильных устройств на мобильную.
Переход на полную версию сайта
Мне нужно чтобы при мобильной версии сайта при нажатии на ссылку открывалась полная версия сайта.
Начал разбираться в этом вопросе, буду скидывать информацию, возможно, она станет полезной, также будет полезно обсудить вопросы.
Начал с простого, чтобы определить с какого устройства пользователь заходит на сайт, нужно добавить в header следующий код (функция определения):
Далее, чтобы использовать этот код (функцию) и перенаправить на мобильную версию, либо внести корректировки дизайна, нужно вставить эту функцию, можно сразу за этим кодом вставлять:
Теперь нужно произвести действия по редактированию самого дизайна для мобильной версии и тут у меня есть вопрос к форумчанам. Если я хочу изменить стили, то мне лучше делать отдельную таблицу стилей или вставлять новые стили в текущую таблицу?
И ещё: Как мне заменить старый стиль на новый? Допустим, у меня есть стиль
Delphian, название темы совершенно не соответствует содержанию стартового сообщения
для начала определитесь:
— либо вы делаете специальную отдельную версию сайта для мобильных устройств,
— либо вы существующую версию сайта делаете универсальной, одновременно подходящей как для стационарных PC, так и для мобильных гаджетов
только во втором случае вам будет «нужно понять как это внедрить в текущий код страницы» 
Как сделать редирект: подробный обзор для гуманитариев
Время чтения: 30 минут Нет времени читать? Нет времени?
В этой статье вы найдете подробную информацию о редиректах. Познакомитесь с видами перенаправлений и узнаете, какие задачи они решают. Узнаете, как сделать редирект разными способами и какой метод перенаправления предпочтителен в конкретных случаях.
Что такое редиректы и зачем они нужны
Редирект — перенаправление пользователя с одного URL на другой. Например, при переходе по ссылке http://texterra.ru/blog/ браузер автоматически перенаправляет пользователя на URL https://texterra.ru/blog/.
Редиректы помогают корректно перенаправлять посетителей на нужные страницы сайта без ущерба для пользовательского опыта и без нарушения требований поисковых систем. Правильно выполненный редирект сохраняет авторитет или ссылочный вес страницы-донора и передает его на страницу-акцептор.
В данном случае донор – страница, с которой перенаправляются пользователи. Акцептор – страница, на которую направляются пользователи.
Вот примеры использования редиректов:
С помощью редиректов владелец сайта направляет пользователей с неактуальных страниц на актуальные. Перенаправления классифицируются по функциональному назначению и по способу реализации.
Какие бывают виды редиректов и когда их используют
Для пользователя все редиректы одинаковы: при попытке перейти по одному URL они попадают на другой URL. Обычно интернет-серферы даже не замечают, что браузер перенаправил их с одного адреса на другой.
Браузеры и роботы поисковых систем определяют вид редиректа по коду состояния HTTP. Перенаправления могут иметь разный HTTP-статус: 301, 302, 303, 307. Рассмотрим каждый подробнее.
Редирект 301
Это самый распространенный вид перенаправления. HTTP-статус 301 значит, что ресурс навсегда перемещен с запрошенного URL на новый. После получения ответа 301 браузер делает новый запрос и перенаправляет пользователя на актуальную страницу.
Если вы используете редирект 301, авторитет и ссылочный профиль старой страницы передаются на новую. Например, не бойтесь потерять вес входящих ссылок при переводе сайта на безопасный протокол соединения. Корректный редирект 301 с http на https сохраняет эту характеристику ресурса и его конкретных страниц.
Редирект 302
В HTTP 1.0 статус 302 использовался для обозначения временного перемещения запрошенного ресурса на новый адрес. В HTTP 1.1 редирект 302 обозначает статус «Найдено» или Found. То есть ресурс существует, но владелец на некоторое время переместил его на новый адрес. Редирект 302 не передает авторитет и ссылочный профиль донора акцептору.
В HTTP 1.1 для временного перенаправления предложены редиректы 303 и 307. Это связано с некорректной обработкой статуса 302 в некоторых браузерах.
По стандартам HTTP 1.0 браузер после получения ответа 302 должен использовать для нового запроса метод POST. Разработчики некоторых браузеров не соблюдают этот стандарт и используют для нового запроса метод GET. В HTTP 1.1. эту проблему решают редиректы 303 и 307.
Вместо 302 для временного перенаправления лучше использовать редиректы 303 и 307.
Редиректы 303 и 307
В HTTP 1.1 статус 303 предложен вместо редиректа 302. Значение кода – See Other или «Смотрите другой ресурс». Для нового запроса браузер должен использовать метод GET. Применяйте редирект 303, когда у вас нет адекватного ответа на запрос пользователя, но имеется более или менее подходящая замена.
Редирект 303 подходит, когда на целевой странице есть формы. В этом случае важно, чтобы браузер делал запрос безопасным методом GET.
Статус 307 также используется вместо редиректа 302. Значение кода – Temporary Redirect или «временное перенаправление». Браузер не должен менять метод нового запроса. Запросы безопасными методами GET и HEAD выполняются автоматически. Запросы небезопасными методами, например, POST, выполняются с подтверждением пользователя.
Используйте редирект 307, чтобы показать, что искомый ресурс временно доступен по другому адресу.
Промежуточный вывод: в большинстве случаев владельцам сайтов подходит редирект 301. В этом случае HTTP-статус уведомляет поисковых роботов, что документ навсегда перемещен на новый адрес. Этот вид редиректа передает авторитет и ссылочную массу со страницы-донора на страницу-акцептор. Редиректы 303 и 307 используются, когда владелец сайта хочет временно перенаправлять пользователей с одного документа на другой.
Какие типы редиректов бывают
Что такое htaccess-редирект
Чтобы отредактировать файл, скачайте его на жесткий диск компьютера. Для этого выделите файл и в контекстном меню выберите соответствующую опцию. Чтобы загрузить отредактированный файл на сервер, выделите его в списке файлов и папок на жестком диске, откройте контекстное меню и выберите нужную опцию.
В интерфейсе FTP-клиента FileZilla слева доступны файлы и папки локального компьютера, а справа — файлы и папки удаленного сервера.
В настройках диспетчера включите отображение скрытых файлов.
Скачайте файл на компьютер и отредактируйте. Также файл можно редактировать через cPanel.
О коде редиректов и настройках конкретных перенаправлений пойдет речь ниже.
Чтобы настроить редирект на сервере под управлением Nginx, нужно добавить код перенаправления в конфигурационный файл nginx.conf. Код добавляется в блоке server. Получить код редиректа можно с помощью конвертера.
PHP-редиректы
Например, если на сайте есть десятки страниц, для которых нужно прописать редирект, а также десятки страниц, для которых редирект не нужен, лучше настраивать перенаправления с помощью PHP.
Добавьте в файл index.php код редиректа. Сохраните изменения и загрузите файл на сервер.
JavaScript-редирект
Редирект с помощью кода JavaScript выполняется на стороне браузера, а не на стороне сервера. Чтобы посетитель попал со старой страницы на новую, скрипт редиректа должен полностью загрузиться в обозревателе. Поэтому JavaScript-редирект – более медленный способ перенаправления, чем серверные редиректы. Еще одна проблема — автоматическое перенаправление не сработает, если пользователь отключил в браузере JavaScript.
Тем не менее JavaScript-редиректы в некоторых случаях удобны. Например, их можно использовать для перенаправления с задержкой. Вы можете написать на старой странице сообщение вроде «Мы переехали на новый сайт, сейчас вы будете автоматически туда перенаправлены». Через несколько секунд пользователь автоматически попадет на новую страницу.
Чтобы реализовать перенаправление с помощью JavaScript, добавьте код редиректа между тегами и страницы, с которой нужно перенаправить пользователей. На сайтах под управлением WordPress это можно сделать с помощью бесплатного плагина Per page add to head.
Сохраните изменения на странице и проверьте, как работает редирект.
HTML-редирект
Этот тип перенаправления также работает на стороне браузера. Чтобы перенаправление сработало, обозреватель должен загрузить соответствующий HTML-код: метатег refresh. Поэтому этот тип редиректов работает медленнее перенаправлений на уровне сервера.
Чтобы реализовать редирект, добавьте код между тегами и страницы, с которой хотите перенаправить трафик.
Сохраните изменения и проверьте, как работает перенаправление.
Где взять код редиректа
Если у вас нет соответствующей подготовки и знаний, есть два варианта. Можно обратиться к специалисту или воспользоваться онлайн-генератором кода. Подборка сервисов ниже сэкономит вам время и деньги:
По данным британской компании Netcraft на ноябрь 2017 года, 44 % активных сайтов работают на серверах под управлением Apache. 21 % ресурсов работает на серверах под управлением Nginx. Доля серверов с другим ПО не превышает 8 %.
Как делать редиректы: популярные примеры
В этом блоке представлены наиболее популярные редиректы. Инструкции помогут вам настроить перенаправления без обращения к техническим специалистам.
Как сделать редирект с http на https
Часто владельцы сайтов сталкиваются с необходимостью сделать серверный редирект при переводе сайта на безопасный протокол соединения. Чтобы реализовать перенаправление, выполните следующие действия:
Корректно перевести сайт на безопасный протокол помогут следующие ресурсы:
Как сделать редирект с или на www
В сгенерированном коде может быть упоминание сайта генератора. Оно не влияет на работу перенаправлений, поэтому его можно удалять.
Проверьте, как работает перенаправление. На иллюстрации ниже видно, что до настройки редиректа сайт был доступен по двум URL. После изменения файла index.php ресурс доступен по одному адресу.
Как настроить перенаправление с одной страницы
Перенаправления можно настраивать через панель управления сервером. В cPanel настройки доступны в разделе «Домены – Перенаправления». Инструкцию смотрите в статье о зеркалах сайтов.
Как настроить редирект при смене домена
Сгенерируйте код постраничного редиректа. Для этого укажите URL старого и нового домена и отметьте флажками опции, указанные на иллюстрации.
Как сделать редирект папки
RedirectMatch 301 ^/klassica/(.*)$ /russkaya-klassica/$1
Частные случаи: редирект слэша и редирект расширения
Одни владельцы сайтов предпочитают URL со слэшем в конце, а другие без слэша: https://exampleblog.ru/page/ и https://exampleblog.ru/page соответственно. Поисковые системы считают варианты со слэшем и без него разными URL. Поэтому важно выбрать предпочтительную структуру сетевых адресов и настроить перенаправления.
RewriteRule index\.html index.php [NC,R]
С помощью генератора можно получить код для других перенаправлений, например, для редиректов с поддомена на каталог или с верхнего регистра на нижний.
Как проверить редирект
Проверить редирект можно в браузере. Почистите кэш или откройте обозреватель в режиме инкогнито и введите нужный URL. Также проверять перенаправления можно с помощью веб-сервисов:
Чекеры показывают вид редиректа и статус ответа сервера при переходе на новый адрес.
Сделать редирект просто
Для этого в первую очередь выберите вид редиректа. В большинстве случаев подходит перенаправление 301 или постоянный редирект. Иногда для временного перенаправления стоит использовать редирект 303 и 307.