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

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

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

В апреле 2015 года Google запустил алгоритм mobile-friendly, а в феврале 2016 года Яндекс выкатил алгоритм «Владивосток», который расставил все точки над i в вопросе адаптации пользовательских сайтов под различные гаджеты.

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

Протестируйте свой сайт

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

R5MaqTH1ZY1UELdjKnNPaoeoxOE.png

Сделайте резервную копию сайта

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

Обновите ПО

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

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

Тему необходимо найти в панели управления вашей CMS и затем посмотреть, есть ли в ее описании такие понятия, как mobile (мобильный) или responsive (адаптивный). Если в теме доступна демонстративная страница, ее нужно проверить на удобство просмотра с мобильных устройств. Быстродействие используемого шаблона можно проверить с помощью инструмента PageSpeed Insights.

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

Обсудите детали с разработчиком

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

web-fundamentals-psi-mobile.png

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

Настройте конфигурацию сайта для устройств разных видов

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

fbbhrtewr.png

  • Адаптивный дизайн. В этом случае сервер отправляет один и тот же код HTML всем устройствам, но код отображается по-разному. Поисковики рекомендуют использовать этот вариант.
  • Динамический показ. Здесь для разных устройств используется один URL, но разные варианты кода HTML. Система будет руководствоваться доступной информацией о браузере пользователя при выборе нужного варианта.
  • Разные URL. Для разных устройств используются разные варианты кода и разные URL. Система определяет тип устройства, а затем перенаправляет на нужную страницу с помощью переадресации HTTP и HTTP-заголовка Vary.

Не забудьте сообщить поисковику, что страница рассчитана на мобильные устройства. Не используйте технологии Flash, Silverlight или Applet на страницах, которые ориентированы на мобильных пользователей, так как эти технологии могут не поддерживаться на мобильных устройствах.

Сообщите поисковику

Первое, что советует сделать Google – это сделать адаптивный дизайн сайта. Второй способ – это разные сайты для десктопов и мобильных устройств. В этом случае следует обязательно прописать атрибут rel=”alternate”, который будет отсылать к мобильной версии сайта. Так Google поймет, что есть две версии одного и того же сайта – мобильная и обычная. Для мобильной версии сайта следует прописать атрибут rel=”canonical”, который будет отсылать на обычную версию сайта.

Яндекс же рекомендует для начала проверить сайт на дружественность к мобильным устройствам в новом Вебмастере. Проверка ресурса может послужить для Яндекса подсказкой, что у сайта есть мобильная версия. Как именно она должна выглядеть, можно узнать здесь. Также необходимо использовать мета-тег meta name="viewport" content="width=device-width, initial-scale=1", чтобы указать область просмотра контента.

Разберитесь с проблемой дублирования контента

Этот вопрос мучает большинство владельцев сайтов, задумавшихся о мобильной версии ресурса. Чтобы помочь роботу правильно определить мобильную версию сайта, Яндекс, к примеру, рекомендует указывать на страницах URL мобильной версии. Например, с помощью элемента link:

link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page.html"

Артур Смирнов, Head of Mobile, Adventum: Артур Смирнов.jpg

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

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

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

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

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

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

(Голосов: 5, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Evgeny Novikov
    5
    комментариев
    0
    читателей
    Evgeny Novikov
    больше года назад
    Если кто желает себе адаптив на существующий сайт, то обращайтесь. Вот здесь я показал как при прокрутке смотрится сайт на разных устройствах: ru.convert2responsive.net
    Кроме того ваш сайт после оптимизации будет проходить тест "Google "mobile freindly".
    -
    0
    +
    Ответить
  • Olya Voskresenskaya
    8
    комментариев
    0
    читателей
    Olya Voskresenskaya
    больше года назад
    Спасибо за полезную  и интересную информацию.  Продвижение сайтов и оптимизация дает возможность повысить их ранжирование в поисковиках, а, следовательно, увеличить посещаемость. Наращивание количества посещений обязательно приводит к увеличению продаж, расширению клиентской базы и возрастанию доходов. Раскрученный сайт – это работающий на вас ресурс, а не просто страничка в интернете: topmayseo.ru
    -
    0
    +
    Ответить
  • Артемий
    больше года назад
    Или создайте изначально адаптивный под все разрешения, например, на Тильде (goo.gl/eeRu1H)
    -
    0
    +
    Ответить
  • Алиса
    16
    комментариев
    0
    читателей
    Алиса
    больше года назад
    Давненько у вас подборочек красивых сайтов не было. Лучше бы их запилили
    -
    0
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Алгоритм продвижения сайта через Pinterest
Виктор Гаврюков
29
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - В самом вверху есть ссылка на мою группу в ВК, там где автор материала. Через группу и свяжитесь со мной_)
Ссылочный апдейт Google: что изменится для SEO-специалистов в рунете
Тимур
6
комментариев
0
читателей
Полный профиль
Тимур - Понял, спасибо за информацию.
Как забрать 5 мест в выдаче из 10. Кейс-эксперимент
Виктор Гаврюков
29
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - такое можно делать и с ВЧ_)
Как продвинуть сайт по коммерческим запросам в ТОП-10 с помощью ресурса Reddit
Denis Zar
2
комментария
0
читателей
Полный профиль
Denis Zar - пользовались услугами по продвижению на реддит от reddit-marketing.pro?
3 основные ошибки, которые допускают владельцы сайтов при продвижении
Виктор Гаврюков
29
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - Не обращай внимания_) Если у тебя хороший ресурс, то ты будешь первоисточником, и все кто своровал, автоматически начнут на тебя ссылаться, точнее, так гугл будет считать_)
Как мы увеличили трафик из Яндекса более чем в 3 раза за неделю на сайте клиники. Кейс
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - У большинства сайтов произошел рост в Гугле в декабре и в марте Яндекса. Ваши шаманства тут не причём :)
Как доработка структуры вывела сайт в ТОП-10 Google и увеличила трафик в 2 раза. Кейс Связной Трэвел
Дмитрий
3
комментария
0
читателей
Полный профиль
Дмитрий - Вероятнее всего было обновление Google и позиции были снижены в связи с низкой скоростью загрузки страниц (так как доработке ведутся не только по SEO, но и в целом по функционалу сайта, появляются новые скрипты). В этот период в Google Search Console увеличилось количество страниц с низкой скоростью загрузки. Мы выявили несколько проблем, которые снижают скорость загрузки страниц и выдали рекомендации по их устранению. Пока данные рекомендации находятся в работе. Также был проведен анализ EAT факторов и проверка сайта на соответствие требованиям Google к YMYL сайта, выданы рекомендации по доработке данных факторов (ждем внедрения наших рекомендаций, поделимся потом результатами).
Рост ботных переходов на сайт: как интерпретировать и что делать
Mike
5
комментариев
0
читателей
Полный профиль
Mike - как это проверить? что товары выводится именно на основе спроса, а не по заданным алгоритмам?
Сравнительная статистика уровня жизни SEO-специалистов в семи странах, включая Россию
Рустам
1
комментарий
0
читателей
Полный профиль
Рустам - Средняя температура по больнице, подсчет даже близко не отображает действительность, особенно учитывая разность цен и уровня зп в разных частях больших стран (США, Канада, Россия)
Как влияют отзывы на показатель отказов/выходов с сайта. Эксперимент
Виктор Гаврюков
29
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - Жаль что гугл стал меньше ценить пользовательский контент. Но отзывы все еще важны, в любом слае_)
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
114
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
92
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
62
Комментариев
60
Комментариев
59

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