Как адаптировать сайт под мобильные устройства?

24.06.2016
Новые алгоритмы поисковых систем отдают предпочтение мобильно-адаптированным сайтам, что ставит ряд новых задач для СЕО-специалистов. В этой статье мы расскажем о важных нюансах, которые стоит учитывать при разработке мобильного варианта сайта.

Рекомендации:

1. Не советуем для файлов мобильной версии создавать отдельную папку в каталоге директории, поисковые роботы могут ее некорректно обработать.


2. Если вы создаете новый поддомен, то в названии лучше выбрать традиционно используемый вариант – m.site.ru. Это интуитивно понятно пользователям и хорошо воспринимается поисковыми роботами, потому что указывает на очевидную связь с основным сайтом.


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


4. Подготовка мобильной версии – не только техническая задача. Контент сайта зачастую нуждается в специальной адаптации для пользователей мобильных платформ.


5. Воспользуйтесь сервисом Яндекс.Вебмастер, чтобы проверить на ошибки мобильный сайт.


Распространенные ошибки:

1. Отсутствие метатега "viewport"

Метатег "viewport" указывает мобильному браузеру на наличие адаптивной верстки, и если он отсутствует, следует проверить его местонахождение в коде – по правилам HTML он должен располагаться в части <head>.


2. Появление горизонтального скроллинга.

Это может произойти, если ширина веб-страницы больше требуемого размера. Стоит ориентироваться на разрешение «320 px», оно наиболее распространено среди моделей смартфонов.

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

Рекомендуем также не устанавливать определенное значение ширины девайса, а указывать динамическую область просмотра, чтобы избежать горизонтального скроллинга. <meta name="viewport" content="width=device-width, initial-scale=1">


3. Слишком мелкий шрифт

Также может быть вследствие слишком широкого размера страницы. В этом случае нужно корректировать либо ширину, доведя ее до нужного размера, либо сам шрифт до читаемого размера.


4. Некорректное отображение видео-элементов

Большинство мобильных браузеров плохо не поддерживают Flash-элементы, отображая их некорректно или в формате HTML5, например форматы Silverlight, Applet, Flash, поэтому от них лучше отказаться.





Все статьи