Что означает понятие mobile first
Почему Mobile First?
О Mobile First написано достаточно много и есть хорошие книги на эту тему. И все равно большинство разработчиков и компаний не используют его в своих проектах или не знают вообще об этом подходе.
Поэтому хочу рассказать вам о нем вкратце и с примерами, это будет полезной информацией для тех кто не слышал об этом подходе.
Я постараюсь ответить на три основных вопроса:
Что такое Mobile First?
В этом году количество пользователей, использующих мобильные устройства для доступа к сети Интернет, достигло 60%. Поэтому мобильный трафик становится более значимым и владельцы вебсайтов должны считаться с этой статистикой. Как показывает практика, пользователи мобильных телефонов и планшетов проводят меньше времени в сети и предпочитают сайты из первых строчек поисковой выдачи. В то время как пользователи ПК могут проводить больше времени в поисках информации. Поэтому ваш вебсайт должен быть хорошо оптимизирован для поисковых систем (SEO) и отвечать всем требованиям Mobile First, что бы прибывание пользователя на вашем сайте было максимально удобным и понятным через его мобильное устройство.
Поэтому одни из самых важных требований в Mobile First разработке это:
О важности этого подхода недавно писал поисковой гигант Google:
«Мы будем увеличивать значение показателя mobile-friendly в нашем рейтинге результатов. Эти изменения повлияют на мобильный поиск на всех языках мира и окажет значительное влияние на результаты поиска. Следовательно, пользователям будет легче находить результаты оптимизированные под их устройства.»
Видео о значимости Mobile First от Olivier Rabenschlag – глава Агентства Творческого Развития Google.
Плюсы Mobile First подхода
Напомню, что на сегодняшний день количество пользователей использующих мобильные устройства для серфинга в интернете достигло 60%. И поэтому использование Mobile First при разработке вебсайта дает большие преимущества для этих пользователей в первую очередь.
Реализация
Реализация подхода будет продемонстрирована с помощью фреймворка Moff.js (Mobile First Framework). Это JavaScript фреймворк, который заточен для Mobile First разработки.
Мы будем рассматривать подход на примере страницы с детальной информацией об автомобиле.
Определяем важную часть содержания
Обычно на такой странице много данных. И мы должны решить, что из этого важно в первую очередь для пользователя.
Подробный список данных на странице:
Далее мы сверстаем страницу в которую добавим только эту информацию.
В идеале это тот объем трафика, который может быть потрачен пользователем для получения этих данных. И мы постараемся добиться этого с минимальной разницей.
В первую очередь напишем стили для отображения страниц на мобильных устройствах. И только, после настраиваются стили под другие размеры экранов через media query.
Добавляем дополнительную информацию
Теперь мы должны добавить оставшиеся данные таким образом, что бы пользователь знал об этом и мог получить данные запросив их.
И тут на помощь приходят Data Events хелперы и возможности AMD из фреймворка Moff.js
Добавляем тумбы для главной картинки
Мы должны показать пользователю, что есть еще дополнительные картинки доступные для просмотра. Для этого нам нужно добавить ссылку под главной картинкой, которая ведет на тумбы.
При клике на ссылку происходят следующие действия:
Объявление класса модуля
Moff фреймворк имеет систему модульности с помощью, которой мы реализуем класс модуля vehicle-gallery.
Модули в Moff это независимые элементы приложения, которые имею собственную бизнес логику и могут иметь зависимости от внешних библиотек.
Во время инициализации класса мы запускаем slick-carousel для создания карусели из наших тумб и устанавливаем обработчик для их просмотра.
Регистрация модуля
Регистрация модуля происходит с помощью объекта, который содержит в себе уникальный идентификатор, может содержать зависимости модуля и основной файл класса модуля.
В нашем примере мы указали в зависимостях jQuery и его плагин slick-carousel, который создает из тумб карусель. Зависимости грузятся синхронно, в той очередности, в которой вы указываете. И после зависимостей грузится класс модуля vehicle-gallery.js. Далее, после загрузки файла модуля и его зависимостей мы инициализируем модуль в с помощью события afterInclude.
Статистика результатов.
Подведем итоги результатов создания Mobile First страницы.
Нижний график показывает, что не оптимизированная страница на 73% тяжелее, чем страница адаптированная под требования Mobile First. Таким образом мы можем сэкономить 186.94 KB, которые возможно и не понадобятся пользователю при просмотре вашей страницы.
Заключение
Таким образом мы избавляемся от загрузки большого количества второстепенных ресурсов, но которые будут доступны по требованию пользователя.
В этой статье рассмотрен только один пример загрузки дополнительной информации. Полный пример можно будет посмотреть на сайте фреймворка.
Руководство по Mobile First: как адаптировать SEO-процессы. Часть 1
Разбираемся с Mobile First и разными конфигурациями мобильных сайтов.
Один из заметных трендов 2019 года — индексация Mobile First в Google. Акцент на «мобильность» сайтов становится все сильнее, и в наступающем году состояние мобильной версии сайта станет важным фактором для продвижения в Гугле. Мы уже писали о том, какие подводные камни могут встретиться при внутренней перелинковке мобильных версий сайта, а теперь перевели большое руководство о Mobile First в целом.
В этом руководстве мы разберемся, на какие SEO-параметры все еще стоит обращать внимание, а также поговорим об адаптации рабочих процессов к Mobile First. Техническое SEO, внутренняя оптимизация, создание контента и его распространение по-прежнему актуальны, однако теперь нам следует анализировать эти факторы с помощью экрана смартфона, а не десктопа.
Прим. ред. Реальность давно уже становится «мобильной»: вот открытая статистика Liveinternet — последние три месяца 2018 года число посетителей с мобильных девайсов составляло больше 70% от общего в Рунете.
Система PromoPult — рекламный комплекс для продвижения бизнеса в интернете. Полная автоматизация, готовые чек-листы, точные настройки. Создана для тех, кто хочет высвободить время на действительно серьезную работу.
До марта 2018 года ранжирование Google основывалось на сканировании и индексации десктопного контента. Googlebot для десктопов сканировал страницы сайта и передавал URL системе индексирования Caffeine. Страницы анализировались по множеству критериев, начиная от дизайна и контента и заканчивая настройками каноникализации и внешними ссылками.
Теперь Google все активнее использует Googlebot (Smartphone), а система Caffeine ориентируется прежде всего на мобильные версии. Принципы сканирования и индексации в основном остаются теми же, но то, как ваш сайт выглядит и работает на мобильных девайсах, будет иметь значительно больший вес, чем десктопная версия.
Ранжирование вашего сайта будет зависеть (или уже зависит) исключительно от мобильного, а не десктопного SEO.
Десктопная индексация все еще имеет некоторый вес, однако в конечном итоге решающим станет мобайл. О переходе на мобильную индексацию Google сообщает администраторам сайта через Search Console:
Введение Mobile First — логичный шаг Google в череде действий по развитию мобайл-френдли интернета и прямой ответ на рост использования мобильных девайсов.
В 2016 году Google объявил приход «Мобайлгеддона» (Mobilegeddon). Этот довольно слабый апдейт со странным названием можно считать предшественником индексации Mobile First. Тогда Google анонсировал изменение алгоритма, при котором предпочтение отдавалось мобайл-френдли сайтам. В реальности мало что изменилось, по крайней мере, не сразу. Реальные изменения стали заметны лишь спустя несколько месяцев. А сейчас этот процесс завершается — переходом к Mobile First.
Итак, как должны измениться SEO-процессы, когда индексация Mobile First развернулась в полную силу? Вот несколько рекомендаций для начала.
После введения Mobile First Google выпустил руководство для веб-мастеров по улучшению мобильной индексации. Советую всем SEO-специалистам и интернет-маркетологам тщательно изучить этот гайд, прежде чем двигаться дальше.
Адаптивные сайты используют один и тот же HTML-код независимо от устройства. Макет и контент масштабируются, чтобы адаптироваться под размер экрана.
Такая конфигурация рекомендована Google, поэтому она должна быть в приоритете при выборе типа мобильного дизайна.
Поскольку вы используете один и тот же HTML-код, контент не будет дублироваться. Кроме того, это облегчает администрирование контента и сайта в целом, так как не придется иметь дело с каноникализацией. По сути, мобильная версия вашего сайта ничем не будет отличаться от десктопной.
При динамическом показе сайт использует разные HTML и СSS в зависимости от устройства, с которого вы заходите. Как и для адаптивных сайтов, URL не меняется, однако мобильный контент «спрятан», когда пользователи и юзер-агенты заходят на сайт с десктопа, и наоборот.
Чтобы указать Google, какой юзер-агент он должен применить (для десктопа или для смартфонов), следует использовать HTTP-заголовок Vary.
Несмотря на то, что под одним URL будет находиться один и тот же контент, с марта 2018 года Google отдает все больше предпочтения той его части, которая используется для мобильной конфигурации. Больше информации о сайтах с динамическом показом можно найти в гайде Гугла, а вот рекомендации по настройкам для Mobile First.
В этом случае для отображения сайта на мобильных устройствах используется другой URL, обычно с поддоменом «m.».
Использование разных URL (как и динамический показ) становится все более устаревшим методом, поскольку он значительно усложняет администрирование сайта. Возможно, вам придется работать и с такой конфигурацией — это может быть обусловлено особенностями ресурса.
Например, Facebook до сих пор адаптируется под мобильные девайсы именно так. Можно предположить, что переход к другой, более современной конфигурации связан с солидными затратами, поэтому отставание компенсируется за счет большого набора специализированных мобильных приложений.
В будущем Google будет анализировать в первую очередь мобильные URL. В любом случае интересно, как эта конфигурация будет работать в мире SEO, ориентированного на мобильные девайсы, особенно учитывая быстрые перемены, связанные с каноникализацией и PageRank.
Канонические AMP-страницы (Accelerated Mobile Pages) — инициатива, запущенная Google в феврале 2016 года.
AMP помогают улучшить мобильную экосистему как для владельцев сайтов, так и для пользователей за счет заметно возросшей скорости загрузки страниц. С помощью библиотек и фреймворков AMP вебмастера получают быстрое оптимизированное решение для отображения контента на мобильных девайсах.
Этой возможностью сразу воспользовались новостные агентства и другие СМИ, постепенно AMP появляются и в е-коммерсе.
Google отмечает важность скорости загрузки страниц среди потребительских трендов 2019 года.
Настройка передачи контента через AMP аналогична использованию разных URL. Как правило, мобильная версия доступна по URL в подкаталоге /amp/. Соответственно, рекомендации по настройке те же, что и для мобильных сайтов под другим URL.
Если вы используете AMP HTML в качестве мобильной конфигурации сайта, Google выберет эту версию при индексации Mobile First. Однако если вы сочетаете AMP и не-AMP, Google предпочтет мобильную версию не-АМР.
Здесь могут возникнуть те же проблемы, что и с разными URL. Как Mobile First влияет на сайты с AMP, особенно в тех случаях, когда доступна не-AMP альтернатива? В любом случае, ключевая задача AMP — отображение на мобильных устройствах облегченной версии контента, при этом часть внутренних ссылок и других элементов оптимизации могут пропасть.
Это сайты, которые предназначены для просмотра только на десктопе и не имеют мобильной версии.
По сути, применение индексации Mobile First к сайтам без мобильной версии можно считать не совсем корректным, потому что их конфигурация изначально не предполагает отображение на смартфонах. Дальнейшее использование такого формата, несомненно, будет иметь неприятные последствия и ухудшит видимость сайта в органической выдаче (если это уже не случилось). То, что вы не предоставляете пользователям возможности удобно пользоваться вашим сайтом с мобильных устройств, прямо противоречит общим рекомендациям для вебмастеров, не только для индексации Mobile First.
Google по-прежнему принимает такую конфигурацию для индексации Mobile First, но это явно не лучший вариант. Если к 2018 году ваш сайт все еще не мобайл-френдли, вам следует всерьез задуматься о запуске нового сайта, отвечающего требованиям под мобайл.
Если вы не уверены, является ли ваш сайт мобайл-френдли, рекомендуем использовать инструмент проверки оптимизации для мобильных от Google. Для более глубокого аудита адаптированности под мобильные подойдет расширение для Chrome Lighthouse.
В следующей части руководства: как изучить ваш сайт глазами Гуглобота для мобильных (с десктопа).
Что такое Mobile First, зачем он нужен и как его сделать и внедрить?
Что такое Mobile First?
В этом году количество пользователей, использующих мобильные устройства для доступа к сети Интернет, достигло 60%. Поэтому мобильный трафик становится более значимым и владельцы вебсайтов должны считаться с этой статистикой. Как показывает практика, пользователи мобильных телефонов и планшетов проводят меньше времени в сети и предпочитают сайты из первых строчек поисковой выдачи. В то время как пользователи ПК могут проводить больше времени в поисках информации. Поэтому ваш вебсайт должен быть хорошо оптимизирован для поисковых систем (SEO) и отвечать всем требованиям Mobile First, что бы прибывание пользователя на вашем сайте было максимально удобным и понятным через его мобильное устройство.
Поэтому одни из самых важных требований в Mobile First разработке это:
Итак, Mobile First это метод разработки оптимизированного вебсайта для различных мобильных устройств с учетом скорости подключения к сети. И важность отображения основного содержания конечному пользователю.
О важности этого подхода недавно писал поисковой гигант Google:
«Мы будем увеличивать значение показателя mobile-friendly в нашем рейтинге результатов. Эти изменения повлияют на мобильный поиск на всех языках мира и окажет значительное влияние на результаты поиска. Следовательно, пользователям будет легче находить результаты оптимизированные под их устройства.»
Видео о значимости Mobile First от Olivier Rabenschlag – глава Агентства Творческого Развития Google.
Плюсы Mobile First подхода
Напомню, что на сегодняшний день количество пользователей использующих мобильные устройства для серфинга в интернете достигло 60%. И поэтому использование Mobile First при разработке вебсайта дает большие преимущества для этих пользователей в первую очередь.
Хроника основных шагов Google, ориентированных на mobile
Что все эти изменения значат для вебмастеров?
Если вы используете адаптивный mobile-friendly сайт, то почти ничего нового. Но даже, если ваш сайт оптимизирован для мобильных устройств, вы можете «выжать» из своей SEO-стратегии ещё больше. Для этого вам нужно перестать делать некоторые вещи. В частности:
Наличие отдельного мобильного сайта – это во многих случаях вполне оправданный вариант. К примеру, если у посетителей мобильной и десктопной версии ресурса разные персоны. Однако сочетание такого подхода с внутренними редиректами, основанными на устройстве просмотра, может вызвать ряд проблем. В частности, mobile-first роботу Googlebot будет значительно сложнее найти десктопную версию сайта.
Более оптимальным подходом будет использование атрибутов rel=alternate и rel=саnonical, чтобы разметить десктопную и мобильную версии ресурса. По словам представителей Google, поисковик продолжит использовать эти ссылки в качестве ориентира для показа подходящих результатов пользователям поиска.
В новых условиях на обеих версиях страницы – и десктопной и мобильной – должен быть один и тот же контент. Вы можете использовать разное форматирование или убрать некоторые визуальные эффекты в мобильной версии. Важно, чтобы основное содержимое было идентичным. Использование скрытых редиректов для показа мобильным пользователям контента, отличного от содержимого десктопной версии страницы, – одна из причин запуска mobile-first индекса Google.
Мобильные устройства предлагают намного меньше места для показа контента по сравнению с десктопными – несмотря на то, что размер экрана постоянно увеличивается. Это значит, что мы должны по-максимуму использовать доступное пространство на странице результатов поиска. Упоминания ключевых слов в метаданных, заголовках, тексте и структурированных данных будет играть ещё большую роль в мобильном поиске.
Как упоминалось выше, разметка структурированных данных может помочь вашему сайту выглядеть лучше в результатах поиска. В итоге вы сможете получить больше переходов из поисковой выдачи. Список поддерживаемых Google схем разметки и расширенных карточек постоянно растёт.
Мобильные запросы по своей природе очень часто имеют локальный интент – мы ищем кафе или магазины поблизости и т.п. Продвигаете ли вы местный бизнес или всего лишь размещаете имеющий локальную специфику контент, задумайтесь об оптимизации ваших страниц под локальное SEO.
Скорость сайта может повлиять на ваши позиции как по десктопным, так и мобильным запросам. Однако на мобильных устройствах эта проблема ещё более важна. Регулярно проверяйте, сколько времени занимает загрузка и визуализация сайта. Убедитесь, что вы:
В том случае, если вы используете отдельный мобильный сайт, создайте для него отдельный ресурс в Search Console. Тогда вы сможете видеть и устранять проблемы, которые мешают вам ранжироваться в Google.
Вам нужна помощь с новой технологией? Пишите!
Руководство по Mobile First: как адаптировать SEO-процессы. Часть 1
Разбираемся с Mobile First и разными конфигурациями мобильных сайтов
Один из заметных трендов 2019 года — индексация Mobile First в Google. Акцент на «мобильность» сайтов становится все сильнее, и в наступающем году состояние мобильной версии сайта станет важным фактором для продвижения в Гугле. Мы уже писали о том, какие подводные камни могут встретиться при внутренней перелинковке мобильных версий сайта, а теперь перевели большое руководство о Mobile First в целом.
Часть первая: что такое Mobile First и какие типы конфигурации мобильных сайтов различает Google
В этом руководстве мы разберемся, на какие SEO-параметры все еще стоит обращать внимание, а также поговорим об адаптации рабочих процессов к Mobile First. Техническое SEO, внутренняя оптимизация, создание контента и его распространение по-прежнему актуальны, однако теперь нам следует анализировать эти факторы с помощью экрана смартфона, а не десктопа.
Прим. ред. Реальность давно уже становится «мобильной»: вот открытая статистика Liveinternet — последние три месяца 2018 года число посетителей с мобильных девайсов составляло больше 70% от общего в Рунете.
Система PromoPult — рекламный комплекс для продвижения бизнеса в интернете. Полная автоматизация, готовые чек-листы, точные настройки. Создана для тех, кто хочет высвободить время на действительно серьезную работу.
Что такое индексация Mobile First?
До марта 2018 года ранжирование Google основывалось на сканировании и индексации десктопного контента. Googlebot для десктопов сканировал страницы сайта и передавал URL системе индексирования Caffeine. Страницы анализировались по множеству критериев, начиная от дизайна и контента и заканчивая настройками каноникализации и внешними ссылками.
Теперь Google все активнее использует Googlebot (Smartphone), а система Caffeine ориентируется прежде всего на мобильные версии. Принципы сканирования и индексации в основном остаются теми же, но то, как ваш сайт выглядит и работает на мобильных девайсах, будет иметь значительно больший вес, чем десктопная версия.
Ранжирование вашего сайта будет зависеть (или уже зависит) исключительно от мобильного, а не десктопного SEO.
Десктопная индексация все еще имеет некоторый вес, однако в конечном итоге решающим станет мобайл. О переходе на мобильную индексацию Google сообщает администраторам сайта через Search Console:
Введение Mobile First — логичный шаг Google в череде действий по развитию мобайл-френдли интернета и прямой ответ на рост использования мобильных девайсов.
В 2016 году Google объявил приход «Мобайлгеддона» (Mobilegeddon). Этот довольно слабый апдейт со странным названием можно считать предшественником индексации Mobile First. Тогда Google анонсировал изменение алгоритма, при котором предпочтение отдавалось мобайл-френдли сайтам. В реальности мало что изменилось, по крайней мере, не сразу. Реальные изменения стали заметны лишь спустя несколько месяцев. А сейчас этот процесс завершается — переходом к Mobile First.
Итак, как должны измениться SEO-процессы, когда индексация Mobile First развернулась в полную силу? Вот несколько рекомендаций для начала.
Пять типов конфигурации мобильных сайтов — по убыванию «пригодности» к Mobile First
После введения Mobile First Google выпустил руководство для веб-мастеров по улучшению мобильной индексации. Советую всем SEO-специалистам и интернет-маркетологам тщательно изучить этот гайд, прежде чем двигаться дальше.
1. Адаптивные сайты
Адаптивные сайты используют один и тот же HTML-код независимо от устройства. Макет и контент масштабируются, чтобы адаптироваться под размер экрана.
Такая конфигурация рекомендована Google, поэтому она должна быть в приоритете при выборе типа мобильного дизайна.
Поскольку вы используете один и тот же HTML-код, контент не будет дублироваться. Кроме того, это облегчает администрирование контента и сайта в целом, так как не придется иметь дело с каноникализацией. По сути, мобильная версия вашего сайта ничем не будет отличаться от десктопной.
2. Динамический показ
При динамическом показе сайт использует разные HTML и СSS в зависимости от устройства, с которого вы заходите. Как и для адаптивных сайтов, URL не меняется, однако мобильный контент «спрятан», когда пользователи и юзер-агенты заходят на сайт с десктопа, и наоборот.
Чтобы указать Google, какой юзер-агент он должен применить (для десктопа или для смартфонов), следует использовать HTTP-заголовок Vary.
Несмотря на то, что под одним URL будет находиться один и тот же контент, с марта 2018 года Google отдает все больше предпочтения той его части, которая используется для мобильной конфигурации. Больше информации о сайтах с динамическом показом можно найти в гайде Гугла, а вот рекомендации по настройкам для Mobile First.
3. Разные URL
В этом случае для отображения сайта на мобильных устройствах используется другой URL, обычно с поддоменом «m.».
Использование разных URL (как и динамический показ) становится все более устаревшим методом, поскольку он значительно усложняет администрирование сайта. Возможно, вам придется работать и с такой конфигурацией — это может быть обусловлено особенностями ресурса.
Например, Facebook до сих пор адаптируется под мобильные девайсы именно так. Можно предположить, что переход к другой, более современной конфигурации связан с солидными затратами, поэтому отставание компенсируется за счет большого набора специализированных мобильных приложений.
В будущем Google будет анализировать в первую очередь мобильные URL. В любом случае интересно, как эта конфигурация будет работать в мире SEO, ориентированного на мобильные девайсы, особенно учитывая быстрые перемены, связанные с каноникализацией и PageRank.
4. Канонические AMP-страницы
Канонические AMP-страницы (Accelerated Mobile Pages) — инициатива, запущенная Google в феврале 2016 года.
AMP помогают улучшить мобильную экосистему как для владельцев сайтов, так и для пользователей за счет заметно возросшей скорости загрузки страниц. С помощью библиотек и фреймворков AMP вебмастера получают быстрое оптимизированное решение для отображения контента на мобильных девайсах.
Этой возможностью сразу воспользовались новостные агентства и другие СМИ, постепенно AMP появляются и в е-коммерсе.
Настройка передачи контента через AMP аналогична использованию разных URL. Как правило, мобильная версия доступна по URL в подкаталоге /amp/. Соответственно, рекомендации по настройке те же, что и для мобильных сайтов под другим URL.
Если вы используете AMP HTML в качестве мобильной конфигурации сайта, Google выберет эту версию при индексации Mobile First. Однако если вы сочетаете AMP и не-AMP, Google предпочтет мобильную версию не-АМР.
Здесь могут возникнуть те же проблемы, что и с разными URL. Как Mobile First влияет на сайты с AMP, особенно в тех случаях, когда доступна не-AMP альтернатива? В любом случае, ключевая задача AMP — отображение на мобильных устройствах облегченной версии контента, при этом часть внутренних ссылок и других элементов оптимизации могут пропасть.
5. Полная версия (только для ПК)
Это сайты, которые предназначены для просмотра только на десктопе и не имеют мобильной версии.
По сути, применение индексации Mobile First к сайтам без мобильной версии можно считать не совсем корректным, потому что их конфигурация изначально не предполагает отображение на смартфонах. Дальнейшее использование такого формата, несомненно, будет иметь неприятные последствия и ухудшит видимость сайта в органической выдаче (если это уже не случилось). То, что вы не предоставляете пользователям возможности удобно пользоваться вашим сайтом с мобильных устройств, прямо противоречит общим рекомендациям для вебмастеров, не только для индексации Mobile First.
Google по-прежнему принимает такую конфигурацию для индексации Mobile First, но это явно не лучший вариант. Если к 2018 году ваш сайт все еще не мобайл-френдли, вам следует всерьез задуматься о запуске нового сайта, отвечающего требованиям под мобайл.
Если вы не уверены, является ли ваш сайт мобайл-френдли, рекомендуем использовать инструмент проверки оптимизации для мобильных от Google. Для более глубокого аудита адаптированности под мобильные подойдет расширение для Chrome Lighthouse.
В следующей части руководства: как изучить ваш сайт глазами Гуглобота для мобильных (с десктопа).