×
Россия +7 (495) 139-20-33

Мобильная оптимизация интернет-магазинов: советы по адаптации и полезные сервисы

Россия +7 (495) 139-20-33
Шрифт:
0 4189

Для владельцев сайтов и новичков

В 2019 году доля покупок с мобильных устройств составляла 36%. В 2020 году она сравнялась с объемом заказов через десктоп. Кроме того, люди в два раза чаще стали использовать приложения, чем сайты магазинов. 

Покупки на компьютерах и мобильных

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

Google объявил, что с марта 2021 года переходит к Mobile-first индексации. Если у вас есть проблемы с мобильной оптимизацией, то, вероятно, вы потеряете позиции в выдаче. 

Адаптивная или мобильная версия сайта: что выбрать? 

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

Преимущества адаптивной версии

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

Минусы

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

Мобильная версия дублирует основной сайт, но имеет свою верстку. Обычно размещается на поддомене вида «https://m.site.ru» или «https://mobile.site.ru». 

Преимущества мобильной версии:   

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

Минусы

  • так как мобильная версия – дубль десктопной, поисковые системы видят два сайта с одинаковым контентом. В целом это негативно сказывается на ресурсе. Избежать этого можно лишь с помощью правильного использования атрибутов rel=”alternate” и rel=”canonical”; 
  • содержать и отслеживать нужно два сайта, а это дополнительные затраты. Изменения в случае необходимости придется вносить в оба ресурса;
  • с планшетов основная версия будет слишком большой, а мобильная – слишком маленькой. 

Какой из вариантов выбрать? 

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

Адаптивный дизайн или мобильная версия: что выбрать

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

Рассмотрим основные моменты, на которые стоит обратить внимание владельцам интернет-магазинов. 

1. Полное описание продукции 

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

Мобильная оптимизация интернет-магазина

Отображение сайта с мобильных устройств

2. Отсутствие горизонтальной прокрутки 

Контент на сайте должен умещаться на экране по горизонтали. Если его не удается разместить полностью, подойдет горизонтальный свайп. Например, при расположении серии фотографий:  

Мобильная оптимизация для интернет-магазина

3. Продуманная навигация 

Важный момент как для пользователя, так и для поисковика. Удобное меню позволит пользователю перейти с любой страницы на нужный раздел или категорию. Он быстро найдет нужный товар. Поисковая система сможет понять, какую роль играет та или иная страница на вашем сайте. Как правило, в видимой области сайта ссылки размещают на основные разделы, а в меню-гамбургере – на второстепенные.   

Оптимизация интернет-магазинов под мобильные

4. Адаптация контента к размеру экрана 

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

Пример мобильной оптимизации

Мобильная оптимизация интернет-магазина

5. Расположение интерактивных элементов 

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

Пример неудачного расположения элементов: 

Пример мобильного сайта

6. Отсутствие flash-элементов, плагинов Silverlight 

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

7. Качественные изображения 

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

Сразу стоит позаботиться и об оптимизации изображений. Оптимальный вес около 300 КБ, разрешение до 1000 пикселей по каждой стороне. Форматы: JPEG – для любых изображений и преимущественно для фотографий, PNG – для иллюстраций, GIF – для анимаций, WebP – для сжатия изображений с минимальными потерями качества. 

8. Скорость загрузки 

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

Скорость загрузки сайта

Еще в январе 2018 Google анонсировал новый алгоритм ранжирования, созданный специально для мобильного поиска – Speed Update. Он учитывает скорость загрузки страниц мобильных устройств.  

9. Простые формы заполнения данных 

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

10. Наличие поиска на сайте 

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

11. Кликабельные ссылки и иконки 

Если у вас есть иконки мессенджеров, дайте возможность переходить по ним. Номера телефонов тоже должны быть кликабельными. Это же касается и всех ссылок. 

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

Рассмотрим несколько простых, понятных и наиболее часто используемых сервисов. 

Google Mobile Friendly – самый распространенный сервис для проверки удобства просмотра страниц сайта со смартфона. Показывает, как выглядит на телефоне первый экран ресурса, дает общую оценку качества оптимизации.

Сервис Google Mobile Friendly

Яндекс.Вебмастер Mobile Friendly – аналогичен сервису Google, но проверить вы сможете только те сайты, на которые у вас есть права в Яндекс.Вебмастере. 

Сервис Яндекс.Вебмастер Mobile Friendly

Сервис Screenfly – позволяет увидеть, как выглядит ваш сайт на различных устройствах: от смартфонов до телевизоров. 

Screenfly для проверки сайтов

I Love Adaptiv – позволяет проверить адаптивность в зависимости от операционной системы устройства. 

Сервис I Love Adaptiv

А что насчет мобильного приложения? 

Разработка мобильного приложения требует дополнительных финансовых и временных вложений. Приложение создается под каждую из платформ iOS и Android, а также нуждается в обновлениях и продвижении отдельно для App Store и Google Play Маркет.  

Однако, если посмотреть на крупные бренды, например, Ozon, Wildberries, DNS, Леруа Мерлен, мы увидим, что у всех есть как адаптивный дизайн сайта, так и мобильные приложения. Преимущество такого подхода в том, что пользователь сам выбирает наиболее удобный вариант. 

Небольшой итог 

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

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

Больше практических советов по развитию торговых онлайн-площадок читайте в других материалах из нашего цикла:  

  1. Облако тегов в интернет-магазине: прикладная инструкция по увеличению трафика
  2. Локальное продвижение интернет-магазина: как получить дополнительный трафик из регионов
  3. «Нет в наличии»: что делать с карточками отсутствующего товара.
(Голосов: 13, Рейтинг: 3.69)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Диагностика и снятие ссылочного фильтра «Минусинск» в 2021 году. Кейс
Stanislav Romanenko
6
комментариев
0
читателей
Полный профиль
Stanislav Romanenko - Просто чисткой ссылочного можно просадить позиции в гугле, поэтому с бухты-барахты начинать удалять ссылки как-то тоже не хотелось бы. Ну в общем, если попадётся ещё подобный случай - не стесняйтесь выкладывать новый кейс :) Просто видите как мало кейсов по этому поводу, поэтому каждый на вес золота. "с этой бедой также приходится сталкиваться и пока кроме как крутить в обратную сторону ничего лучше не придумали." - на серче один товарищ скрипт антибота своего под это дело заточил searchengines.guru/ru/forum/981615/page39#unread - вроде боты пропадают, но и часть живых людей тоже :)
Михаил Ляшенко (PostMarket): о рынке инфлюенс-маркетинга и рекламе у блогеров
Вячеслав Андреев
1
комментарий
0
читателей
Полный профиль
Вячеслав Андреев - PostMarket можно смело рекомендовать. У их блогеров нормальная активная аудитория.
Специалисты в Рунете заметили глобальную накрутку поведенческих факторов
Дмитрий Кулаевский
1
комментарий
0
читателей
Полный профиль
Дмитрий Кулаевский - кто-нибудь знает как с этим бороться? очень много такого трафа идёт с июля, сайт сильно просел
Облако тегов в интернет-магазине: прикладная инструкция по увеличению трафика
Юлия Дмитриева
2
комментария
0
читателей
Полный профиль
Юлия Дмитриева - Согласна с вами, что в любом деле важен индивидуальный подход:)
Локальное SEO, или Как увеличить трафик стоматологии на 700% в небольшом городе
Дмитрий Дмитриев
1
комментарий
0
читателей
Полный профиль
Дмитрий Дмитриев - расскажите, о чем именно речь? :)
Яндекс возобновил «показательные порки» за накрутку поведенческих факторов
Антон
1
комментарий
0
читателей
Полный профиль
Антон - Никакой не выпал. Кроме клиентского сайта, который проседал из-за скрутки, о чем Я.Поиску сообщали и клиенту тоже. Ноль реакции от поисковика (продолжайте развивать сайт, никаких проблем нет ...). Клиенту надоело и он заказал накрутку у подрядчиков. Мы искренне ждали бана, сообщали об этом клиенту, т.к. мы все таки делаем все остальное для развития. Как итог: с лета полет нормальный. Сайт растет, никаких проблем. Случайно даже стажер палил тех поддержке факт использования накрутки. И ничего. Сайт растет дальше. Если они не могут ничего принять даже после признания факта накрутки, что они могут сделать с жалобами на накрутку конкурентов?! Никогда не одобряли данные методы, но ... похоже ... все работает :)
«Нет в наличии»: что делать с карточками отсутствующего товара
freyr energy
1
комментарий
0
читателей
Полный профиль
freyr energy - Thank you so much @ admin for share your valuable thoughts and ideas We always enjoy your articles its inspired a lot by reading your articles day by day. So please accept my thanks and congrats for success of your latest series. We hope, you should published more better articles like ever before solar rooftop
Яндекс тестирует оценки сайта в сниппете
Сергей Демин
8
комментариев
0
читателей
Полный профиль
Сергей Демин - вопрос такой: где получить оценку о сайте? а не об организации
Сколько стоит SEO на фрилансе. Кейсы
Людмила
1
комментарий
0
читателей
Полный профиль
Людмила - Очень спорная статья. Особенно оценка. К примеру, за 1500 руб. 200 вечных ссылок с быстрой индексацией. Это про какой год? Про 2020? Точно? Собственно, в текущих реалиях при хорошем раскладе за эти деньги можно получить 3-4 качественные ссылки. А никак не 200. Если 200, то такие ссылки, по 7,5 руб. за штуку выбьют сайт за ТОП-100. А заказчик будет в шоке, он же все правильно делал, по инструкции из статьи в уважаемом издании.
Локальное продвижение интернет-магазина: как получить дополнительный трафик из регионов
Саша Дружин
2
комментария
0
читателей
Полный профиль
Саша Дружин - У меня был опыт раскрутки сайта на иностранных рынок, например для анголязычной аудитории. В целом отличия есть, хоть и небольшие. Больше всегда прироста получил после закупки ссылок от www.e-raskrutka.ru/anothercountry , они достаточно качественно работают на англоязычную аудиторию и могут лаконично вписаться в любое обсуждение. Можно самому попробовать заказать такие ссылки и посмотреть на результат.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
113
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
92
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
61
Комментариев
60
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!