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

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

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

Оптимизация веб-ресурса под мобильные устройства (МУ) — о чём речь?

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

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

Почему мобильная оптимизация так необходима

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

А ведь наше предложение было самым выгодным — проверяли. Видимо он просто глупый. Или мы, раз его упустили?

Не гадать, а оптимизировать! Чтобы досадные потери не становились нормой, надо индексировать свои странички с приоритетом mobile-first indexing. В последние 3 года практически все сайты вводят его в ранжирование. Ведь плохая совместимость с мобильным трафиком ведёт к низкой выдаче в поисковике и потере огромного количества числа возможных подписчиков.

Настройка на смартфоны сегодня является неотъемлемой частью общей SEO-оптимизации.

Выбираем стратегию

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

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

1. Создание поддомена или одиночного шаблона  

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

Плюс методики: быстрота загрузки.

Минусы методики:

• Трудоёмкая реализация;
• Необходимость синхронизации версий и смены URL.

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

Плюс: статичность адреса, при которой отпадает необходимость SEO-оптимизации версий.

Минусы:

• Для распознавания типа юзерского девайса придётся создать скрипт.
• Дизайн десктопного варианта будет слегка отличаться от мобильного.

2. Адаптивный дизайн

Эта стратегия не требует отдельной оптимизации сайта для десктопа и мобильника. Запросы с гаждета поступают на единый сервер, откуда приходит одинаковый код HTML. Специальный инструмент CSS подстраивает функционал, контент, дизайн под экранное разрешение любого МУ.

Плюсы:

• Единый URL независимо от версии ресурс.
• Нет лишних элементов.
• Корректные демонстрационные качества на всех мобильниках.

Минусы: при оптимизации под МУ тексты приходится сокращать.

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

3. Динамическая демонстрация

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

Плюсы:

• Высокая скорость загрузки.
• Возможность размещения разного контента на стационарном компьютере и мобильнике.

Минусы:

• Большая трудоёмкость.
• Необходимость специальных навыков для настройки.
• Некорректная работа на некоторых МУ, а именно, ошибки при загрузке дизайна на экраны с нестандартной диагональю.

4. AMP-разметка. Ускоренные мобильные странички

«Мобилизацию» сайта можно осуществить путём внедрения особой страничной разметки. Методика Accelerated Mobile Pages поднимает веб-ресурс в верхнюю позицию поисковой выдачи Гугла. С помощью умной нумерации открывается дубликат контента и создаётся AMP-письмо с каруселью.

5. Schema.org

Этот семантический разметочный стандарт ориентирован на конкретику в ответах поисковика на пользовательские вопросы. Вместе с тем он избавляет держателей веб-ресурсов от трат на рекламу PPC. Чтобы ввести разметку Schema.org на сайте с платформы WordPress, необходимо подключить плагин Schema App Structured Data.  

6. Ликвидация Flash

Одна из самых востребованных технологий Adobe Flash, появившаяся на фоне стремительного развития интернет-сетей, сильно перегружает рабочие сайты. Со временем пользователи отдали предпочтение более легковесным структурам. Мобильники плотно вошли в нашу жизнь, а для мобильной выдачи Adobe Flash ну совсем неудобен. Удалите его!

7. Сжатие изображений

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

В теме оптимизации изображений Всемогущий Гугл советует:

• оперировать относительными размерами фото;
• использовать встроенные изображения;
• для МУ с высоким разрешением прогонять фотографии через скринсет.

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

Видео тоже должны транслироваться красиво.

Для корректной вёрстки можно и нужно:

• применять каналы videomedia, а также пользовательский «корневой дивизион» управления, в том числе дочерний;
• предусмотреть командные кнопки для воспроизведения и паузы;
• использовать предусмотренные Гуглом эскизные форматы;
• проверить возможность индексации видео;
• пользоваться файлами sitemap для video;
• применять легко распознаваемые теги HTML-теги.

9. Тестовая оптимизация

SEO-аудит предусматривает диагностику сайтов на разных операционных системах и мобильных устройствах. По её результатам можно судить о совместимости ресурса с огромным количеством площадок и дисплеев.

Для проверки коннекта существует целый ряд полезных программ:

• Stack-браузер;
• поисковая консоль Google;
• PageSpeed Insights;
• инспектора Фаерфокса или Хрома;
• Мобил Френдли Тест от Гугла;
• КроссБраузер Тестинг;
• платформа web.dev.

10. Привязка мобильной версии к CMS

Подключив свой мобильник к дружественному интерфейсу этой платформы, Вы почувствуете, насколько легче стало работать с сайтом. Система WordPress признана самой популярной в мире версией среди CMS. Её плагин WPtouch для смартфонов прост в настройке, понятен и удобен.

А что скорость? Её надо контролировать постоянно!

Медленная загрузка контента чревата большим количеством пользовательских отказов. Задача оптимизации — минимизировать количество плагинов и размеры HTML-тегов. Для этих целей воспользуйтесь приложением minifycode.com.

Всплывающие окна? Удаляем!

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

Планшеты? Они тоже существуют!

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

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

Что в итоге?

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

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

И напоследок, помощь грамотного маркетолога всегда у Вас под боком!