Мобильная оптимизация сайта: влияние на SEO и изменение интерфейса

Мобильный трафик

Экспансия смартфонов и расширение этого сегмента приводит к тому, что мобильная оптимизация сайта становится обязательным атрибутом. По результатам исследований GetDirect, уже в 2017 году, количество трафика с мобильных устройств перевалило за 50 процентов от общего значения Интернета.

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

Поэтому огромное количество популярных сайтов уже запустили свои мобильные версии, некоторые и вовсе выпустили приложения для iPhone и Android. Короче говоря, сегмент вырос и уже сейчас без мобильной версии ресурса уйти далеко не получится.

Вопросы SEO

Еще в 2015 году Google объявил о новых алгоритмах в работе своих поисковых систем и ботов. Согласно обращению компании, Гугл, при запросах с мобильных устройств будет отдавать предпочтения тем сайтам, которые имеют оптимизацию под устройство.

Влияние на SEO получается как косвенным, так и прямым:

• Прямое влияние выражается в измене алгоритмов работы. Теперь выдача генерируется исходя из удовлетворение посетителя в использовании мобильного экрана для просмотра страниц. Говоря проще: при запросе со смартфона, из двух равных сайтов, поисковик поставит выше того, кто оптимизирован.
• Косвенное влияние связано с факторами посещаемости и поведенческими аспектами. Пользователь, зашедший на неподготовленный сайт с телефона, быстро его покидает, отдавая предпочтение конкуренту с оптимизацией. В итоге, сайт будет терять позиции по поведенческому уравнению, в том числе и при просмотре с компьютера или ноутбука. Этот фактор губит любую СЕО — кампанию.

Что входит в оптимизацию?

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

Видимая часть выглядит следующим образом:

• Изменяется типография текста. Статья отображает более крупными буквами, с применением адаптированного шрифта, изменяются интервалы между строками, пробелы. В общем, текст заполняет экран, но не теряет в читаемости.
• Изменяются кнопки сайта. Они становятся крупнее, а главное — удалены друг от друга. Пользователь должен без каких-либо проблем с первого раза нажимать на нужную ему кнопку.
• Меняются изображения на ресурсе. Они становятся меньше по разрешению. Потеря качества не заметная для зрителя с небольшого экрана. Сюда же входят любые иконки, кнопки.
• Экономится трафик пользователя. Обмен между сервером и устройством становится меньше. Некоторые элементы не прогружаются без соответствующей команды.
• Изменяется общий дизайн проекта. Он становится более аскетичным. Это вопросы юзабилити. Элементы должны находится в доступности от пальца и не перекрывать друг друга.
• Техническая модернизация. К примеру, платежные сервисы, которые высылают код в виде СМС, получают возможность автоматически прочитывать этот самый код из сообщения, без помощи клиента. Сюда же входит интеграция с камерой и приложениями.
• Поворачиваемость. Все вышеперечисленное должно сохранять дизайн и функционал при повороте мобильного устройства и его экрана в горизонтальное положение.

Проверка портала

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

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

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

Варианты решения

Разные сайты применяют разные модели для оптимизации своих порталов под нужды смартфонов. Популярных решения четыре:

• Создание полноценной мобильной версии. Заново пишется страница, которая переносится на поддомен. Яркие примеры — m.vk.com, или mobile.twitter.com. Здесь важно, чтобы работал умный плагин, способный распознать коннект со смартфоном и автоматические перенести пользователя на м-версию.
• Настройка уже имеющейся постройки под низкое разрешение. Здесь также не обойтись без помощи программистов. Дизайн и типографика обновляются так, чтобы хорошо смотреться как на смартфоне, так и на экране полноценного компьютера.
• Создание приложения. Пишется приложения, которое несет в себе весь функционал сайта. Затем, на сайте дается ссылка на его скачивание. Опять таки, Вконтакте будет хорошим примером. Этот вариант популярен среди банковских ресурсов, служб такси, доставки продуктов и социальных сетей.
• Установка плагина. Этот вариант используется в системах построения проектов. Ставится специальное приложение, которое автоматически модернизирует интерфейс при коннекте с телефона. Используется в Tilda, WordPress и других конструкторах.

Плагины для WordPress

Системы постройки интернет-ресурсов, вроде ВордПресс, довольно быстро обзавелись собственными плагинами, которые помогают пользователям быстро привести свой проект в должный уровень соответствия.

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

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

iThemes, Duda Builder

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

Имеется конструктор для создания собственных тем. Причем эти темы вы можете распределить для отдельных устройств. С планшета человек увидит одну версию, с телефона другую. Есть платная расширенная версия с другими «примочками».

Duda Mobile Webstie Builder (DMWB) — пакет для создания собственного м-дизайна. После установки попадаете в официальный графический редактор, где и воплощаете свои идеи и видение интерфейса. Бесплатная версия напичкана рекламой, также отсутствует возможность доменной привязки. Так что лучше оплатить услуги. Но протестировать можно и free-version.

Any Mobile Theme Switcher, Mobile Smart

Any Switcher — простой плагин, но имеет все функции вышеописанных образцов. Одна из самых ярких, это возможность создания сразу нескольких тем. Работает это так: вы пишите тему в трех вариациях, для компьютера, планшета и смартфона. При коннекте устройства, плагин сам определит, какую тему установить.

Для компьютерных версий вы можете написать сложную и яркую конструкцию, для мобилки — простую с экономией трафика. Также темы можно распределить среди пользователей определенных операционных систем или браузеров.

Для человека, зашедшего с Айфона, ваш проект будет выглядеть по-другому, нежели для того, кто использует Opera Mini на Андроид.

Mobile Smart также позволит использовать креатив и создавать темы. Но его главное преимущество — возможность подшивки интерфейса на поддомен, вроде m.site.biz.

Резюме

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

• Интерфейс пригоден для низких разрешений. Используются формат 760 или 1280 пикселей.
• Кнопки в дизайне достаточно крупные и удалены друг от друга, исключая возможность ошибки.
• Дизайн грузится быстро и не расходует большое количество трафика. Любые видео или gif-файлы не запускаются автоматически, как это бывает на десктопе.
• Имеется интеграция с возможными приложениями, будь то камера, социальные сети или мессенджеры.
• По клику на указанные номера, запускается телефон и набор номера. Особенно если у вас какой-то сервис, вроде такси или доставки пиццы.
• Типографика соблюдена. Текст виден и читаем.
• Ключи и семантика в наличии как в полном, так и в m-дизайне. При этом они не различаются, сохраняя структуру.
• Файл robots.txt находится ботом и подходит под его критерии.
• Проект работает и растет в выдаче.

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