×
Россия +7 (909) 261-97-71

Что учесть при разработке мобильного решения для сайта?

Россия +7 (909) 261-97-71
Шрифт:
2 20167
Подпишитесь на нас в Telegram

для новичков


Важность мобильных устройств растет с каждым днем, и все чаще владельцы обычных интернет-сайтов задумываются о создании мобильного решения, которое позволит пользователям быстро и просто находить нужную им информацию и совершать целевые действия.

Что предпочесть — мобильное приложение или мобильный сайт, стоит решать в индивидуальном порядке — контент некоторых сайтов очень сложно представить в виде приложения, для других ресурсов наоборот мобильный сайт может вызвать сложности в навигации и восприятии контента.

Но большинство ресурсов все же склоняются к мобильному сайту — т.к. потенциальный охват аудитории шире, чем в случае с приложением. В этом случае опять приходится делать выбор — какой формат мобильного сайта предложить пользователям? Адаптивный дизайн, динамический контент или мобильный URL? Каждое решение имеет свои особенности и технические нюансы, которые не стоит забывать.

Адаптивный дизайн, динамический контент или мобильный URL?

Если вы впервые сталкиваетесь с необходимостью создания мобильного решения для своего сайта, этот вопрос нужно задавать в первую очередь. Современные разработчики предлагают три варианта — адаптивный дизайн, динамический контент или мобильный URL. Все три работают одинаково хорошо и для пользователей, и для Google, поэтому выбирать подходящее решение стоит, исходя из структуры сайта, контента и аудитории.

Решение

URL

Контент

Адаптивная верстка

Один URL для десктопной и мобильной версии

Страница предлагает всем пользователям один и тот же основной контент, но подача материала зависит от устройства пользователя и размер экрана. По мере уменьшения размеров экрана на странице может отображаться меньше картинок и текста, навигация упрощается.

Динамический контент

Один URL для десктопной и мобильной версии

Страница предлагает разный контент пользователям разных устройств

Мобильный URL

Разные URL для десктопной и мобильной версии

Десктопная и мобильные версии могут быть абсолютно разными.

Адаптивный дизайн

Многие разработчики при выборе решения для мобильного сайта предпочитают адаптивный дизайн. Его суть заключается в том, что технология распознает устройство, с которого пользователь просматривает сайт, и выстраивает подачу контента в соответствии с размером экрана. Такое решение позволит без проблем просматривать сайт с любого устройства — смартфона, планшета, ноутбука или большого монитора домашнего компьютера.

Несомненное преимущество — URL сайта не изменяется, т.е. нет лишних редиректов, которые могут негативно сказаться на скорости загрузки страницы.

Согласно рекомендации Google, не стоит блокировать индексацию таких элементов как CSS или JavaScript, так как для построения адаптивных блоков и соответствующей обработке данных необходим полный доступ к ним.

Также стоит убедиться, что на странице не размещается «тяжелый» контент, как, например, видео — это может негативно сказаться на скорости загрузки. Если же без таких элементов нельзя отобразить страницу, подумайте о динамическом контенте.

Что касается контента, если в итоге вы отображаете разные материалы на десктопной и мобильной версии, разные URL могут быть лучшим решением.

Динамический контент

Также как и в случае с адаптивным дизайном, при использовании динамического контента сервер распознает устройство и передает ему формат страницы в соответствии с размером экрана. Разница в том, что контент, подгружаемый на эту страницу, может различаться в зависимости от типа устройства. Опция отлично подходит, если нет смысла загружать весь контент десктопной версии страницы, но она сложнее в исполнении.

При использовании динамического контента убедитесь, что вы используете HTTP-заголовок Vary, который обладает двумя полезными и важными характеристиками:

  1. Он сообщает кэширующим прокси-серверам, что при принятии решения о показе страницы из кэша необходимо учитывать агента пользователя. Без HTTP-заголовка Vary система может ошибочно показать пользователям мобильных устройств версию HTML-страницы для обычных компьютеров, и наоборот.
  2. Этот заголовок помогает роботу Googlebot быстрее находить контент, оптимизированный для мобильных устройств, поскольку он учитывается при сканировании URL адаптированных страниц.

Мобильный URL

Адаптивной верстке и динамическому контенту предшествовало обычное разделение мобильной и десктопной версии сайта на разные URL — на www.example.com представлены обычные страницы, тогда как на сайте m.example.com — их варианты для смартфонов и планшетных ПК.

Однако если и сегодня вы используете разные URL для мобильной и десктопной версии сайта, необходимо убедиться, что Google понимает взаимосвязь между ними, и мобильный сайт ранжируется также как и десктопная версия.

Мобильная версия сайта и редиректы

Первое, что нужно сделать после создания отдельного мобильного сайта — убедиться, что между URL правильно настроены редиректы, и мобильные пользователи видят мобильную страницу, а десктопные — версию для обычных ПК. А не наоборот. Звучит просто, но некоторые сайты упускают данный момент.

Почему важно, чтобы мобильная версия сайта при открытии ее с обычного компьютера редиректила на десктопную версию? Представим, например, что пользователь прочитал на телефоне статью и решил запостить ее в Twitter. Другой пользователь открывает эту ссылку с обычного компьютера, и, если не срабатывает редирект, попадает на мобильную версию страницы:

Хотя на самом деле на десктопе страница должна отображаться так:

Неправильно настроенный редирект — это еще не самое плохое, что может сделать владелец сайта. Бывает так, что пользователь мобильного устройства перешел по ссылке в выдаче, а такой мобильной страницы нет, и редирект направляет его на мобильную главную страницу сайта. Хотя лучше пусть пользователь перейдет на десктопную версию страницы, чем будет направлен на нерелевантную страницу, где он не сможет найти нужную ему информацию.

Что еще следует учесть:

  • Бывает и так, что есть только мобильная версия сайта, и нет десктопной. Тогда пусть пользователи переходят на мобильную, даже если они делают это с обычного компьютера.
  • Google рекомендует перенаправлять пользователей планшетов на десктопную версию сайта, т.к. по данным компании, именно эта версия предпочтительней.
  • Нельзя блокировать мобильные страницы в robots.txt, так как это препятствует кластеризации мобильной и десктопной страниц.

Мобильные URL и мета-данные

Помимо редиректа на мобильную страницу необходимо добавить мета-данные.

Rel=canonical

Google должен отличать мобильный и десктопный сайты — для этого необходимо использовать атрибут rel=canonical.

Укажите поисковым системам значение desktop для мобильной и десктопной версии. Это положительно влияет на ранжирование и индексацию и предотвращает возможность потенциально дублированного контента.

Rel=alternate media

Разместите на каждой странице для обычных компьютеров специальный тег с атрибутом link rel="alternate«, который будет вести на соответствующую страницу мобильного сайта. Это поможет роботу Googlebot найти контент, оптимизированный для портативных устройств (наоборот не используется).

Добавить атрибут можно также с помощью файлов Sitemap.

Rel=next/prev

Если на сайте есть пагинация, необходимо добавить атрибут Rel=next и Rel=prev. Однако помните, что если число страниц отличается в мобильной и десктопной версии, не стоит использовать атрибут Rel=alternate media для кластеризации соответствующих страниц, т.к. контент может не совпадать.

HTTP-заголовок Vary: User-agent

Если посетители обычного сайта автоматически перенаправляются на его мобильную версию и наоборот (в зависимости от устройства), настоятельно рекомендуется настроить HTTP-заголовок Vary для URL, поддерживающих автоматическую переадресацию. Это обеспечивает кэширование данных на серверах интернет-провайдера, а также позволяет Google и роботу Googlebot определять конфигурацию вашего сайта.

Мобильные устройства и ранжирование

Когда пользователь совершает поиск через мобильное устройство, используется тот же индекс, что и для десктопов. Т.к. Google кластеризует десктопную и мобильную страницы, в поисковых результатах происходит следующее:

  • пользователь кликает на ссылку в выдаче, ведущую на десктопную версию страницы,
  • редирект перенаправляет пользователя на мобильную версию.

Факторы ранжирования сайта варьируются в зависимости от типа запроса, местоположения пользователя, типа устройства и т.д. Для мобильного поиска также учитывается взаимодействие пользователя со страницей. Любые проблемы, которые при этом возникают, могут отрицательно сказываться на ранжировании сайта в мобильной выдаче, но никак не влияют на десктопную выдачу.

Согласно заявлению Google, для мобильных поисков актуальны следующие факторы:

  • наличие только мобильной страницы.

Так как Google индексирует и ранжирует в первую очередь десктопную версию страницы, ее отсутствие может отрицательно сказаться на ранжировании мобильной версии.

  • скорость загрузки страницы

Согласно исследованию Srtangeloop, каждая дополнительная секунда к загрузке сайта увеличивает показатель отказов на 8,3%, уменьшает число просмотров страниц на 9,4% и снижает показатель конверсии на 3,5%.

Так как Google старается дать пользователям результаты, которые их устроят, медленно загружающиеся сайты могут низко ранжироваться. По рекомендациям поисковика, желательно, чтобы контент верхней части страницы загружался в течение секунды.

  • редиректы

Каждый редирект добавляет примерно 0,6 секунд к времени загрузки сайта. Убедитесь, что все редиректы ведут прямо к целевой странице, избегайте «цепочек» из ненужных редиректов.

Также как уже было сказано выше, проследите, чтобы пользователи переходили на нужную им страницу, а не на главную. Иначе пользователь может решить, что раз ему показали главную страницу, та, которую он ищет, не существует.

  • оверлеи и pop-up’ы

Даже если у вас есть прекрасное мобильное приложение, функционирующее гораздо лучше, чем мобильный сайт, не нужно бомбардировать пользователей всплывающими окнами, рассказывающими все это.

Google стремится дать пользователю ответ на его вопрос как можно быстрее, а различные дополнительные окна, вынуждающие пользователей делать лишние клики, не вписываются в этот процесс.

Если же от рекламы приложения отказаться не получается, сделайте так, чтобы пользователь все же мог без проблем получить доступ к нужному контенту. Например:

  • контент

Убедитесь, что мобильная страница содержит только тот контент, который может отобразить. В противном случае, пользователь может не найти нужную ему информацию, а Google посчитает, что сайт не такой уж полезный, и понизит его в выдаче.

Резюме

  1. Мобильным пользователям можно предложить отдельный мобильный URL или тот же, что и у основной версии сайта, но с адаптивной версткой или динамическим контентом.
  2. Динамический контент предполагает использование HTTP-заголовка Vary.
  3. Используем канонические атрибуты для десктопной версии.
  4. Когда используем отдельный URL для мобильной версии, то:
    • Редиректим десктопных и мобильных пользователей на соответствующие страницы,
    • Не делаем редирект в случае отсутствия такой же страницы в альтернативной версии,
    • Редиректим пользователей планшетов на десктопную версию страницы,
    • Используем канонические значения для декстопного URL,
    • Используем Rel=alternate media на десктопной версии чтобы выделить мобильную версию,
    • Проверяем скорость загрузки сайта,
    • Убираем лишние редиректы,
    • Не мешаем пользователю найти нужный ему контент — убираем pop-up’ы и прочую рекламу.

По материалам Searchengineland.com


Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Марина
    больше года назад
    Можно воспользоваться специальной услугой для создания мобильных приложений, например, у Nic есть, правда, наверное, это только для их клиентов, не знаю точно.
    -
    -2
    +
    Ответить
  • zdorovye
    1
    комментарий
    0
    читателей
    zdorovye
    больше года назад
    Спасибо за обзор, вот и я подумываю сделать мобильную версию сайта.
    Посоветовали какой-то конструктор, с помощью которого я сам смогу сделать мобильную версию сайта...
    Вот думаю сделать самому или отдать специалистам

    Василий
    -
    -1
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Роскомнадзор начал требовать от владельцев сайтов уведомлять об использовании Google Analytics. Опыт SEOnews
Денис Добрынин
1
комментарий
0
читателей
Полный профиль
Денис Добрынин - Что-то я как-то пропустил момент, с которого например госномер автомобиля или разрешение монитора и версия установленного на ПК ОС стала перс.данными... Но сегодня тоже получили бумажку с ай-яй-яем. Пойдем на прием в теруправление.
Тренды SEO в 2025 году
Борис
4
комментария
0
читателей
Полный профиль
Борис - 50/50 Описанная тобой ситуация (надеюсь, не против, что сразу на "ты") — типичная и вообще не требует какого-то глубинного опыта. Достаточно немного логики и наблюдательности. Разобью на пункты для читабельности: 1) Каннибализацию очень просто распознать. Достаточно загрузить СЯ в систему съёма позиций и мониторить источники. Если происходит некое «мигание» — идём (повторно) в топ, смотрим, подтверждаем гипотезу — склеиваем. 2) Но чаще всего эту проблему можно решить на уровне качественной группировки СЯ. А некоторые кластеры со знаком вопроса, которые мы решили разделить на несколько, достаточно держать под контролем. И снова получается, что внимательность и логика здесь могут помочь. И никакого серьёзного опыта не требуется. 3) Соглашусь, что в Яндексе правило "Интент = одна страница" — очень важно, но не всегда. Например, есть кластер, связанный с установкой сантехники, который включает запросы: "установка сантехники", "цена на установку сантехники". Вот здесь, как раз, для многих может быть неочевидно, что кластер лучше разделить на два: "Установка сантехники" и "Цена на установку сантехники". 4) Продолжая мысль из п.3 — в такой ситуации в Яндексе (скорее всего) всё будет ок. И никакой каннибализации не произойдёт. 5) Если говорить про Google (тот же п.3), то здесь, вероятно, возникнут проблемы (всё зависит от оптимизации страниц). Эти два кластера могут не дотянуть до топа из-за своей релевантности. Мы все знаем, что Google может «съесть» страницу с несколькими интентами, и всё будет ок. (в этом предложении пасхалка, что нужно сделать ;)) А если ещё поработать над ссылочным — вообще сказка. Конечно, эту проблему можно решить, но если переборщить, то каннибализация может уже произойти в Яндексе. Вот как раз чтобы уловить эту тонкую грань, и нужен хоть какой-то опыт, которого часто нет у джунов.
Россиянам могут запретить рекламу в Instagram* и Facebook*
Марина Ибушева
66
комментариев
0
читателей
Полный профиль
Марина Ибушева - Окончательное как раз и означает третье. Любой законопроект перед тем, как отправиться в Совет Федерации и на подпись прзиденту, проходит в России три обязательные стадии рассмотрения в Государственной Думе: Первое чтение - обсуждается общая концепция законопроекта. Второе чтение - более детальное обсуждение проекта, поправки и дополнения. Третье чтение (окончательное) - голосование за проект. Так что ожидается 25 марта второе и третье, окончательное чтение.
Фиды, фильтры, внутренний поиск: как выжать максимум при технических ограничениях и увеличить трафик более чем в 5 раз
i-Media интернет-агентство
2
комментария
0
читателей
Полный профиль
i-Media интернет-агентство - Google Merchant работает, товары показываются - в кейсе есть скриншот с примером.
Целевая аудитория: как найти и встроиться в ее вселенную
Александра
2
комментария
0
читателей
Полный профиль
Александра - Здравствуйте! Благодарю Вас за отличную статью! Много полезной информации, написано доступным языком.
Количество пользователей ИИ в сервисах Mail превысило 5 млн человек
Сергей Карененко
1
комментарий
0
читателей
Полный профиль
Сергей Карененко - Поздравление еще худо бедно написать можно. А когда в почте больше 10к писем, вот тут хорошо, что ии есть)
В Почте и Облаке Mail появился новый тариф – «Семейный»
Анна Макарова
393
комментария
0
читателей
Полный профиль
Анна Макарова - Да, конечно, владелец видит все файлы. А про других пользователей так написано: подключившие этот тариф, могут добавлять в подписку до 4 пользователей. Всем, кого пригласили в подписку, предоставляется доступ к терабайту облачного пространства для общих дел.
Застройщик в тумане. Как девелоперу лучше контролировать агентства
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Тут важно, чтобы и застройщики были готовы согласовать гипотезы, оптимизацию и корректировки креативов, а не отказывались от всего предложенного, а потом спрашивали , почему ничего не сделано
Что такое поведенческие факторы и как их улучшить легальными методами
Гость12
1
комментарий
0
читателей
Полный профиль
Гость12 - эта тема интересна, было бы полезно выложить больше технических деталей ого, на вашем сайте новый комментарий! ))
Как управлять репутацией фармацевтических препаратов в 2025 году
Сергей Медведев
2
комментария
0
читателей
Полный профиль
Сергей Медведев - Отличное исследование, ждем исследования на тематику банки и детского питания.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
393
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
124
Комментариев
121
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
66
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!