Facebook
SEO

Важность Mobile First для SEO

дата публикации: 03.10.2019
mobile first

Задаваясь вопросом верстки, рассмотрите метод desktop first и mobile first. Десктоп -первый метод, с которым пришлось столкнуться веб разработчикам до появления смартфонов. Все сайты на тот момент верстались таким образом, чтобы их можно было удобно просматривать с экрана монитора, настольных ПК, ноутбуков и прочей габаритной техники. Сейчас, когда смартфоны широко используются и сопровождают нас повсюду, вопрос в адаптивности сайта – уже закрыт.

Desktop first используют те, кому веб-дизайнер скидывает макеты только в исполнении под ПК. Как правило заказчики стараются экономить на веб-дизайне. Они заказывают макеты в одном исполнении и не просят веб-дизайнеров прислать отображение под смарт устройство. Это порождает некоторые проблемы именно с точки зрения верстки. Здорово конечно если вы обладаете пространственным мышлением и можете представить, что произойдет с блоками в мобильном виде.

Что такое «mobile-first индексация»?

За последние годы доля мобильного трафика значительно выросла. Google Search Console добавил информацию про внедрение на сайтах mobile first index. Это нововведение от Google. Правильный и концептуальный подход создания сайтов.

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

Читайте также: что такое товарные объявления в поиске Google

Как подготовиться к mobile-first индексации?

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

Рассмотрим другую ситуацию. Например, на сайте используются три колонки. В таком случае вероятнее всего в мобильном отображении у вас каждый блок будет находиться под другим, что в принципе звучит логично. Так как контент скорее всего уже не поместится в три колонки в мобильных телефонах. Используя флекс бокс CSS, расположите блоки трехблочным окном. Учитывайте дизайн и логичность данного подхода.

mobile first

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

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

мобильный индекс

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

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

Mobile-First Indexing

Вероятнее всего эти блоки будут растягиваться, но тем не менее они будут выглядеть хорошо. Лучше если бы вы верстали этот сайт сначала под пк а потом при сжатии у вас все блоки поломались бы. Так же из очевидных плюсов это скорость загрузки по мобильному трафику. Когда вы планируете верстать по методу MFI вы переходите все выше и выше и верстаете под пк. Для этого вы используете медиа-контент минимальной ширины. Используя метод mobile first, вы можете сократить использование скриптов.

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

Читайте также: Как настроить аккаунт в Google My Business

Как быть, если у сайта нет мобильной версии?

Отсутствие мобильной версии вашего сайта либо адаптивной верстки буде хуже влиять на ранжирование контента. Адаптивная верстка и мобильная версия с приходом мобайл фест очень важна для вашего проекта. Google mobile first — это перевод индексирования Google на индексацию мобильной версии вашего сайта.

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

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

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

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

Недостатки мобильной версии

  1. Несколько адресов. нужно использовать мета-теги.
  2. Стоимость обслуживания. Необходимо поддерживать работу версии для разных устройств.
  3. Продвижение двух отдельных сайтов.
  4. Ограниченность создания отдельного мобильного сайта означает избавление от части содержания и функциональности.
google mobile first

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

Как сделать ваш сайт удобным под мобильное устройство? Есть два основных варианта: это создать мобильную версию сайта или адаптивная верстка вашего сайта. Дополнительно можно создать мобильное приложение под ваш сайт. Google mobile-first индекс проводит автоматическую проверку на всех видах сайта.


Загрузка...

ОСТАВЬТЕ КОММЕНТАРИЙ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

*