Оптимизация сайта под мобильные устройства

Фото отсутствует

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

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

Содержание:

  1.  Кому уже сейчас полезно оптимизировать сайт под мобильные гаджеты
  2. Как осуществляется проверка оптимизации для мобильных устройств
  3. Способы оптимизации

Кому уже сейчас полезно оптимизировать сайт под мобильные гаджеты

Оптимизация сайта для мобильных

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

Прямые мотивации к mobil-оптимизации:

  • Ваш мобильный трафик достиг 12%, и конкурентные ресурсы активно перестраиваются.
  • Даже если конкуренты спят, это не повод расслабляться, а реальная возможность их обогнать – адаптируйтесь.
  • Вы наблюдаете стабильный прирост своего mobil-трафика, а также истории ваших ключевых запросов – не теряйте время.

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

Как осуществляется проверка оптимизации для мобильных устройств

Оптимизации для мобильных устройств

Возьмем, для примера, поисковую систему Гугл. Она гоняет контент по пяти критериям, набавляя баллы за уверенное прохождение каждого из них.

Нам тоже приходится их проверять, а именно:

  1. Конфигурацию визуализации. Размещение смотрового окна внутри страницы даёт возможность браузеру держать на контроле ширину и масштаб контента, касаемо разных мобильных устройств.
  2. Чёткость шрифта. Она подбирается в зависимости от выбранного гаджета. При этом размер шрифта масштабируется, исходя из базового.
  3. Отсутствие таких плагинов, как Флэш, Джава, Сильверлайт. В гаджетном программном пространстве они, мягко сказать, неудобны. Лучше отдать предпочтение html5 или другим родным технологиям.
  4. Размер транслируемого контента. Он должен быть сопоставлен с предельными возможностями гаждета и полностью отображаться без вертикальной и горизонтальной подгонки страницы.
  5. Юзерное удобство отображающихся на сенсорном экране ссылок и клик-кнопок. Мелкий формат значительно затрудняет их использование.

Время загрузки контента приводится к оптимальному с помощью ресурса Google’s PageSpeed Insights.

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

Способы оптимизации

Способ оптимизации для мобильных устройств

Учитываем комплексно такие элементы, как:

  1. Ширина страницы, отображаемой в мобильном браузере. Масштаб и допуски на увеличение устанавливаются при первичной загрузке с помощью html-тега meta viewport. Его сервис также позволяет полностью снимать увеличение.
  2. Стилистика. Изменить стили по точкам преломления позволяет тег media queries. Все компоненты основного ресурса традиционного сайта удобно «раскладываются» на мобильный экран. Media queries также помогает добавлять мобильные стили, моделируя формат в зависимости от пиксельной плотности гаджета и ширины его экрана.
  3. Modernizr. Полезный java-скрипт выявляет возможности вашего браузера. Каждая поисковая программа имеет индивидуальную совместимость. Следовательно, оптимизация для мобильных устройств различной ПО-структуры имеет свои нюансы. Например, удобный функционал css3 или html5 поддерживают не все устройства. Сервис Modernizr позволяет сделать запасную версию сайта на устаревшем браузере.
  4. Сенсорика. Плагин TouchSwipe поддерживает сенсорный функционал и частые жесты пользователя: проведение, увеличение, подкрутку, щипок. Безусловно, важный сервис.
  5. Иконки в iOS. Это первое, что мы увидим разблокируя свой айфон (айпад). Помимо приложений в системе появляются иконки сайтов, добавленных функцией «домой». Оптимизатор может вносить и удалять личную информацию по своему усмотрению, создавая уникальную канву ресурса.
  6. Экранная заставка. Опять первое, что видим, запуская приложение. Экран заставки отобразит для пользователя загруженные на текущий момент приложения. Используйте заставки в рекламных целях, не скупитесь на дизайн.
  7. Иконки Windows 8 (RT). Программный сервис открывает возможность добавлять собственные блоки в пин-иконы в режиме «домой». Для этого используйте специальные мета-теги для оформления ячейки: цветовой msapplication-TileColor и графический msapplication-TileImage. Можно самостоятельно генерировать аналогичные мета-теги на сервисе Build My Pinned Site.

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

Стратегия mobile-first– расстановка приоритетов.

Дав добро на индексацию mobile-first, вы даёте Гуглу установку индексировать первостепенно mobile-версию контента, и при ранжировании опираться именно на неё. Таким образом, вы можете отслеживать все гостевые посещения, исходящие от Smartphone Googlebot, наблюдать их прирост, а заодно автоматически кэшировать свои мобильные странички.

При отсутствии приоритета «френдли-мобил» поисковые роботы включают в поиск привычную десктопную индексацию. При этом ресурс конкурентов, успевших оптимизировать сайт для смартфонов по версии mobile-first, чаще всего оказывается выше вашего по рангу.

Чтобы провести подобную оптимизацию, требуется комплексное вмешательство:

  • в контент, в структуру данных;
  • в мета-параметры (в том числе социальные);
  • в Hreflang-атрибут;
  • в XML Sitemap и робот-программу robots.txt;
  • в ёмкость сервера и теги переключения.

Придётся подтвердить обе версии «десктоп+мобил» на Search Console, а при настройке приложений на десктоп-сайте подтвердить мобил-версию на AppIndexing.

Адаптация сайта под мобильные устройства позволяет продвигаться вперёд в мире стремительно меняющейся информации и максимально эффективно использовать её в своих целях. Задумайтесь, не пора ли сделать свой контент передовым и востребованным. Идём в ногу со временем!



Реклама SEO-оптимизация Разработка Конверсия Юзабилити Аналитика
Наверх