«Сюсюканье» на тему «Быть или не быть мобильной версии или адаптиву?» больше не «прокатит». С 5 июля Google прекращает индексировать сайты без мобильной версии или адаптивной верстки.

Чтобы действительно понравиться поисковым роботам и уверенно присутствовать в поисковой выдаче, уже давно важна удобная мобильная версия.

Ещё с 1-го июля 2018 года Google запустил механизм, согласно которому ранжирование ресурсов стало происходить по принципу Mobile-first, т.е. поисковый робот преимущественно стал использовать мобильную версию при индексации. Отображение сайта с мобильного стало важным фактором ранжирования.

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

Да, конечно, при ранжировании учитывается много факторов, и кто-то выезжал за счёт безукоризненности по иным факторам, но мир изменяется. Больше в SEO такого не будет!

С 5 июля 2024 года начинается именно новая эра. Google прекращает индексировать сайты, КОТОРЫЕ НЕ ПОДДЕРЖИВАЮТ МОБИЛЬНЫЕ УСТРОЙСТВА. Поисковая система полностью изменяет критерии индексации сайтов. Сайты без мобильной версии или адаптивной верстки в индекс не попадут.

Индексироваться сайты в Google будут по строгому принципу. Если контент вашего сайта будет недоступен на мобильных устройствах, поисковый робот Googlebot Smartphone при сканировании сайте вынесет «вердикт»: сайт больше не будет индексироваться.

Это фактически финальный шаг к принципу Mobile-first. «Сюсюканье» на тему «Быть или не быть мобильной версии или адаптиву?» и «Ложечка за маму и ложечка за папу» не прокатит. Полумеры пора забыть! Сейчас самое время для обновлений!

В связи с изменениями алгоритма у владельцев сайтов стали возникать вопросы. На этих вопросах (и ответах на них) мы и сфокусируемся.

- Будет именно исключение из поиска, а не занижение показателей?

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

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

Да. Всё верно. Для тех, у кого нет мобильной версии или адаптивной вёрстки видимость сайта (в том числе с десктопа) в поисковой выдаче исчезнет. Звучит жёстко, но это факт.

- Что такое Mobile First для веб-разработки?

- Стратегия Mobile First – это создание сайтов, когда ориентир на мобильные устройства присутствует с первого шага работы над проектом.

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

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

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

Получается ли в этом случае комфортный и приятный для восприятия минимализм? Далеко не всегда. Нередко получается «урезанная» в возможностях версия.

- Есть понятие адаптивный дизайн и мобильная версия. Что-то я в них запутался. В чём разница?

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

Если мы говорим об адаптивном дизайне, то страницы сайта в данном случае не меняются, но CSS-файл задает правила. Ресурс «приспосабливается» к ширине окна браузера, «адаптируется» под него.

Как это выглядит?

Примеры:

• Шрифты адаптируются под ширину окна просмотра с помощью функции clamp();

• Интервалы адаптируются под ширину окна просмотра с помощью функции clamp();

• Hero-раздел (hero image) – большие фотографии (баннеры), наличие которых важно для привлечения внимания, усиления эмоций, демонстрации продукта, адаптируется под содержание посредством обёртывания флекс-элементов. Уже много лет, как и CSS Grid, Flexbox является частью стандарта CSS3 и его не нужно подключать отдельно. Flexbox является модулем CSS, который позволяет удобно управлять расположением, порядком, размерами и отступами между элементами веб-страницы.

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

• Отступы (paddings) адаптируются под язык сайтов с помощью логических свойств.

Мобильная же версия сайта или мобильный сайт– более сложная в реализации «процедура». Это по сути отдельный сайт, разработанный специально под мобильные устройства.

Мобильная версия размещается на поддомене или в подкаталоге. Загрузка HTML-кода зависит от значения user-agent («динамической выдачи»).

Если же речь идёт об адаптиве – у вас один сайт, один серверный код, объём работы на стороне cms/фреймворка максимально разумный. Нет необходимости создавать два сайта для смартфона и десктопной версии и тратить кучу энергии на разработку и поддержку сначала одного, потом другого.

Очень часто к созданию мобильно версии прибегают тогда, когда «поезд ушёл»: и сайт терять не хочется, и адаптив не сделать, и придётся «пилить» новую версию.

Также выбор мобильной версии, а не адаптивной верстки – это выбор в ситуациях, когда:

1. Слишком много табличных данных, при этом многоячеистых сложных таблиц.

2. Много мелких, важных, в том числе элементов адаптивная верстка вам противопоказана.

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

Что отличает качественный адаптивный сайт?

Правда, важно понимать, сайт cайту - рознь. Качественный адаптив – это далеко не просто подстройка под размер экрана.

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

• Разворачивающееся меню. Так называемое меню-гамбургер, которое разворачивается нажатием на него. Безусловно, важно, чтобы такое меню было сквозным и отображалось с любой страницы ресурса.

• Крупные кнопки и достаточное количество пространства между ними и иными (особенно кликабельными) элементами сайта. Иначе есть риски, что пользователь нажмёт совсем не в ту область.

• Крупный шрифт. Это важно чтобы пользователь не увеличивал текст каждый раз. При этом дать право, возможность на увеличение

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

К типографике (особенностям шрифтов) предъявляются особые требования. Минимальный размер основного текста — 16 px. Для основного текста должны использоваться стандартные системные шрифты, заголовки при этом могут выделяться более креативными шрифтами (вот здесь есть свобода творчества для дизайнера).

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

Что делать тем, у кого нет мобильной версии сайта или адаптивной верстки?

Рассуждать в духе «Допилим потом!» теперь времени нет. После 5 июля ваш сайт без адаптивной верстки, мобильной версии будет лететь в поисковой выдаче в бездну, в тартарары, в черную дыру.

И, чтобы вашему бизнесу выжить, у вас останется не так много и инструментов:

1. Нажать на продвижение посредством платного трафика (контекстная реклама, третированная реклама). Но здесь нужно понимать, во-первых, что в некоторых нишах –это немалые бюджеты. А, вот вторых, без мобильной версии, адаптивной верстки дает реклама посредством платного трафика будет урезана. Ведь вам придётся отсекать определенную аудиторию – пользователей тех же мобильных устройств.

2. Наконец –то решиться на перенос своего сайта.

Да, перенести сайт –это не семечки щёлкать. Но с учетом изменения поисковых алгоритмов 5 июля 2024 года - ТОТ САМЫЙ ДЕНЬ X, когда это сделать действительно надо.

А сократить время на перенос сайта и обрести новый ресурс с адаптивной версткой можно, например, используя готовые решения на базе 1С-Битрикс.

Готовые решения (шаблоны) на базе 1С-Битрикс - это как раз адаптивные компоненты.

При этом разработчик уже за вас позаботился. Дружелюбный и понятный интерфейс, включая проработанный UX - эффективное взаимодействие пользователя с интерфейсом – то что вы получаете априори.

Да, безусловно, потребуется «подгонка» решения под ваш бизнес, контент. Но это не разработка с нуля.

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

Такое мнение можно считать и истинным и ложным. Как так?!

Всё дело в том, что может быть применена разная технология. Если речь идёт о тех же решениях на CMS 1C-Битрикс, здесь проблема давно решена. Готовые решения поддерживают технологию «Композитный сайт». А это и увеличение скорости отклика сайта, и «нажим» на шустрость открытия страницы, и лучшее распределение нагрузки на сервера.

Раньше при переносе сайта, чтобы сделать адаптивную версию, клиент мог «кочевряжиться» и апеллировать тому, что адаптив можно перенести на потом, потому что это неприоритетно. «Отбить» затраты на WEB не получиться, потому что, с точки зрения маркетолога - основная ЦА конкретного интернет-магазина - пользователи десктопов. Теперь такие отговорки не «прокатят». Не будет адаптивной верстки, мобильной версии сайта будете невидимкой в поисковой выдаче. Оно вам надо?

Отсутствие адаптивной верстки или мобильной версии сайта – это не просто недоступность сайтов для поисковых роботов. Это недоступность потенциальным клиентам ваших продуктов и услуг.

#seoстратегии #вебразработка #google #маркетинг