Советы Платона Щукина: как подружить сайт с мобильными устройствами

Яндекс. Советы Платона Щукина. Как проверить сайт на мобилопригодность

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

 

Каждый первый обладатель смартфона неоднократно искал информацию в интернет-магазине, на страницах портала или в личном блоге. Но некоторые сайты малопригодны для просмотра на экранах мобильных устройств. Стремясь помочь пользователям Яндекс пошел проторенной тропой. А Google уже сделал это ранее. С декабря прошлого года отечественный поисковик помечает дружественные страницы значком «Мобильная версия». В феврале 2016 запущен алгоритм «Владивосток». Он учитывает подобные страницы при формировании приоритетной поисковой выдачи для носимых устройств.

 

На основе выборки самых распространенных вопросов об оптимизации сайта Платон Щукин подготовил список дельных советов для веб-мастеров, владельцев корпоративных сайтов и частных веб-ресурсов.

 

 

Сайты бывают разные

 

Пользователям доступны следующие типы веб-ресурсов:

  • С мобильной версией – веб-сайт на отдельном поддомене (m.site.ru).
  • С адаптивной версткой – интернет-ресурс с автоматически подстраиваемой версткой под размер экрана карманного гаджета.
  • С динамической версткой – для каждого устройства сервер отдаёт интернет-страницы подходящего размера.

 

Перечисленные типы веб-ресурсов одинаков положительно воспринимаются поисковыми роботами независимо от типа верстки или версии сайта. Но Платон Щукин дополнительно заостряет внимание веб-мастеров на следующих моментах:

  1. Необходимо отказаться от мобильной версии сайта, размещенной в отдельной директории (папке). ЯндексБот может обработать её некорректно.
  2. Для мобильной версии с поддоменом будет в приоритете лаконичное, интуитивно-понятное доменное имя, которое корректным образом связывает десктопную и мобильную версию (m.site.ru или для региональных поддоменов m.ekb.site.ru).
  3. При использовании редиректа (перенаправление пользователей с десктопной версии на мобильную), следует настроить перенаправление посетителей на конкретную веб-страницу.

 

 

Как обойтись без ошибок при создании мобильной версии

 

В процессе создания сайта применяется большое количество плагинов (расширений) и специальных сервисов. Для тех, кто ищет пути полегче и проще, онлайн-конструкторы предлагают самостоятельно сделать мобильный сайт. Но даже ультрасовременные технологии не могут обеспечить мобилопригодность веб-ресурса. Для этого заказывают оригинальный контент – король текстов и статей. При формировании содержимого интернет-ресурса следует отдавать предпочтение полезной информации, востребованной целевой аудиторией. Причем тексты для мобильной версии могут отличаться по содержанию и размеру от вариантов контента для десктопных устройств. Это допустимо и не является нарушением требований поисковых систем. После создания версии для носимых устройств будет полезно убедиться, что контент удобен для просмотра на экранах смартфонов с любым размером, даже с разрешением 320 пикселей.

 

 

Проверка веб-сайта по критериям мобилопригодности

 

Чтобы проверить собственный корпоративный сайт на предмет дружественности к мобильным страницам используйте инструмент «Проверка мобильных страниц» (представлен в бета-версии онлайн-сервиса Яндекс.Вебмастер). Он поможет найти такие ошибки, как наличие полосы для прокрутки страницы по горизонтали, большое количество текста с мелким шрифтом (менее 12 шрифта), проблемы с мета-тегом «viewport» и видеоролики, недоступные взору читателей.

 

 

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

 

 

Работа над ошибками

 

При наличии проблем обновленный онлайн-сервис Яндекс.Вебмастер в соответствующем разделе показывает обнаруженные недочёты и замечания:

  • Горизонтальная прокрутка. Появление горизонтальной полосы для прокрутки страницы слева направо и наоборот, ухудшает мобильное юзабилити сайта и затрудняет потребление контента пользователями. Эта проблема возникает для тех страниц, ширина которых превышает рекомендованные значения для смартфонов. Необходимо проверить размеры встроенных в контент изображений и логотипов, а также элементов форматирования текста (отступы и др.), которые влияют на конечный размер страницы по ширине.
  • Мелковатый текст. Одна из причин показа мелкого текста – значительная ширина страниц в десктопного варианте. Например, текст имеет 12-й размер шрифта, а ширина веб-страницы – 960 px. В этом случае браузер наполовину уменьшит страницу и сделает шрифт ещё мельче. Как избежать этого? Увеличьте шрифт с учётом масштабирования или приведите ширину интернет-страницы к рекомендуемым значениям.
  • Мета-тег «viewport». Благодаря мета-тегу «viewport» веб-браузер смартфона понимает, что ресурс обладает адаптивной вёрсткой. Если в результате проверки установлено, что этот мета-тег напрочь отсутствует, следует убедиться, что согласно стандартам HTML «viewport» прописан в. Также рекомендуется настроить динамическую область для просмотра текстового контента в зависимости от размеров экрана, чтобы в конечном итоге обойтись без прокрутки по горизонтали.

 

 

Мета-тег «viewport» для мобильных веб-страниц

 

 

  • Flash-элементы. Дабы привлечь внимание пользователей на многих сайтах часть контента представлена в форме видеороликов. Нужно самостоятельно проверить, что видео сделано в формате HTML5 и доступно для просмотра на экранах смартфонов и других гаджетов. Видеоконтент в иных форматах (Applet, Flash, Silverlight) не воспроизводится функционалом мобильных браузеров.

 

В завершении Платон Щукин поделился темой для новой статьи. В следующий раз веб-мастера познакомятся с рекомендациями по индексированию мобильной версии поддоменного веб-сайта.

 

WM+

 

 

Новости поисковых систем

 

 

 

© WaterMillSky 2012-2016