SEO-аналитика для мобильных: гайд по главным точкам оптимизации
Значительная часть трафика на сайт приходит с мобайла – если не уделять внимания мобильной оптимизации, проект потеряет часть прибыли: пользователи просто уйдут к конкурентам, на чей сайт гораздо удобнее заходить с телефона.
Сейчас редко встретишь сайт, у которого вообще нет мобильной версии. На большинстве проектов, которые заходят к нам на продвижение, как правило, какая-то оптимизация выполнена – у кого-то хуже, у кого-то – лучше. Причем проблемы не всегда видно невооруженным взглядом – бывает, что с мобильного устройства сайт открывается нормально, а поисковый робот выявляет ошибки в верстке или коде и понижает сайт в выдаче.
В этой статье мы рассмотрим восемь точек оптимизации сайта для мобильного. На самом деле, их может быть больше, но остановимся на основных – тех, что чаще всего стопорят развитие сайта. Как и всегда, подкрепим слова примерами из практики.
Проведите первичную проверку, чтобы понять, нужна ли сайту мобильная оптимизация
Понять, есть ли серьезные проблемы с мобильной оптимизацией, можно, посмотрев на соотношение трафика мобайла и десктопа. Когда показатели по каким-либо из устройств сильно отличаются – это дает повод задуматься о возможных пробелах.
Для начала мы смотрим общий трафик, который приходит на сайт с мобайла и десктопа. Это легко сделать в Google Analytics и Яндекс.Метрике. В большинстве случаев на мобильные устройства приходится 50% и выше от общего объема трафика, но не всегда.
Если вы не знаете примерную норму трафика в вашей тематике, посмотрите на ближайших конкурентов. Это даст вам понимание, насколько ваша мобильная оптимизация эффективна. Для более правильной оценки уровень конкурентов должен соответствовать вашему. Если у вас интернет-магазин с доставкой в одном городе, нет смысла конкурировать со всероссийскими топами.
Когда собраны все данные, мы делаем вывод о том, в достаточном ли объеме заходят пользователи на мобильную версию сайта или трафик следует повышать. Например, если у конкурента соотношение мобайла и десктопа 70/30, а на вашем проекте 40/60, то вашему сайту требуется мобильная оптимизация.
Проверьте, нет ли ошибок в адаптивной верстке
Адаптивные версии сайта, в сравнении с десктопными, имеют упрощенный вид. То, что на компьютере выглядит нормально, на мобильном – громоздко. Именно поэтому на смартфонах крупные элементы становятся более компактными, а размер шрифта подстраивается под диагональ экрана.
Иногда в этой подстройке происходят ошибки. На одном из наших проектов с помощью сервиса Google Mobile Friendly Test мы выяснили, что поисковый робот видел на странице фильтрации большую полосу горизонтальной прокрутки, из-за которой остальные элементы и, самое главное, шрифт, сильно уменьшались.
При этом, когда мы открыли ту же страницу вручную с мобильного телефона, полоса прокрутки была едва заметной и не мешала выбирать товар – устройство самостоятельно масштабировало страницу до нормального вида.
Искажение масштаба Google считает неудобством для пользователей, поэтому эта страница теряла в ранжировании – поисковик считал ее не оптимизированной, несмотря на то, что по факту пользователи могли не заметить проблему.
Мы убрали полосу прокрутки, после чего все элементы стали загружаться корректно. Оптимизация способствовала улучшению ранжирования этой страницы в выдаче.
Посмотрите, все ли элементы сайта открыты для роботов
Индексирование элементов сайта – один из факторов его ранжирования. Сюда относятся файлы CSS, JavaScript, изображения, шрифты. Иными словами, поисковый робот должен видеть сайт так же, как его видит пользователь.
Иногда разработчики скрывают от индексации целые страницы или только скрипты, шрифты и стили. В первом случае поисковый робот не покажет сайт в выдаче из-за отсутствия информации. Во втором будет хуже ранжировать. При этом на мобильном устройстве в обоих случаях сайт будет отображаться корректно.
На одном из наших проектов у клиента была адаптивная верстка сайта. Мы провели ее диагностику в Google Search Console. На мобильном устройстве сайт отображался правильно, однако поисковый робот видел страницу без баннера, кнопок и фирменных шрифтов.
Отображение страниц с заблокированными ресурсами
Оказалось, что разработчики закрыли для индексации доступ к стилям и скриптам. Это повлияло на выдачу – так как робот не видел стили, он считал, что элементы на сайте не масштабируются под разную диагональ экрана, а, значит, такой сайт менее удобен и его можно хуже ранжировать.
Мы исправили недоработку, после чего поисковый робот начал видеть адаптивную верстку сайта должным образом – с баннером, кнопками и шрифтами. Он понял, что все элементы сайта будут подстраиваться под разную ширину экрана. После этого ранжирование сайта улучшилось.
Отображение страниц с не заблокированными ресурсами
Соберите UX-аналитику и выясните, удобен ли ваш сайт для пользователей
UX-аналитика показывает, как пользователи взаимодействуют с сайтом. В случае с мобильной версией человек может вести себя иначе – не так, как с десктопной. Как правило, у него меньше времени, поэтому есть потребность получить информацию быстрее.
Перед началом анализа мы ставим цели и задачи, затем проводим исследования и выдвигаем гипотезы, которые в дальнейшем подтверждаем или опровергаем.
Если подробнее, мы смотрим в Вебвизоре, с каких страниц происходит отток, а затем вручную открываем их и ищем узкие места. Нюансов много, вот основные:
1. Удобство просмотра.
Кегль текста меньше 14 плохо читается, а товар неудобно изучать, если фотографии обрезанные или мелкие. Например, на сайте ювелирных изделий фотографии украшений должны быть достаточно крупными для просмотра.
2. Интуитивно понятный дизайн.
Следует учитывать, что на десктопах пользователь без перелистывания видит много информации (заголовки, кнопки, изображения и т.д.). А дизайн телефона рассчитан на скроллинг, поэтому обычно блоки располагают вертикально – то есть одновременно видно меньше элементов.
Также на мобайле отсутствует курсор, но есть клики. И чтобы не загромождать пространство, например, на главной странице сайта, карточки товаров можно скрывать в кнопки разделов. При клике они будут открываться.
3. Возможность позвонить оператору.
Номера телефонов лучше делать кликабельными, чтобы пользователь мог легко нажать на него и совершить вызов.
Если скрываете контент на мобильной версии, делайте это правильно
Десктопная версия сайта содержит больше информации на странице, в то время как на той же странице мобильной версии часть информации скрывают – делают сайт более аккуратным и компактным. Чаще всего для этого применяют технологию Ajax.
Обычно новые данные загружаются одновременно с новой страницей на сайте, но с использованием Ajax это происходит не синхронно. Технология запрашивает у сервера недостающую информацию и добавляет ее на страницу. Сама страница при этом не перезагружается.
Этот вариант не самый лучший, т.к. скрытую таким образом информацию поисковик не видит вообще. Google индексирует почти все сайты с приоритетом на мобильный контент. И отсутствие важной информации может привести к потере в ранжировании.
Скрытие контента на странице допускается при условии, что он находится в HTML-коде документа и скрывается посредством стилей.
Мы предлагаем заменить Ajax на технологию CSS медиа-запросов. Отличие от первой состоит в том, что информация скрывается от глаз пользователя, но не от поискового робота. При этом скрытую информацию можно прочесть, нажав на связанную с ней кнопку.
CSS медиа-запросы позволяют скрывать текст с учетом диагонали экрана. На скрине ниже вы можете увидеть, как выглядит описание товара на широкой диагонали экрана (слева) и на экране поменьше (справа). Во втором случае текст скрылся под кнопкой, при нажатии на которую описание разворачивается.
Пользователь в любой момент может прочитать информацию, а поисковый робот – проиндексировать страницу.
Добейтесь оптимальной скорости загрузки страниц
Скорость загрузки страниц является важным фактором ранжирования, в особенности для Google. Оптимальным временем считается 2–3 сек.
Для сбора данных по разным устройствам и их сравнения мы пользуемся Google PageSpeed Insights. Инструмент предлагает проверить время загрузки первого контента, индекс скорости загрузки, время загрузки достаточной части контента и другие параметры. Также вы сможете определить, какие элементы страницы могут замедлять ее загрузку.
На одном из наших проектов в Google PageSpeed Insights низкие результаты были по 4 показателям из 6. Чтобы увеличить скорость сайта, мы поменяли конструктор верстки и переехали на новый хостинг. Это был первый этап нашей работы, но даже он помог существенно увеличить скорость загрузки.
Иногда лучше начинать с простых действий. Вот еще несколько идей, как ускорить загрузку страниц.
1. Конвертируйте и сжимайте изображения, чтобы сайт загружался быстрее.
Часто загрузку страницы стопорят тяжелые фотографии в каталоге и баннер на главной странице. В этом случае мы конвертируем изображения в AVIF-формат. При одинаковом качестве картинки ее вес в формате AVIF будет на 50% меньше, чем в jpg и на 30% меньше, чем вес в webp.
2. Используйте ускоренные страницы.
Ускоренные страницы загружаются в 3–4 раза быстрее стандартных адаптивных сайтов. Google для этого предлагает технологию AMP, а Яндекс – турбо-страницы.
Настройте перелинковку, чтобы удалить дубли страниц
Сейчас мобильную и десктопную версию сайта стараются делать на одном поддомене. Но на некоторых проектах их до сих пор разделяют – для мобильного адрес выглядит m.site.ru, для десктопа – site.ru. По факту клиент имеет два сайта, а, значит, поисковик их будет индексировать отдельно и хуже ранжировать из-за того, что контент на обеих версиях сайтах дублируется.
Для того чтобы сайты одного и того же проекта на разных поддоменах не конкурировали между собой в выдаче, мы настраиваем перелинковку – связываем десктопную версию сайта с мобильной. На каждой странице для компьютера размещаем тег link с атрибутом rel=«alternate», который будет указывать на соответствующую ей страницу мобильного сайта.
Параллельно с этим на каждой мобильной странице размещаем тег link с атрибутом rel=«canonical», указывающий на ее версию для компьютеров. Это исключает дублирование. Наличие дублей страниц мы проверяем в Яндекс.Вебмастере и Google Search Console.
В сухом остатке
Доля мобильного трафика растет и может превышать 50% от общего объема со всех устройств – естественно, игнорировать при таком раскладе этап мобильной оптимизации нельзя.
Как и при работе с десктопами, здесь требуется серьезная аналитика – техническая, контентная и поведенческая – но нужно учитывать, что специфика работы с мобильными устройствами и с десктопами разная.
В наших чек-листах более 150 пунктов для проверки и анализа, которые позволяют внести эффективные изменения на сайте, мотивировать аудиторию к выбору товаров и увеличить число конверсий. В следующих статьях мы продолжим делиться наблюдениями и наработками в сфере мобильной SEO-аналитики.
 |
Друзья, теперь вы можете поддержать SEOnews https://pay.cloudtips.ru/p/8828f772 Ваши донаты помогут нам развивать издание и дальше радовать вас полезным контентом. |
|
Оптимизация мобильной версии сайта: инструкция с примерами
Более 50% времени взрослый человек проводит в интернете. Огромное количество юзеров используют для интернет-серфинга мобильные устройства, дарящие автономность и комфорт. Поэтому неудивительно, что оптимизация сайта для мобильных устройств стала приоритетной задачей. Она необходима и информационным порталам, и коммерческим ресурсам. О том, как оптимизировать сайт под мобильные устройства, мы сейчас расскажем.
Виды мобильных сайтов
Изначально необходимо выбрать стратегию, которая будет использоваться для оптимизации мобильного сайта. Стоит ориентироваться на особенности бизнеса, состав целевой аудитории, прогнозируемое количество переходов, выделенный бюджет, сроки, позиции десктопной версии и другие факторы, от которых будет зависеть успешность проекта. Первый шаг заключается в выборе подходящей версии мобильного сайта, последние разделяют на 3 вида:
- мобильная версия с поддоменом. Речь идет об отдельном сайте, имеющем собственный созвучный поддомен;
- сайты с динамическим контентом. Десктопная и мобильная версии сайта будут иметь одинаковый адрес, однако разное наполнение. Мобильные версии лишены «пустого» контента, такого как реклама, ненужные тесты, разнообразные слайдеры и прочие элементы, замедляющие загрузку и тормозящие работу страниц;
- адаптивные сайты. Контент и адрес такой же, как и у десктопной версии. Если пользователь посещает ресурс с мобильного устройства, то происходит адаптация под конкретные форматы: перестройка блоков, сужение слайдеров, изменение меню, иное.
Каждый вид имеет сильные и слабые стороны, выделить лучший невозможно. При выборе подходящего вида стоит оглядываться на конкурентов, предпочтения пользователей, задачи, которые должна решать мобильная версия, другие факторы. Однако большое количество экспертов, в том числе и представители Google, склоняются именно к адаптивной верстке.
Читайте также:
С чего начать оптимизацию мобильного сайта?
Как бы странно это ни звучало, но оптимизацию необходимо начинать с улучшения десктопной версии:
- составление релевантных метатегов;
- оптимизация старого или подготовка нового контента;
- выполнение микроразметки;
- оптимизация изображений;
- устранение технических ошибок;
- перелинковка, другие работы.
Если речь идет о мобильной версии на отдельном поддомене, то придется выполнять весь процесс оптимизации повторно, используя ту же схему, которая применялась для десктопа. Однако под мобильные версии подбираются короткие запросы из-за того, что на смартфонах или планшетах не слишком удобно печатать, поэтому пользователи в этом вопросе достаточно аскетичны. Нижеприведенная инструкция поможет оптимизировать мобильную версию, а также избежать распространенных ошибок.
Настройка рассматриваемого файла выполняется индивидуально для каждого сайта, нередко для этой работы используется Google Mobile-friendly. Файл помогает поисковым роботам понять, какие страницы стоит сканировать. Он защищает от сканирования страницы, содержащие личную информацию о пользователях, зеркала и другие, неподлежащие индексированию. Неправильная настройка повлечет за собой ошибки в обработке данных. В первую очередь стоит проверить, не скрывает ли файл доступ к изображениям, а также js и css.
Скорость загрузки страниц
В рамках адаптации сайта под мобильные устройства стоит провести проверку скорости загрузки страниц. Медленная загрузка может оттолкнуть посетителей, ведь они покидают сайт, если страница не отобразилась через 3-5 секунд после выполнения перехода. Для решения этой задачи можно использовать инструмент PageSpeed Insights от Google. После выполнения проверки вы можете увидеть следующие оценки:
- 90-100 баллов – отличный результат;
- 50-90 баллов – средний результат;
- менее 50 баллов – негативный результат, свидетельствующий о том, что страницы загружаются достаточно медленно.
Вместе с оценкой вы получите полезные рекомендации от Google, которые можно применять для повышения скорости загрузки. Придерживайтесь их, чтобы устранить проблему.
Тег viewport
Рекомендация актуальна для сайтов с адаптивной версткой. Необходимо проверить, прописан ли метатег viewport в коде страницы. Он подсказывает бразеру, что формат страницы нужно изменить под тип устройства. Если тег не будет вписан в код, то пользователи увидят десктопную версию страницы, но в уменьшенном варианте. Это неудобно и некрасиво, возможны баги во время коммуникации пользователя с интерфейсом.
HTTP-заголовок Vary
Эта рекомендация ориентирована на динамический контент, на наличие которого стоит указать поисковым роботам. Сделать это можно с помощью HTTP-заголовка Vary. Поисковые роботы Google будут производить сканирование контента для мобильных устройств, к сожалению, у системы «Яндекс» таких роботов пока нет. Просмотр HTTP-заголовки выполняется с помощью функции «Проверка ответа сервера», которую можно найти в «Яндекс.Вебмастер».
Настройка переадресации
Переадресация необходима сайтам, которые имеют мобильную версию на поддомене. Если пользователь использует для серфинга мобильное устройство, то он в автоматическом режиме будет перенаправлен с десктопа на m.site.ru. Перенаправление происходит на конкретную страницу.
Тег alternate
Тег подается в форме , он необходим для того, чтобы поисковые роботы могли определить не только мобильную версию, но и языковые варианты. После этого пользователю предлагается оптимальный вид страницы, что зависит от условий перехода. При настройке необходимо помнить о том, что URL страниц должны быть указаны полностью и вместе с протоколами (http, https).
Например, есть сайт http://m.vesna.com, в этом случае тег будет выглядеть так:
Использование Apple touch icon
Apple-touch-icon. Png – изображение, которое будет использоваться в качестве закладки на домашнем экране мобильных устройств на операционной системе iOS (на macOS не распространяется).
Адаптация контента под ширину экрана
Контент, размещенный на странице, должен адаптироваться под ширину экрана. Пользователь не должен уменьшать или увеличивать страницу, наблюдать пустое пространство по бокам или горизонтальную прокрутку. Для оценки этого параметра можно использовать инструмент Google mobile-friendly. После проверки появится надпись, свидетельствующая о том, что страница оптимизирована или не оптимизирована под мобильные устройства. На базе полученной информации нужно будет принимать решение и исправлять ошибки, используя подсказки сервиса.
Шрифт, используемый для мобильной версии, должен быть удобочитаемым. Слишком маленький будет плохо заметен, слишком большой – растянется по экрану, обеспечивая некорректное отображение. Варианты шрифта можно тестировать, чтобы подобрать оптимальное и удобное решение.
Аналогично ситуация обстоит с элементами, на которые пользователь будет кликать. Они должны быть адаптированы не только под миниатюрный детский или женский палец, но и под большой мужской. Если для перехода или другого целевого действия нужно будет сделать много кликов, то это оттолкнет пользователя. Надписи на интерактивных элементах тоже должны быть удобочитаемыми.
Ссылки и расстояние между ними
Если ссылки будут расположены слишком близко друг к другу, то пользователю будет неудобно на них кликать. Все это обеспечит многократные пустые переходы, раздражение и, возможно, потерю потенциального клиента.
Миниатюрные картинки
Уменьшенные картинки используются при оптимизации мобильных сайтов с динамическим контентом, имеющими отдельный html-код. В этом случае обязательно нужно прописать ссылки на уменьшенные варианты изображений, иначе картинки будут отображаться некорректно. Пользователь точно не обрадуется, если на экране мобильного устройства появится растянутое изображение, имеющее ширину 1800 пикселей. Для мобильной версии с динамическим контентом достаточно картинки шириной 500-800 пикселей, которая имеет меньший вес и не повлечет за собой медленную загрузку страницы.
Удаление Flash
Мобильные устройства не поддерживают Flash, многие десктопные браузеры активно отказываются от этой технологии, а компания Adobe прекратит реализовать ее в текущем году. Поэтому Flash лучше не использовать на мобильных версиях.
Устранение лишнего контента
Экран компьютера или ноутбука более большой, чем экран смартфона или планшета, поэтому лишний контент необходимо спрятать. Например, можно убрать лишние картинки, описание статей и все то, что мешает корректному отображению и загрузке.
Больше пользы, меньше рекламы
Реклама – раздражающий фактор, особенно если речь идет о мобильных устройствах. Негативную реакцию стоит ожидать на рекламные объявления, размещенные между строками контента. Да, полностью искоренить рекламу не получится, однако сократить ее количество в мобильной версии можно и нужно.
Отказ от pop-up окон
Компания Google не слишком жалует всплывающие окна, которые мешают просматривать контент и обеспечивают нецелевые переходы на сайт рекламодателя. В это же время огромные баннеры, разворачивающиеся на весь экран, способны вывести из себя самого уравновешенного человека. Такой формат можно оставить в десктопной версии, но не в мобильной (предварительно изучите список разрешенных pop-up). Для проверки оптимизации сайта под мобильные устройства целесообразно использовать сервис search.google.com, который поможет собрать информацию и о технических, и о визуальных аспектах.
Читайте также:
На что еще стоит обратить внимание во время оптимизации сайта под мобильные устройства?
Во время оптимизации необходимо помнить о косвенных характеристиках, которые оказывают влияние на продвижение, удобство и глубину просмотра страниц:
- простая и удобная навигация. Все пункты меню должны хорошо просматриваться, а также быть доступными в мобильной версии сайта (в том числе и «хлебные крошки»). Удобная навигация поможет юзеру хорошо ориентироваться на сайте и быстро находить то, что его интересует;
- быстрый набор. Необходимо добавить ссылки с номеров телефонов, благодаря которым клиент сможет осуществить набор без ошибок, делая несколько кликов. Такая мелочь может оказать положительное влияние на рост количества обращений, особенно если речь идет о коммерческом ресурсе;
- местоположение. Многие пользователи не выключают на смартфонах и планшетах функцию, позволяющую определить местоположение. Наличие учета местоположения облегчит процесс оформления заказа, поиска ближайшего склада или магазина, выбора способа доставки. Конечно, предварительно пользователь дает разрешение на то, чтобы ресурс получил доступ к данным о его локации;
- возможность перейти на десктопную версию, что актуально для сайтов на поддомене. Возможно, юзер захочет работать не с мобильной, а с десктопной версией – это его право, которое нельзя отбирать. Обязательно добавьте ссылку, с помощью которой пользователь сможет осуществлять переходы между мобильным и десктопным форматами.
Можно ли вместо мобильной версии использовать приложение?
Некоторые компании отказываются от мобильных версий сайта в пользу приложений, ориентированных на операционные системы Windows Phone, Android, iOS и другие. Это удобно, ведь приложение обеспечивает корректную работу, может быть наделено уникальными функциями, которые в десктопе реализовать невозможно. Однако приложения требуют инвестиций, ведь каждая операционная система для мобильных устройств имеет индивидуальные технические характеристики.
Еще один нюанс – цепочка действий. Переходя на сайт из поисковой системы, клиент сразу попадает на мобильную версию, поэтому ему не придется выполнять дополнительные действия. Скачивание и установка приложения – более длительный процесс, который может отпугнуть пользователя. Поэтому лучше комбинировать возможности десктопа, приложения и мобильной версии сайта для достижения максимального результата. Приложения наиболее актуальны для коммерческих проектов: финансово-кредитные организации, службы такси и доставки, интернет-магазины, иные.
В заключение
Удобство мобильной версии сайта зависит от правильности выполнения вышеперечисленных работ. Если пользователь не может попасть пальцем по ссылке или кнопке оформления заказа, то он уйдет. Его отпугнут медленно загружающиеся картинки, большие объемы рекламы, обрезанное меню и прочие ошибки. В связи с этим разработку мобильной версии лучше доверить профессионалам, после создания рекомендуется на протяжении определенного времени тестировать сайт, чтобы выявить и быстро устранить текущие проблемы.
Источник https://www.seonews.ru/analytics/seo-analitika-dlya-mobilnykh-gayd-po-glavnym-tochkam-optimizatsii/
Источник https://vebrost.ru/blog/optimizatsiya-mobilnoy-versii-sayta-instruktsiya-s-primerami/