Мобильные — прежде всего. Поэтапная адаптация под mobile-first
1423
0/10
«Мобильные — прежде всего» — это лозунг, который знают все поисковые оптимизаторы и вебмастера мира.
Означает ли появление «mobile-first», что концепция заработка на создании сайтов меняется?
Пробный запуск поискового алгоритма «mobile-first» стартовал в 2016 году и произвел большой резонанс. Самые проворные начали работу над корректным отображением сайтов на мобильниках. Однако, «Многие» не означает — «Все».
Начались перегибы. Некоторые, прознав о нововведении, сделали мобильную версию и расположили ее на домене третьего уровня. Они решили, что это панацея от всех недугов, возникших с приходом эры обожествления мобильных платформ.
Этот материал — полная инструкция по «mobile-first» и о том, как адаптировать сайт под новые условия.
Поквартальный график изменения доли мобильного трафика с 2015 по 2018 гг.
Из диаграммы следует, что до третьего квартала 2017 года число пользователей, которые предпочитают использовать для интернет серфинга мобильные телефоны и планшеты медленно, но верно, росло. С середины этого года количество поклонников носимых устройство остается примерно равным числу тех, кто читает интернет с десктопов.
Изучение отчетов в Google Analytics и Яндекс.Метрике говорит о том, что рост посещений при помощи мобильной техники медленно, но верно возрастает. Специалисты утверждают, что эта тенденция будет сохраняться долго.
Летом 2018 поисковая система Google запустила в полномасштабную эксплуатацию алгоритм «mobile-first». Благодаря ему, в ранжировании сайтов поисковик будет отдавать предпочтение тем площадками, которые адаптированы под все виды устройств и нормально на них отображаются. Google, в первую очередь, сканирует мобильные страницы сайта и делает упор на комфорт использования, пользовательский опыт и мобильное юзабилити.
Что такое «mobile-first» от Google?
Google не выделяет мобильное индексирование интернет ресурсов в самостоятельный раздел поиска. Он, как и раньше, остается единым для всех. Изменился только user agent поисковика.
User Agent — это сведения, которые поисковый обозреватель отправляет на сервер. Он служит для определения версии браузера, языка, наличия плагинов.
До «mobile-first»
После «mobile-first»
Посетителю, который пользовался поисковиком с помощью мобильной техники, предлагались варианты из специальной мобильной базы проиндексированных сайтов.
Тот, кто вводил данные с настольного компьютера, видел другие результаты — из десктопного индекса.
Сейчас поисковая база одна — мобильная. Независимо от того, каким устройством пользуется читатель, поисковая выдача формируется на основании данных из мобильной базы. Таким образом, привилегия отдается сайтам, которые правильно и удобно работают на любых аппаратах.
Как включить сайт в мобильный индекс?
Google дает следующий ответ на этот вопрос.
«Уважаемый собственник сайта!
Запуск „mobile-first“ означает, что в логах сервера вы увидите специального google бота. В кэше мы сохраним мобильную версию страницы. В сниппетах отобразим мобильный контент. Если вы настроили правильный динамический показ, вам не о чем беспокоится. Если нет, то проверьте ваш сайт на готовность к новым требованиям „mobile-first“.»
Что означает «Мобильное устройство»?
Понятие «Мобильное устройство» каждый трактует по-разному. Обратимся к руководству Google для разработчиков, чтобы определиться в понятиях и прийти к общему знаменателю.
«Мобильное устройство — это смартфоны типа iPhone и работающие на операционных системах Android и Windows. Мобильные браузеры, как и интернет обозреватели настольных компьютеров, поддерживают html5, но физические размеры мониторов меньше. В них чаще применяется вертикальная ориентация.»
Обратите внимание, что авторы не упоминают планшеты и технику с нестандартными мониторами. С точки зрения Google, они не относятся к семейству мобильных. Это отдельный пласт аппаратов.
Какими способами адаптировать сайт под смартфоны?
Опять обратимся к руководству Google для веб-разработчиков. Оно предлагает три способа приспособления.
Конфигурация
Адрес не меняется
Код не меняется
Адаптивный дизайн
Да
Да
Динамический показ
Да
Нет
Отдельная версия
Нет
Нет
В реальности, чаще встречаются адаптивные сайты и независимые версии для смартфонов. Их и рассмотрим детальнее.
1. Адаптивный дизайн
Адаптивный дизайн обладает особенностью — все модули и блоки страницы автоматически подстраиваются под монитор любого размера. Такие площадки хорошо смотрятся на смартфонах, наладонниках и десктопах.
Преимущества адаптивной верстки
Комфорт разработки. Интерфейс сайта автоматически подстраивается под тот экран, на котором отображается. Администратор сайта один раз форматирует новый контент в момент выкладки. Нет необходимости размечать его под разную аппаратуру.
Не используется переадресация, так как url страницы — единый для десктопа и для мобильника. Нет необходимости запоминать разные адреса, если нет возможности сохранить их в «Избранное». Это частично решает трудность с дублированием текстов.
Комфортное изучение аналитических отчетов. Все виды трафика: мобильный, настольный и пр., помещаются в едином документе.
Недостатки адаптивной верстки
Такое бывает редко, но все же случается — с загрузкой сайта в мобильном браузере могут произойти перебои. На всех видах техники используется одинаковый контент, который в некоторых условиях становится невидимым или отображается по-другому. Загрузка контента происходит в любом случае. Контент бывает переполнен активными блоками, которые на слабых мобильниках отображают дольше.
2. Независимая мобильная версия
В этом случае создается отдельная версия площадки для смартфонов на подчиненном домене. Идентификация устройства и редирект на нужный домен производит сервер.
Преимущества отдельной версии
Все элементы адаптируются под мобильники.
Код страницы не перегружается вариантами для разных типов устройств. Загрузка происходит быстрее.
Недостатки
Перед командой разработчиков, оптимизаторов и администраторов встает задача по обслуживанию не одного, а сразу двух сайтов.
При появлении обособленной версии возникают и другие нюансы:
необходимость добавлять на страницы атрибуты: link rel="canonical" со ссылкой на десктопную страницу и rel="alternate" со ссылкой на мобильную страницу.
3. Рекомендация по выбору способа адаптации
Используйте адаптивный дизайн. Это менее затратный, оптимальный вариант. При разработке делайте акцент на скорость загрузки обеих версий: настольной и мобильной.
Современные требования к сайтам
Жесткие безапелляционные требования к любому сайту:
Наличие адаптивной верстки или мобильной версии.
Способность загружать страницы быстрее 2 секунд на любых устройствах.
Сервисы проверки скорости мобильных страниц
1. Thinkwithgoogle
Вводите адрес сайта, который исследуете, местонахождение предполагаемого пользователя и скорость передачи мобильных данных.
Максимальная скорость загрузки мобильной страницы — 2 секунды. Если скорость ниже, то сайт не будет участвовать в поисковой выдаче Google.
2. Google Analytics
Аналитическая служба от Google вычисляет средний показатель. Используйте его, как ориентировочную величину.
3. Webpagetest.org
Сервис на английском языке. Тест для одного сайта проводите без регистрации. Выбирайте геолокацию и тип мобильного устройства.
Инструмент Webpagetest.org выдает подробный график скорости мобильнй загрузки каждой директории исследуемого сайта.
Проводите проверку в том регионе, в котором находится большая часть вашей целевой аудитории.
Наличие SSL сертификата и возможность эксплуатации на безопасном протоколе https обязательно для сайтов, наличие которых желательно в поисковой выдаче Google.
Мобильное юзабилити
Увеличьте, по сравнению с десктопной версией, кнопки, важные ссылки, меню и их элементы. Всё должно хорошо читаться. Расположите управляющие элементы на таком расстоянии друг от друга, чтобы пользователи легко попадали по ним во время тапа пальцем.
Установите размер шрифта не менее 16 кегля. Это порог, ниже которого посетители будут ощущать дискомфорт.
Цвет шрифта установите более контрастным, чем на десктопной технике. На маленьких мобильных экранах все воспринимается по-другому.
Длинные тексты скрывайте под катом: «Читать дальше».
Адаптируйте текстовые страницы к границам экрана. Горизонтальных прокруток быть не должно.
Проверьте наличие вертикальных полос прокрутки. Это важнейшие элементы навигации.
Уменьшите размер изображений. Установите функцию их увеличения по тапу.
Главное меню разместите в верхнем углу. Привычный для него значок — три полоски — «гамбургер».
Удалите с мобильной версии всплывающие окна. Если есть крайняя необходимость их оставить, то они не должны занимать больше 20% экрана.
Проводите тестирование мобильного юзабилити вручную на собственных аппаратах. Обменяйтесь телефонами, чтобы объективно оценить достоинства и недостатки адаптивности страниц.
Проследите за тем, чтобы:
Мобильный контент совпадал с настольным.
На всех мобильных страницах имеются мета-теги, заголовки и другие обязательные атрибуты.
Перенесите микроразметку с десктопа на мобильник.
Создайте для мобильной версии отдельный файл robots.txt.
Добавьте в панель вебмастера Google обе версии сайта.
Избегайте дублей контента. Пользуйтесь атрибутами «prev» и «next» при включении пагинации. Уникализируйте метатеги добавлением номеров страниц.
AMP, Accelerated Mobile Pages — ускоренные мобильные страницы
Эту технологию применяют все лидеры мировой IT сферы: Google, Bing, Yahoo, Twitter, Facebook, LinkedIn, Baidu.
С точки зрения Google, достоинство AMP заключено в молниеносной загрузке страницы. Поисковик отдает предпочтение ускоренным страницам при ранжировании.
Снабдите Accelerated Mobile Pages микроразметкой. Этим вы поднимете шанс попадания сайта в карусель новостей Google. Следуйте технологии JSON-LD, добавьте изображение и анонс для превьюшки, дату редактирования.
В AMP должна быть каноническая страница основной версии площадки.
Проверка мобильного индекса
Для проверки того, как видят мобильный сайт поисковики, обратитесь к Google вебмастер.
Выберите в боковом меню «Сканирование» → «Посмотреть как Google Bot».
В выпадающем меню выберите «Mobile: smartphone».
Нажмите на кнопку «Получить и отобразить».
Повторите цикл на каждой странице сайта. Корневой каталог указывать не нужно.
С помощью Google Webmaster вы увидите, как поисковик видит ваши мобильные страницы.
***
Армия мобильных пользователей прирастает с высокой скоростью. Адаптируйте сайт к правильному отображению на любом виде аппаратов. Удержите львиную долю молодых читателей, которые используют для интернет-серфинга только мобильную технику. Протестируйте сайт, чтобы взглянуть на него глазами читателей и поисковых систем. Уделите время главной странице и всем второстепенным.
Предпочтите обособленной мобильной версии адаптивный дизайн. Это наиболее оптимальное решение. Обратите внимание на AMP с микроразметкой — страницы с ускоренным запуском. Помните о канонических страницах, уникальных метатегах и мобильном юзабилити.
