Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:

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

Россия +7 (495) 960-65-87
Шрифт:
4 7540

В апреле 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, чтобы не усложнять пользователю процесс борьбы за выживание.

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

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

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Поделиться 
Поделиться дискуссией:
Отправить отзыв
  • Evgeny Novikov
    5
    комментариев
    0
    читателей
    Evgeny Novikov
    6 месяцев назад
    Если кто желает себе адаптив на существующий сайт, то обращайтесь. Вот здесь я показал как при прокрутке смотрится сайт на разных устройствах: ru.convert2responsive.net
    Кроме того ваш сайт после оптимизации будет проходить тест "Google "mobile freindly".
    -
    0
    +
    Ответить
    Поделиться
  • Olya Voskresenskaya
    9
    комментариев
    0
    читателей
    Olya Voskresenskaya
    6 месяцев назад
    Спасибо за полезную  и интересную информацию.  Продвижение сайтов и оптимизация дает возможность повысить их ранжирование в поисковиках, а, следовательно, увеличить посещаемость. Наращивание количества посещений обязательно приводит к увеличению продаж, расширению клиентской базы и возрастанию доходов. Раскрученный сайт – это работающий на вас ресурс, а не просто страничка в интернете: topmayseo.ru
    -
    0
    +
    Ответить
    Поделиться
  • Артемий
    6 месяцев назад
    Или создайте изначально адаптивный под все разрешения, например, на Тильде (goo.gl/eeRu1H)
    -
    0
    +
    Ответить
    Поделиться
  • Алиса
    14
    комментариев
    0
    читателей
    Алиса
    6 месяцев назад
    Давненько у вас подборочек красивых сайтов не было. Лучше бы их запилили
    -
    0
    +
    Ответить
    Поделиться
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
SEOnews и Serpstat запускают конкурс для интернет-маркетологов
Анна Ольяная
4
комментария
0
читателей
Полный профиль
Анна Ольяная - благодарю :)
Как построить качественную ссылочную массу сайта
Айрат Рахимзянов
39
комментариев
0
читателей
Полный профиль
Айрат Рахимзянов - Спасибо Кирилл. Сейчас восстановилась работа сервиса: take.ms/ttXrw
«Я оптимизировал сайт, а он не в ТОП! Что делать?»
Павел Горбунов
7
комментариев
0
читателей
Полный профиль
Павел Горбунов - Как можно в инструменте tools.pixelplus.ru/tools/text-natural сравнить текст со страницы конкурента и со своей страницы? Я вижу возможность только для проверки одного урла.
Мир глазами поисковых систем
Александр Рунов
4
комментария
0
читателей
Полный профиль
Александр Рунов - Какой регион, если не секрет? В Мск, в ряде ВК тематик (в тех же "окнах" или "колесах"), без работы с внешними факторами по ВЧ запросам в ТОП не выплывешь. Хотя в большинстве направлений вполне реально.
Влияние HTTPS на ранжирование региональных поддоменов в Яндексе
Екатерина Иванова
1
комментарий
0
читателей
Полный профиль
Екатерина Иванова - Посмотрите на сколько упал трафик и на сколько потом вырос:упал на 10-20% на 1 месяц, а вырос в итоге в 5 раз. Одним мартовским трафиком всё падение перекрыли. Или можно ждать Яндекс неопределённое количество времени со стартовым уровнем трафика. Упущенные возможности и всё-такое.
Google.ru внесли в реестр запрещенных сайтов
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
Монетизация сайта. Как, когда, сколько?
Ruslan Baybekov
2
комментария
0
читателей
Полный профиль
Ruslan Baybekov - Максим, добавили возможность вывода дохода на Яндекс Деньги и WMR.
SEMrush: факторы ранжирования в Google в 2017 году
Анна Макарова
292
комментария
0
читателей
Полный профиль
Анна Макарова - Уважаемый S1, я тоже понимаю, что есть такие люди, которые заметив допущенную неточность несутся на всех парусах продемонстрировать "силу" своего ума. Спасибо вам за пристальное внимание. Это поможет нам быть лучше.
Интеграция call tracking и CRM: углубленный анализ данных о звонках и продажах
Денис
2
комментария
0
читателей
Полный профиль
Денис - Какой смысл вообще в облачных CRM, обрезанный фугкционал, свое дописать невозможно, слив клиентов другим компаниям. Серверные бесплатные CRM куда надежней и кастамизируй как хочешь.
Дашборд Метрика 2.0 – мониторинг проблем на сайте в режиме реального времени
Константин Сокол
24
комментария
0
читателей
Полный профиль
Константин Сокол - Есть динамика трафика по разделам. Этот виджет показывает некоторые фильтры, в результате которых с поиска выпадают целые разделы.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
292
Комментариев
262
Комментариев
219
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
55
Комментариев
52
Комментариев
48
Комментариев
45

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