SEO

Мобильная оптимизация сайта

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

Зачем нужна мобильная оптимизация

Обычный веб-сайт одинаково выводится на устройствах с различным расширением экрана, но элегантным может выглядеть лишь на компьютере. При попытке открыть ресурс на мобильном, вывод станет некорректным. В лучшем случае, это проявляется в мелком шрифте и необходимости скроллинга страницы(перемещения ее влево-вправо кнопками или пальцем на экране). В худшем — отдельные элементы перестанут функционировать. Большинство посетителей покидает такие страницы в течение 5 секунд. Такое поведение отрицательно влияет на ранжирование в выдаче Яндекс и Google.

В 2015 году российский поисковик Яндекс запустил алгоритм «Владивосток». При формировании выдачи он учитывает, пригоден ли веб-сайт для выведения на портативных устройствах. В Google пошли ещё дальше: создали исключительно мобильную выдачу, которая выводится даже на десктопе. С конца 2020 года американский поисковик выдает по запросу только ресурсы с мобильной адаптацией. Интернет-магазины, блоги, форумы сейчас рискуют остаться совсем без трафика, если не примут меры.

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

Что дает адаптивная версия веб-сайта

Адаптивность веб-сайта важна для поисковых систем и посетителей. Ресурс, адаптированный для просмотра на мобильных устройствах, решает сразу же пару задач:

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

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

Мобильная оптимизация веб-сайта - картинка

Способы мобильной оптимизации

Существуют различные способы адаптации, но лишь три из них в полном объеме решают задачу:

  1. Создание мобильных веб-сайтов.
  2. Разработка адаптивной версии.
  3. Создание и параметр динамического показа.

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

Мобильная версия веб-сайта

Суть заключается в создании копии веб-сайта на поддомене или индивидуальном шаблоне. При реализации способа важно правильно отладить связь между одинаковыми страницами в мобильной и десктопной версиях. В противном случае поисковые системы будут считать их дублями и исключат из выдачи. Задача решается связыванием адреса в панели вебмастеров Yandex и Google, либо указанием атрибутов rel=»alternate» и rel=»canonical».

Метод создания мобильной версии на индивидуальном поддомене наиболее сложный. Суть его в передаче на браузер посетителя различных версий HTML кода, а каждая страница будет иметь URL-адрес. Преимущество способа в быстрой загрузке интернет-ресурса.

Метод создания на отдельном шаблоне удачнее в плане SEO. При реализации такого способа URL остаются неизменным, но HTML код будет иным. Применение отдельного шаблона требует разработки и внедрения скрипта для распознавания типа устройства посетителя.

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

  1. Отключение всех Silverlight-плагинов.
  2. Отключение Flash-элементов.
  3. Отключение Java-апплетов.
  4. Поиск и отключение всех неактивных скриптов и плагинов, установленных в CMS.
  5. Адаптация типографики под маленькие экраны. Шрифты должны автоматически меняться в зависимости от диагонали экрана.
  6. Отладка форм обратной связи и возможностей заказа.
  7. Проверка кликабельности ссылок.
  8. Отключение всплывающих окон.
  9. Уменьшение размеров рекламных баннеров.

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

Адаптивная версия веб-сайта

Адаптивная версия характеризуется упрощенной реализацией. При запросе одной и той же страницы с различных гаджетов URL адрес и HTML программный код остаются такими же. Размеры блоков и элементов веб-сайта, их расположение определяются изменением свойств CSS.

Для реализации решения используется технология CSS3 Media Queries, которая помогает менять стиль элементов ресурса, подстраивая их под тип устройства входа. В результате общий вид и возможности остаются неизменными, меняется лишь их размер и расположение.

Мобильная оптимизация веб-сайта - картинкаКроме единого URL-адреса и HTML кода плюсами адаптивной верстки являются:

  • упрощенная в сравнении с мобильной версией оптимизация;
  • автоматическое скрытие ненужных элементов;
  • правильное вывод на смартфоне и планшете.

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

Адаптивная версия требует дополнительных параметров и работ по улучшению внешнего вида:

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

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

Динамический показ

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

Имеется ряд плюсов:

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

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

Дополнительные способы подготовки веб-сайта

Дополнительно к созданию адаптивной или мобильной версии желательно использовать вспомогательные технологии: AMP(Accelerated Mobile Pages) от Google и Яндекс.Турбо.

AMP больше подходит для внедрения в новостные порталы и блоги. Технология может отказаться от части пользовательского JS, дает функция убрать некоторые виджеты, часть HTML-тегов. В угоду более высокой скорости загрузки придется отказаться от блоков перелинковки, виджетов социальных сетей, форм обратной связи. Именно так что технология AMP не подходит для внедрения в интернет-магазины и веб-сайты коммерческой направленности. Яндекс технологию AMP не поддерживает. Страницы, ускоренные данным методом, можно легко закрывать от индексации ботов Яндекса при помощи robots.txt.

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

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

Методы проверки веб-сайта

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

  1. Google PageSpeed Insights. Показывает скорость загрузки и возможные пути улучшения. К примеру, сервис подскажет, какие JS могут замедлять скорость загрузки и есть ли неоптимизированные картинки. По результатам проверки можно выявить нужду в оптимизации JS кода под мобильные устройства.
  2. Google Mobile Friendly Test — сервис для проверки удобства веб-сайта. Необходимо ввести адрес страницы, после чего будет проведена оценка ее состояния и даны рекомендации по улучшению.
  3. Инструмент «Мобильные страницы» в Яндекс.Вебмастер. Может оценить качество оптимизации, проверить наличие скроллинга, Flash-элементов, наличие viewport и иные моменты.

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

Мобильная оптимизация веб-сайта - картинка

Подведем итоги

Сделать выбор между основными методами оптимизации веб-сайта под мобильные устройства просто:

  • Адаптивный дизайн проще настраивать, при его реализации не необходимо менять программный код. Считается лучшим вариантом для веб-сайтов различной направленности.
  • Мобильная версия ввиду особенностей больше подходит для крупных порталов, соцсетей и интернет-магазинов с многочисленной аудиторией.
  • Использование отдельного шаблона(динамический показ) сможет сохранить URL-адреса. Этот метод хорош для больших веб-ресурсов с множеством страниц, к примеру, для информационных порталов.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *