Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Продвижение сайта в мобильной выдаче: как выйти в ТОП поиска на смартфонах
Доля мобильного трафика ежегодно растет. Алгоритмы поисковых систем подстраиваются под эти изменения, предъявляя к мобильной версии сайта высокие требования. Поэтому SEO-специалисту приходится учитывать не только десктопную, но и мобильную выдачу.
Что такое мобильная выдача
Поисковые системы Яндекс и Google оптимизировали свои сайты под мобильные устройства. Если зайти в поисковик со смартфона и набрать запрос, то в ответ мы получим страницу с результатами поиска, которая называется мобильной выдачей (Mobile SERP).
Совпадает ли мобильная и десктопная выдача
Возникает вопрос: если мы и так занимаемся SEO-продвижением сайта, почему нужно дополнительно продвигать его в мобильном поиске? Дело в том, что мобильная и десктопная выдача — это две абсолютно разные выдачи. Речь сейчас не только об отличиях во внешнем виде и факторах ранжирования. Состав участников в ТОПе будет сильно отличаться. Если ваш сайт на первой странице на десктопах, то не факт, что и в мобилках он тоже будет в ТОПе. По статистике SEMrush только 13% сайтов имеют одинаковые позиции на всех типах устройств.
Для каких сайтов необходимо продвижение мобильной версии
Когда говорят, что сегодня мобильный трафик превалирует над десктопным, надо понимать, что это усредненная цифра. Такая картина далеко не в каждой нише. Трафик с ПК остается высоким для производителей и дистрибьюторов сложного технического оборудования, диджитал-агентств, других компаний, чьи сайты завязаны на визуальный контент или большие объемы данных (таблицы прихода судов, тарифные сетки и т. д.):
Стоит ли вкладываться в продвижение в мобильном поиске, если основной трафик дает десктоп? Есть несколько критериев, которые помогут это понять.
Доля мобильного трафика более 20-25%
Проверьте в Яндекс Метрике, сколько процентов людей переходит на ваш сайт с мобильного телефона. Для этого заходим в «Стандартные отчеты», выбираем вкладку «Технологии», и в выпадающем списке «Устройства»:
В сформированном отчете выбираем тип диаграммы — круговой, и анализируем долю мобильного трафика:
Если эта цифра составляет хотя бы 20%, то продвижение сайта в мобильной выдаче — необходимость. Каждый пятый пользователь заходит на ваш сайт со смартфона. А если заняться мобильным SEO, цифра значительно увеличится, то есть это серьезная точка роста.
Рост мобильного трафика
Важна не только доля мобильного трафика, но и его положительная динамика. Вернемся в тот же отчет Яндекс Метрики, переключимся на тип диаграммы — график, и поставим более длительный период, например, год:
Если на полученном графике мы видим, что количество переходов со смартфонов постоянно растет — это повод заняться оптимизацией сайта под мобильную выдачу.
Количество мобильного трафика по запросу
Не самый объективный показатель, но он может дать общее представление о сложившейся ситуации. В Яндекс Вордстат набираем наш самый ходовой запрос и смотрим по нему статистику:
Всего 238 782 посещения в месяц. Теперь переключимся на вкладку «Только телефоны» и посмотрим мобильный трафик в среднем по нише:
Высчитаем, сколько процентов составляет доля мобильного трафика по данному запросу: 94 778 / 238 782 = 39%. На скриншотах выше доля мобильного трафика рассматриваемого сайта составляла 33,8%, что в целом сопоставимо со средними цифрами в нише. Но если бы между этими двумя показателями была существенная разница, то это звоночек, что мы недополучаем трафик с телефонов.
Анализ частотности ключевого запроса
Критерий, схожий с предыдущим, но применимый в случаях, когда сайт еще не разработан и статистики по нему нет. Даже на этом этапе можно понять, насколько перспективно продвижение в мобильном поиске. В Яндекс Вордстат наберем ключевой запрос, по которому хотели бы ранжироваться в поиске, например, «снять квартиру» и посмотрим, насколько большая разница между количеством посещений с десктопов и с мобилок:
1 225 064 показов в месяц с ПК.
И 6 706 209 с телефонов. Разница в 6 раз! Это говорит о том, что разрабатывая сайт для агентства недвижимости, нужно ставить в приоритет мобильную версию.
Положительная динамика по Вордстат
Наберите целевой запрос в Яндекс Вордстат, кликните на опцию «История по запросу», после чего в группировках выберете «Только телефоны»:
Если по графику прослеживается положительная динамика запроса, то это еще один довод в пользу необходимости продвижения мобильной версии.
Что такое Mobile First Index
С сентября 2020 г. Google для всех веб-страниц использует индексирование с приоритетом мобильного контента.
Что это значит на практике:
● При индексации страницы робот в первую очередь обходит мобильную (адаптивную) версию, а только потом десктоп;
● Контент мобильной версии имеет приоритет над десктопной.
Что это значит на практике:
● При индексации страницы робот в первую очередь обходит мобильную (адаптивную) версию, а только потом десктоп;
● Контент мобильной версии имеет приоритет над десктопной.
Что учитывает Google при мобильном поиске
Когда Google оценивает удобство использования сайта с мобильных устройств, он опирается на такие факторы как:
● Размер шрифта не менее 12 px;
● Отсутствие горизонтальной прокрутки;
● Удобное расположение кликабельных элементов;
● Область просмотра сайта задана через тег veiwport и равна ширине устройства:
● Размер шрифта не менее 12 px;
● Отсутствие горизонтальной прокрутки;
● Удобное расположение кликабельных элементов;
● Область просмотра сайта задана через тег veiwport и равна ширине устройства:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Проверить мобилопригодность сайта для робота Google можно при помощи инструмента Mobile-Friendly Test:
Что важно для мобильного поиска Яндекс
Яндекс менее категоричен по отношению к мобильной версии, чем Google, не использует Mobile First индексацию, но имеет схожие факторы ранжирования в мобильном поиске:
● Наличие тега viewport;
● Удобство чтения текста;
● Отсутствие нечитаемых скриптов и плагинов;
● Отсутствие горизонтальной прокрутки;
● Наличие Турбо-страниц.
Проверить мобильные страницы на соответствие требованиям Яндекса можно в Вебмастере, Инструмент «Проверка мобильных страниц»:
● Наличие тега viewport;
● Удобство чтения текста;
● Отсутствие нечитаемых скриптов и плагинов;
● Отсутствие горизонтальной прокрутки;
● Наличие Турбо-страниц.
Проверить мобильные страницы на соответствие требованиям Яндекса можно в Вебмастере, Инструмент «Проверка мобильных страниц»:
Технический SEO аудит и оптимизация мобильной версии сайта
Чтобы обеспечить высокие позиции в результатах мобильного поиска, сайт должен быть хорошо оптимизирован. Но сначала нужно провести аудит и выявить проблемы адаптивной версии.
Снимаем позиции сайта в мобильной выдаче
Для начала нужно понять, насколько хуже позиции в мобильной выдаче в сравнении с десктопной. Для этого воспользуемся сервисом для съема позиций Топвизор. Переходим в инструмент «Проверка позиций» и ищем в верхнем меню кнопку со значком шестеренки:
В открывшемся окне с настройками, там же, где задаем поисковую систему и регион, есть возможность выбрать тип выдачи. Она не особо бросается в глаза, поэтому не все знают об этой опции. Жмем на иконку компьютера, появляется выпадающий список, в котором нужно выбрать смартфон, и иконка сменится на изображение телефона:
Теперь Топвизор будет снимать позиции сайта в мобильной выдаче. Выгружаем результаты, сравниваем их с десктопами:
В представленном примере позиции сайта в мобильной выдаче сопоставимы с десктопной, а по некоторым запросам показали даже лучший результат. Это говорит о хорошей оптимизации под мобильные устройства, при таком раскладе ничего больше делать не нужно, аудит на этом можно закончить.
Если расхождение позиций будет происходить в пользу десктопной выдачи, то нужно оценить, насколько оно существенное. Небольшие отклонения — это норма. Но если разница составляет десятки пунктов, то продолжаем анализировать и оптимизировать сайт.
Если расхождение позиций будет происходить в пользу десктопной выдачи, то нужно оценить, насколько оно существенное. Небольшие отклонения — это норма. Но если разница составляет десятки пунктов, то продолжаем анализировать и оптимизировать сайт.
Анализ Вебвизора
Для выявления ошибок в адаптивной версии, просматривайте Вебвизор. Над таблицей посещений находим кнопку «Настроить столбцы». В открывшемся окне ставим галочку напротив опции «Тип устройства», жмем кнопку «Применить»:
Теперь у нас появился дополнительный столбец, в котором указано, с какого устройства пришел пользователь:
Отфильтруем заходы по смартфонам. Для этого жмем на значок воронки и в выпадающем списке выбираем смартфоны:
Теперь в столбце с типами устройств остались только смартфоны:
Задача специалиста — просматривать записи визитов, в особенности тех, которые показали плохой поведенческий фактор, чтобы выявить, что пошло не так. Часто бывает, что на сайте есть виджеты, подсказки, всплывающие окна, рекламные блоки, поп-апы с информированием о куки, которые закрывают значительную часть небольшого экрана телефона, делая контент нечитаемым. А попасть по микроскопическому крестику, чтобы закрыть эти окна, на смартфоне проблематично. Пользователю проще уйти с этого сайта вообще.
На примере ниже показано, как всплывающее окно с акционным предложением закрывает четверть экрана:
На примере ниже показано, как всплывающее окно с акционным предложением закрывает четверть экрана:
На десктопе такое решение казалось уместным, маленькое окошко никому не мешало. Но на смартфоне это неприемлемо. Особенно учитывая, что это интернет-магазин, и пользователь в этот момент мог оформлять покупку.
Скорость загрузки страниц
Для мобильной версии критически важна скорость загрузки. Это связано не только с тем, что мобильный интернет, как правило, медленнее десктопного. Тут большую роль играет то, что в мобильной выдаче неудобное переключение между вкладками.
Если на десктопах пользователь может открыть сразу несколько вкладок, и те, что были открыты ранее успевают загрузиться, пока пользователь выбирает последующие, то на смартфоне он обычно жмет на заинтересовавший его сайт, ждет загрузки, просматривает контент, и, если что-то не устроило, возвращается в поисковую выдачу за следующим сайтом. То есть из-за неудобного переключения вкладок на смартфоне, у пользователя нет возможности просматривать другие сайты, пока прогружается ваш. Если ваш сайт не загрузится мгновенно, пользователь покинет его.
Измерить скорость загрузки сайта на мобильных устройствах можно при помощи сервиса PageSpeed Insights, здесь же будут рекомендации по доработкам, которые помогут ускорить загрузку:
Если на десктопах пользователь может открыть сразу несколько вкладок, и те, что были открыты ранее успевают загрузиться, пока пользователь выбирает последующие, то на смартфоне он обычно жмет на заинтересовавший его сайт, ждет загрузки, просматривает контент, и, если что-то не устроило, возвращается в поисковую выдачу за следующим сайтом. То есть из-за неудобного переключения вкладок на смартфоне, у пользователя нет возможности просматривать другие сайты, пока прогружается ваш. Если ваш сайт не загрузится мгновенно, пользователь покинет его.
Измерить скорость загрузки сайта на мобильных устройствах можно при помощи сервиса PageSpeed Insights, здесь же будут рекомендации по доработкам, которые помогут ускорить загрузку:
Но не забывайте тестировать сайты вручную с разных устройств и источников интернета (мобильный, wi-fi). Какая бы ни была оценка сайта по PageSpeed Insights, поисковый робот будет смотреть и на пользовательский опыт: если по факту сайт загружается с мобильных устройств быстро, пользователи дожидаются загрузки и не создают отказы в системе аналитики, то можно не упарываться из-за того, что сайт не в зеленой зоне.
После обновления алгоритма Google в июле 2021, оценка скорости по PageSpeed Insights стала иметь больший вес при ранжировании сайта в этой поисковой системе. Но как показали тесты, важнее не в какой зоне находится сайт, а как отличается оценка в сравнении с конкурентами.
После обновления алгоритма Google в июле 2021, оценка скорости по PageSpeed Insights стала иметь больший вес при ранжировании сайта в этой поисковой системе. Но как показали тесты, важнее не в какой зоне находится сайт, а как отличается оценка в сравнении с конкурентами.
Адаптивность
Проверьте сайт на адаптивность: насколько корректно отображается верстка на разных разрешениях экрана. В идеале нужно просмотреть сайт с разных устройств, но так как под рукой у разработчика может не быть 20 смартфонов всех размеров, можно воспользоваться Инструментами разработчика в Google Chrome, либо специализированными сервисами, например I love adaptive:
Распространенная ошибка разработчиков — проверять сайт только на современных дорогих телефонах с большим разрешением экрана. В то время как пользователей, у которых простые небольшие смартфоны в разы больше. Проверим, какими устройствами пользуются посетители вашего сайта. В Яндекс Метрике перейдем во вкладку «Стандартные отчеты» → «Технологии» → «Разрешение экрана»:
Нам откроется отчет, в котором собрана статистика по всем устройствам. Теперь нам нужно отсортировать только смартфоны с небольшим экраном. Жмем на кнопку «Группировки»:
В открывшемся окне выбираем из списка опцию «Технологии» → «Экран» → «Разрешение», ставим галочку, жмем на кнопку «Принять»:
Скроллим страницу ниже, до таблицы со всеми разрешениями экранов. Галочками выбираем только устройства с шириной экрана от 320 до 420:
Скроллим страницу вверх, возвращаемся к круговой диаграмме:
32,1% пользователей заходят на наш сайт с маленьких телефонов. Каждый третий посетитель! Поэтому пренебрежение адаптивом для небольших устройств приводит к потере трафика.
Оптимизация для мобильных устройств
Частый вопрос: почему сайт адаптивный, но Mobile-Friendly Test от Google пишет, что сайт не оптимизирован для мобильных устройств? Дело в том, что адаптация под мобильные устройства и оптимизация — это не одно и то же.
Адаптив отвечает за корректное отображение сайта с телефонов: чтобы весь контент умещался в пределах экрана.
Оптимизация означает удобное пользование сайтом с мобильных устройств. Даже адаптивный сайт может быть неудобным.
Обращайте внимание на размер шрифтов. Минимум, который может использоваться на смартфонах — 12 px. Еще более мелкий текст разглядеть с небольшого экрана телефона невозможно. Старайтесь избегать в мобильной версии шрифтов с завитушками, засечками, курсивного начертания — их тяжело читать, они напрягают зрение.
Не используйте экстремально широкие изображения. Google часто агрится на картинки, элементы и шейпы, которые в адаптиве превышают в ширину 600 px.
Обращайте внимание на близость кликабельных элементов: нет ли блоков, в которых 2 маленькие кнопки расположены рядом? Или несколько ссылок одна под другой? Функционал должен прорабатываться так, чтобы пользователь не мог промахнуться, случайно нажать не на ту кнопку. Курсор мыши на десктопе у всех примерно одинаковый, а вот пальцы у всех разные, и взаимодействие с сайтом со смартфона должно быть удобным даже для крупного мужчины с большими пальцами.
Адаптив отвечает за корректное отображение сайта с телефонов: чтобы весь контент умещался в пределах экрана.
Оптимизация означает удобное пользование сайтом с мобильных устройств. Даже адаптивный сайт может быть неудобным.
Обращайте внимание на размер шрифтов. Минимум, который может использоваться на смартфонах — 12 px. Еще более мелкий текст разглядеть с небольшого экрана телефона невозможно. Старайтесь избегать в мобильной версии шрифтов с завитушками, засечками, курсивного начертания — их тяжело читать, они напрягают зрение.
Не используйте экстремально широкие изображения. Google часто агрится на картинки, элементы и шейпы, которые в адаптиве превышают в ширину 600 px.
Обращайте внимание на близость кликабельных элементов: нет ли блоков, в которых 2 маленькие кнопки расположены рядом? Или несколько ссылок одна под другой? Функционал должен прорабатываться так, чтобы пользователь не мог промахнуться, случайно нажать не на ту кнопку. Курсор мыши на десктопе у всех примерно одинаковый, а вот пальцы у всех разные, и взаимодействие с сайтом со смартфона должно быть удобным даже для крупного мужчины с большими пальцами.
Анализ ошибок в Google Search Console
Чтобы оперативно выявлять ошибки, заглядывайте в Инструмент «Удобство для мобильных» в Google Search Console. Если мобильная версия хорошо оптимизирована, то вы увидите сообщение, что проблем нет:
Если же на сайте есть неоптимизированные страницы, Google подскажет в чем дело:
Аудит дизайна и юзабилити
Пройдитесь по сайту, проверяя его на юзабилити. Особое внимание уделите конверсионным элементам. Заполнять длинные формы с телефона неудобно, поэтому подумайте, правда ли вам нужны все эти поля, или можно оставить только имя и телефон:
Форма-допрос на 5 экранов. Не делайте так =)
По возможности, не используйте поп-ап формы, некоторые версии мобильных браузеров автоматически блокируют всплывающие окна.
Еще один важный момент — навигация. Не оставляйте открытое меню на смартфонах, чтобы оно не занимало пол экрана, прячьте его в «бургер»:
По возможности, не используйте поп-ап формы, некоторые версии мобильных браузеров автоматически блокируют всплывающие окна.
Еще один важный момент — навигация. Не оставляйте открытое меню на смартфонах, чтобы оно не занимало пол экрана, прячьте его в «бургер»:
Если статья на сайте очень длинная, предусмотрите в начале страницы ссылки на ключевые подзаголовки, чтобы читатель мог быстро переместиться в нужное место, не пролистывая 30−40 экранов:
Отказ от всплывающих окон
Поисковые системы негативно относятся к окнам, которые всплывают поверх веб-страницы без запроса пользователя, особенно на мобильных устройствах. Экран смартфона небольшой, и различные баннеры, подсказки, реклама, формы подписки и обратной связи, появляющиеся внезапно, закрывают важный контент и мешают пользователю взаимодействовать с сайтом. За злоупотребление этим инструментом, поисковики пессимизируют сайт в мобильной выдаче.
Фавикон
Не забывайте использовать фавиконы, они помогают сделать ваш сайт заметнее и увеличить кликабельность. Например, в Google они вообще есть только в мобильной выдаче:
Отказ от Flash-технологий
Не используйте флеш-технологии для анимации и встраивания видео на сайт. Большинство устройств не поддерживают этот формат. Google официально заявил, что Chrome прекращает поддерживать Flash-технологий.
Данная рекомендация не касается новых сайтов, поскольку Flash — это устаревшая технология, которая давно не используется. Тем не менее в ТОПе очень много старых сайтов, которые неизбежно просядут в мобильном поиске, если не перейдут на HTML5.
Данная рекомендация не касается новых сайтов, поскольку Flash — это устаревшая технология, которая давно не используется. Тем не менее в ТОПе очень много старых сайтов, которые неизбежно просядут в мобильном поиске, если не перейдут на HTML5.
Семантический аудит и SEO оптимизация сайта под мобильный поиск
Поскольку основным фактором ранжирования остается релевантность, одной лишь технической оптимизации недостаточно, чтобы вывести сайт в ТОП мобильной выдачи.
Формирование расширенного сниппета
На одном экране смартфона в поисковой выдаче умещается гораздо меньше сайтов, чем на десктопе. Поэтому задача оптимизатора — добиться формирования расширенного сниппета, чтобы отжать себе максимум места.
Сделать это можно за счет:
● Быстрых ссылок;
● Контактов, подгружающихся из сервисов Яндекса и Google;
● Товарной или информационной ленты:
Сделать это можно за счет:
● Быстрых ссылок;
● Контактов, подгружающихся из сервисов Яндекса и Google;
● Товарной или информационной ленты:
Расширенный сниппет WebValley — занимает весь экран мобильного телефона, остальные сайты из выдачи просто не попадают на первый экран
Увеличение размера метатегов
Распространенное заблуждение, что Title должен быть 60−70 символов. Большинство сервисов для автоматического SEO-аудита придерживаются именно этой цифры. Аргументируется это тем, что длина строки в поисковой выдаче, которая отводится под Title составляет примерно 60−70 символов, все остальное обрезается знаком многоточия, и не видно пользователю.
Опытные оптимизаторы знают, что есть видимый Title и индексируемый. Поисковый робот, хоть и урезает заголовок в выдаче, все равно видит его, и индексирует все, что за многоточием, примерно до 150 символов. Поэтому, правильнее прописывать длинный Title, но прикидывать, чтобы самая важная и цепляющая пользователя информация была в начале, и не обрезалась ограничением строки.
Но это не единственная причина прописывать длинные заголовки. Посмотрим на примере, как отображается одна и та же страница в десктопной и в мобильной выдаче:
Опытные оптимизаторы знают, что есть видимый Title и индексируемый. Поисковый робот, хоть и урезает заголовок в выдаче, все равно видит его, и индексирует все, что за многоточием, примерно до 150 символов. Поэтому, правильнее прописывать длинный Title, но прикидывать, чтобы самая важная и цепляющая пользователя информация была в начале, и не обрезалась ограничением строки.
Но это не единственная причина прописывать длинные заголовки. Посмотрим на примере, как отображается одна и та же страница в десктопной и в мобильной выдаче:
Вот сколько информации поместилось в заголовке на ПК. Все по канону, те самые 60−70 символов и многоточие. А вот какая картина в мобильной выдаче:
Title страницы при просмотре со смартфона в 2 раза больше! Поэтому для улучшения ранжирования в мобильной выдаче, пересмотрите заголовки, если надо, перепишите их.
Сбор поисковых подсказок и оптимизация под них
При сборе семантического ядра, не пренебрегайте поисковыми подсказками. Они очень помогают для оптимизации страниц под мобильный поиск. Пользователи чаще используют поисковые подсказки именно на смартфонах, поскольку клавиатура для ввода запроса на мобильных устройствах — миниатюрная, и вбивать длинный запрос просто неудобно.
Адаптация под голосовой поиск
Оптимизация страниц под низкочастотные и сверхнизкочастотные запросы показывает отличные результаты в мобильной выдаче. Обычно пользователь набирает короткие поисковые запросы и не использует 5−6 словники. Но голосовой поиск на смартфонах позволяет задавать вопрос любой длины, поэтому использование СНЧ запросов из 5−6 и более слов актуально для мобильного продвижения.
Помимо длины, такие запросы можно распознать по правильному порядку слов и падежной форме. Например, если пользователь печатает запрос вручную, он скорей напишет «купить колготки москва недорого», а в голосовом поиске, он спросит «где недорого купить колготки в Москве». Для хороших позиций в мобильной выдаче, оптимизация страниц под голосовые запросы — мастхев.
Помимо длины, такие запросы можно распознать по правильному порядку слов и падежной форме. Например, если пользователь печатает запрос вручную, он скорей напишет «купить колготки москва недорого», а в голосовом поиске, он спросит «где недорого купить колготки в Москве». Для хороших позиций в мобильной выдаче, оптимизация страниц под голосовые запросы — мастхев.
Эмоджи в сниппетах
Использование смайликов в метатегах — спорный вопрос. С одной стороны, они повышают заметность, а значит и кликабельность сайта в поисковой выдаче. С другой стороны, не все эмоджи корректно отображаются в браузерах. Может получиться так, что в одном браузере вместо символов отобразятся квадратики ⭅, в другом вопросики ???, в третьем они будут контурными и черно-белыми, такими, что вообще не разобрать, и лишь в четвертом они будут красивыми, цветными и яркими, как мы задумали.
Рекомендация прописывать эмоджи справедлива как раз для мобильного продвижения, поскольку мобильные браузеры в 90% случаев отображают символы корректно. Но важно не переборщить. Еще нет достоверных сведений о том, как относятся поисковые системы к эмоджи в сниппетах, вполне вероятно, что злоупотребление этим приемом может быть расценено роботом как манипуляция поисковой выдачей.
Рекомендация прописывать эмоджи справедлива как раз для мобильного продвижения, поскольку мобильные браузеры в 90% случаев отображают символы корректно. Но важно не переборщить. Еще нет достоверных сведений о том, как относятся поисковые системы к эмоджи в сниппетах, вполне вероятно, что злоупотребление этим приемом может быть расценено роботом как манипуляция поисковой выдачей.
Эквивалентность контента
Поисковые системы требуют, чтобы контент в мобильной и десктопной версии был аналогичен. Тем не менее, разработчики часто делают сайт в адаптиве урезанным по сравнению с десктопом. Это связано с тем, что некоторые блоки, которые критически важны на ПК (таблицы, инфографика, большой текстовый контент, некоторые картинки), плохо смотрятся в мобильной версии, делают ее неудобной, снижают конверсию из-за чрезмерно длинного скролла:
Блок с характеристиками продукта, который не выглядит громоздко в десктопной версии, в адаптиве занимает 6−7 экранов, поэтому его предусмотрительно спрятали в «аккордеон».
Вернемся к Mobile First Index. Вот что пишет об этом cправка Google:
Вернемся к Mobile First Index. Вот что пишет об этом cправка Google:
Для Google в приоритете контент мобильной версии. Она индексируется в первую очередь, релевантность страницы определяется по мобильной версии, поэтому любой скрытый или неиспользуемый контент не будет засчитан поисковым роботом, даже если он есть на десктопах.
Для хорошего ранжирования в мобильной выдаче, убедитесь, что контент обеих версий сайта совпадает: заголовки, содержание и объем текстов, количество ссылок, метаданные.
Для хорошего ранжирования в мобильной выдаче, убедитесь, что контент обеих версий сайта совпадает: заголовки, содержание и объем текстов, количество ссылок, метаданные.
Дублирование контента
Чтобы сэкономить время на адаптации, разработчики прибегают к медиазапросам — CSS-правилам, которые управляют стилями элементов в зависимости от разрешений экранов:
Но при таком подходе, происходит дублирование контента в коде сайта. Поисковые роботы не любят дубли, это повод для пессимизации сайта. И если продублирован под разные разрешения один блок на странице, то вреда не будет. Но если дублируется каждый — это повод сменить верстальщика, продвигать такой сайт будет бесполезно.
Еще один момент, на который следует обратить внимание, дублирование метатегов. В особенности это касается H1-заголовка, который на странице должен быть только один.
Если разработчик продублировал медиазапросами обложку страницы, а вместе с ней задублировался H1-заголовок — это критическая ошибка. Поэтому следите, чтобы в тег H1 был обернут только один заголовок. Причем именно в том блоке, который верстается под мобильные устройства. Не забываем про Mobile First Index, и про то, что робот при сканировании страницы будет ориентироваться на мобильную версию и искать H1-заголовок в ней. Дублирующийся заголовок десктопной версии оборачиваем тегом div , чтобы робот видел эту часть контента в отдельном контейнере.
Еще один момент, на который следует обратить внимание, дублирование метатегов. В особенности это касается H1-заголовка, который на странице должен быть только один.
Если разработчик продублировал медиазапросами обложку страницы, а вместе с ней задублировался H1-заголовок — это критическая ошибка. Поэтому следите, чтобы в тег H1 был обернут только один заголовок. Причем именно в том блоке, который верстается под мобильные устройства. Не забываем про Mobile First Index, и про то, что робот при сканировании страницы будет ориентироваться на мобильную версию и искать H1-заголовок в ней. Дублирующийся заголовок десктопной версии оборачиваем тегом div , чтобы робот видел эту часть контента в отдельном контейнере.
Текстовые пояснения к видеороликам
Видео на сайте могут повышать конверсию, так как есть вещи, которые проще и нагляднее показать, чем пытаться объяснить словами. Однако у пользователя не всегда есть возможность смотреть видео с телефона, особенно со звуком. Поэтому, позаботьтесь о том, чтобы видео не исключало текстовое описание, а дополняло его. Субтитры в видеоролике, позволяющие смотреть его без звука, увеличивают время просмотра, а значит, улучшают поведенческий фактор и позиции сайта в мобильной выдаче.
Что лучше для SEO: мобильная версия, адаптивный сайт, динамические показы или турбо‑технологии
Успех SEO продвижения в мобильной выдаче во многом зависит от того, каким способом реализована мобильная версия сайта. Некоторые варианты требуют дополнительной донастройки.
Мобильная версия сайта на отдельном домене
Мобильная версия сайта на отдельном поддомене, вида m.web-valley.ru — распространенная история для старых крупных сайтов, у которых есть мощная десктопная версия, ранжирующаяся на хороших позициях. При таком раскладе, перепиливание сайта в адаптивный и редизайн в десктопе — это трудозатратно, дорого, а при неправильном переносе влечет за собой просадку SEO. Поэтому, на первый взгляд, целесообразнее сделать отдельную мобильную версию, на своем домене (поддомене). Но такой вариант имеет много недостатков и требует очень прямых рук от команды разработчиков:
● В десктопной версии обязательно должен быть проставлен тег rel="alternate", указывающий на мобильную версию сайта:
● В десктопной версии обязательно должен быть проставлен тег rel="alternate", указывающий на мобильную версию сайта:
<link rel="alternate" media="only screen and (max-width: 640px)"
href="https://m.web-valley.ru/uslugi/">
● В мобильной версии для всех страниц должен быть прописан тег rel="canonical", который укажет на мобильную версию как на каноническую:
<link rel="canonical" href="https://m.web-valley.ru/uslugi/">
● На мобильную версию нужно настроить редирект на основе User-agent устройства с использованием 302 кода ответа сервера (временный редирект). То есть при правильной настройке, в зависимости от того с какого устройства зашел пользователь, он будет попадать на десктопную или на мобильную версию;
● У мобильной версии на отдельном домене, должен быть свой отдельный файл robots.txt. Если для десктопной версии он составлен верно, то его нужно просто перенести в мобильную. При этом можно не опасаться дублирования контента, если теги alternate и canonical из предыдущих пунктов были прописаны верно;
● Для отдельной мобильной версии создается своя карта сайта Sitemap.xml со всеми страницами, которые должны быть проиндексированы поисковой системой;
● Не забудьте соблюсти эквивалентность контента: все метатеги, заголовки, текстовый и визуальный контент должны совпадать в десктопной и мобильной версиях;
● Хороший тон — размещение на всех страницах сайта (в шапке или в подвале) кнопки, открывающей полную версию сайта, иногда она может оказаться удобнее для пользователей с большими смартфонами или планшетами;
● Обе версии сайта (оба домена) должны быть добавлены и подтверждены в Google Search Console и Яндекс Вебмастер;
● При разработке мобильной версии на отдельном домене нужно проследить, чтобы везде использовались относительные ссылки, т. е. вместо абсолютной ссылки web-valley.ru/uslugi, прописывать /uslugi, без указания домена. В противном случае, если у десктопной версии не определяется user agent, то пользователь, перейдя по ссылке в мобильной версии, попадет на десктопную, и вся работа по созданию мобильной версии полетит к чертям.
Из вышесказанного становится понятно, что мобильная версия на отдельном домене имеет дохералион минусов:
● Очень сложная техническая оптимизация, необходимость проводить дополнительную донастройку;
● Для поисковой системы — это два разных сайта. Даже если мы правильно их склеили и избежали дублей, то все равно вести работы по продвижению придется сразу на двух сайтах. Поведенческий фактор для них учитывается отдельно, ссылочный вес — отдельно. Их оба придется раскручивать, наполнять, поддерживать, настраивать, верстать, закупать ссылки отдельно на каждый домен и т. д. А это дополнительные финансовые и временные затраты;
● Потеря контроля: за двумя сайтами сложнее уследить. Даже с одним доменом сайтовладельцы не всегда успевают оперативно выявлять проблемы и решать их. А контролировать 2 сайта — вдвойне тяжелее.
Google также не рекомендует использовать мобильную версию на отдельном домене. Причем это не потому, что он как-то хуже индексирует такие сайты. Он это как раз аргументирует тем, что на протяжении многих лет наблюдает проблемы и путаницу как со стороны пользователей, так и со стороны поискового робота, поскольку чаще всего такой вариант мобильной версии содержит большое число технических ошибок.
● У мобильной версии на отдельном домене, должен быть свой отдельный файл robots.txt. Если для десктопной версии он составлен верно, то его нужно просто перенести в мобильную. При этом можно не опасаться дублирования контента, если теги alternate и canonical из предыдущих пунктов были прописаны верно;
● Для отдельной мобильной версии создается своя карта сайта Sitemap.xml со всеми страницами, которые должны быть проиндексированы поисковой системой;
● Не забудьте соблюсти эквивалентность контента: все метатеги, заголовки, текстовый и визуальный контент должны совпадать в десктопной и мобильной версиях;
● Хороший тон — размещение на всех страницах сайта (в шапке или в подвале) кнопки, открывающей полную версию сайта, иногда она может оказаться удобнее для пользователей с большими смартфонами или планшетами;
● Обе версии сайта (оба домена) должны быть добавлены и подтверждены в Google Search Console и Яндекс Вебмастер;
● При разработке мобильной версии на отдельном домене нужно проследить, чтобы везде использовались относительные ссылки, т. е. вместо абсолютной ссылки web-valley.ru/uslugi, прописывать /uslugi, без указания домена. В противном случае, если у десктопной версии не определяется user agent, то пользователь, перейдя по ссылке в мобильной версии, попадет на десктопную, и вся работа по созданию мобильной версии полетит к чертям.
Из вышесказанного становится понятно, что мобильная версия на отдельном домене имеет дохералион минусов:
● Очень сложная техническая оптимизация, необходимость проводить дополнительную донастройку;
● Для поисковой системы — это два разных сайта. Даже если мы правильно их склеили и избежали дублей, то все равно вести работы по продвижению придется сразу на двух сайтах. Поведенческий фактор для них учитывается отдельно, ссылочный вес — отдельно. Их оба придется раскручивать, наполнять, поддерживать, настраивать, верстать, закупать ссылки отдельно на каждый домен и т. д. А это дополнительные финансовые и временные затраты;
● Потеря контроля: за двумя сайтами сложнее уследить. Даже с одним доменом сайтовладельцы не всегда успевают оперативно выявлять проблемы и решать их. А контролировать 2 сайта — вдвойне тяжелее.
Google также не рекомендует использовать мобильную версию на отдельном домене. Причем это не потому, что он как-то хуже индексирует такие сайты. Он это как раз аргументирует тем, что на протяжении многих лет наблюдает проблемы и путаницу как со стороны пользователей, так и со стороны поискового робота, поскольку чаще всего такой вариант мобильной версии содержит большое число технических ошибок.
Адаптивный сайт
Адаптивная верстка позволяет разрабатывать сайт так, чтобы контент подстраивался (адаптировался) под разрешение экрана устройства, с которого заходит пользователь. В отличие от предыдущего варианта реализации мобильной версии, адаптивки имеют следующие преимущества:
● Технически, десктоп и мобилка — это один сайт, с одним и тем же URL. А значит, нет проблемы с дублированием контента и каноническими страницами. Продвигать и контролировать нужно только один сайт. Все показатели (трафик, ссылочная масса, поведенческие метрики) — едины;
● Один HTML-код. Если требуется внести какие-то изменения, то это нужно сделать один раз. Экономится время на администрирование сайта;
● Время загрузки. С этим фактором все не так однозначно. С одной стороны, за счет того, что в адаптивке нет редиректов с одной версии сайта на другую, страницы загружаются быстрее. С другой стороны, если есть элементы, которые утяжеляют мобильную страницу, их нельзя удалить, как в отдельной мобильной версии, потому что они удалятся и в десктопе. Поэтому их можно только скрыть. Но тогда они остаются в коде, и, несмотря на то, что пользователь не видит их, загрузка не происходит быстрее;
● Экономия краулингового бюджета. Поисковый робот заходит на сайт, чтобы проиндексировать страницы, ограниченное число раз. В случае с адаптивным ресурсом, Yandexbot и Googlebot сканируют страницу один раз, а не растрачивают краулинговый бюджет на индексацию одного и того же контента для разных версий сайта;
● Адаптивный сайт удобнее для регионального продвижения на поддоменах. Некоторые крупные сети предпочитают делать отдельные версии сайта для разных геолокаций. Сайт конкретного города сажают на поддомен основного сайта с указанием гео, например, msk.web-valley.ru. А если у нас на поддомене уже есть мобильная версия, то приходится создавать домен 4-го уровня, вида msk.m.web-valley.ru — что очень усложняет работу, вызывает путаницу, и подразумевает огромные затраты на администрирование всей этой сложной системы поддоменов.
Минусы адаптивной версии перекрываются ее плюсами, но для полноты картины остановимся и на них:
● Сложность дизайна. Когда сайт создается с нуля, дизайнеру нужно отрисовать не только визуал для десктопа, но и продумать адаптив под разные разрешения, разместить контент так, чтобы это было максимально удобно пользователю;
● Более тяжелый и объемный код;
● Скорость загрузки. Адаптивный сайт может грузиться медленнее, чем отдельная мобильная версия. Но тут многое зависит от реализации — чистоты кода и прямых рук верстальщика.
● Технически, десктоп и мобилка — это один сайт, с одним и тем же URL. А значит, нет проблемы с дублированием контента и каноническими страницами. Продвигать и контролировать нужно только один сайт. Все показатели (трафик, ссылочная масса, поведенческие метрики) — едины;
● Один HTML-код. Если требуется внести какие-то изменения, то это нужно сделать один раз. Экономится время на администрирование сайта;
● Время загрузки. С этим фактором все не так однозначно. С одной стороны, за счет того, что в адаптивке нет редиректов с одной версии сайта на другую, страницы загружаются быстрее. С другой стороны, если есть элементы, которые утяжеляют мобильную страницу, их нельзя удалить, как в отдельной мобильной версии, потому что они удалятся и в десктопе. Поэтому их можно только скрыть. Но тогда они остаются в коде, и, несмотря на то, что пользователь не видит их, загрузка не происходит быстрее;
● Экономия краулингового бюджета. Поисковый робот заходит на сайт, чтобы проиндексировать страницы, ограниченное число раз. В случае с адаптивным ресурсом, Yandexbot и Googlebot сканируют страницу один раз, а не растрачивают краулинговый бюджет на индексацию одного и того же контента для разных версий сайта;
● Адаптивный сайт удобнее для регионального продвижения на поддоменах. Некоторые крупные сети предпочитают делать отдельные версии сайта для разных геолокаций. Сайт конкретного города сажают на поддомен основного сайта с указанием гео, например, msk.web-valley.ru. А если у нас на поддомене уже есть мобильная версия, то приходится создавать домен 4-го уровня, вида msk.m.web-valley.ru — что очень усложняет работу, вызывает путаницу, и подразумевает огромные затраты на администрирование всей этой сложной системы поддоменов.
Минусы адаптивной версии перекрываются ее плюсами, но для полноты картины остановимся и на них:
● Сложность дизайна. Когда сайт создается с нуля, дизайнеру нужно отрисовать не только визуал для десктопа, но и продумать адаптив под разные разрешения, разместить контент так, чтобы это было максимально удобно пользователю;
● Более тяжелый и объемный код;
● Скорость загрузки. Адаптивный сайт может грузиться медленнее, чем отдельная мобильная версия. Но тут многое зависит от реализации — чистоты кода и прямых рук верстальщика.
Динамические показы (RESS технология)
Что-то среднее между двумя вышеописанными вариантами: у мобильной и десктопной версии одинаковый URL, но разный код HTML и CSS. То есть сначала система определяет с какого типа устройства зашел пользователь и, в зависимости от параметров экрана, показывает нужную версию сайта.
Для корректной работы динамических сайтов необходимо использовать HTTP-заголовок Vary, который будет сообщать серверам провайдера, что важно учитывать User-agent пользователя. Если не прописать эту строчку в коде, пользователь не сможет открыть корректную версию сайта, например, на десктопах будет открываться мобильная версия, а на смартфонах — десктопная.
Google рекомендует прописывать HTTP-заголовок Vary в ответ сервера на такие запросы:
Для корректной работы динамических сайтов необходимо использовать HTTP-заголовок Vary, который будет сообщать серверам провайдера, что важно учитывать User-agent пользователя. Если не прописать эту строчку в коде, пользователь не сможет открыть корректную версию сайта, например, на десктопах будет открываться мобильная версия, а на смартфонах — десктопная.
Google рекомендует прописывать HTTP-заголовок Vary в ответ сервера на такие запросы:
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
К преимуществам динамических показов относятся:
● Один общий URL для обеих версий сайта;
● Возможность хорошо оптимизировать код и контент под мобильные устройства;
● Ускорение загрузки мобильной версии;
● Быстрая индексация мобильной версии сайта поисковым роботом.
Минусы такого подхода:
● Тяжело контролировать и администрировать сайт: несмотря на один URL у нас по сути 2 сайта, 2 кода, их надо отдельно наполнять и оптимизировать;
● Из-за сложности реализации и управления, возникает множество технических ошибок в оптимизации сайта.
● Один общий URL для обеих версий сайта;
● Возможность хорошо оптимизировать код и контент под мобильные устройства;
● Ускорение загрузки мобильной версии;
● Быстрая индексация мобильной версии сайта поисковым роботом.
Минусы такого подхода:
● Тяжело контролировать и администрировать сайт: несмотря на один URL у нас по сути 2 сайта, 2 кода, их надо отдельно наполнять и оптимизировать;
● Из-за сложности реализации и управления, возникает множество технических ошибок в оптимизации сайта.
AMP и Турбо-страницы
Для случаев, если у сайта нет мобильной версии, или если она плохо оптимизирована, долго загружается, поисковые системы предусмотрели свои технологии, которые позволяют создавать легкие и быстрые странички для мобильных устройств. Это AMP (Accelerated Mobile Pages) от Google и Турбо-страницы от Яндекс.
В чем суть технологии: представьте, что с вашей страницы исчезли все скрипты, анимация, красивые шрифты, сложные кастомные решения в дизайне. Остался только текст и простые картинки. Это и будет AMP или Турбо страница:
В чем суть технологии: представьте, что с вашей страницы исчезли все скрипты, анимация, красивые шрифты, сложные кастомные решения в дизайне. Остался только текст и простые картинки. Это и будет AMP или Турбо страница:
Слева — адаптивная версия страницы, справа — турбо-страница. Яндекс максимально упростил отображение: показал системные шрифты вместо фирменных, сделал примитивную шапку вместо кастомной, зато страница загружается с мобильных устройств за доли секунды.
Плюсы AMP и Турбо технологий:
● Мгновенная загрузка страницы даже при плохом интернете, за счет того, что убраны все элементы и скрипты, способные замедлить ее, а также за счет того, что такая страница расположена непосредственно на серверах Яндекс или Google;
● Потребляется меньше мобильных данных (меньше расходуется интернет с устройства пользователя);
● Поисковые системы отдают высокий приоритет таким страницам в мобильной выдаче. Особенно это касается Яндекса, который явно ранжирует выше сайты, использующие Турбо‑страницы;
● Турбо-страницы участвуют в формировании расширенного сниппета: статейного или товарного.
Минусы AMP и Турбо страниц:
● Пользователь не попадает на ваш сайт, в URL Турбо-страницы будет прописано yandex-turbopages. В целом, это не проблема, так как в Метрике отслеживаются такие переходы, и наша задача продвигать не сайт как таковой, а бизнес, и не так важна точка касания. Но встает вопрос с учетом поведенческих факторов: они нам не засчитываются;
● Попасть на Турбо-страницу можно только из поисковой выдачи. Если пользователь перейдет по ссылке или внутренним переходом по сайту, он попадет на обычную мобильную версию (если она есть, в противном случае вообще будет грузиться неоптимизированная десктопная);
● Очень упрощенный внешний вид страниц, вплоть до примитивизма. Если речь о статье с большим текстовым наполнением, то это приемлемо. Но если это лендинг, с шикарным визуалом, который скрупулезно прорабатывался дизайнером, чтобы наполнение и микроанимации аккуратно подталкивали пользователя к конверсионному действию, то Турбо-страницы — плохая идея.
Плюсы AMP и Турбо технологий:
● Мгновенная загрузка страницы даже при плохом интернете, за счет того, что убраны все элементы и скрипты, способные замедлить ее, а также за счет того, что такая страница расположена непосредственно на серверах Яндекс или Google;
● Потребляется меньше мобильных данных (меньше расходуется интернет с устройства пользователя);
● Поисковые системы отдают высокий приоритет таким страницам в мобильной выдаче. Особенно это касается Яндекса, который явно ранжирует выше сайты, использующие Турбо‑страницы;
● Турбо-страницы участвуют в формировании расширенного сниппета: статейного или товарного.
Минусы AMP и Турбо страниц:
● Пользователь не попадает на ваш сайт, в URL Турбо-страницы будет прописано yandex-turbopages. В целом, это не проблема, так как в Метрике отслеживаются такие переходы, и наша задача продвигать не сайт как таковой, а бизнес, и не так важна точка касания. Но встает вопрос с учетом поведенческих факторов: они нам не засчитываются;
● Попасть на Турбо-страницу можно только из поисковой выдачи. Если пользователь перейдет по ссылке или внутренним переходом по сайту, он попадет на обычную мобильную версию (если она есть, в противном случае вообще будет грузиться неоптимизированная десктопная);
● Очень упрощенный внешний вид страниц, вплоть до примитивизма. Если речь о статье с большим текстовым наполнением, то это приемлемо. Но если это лендинг, с шикарным визуалом, который скрупулезно прорабатывался дизайнером, чтобы наполнение и микроанимации аккуратно подталкивали пользователя к конверсионному действию, то Турбо-страницы — плохая идея.
Сравнительная таблица мобильных технологий
Как видно из таблицы, адаптивная мобильная версия — самый удобный вариант для продвижения сайта. В отличие от остальных способов реализации, он дольше загружается, но это во многом зависит от ровности рук разработчика. И тут еще вопрос, насколько дольше. Потому что иногда разница измеряется в долях секунды, а значит, этот «недостаток» — несущественный.
ТОП-10 ошибок в оптимизации сайта под мобильный поиск
Если трафик с мобильных устройств минимальный, а разница в позициях по сравнению с десктопом колоссальная, это признаки ошибок допущенных при оптимизации. Мы собрали самые частые из них, чтобы вы могли провести экспресс аудит и быстро понять, что не так с вашей мобильной версией, а также решить, что с этим делать. Ошибки расположены в порядке убывания, от самых критичных до наименее значимых.
Метатеги на мобильной версии отсутствуют или не совпадают с десктопной
Выявляем нестыковки вручную или при помощи программы Screaming Frog SEO Spider, и приводим все метатеги в соответствие.
Для снятия показателей с десктопной версии вбиваем URL-сайта и нажимаем «Start». Полученную информацию выгружаем в Excel для дальнейшей работы. Чтобы получить данные от мобильного робота, находим в главном меню «Configuration», в выпадающем списке выбираем «User-agent»:
Для снятия показателей с десктопной версии вбиваем URL-сайта и нажимаем «Start». Полученную информацию выгружаем в Excel для дальнейшей работы. Чтобы получить данные от мобильного робота, находим в главном меню «Configuration», в выпадающем списке выбираем «User-agent»:
В открывшемся окне, в поле Preset User-agent выбираем Googlebot (Smartphone):
В зависимости от версии Screaming Frog это опция может немного по-другому называться, Googlebot Mobile или Googlebot for phone device и т. д. — но смысл тот же. Выгружаем информацию в Excel, сравниваем две полученные таблицы, приводим теги к эквивалентному виду.
Неправильная переадресация
Проблема характерная для мобильной версии на отдельном домене. При заходе с мобильного устройства, пользователь все равно попадает на десктопную версию сразу, либо после внутреннего перехода на другую страницу. Это свидетельствует о неправильно настроенном редиректе:
● Переадресация должна быть настроена с каждой десктопной страницы на каждую соответствующую ей мобильную. Часто разработчик прописывает редирект только на главную — этого недостаточно;
● Переадресация настроена не через 302-редирект, а с другим кодом.
● Переадресация должна быть настроена с каждой десктопной страницы на каждую соответствующую ей мобильную. Часто разработчик прописывает редирект только на главную — этого недостаточно;
● Переадресация настроена не через 302-редирект, а с другим кодом.
Горизонтальный скролл
Наличие горизонтального скролла — это сигнал для поискового робота, что страница не оптимизирована для мобильных устройств. Найдите, откуда берется горизонтальная прокрутка, обращайте внимание на сложные элементы дизайна, большие таблицы, продумайте адаптив для них, они обычно требуют более креативного подхода.
Обязательно проверьте корректность работы тега viewport, как было указано выше.
Обязательно проверьте корректность работы тега viewport, как было указано выше.
Всплывающие окна и виджеты
Всплывающее окошко, которое занимает 5% экрана на десктопе, может отжать полэкрана на мобильном устройстве. Когда устанавливаете какой-то сторонний виджет на сайт, или продумываете поп-андеры, не забывайте тестировать их поведение на мобильных устройствах. Откажитесь от всплывающих окон, которые занимают более 5−15% экрана телефона.
Мелкие элементы и текст
Проверяя готовый сайт на мобилопригодность, подключите к тестированию своего дядюшку с огромными толстыми пальцами. Если он может безошибочно попасть по всем кнопкам и ссылкам, не зацепив по пути рядом стоящие элементы — значит мобильная версия сверстана хорошо, с соблюдением удобных отступов, межстрочных интервалов, достаточных размеров кликабельных элементов.
Неоптимизированные формы
Максимально упрощаем формы. Наибольший процент отказов на мобильных устройствах фиксируется в момент открытия формы заказа. Если пользователь видит, что нужно заполнить десяток полей, которые черт знает как подписаны, напечатанный текст в них не вмещается, то покидание сайта — это единственный логичный исход.
Низкая скорость загрузки
Проверяйте скорость загрузки, следуйте рекомендациям PageSpeed Insights, чтобы ускорить сайт. Если сайт грузится критически долго, воспользуйтесь AMP и Турбо-страницами.
Невоспроизводимый контент
Используйте технологии HTML5 для анимации и встраивания видео. Чем больше на сайте невоспроизводимого контента, завязанного на Flash-технологии, тем меньше шансов на выход в ТОП.
Невозможность позвонить в 1 клик
Критерий, не оказывающий прямого влияния на SEO, но плотно завязанный на поведенческий фактор. Когда пользователь заходит на сайт со смартфона, он ожидает, что при клике на номер телефона, он автоматически наберется на устройстве и нужно будет нажать только на кнопку вызова. Если телефон сверстан картинкой в шапке сайта или текстом, вызова не произойдет. И человек должен быть ну очень заинтересован в покупке, чтобы найти где-то листочек и ручку, записать ваш номер с экрана телефона, а потом с бумажки набрать его вручную и позвонить. Чтобы не доставлять такие неудобства, пропишите ссылку на номер телефона:
<a href="tel:+79848885154">+79848885154</a>
Функциональные элементы, работающие по наведению
В отличие от десктопа, где есть курсор мыши, которым можно навестись на элемент, в мобильных устройствах как такого курсора нет. При нажатии пальцем происходит не наведение, а сразу клик. Поэтому при разработке адаптивной версии, нужно продумать, как будут себя вести элементы дизайна, которые в десктопе работают по наведению, например, выпадающие пункты меню, различные подсказки, увеличение фото в интернет-магазине по типу лупы.
Оптимизируя сайт под мобильный поиск, можно существенно повысить трафик. И если сейчас процент мобильных пользователей у вас небольшой, возможно это как раз из-за ошибок в мобильной версии.
Оптимизируя сайт под мобильный поиск, можно существенно повысить трафик. И если сейчас процент мобильных пользователей у вас небольшой, возможно это как раз из-за ошибок в мобильной версии.
Автор статьи
Вероника Юдина
Руководитель SEO
11.10.2021
Доверьте разработку сайта профессионалам!
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!
Подпишись, чтобы быть в курсе!
Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
Смотрите также
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.