Недавно Google объявил, что с 21 апреля будет учитывать дружественность сайтов к мобильным устройствам при ранжировании в мобильной выдаче. В связи с этим важно поработать над адаптацией своего сайта. Во-первых, примерно у 80% пользователей есть смартфоны, и большинство из них использует в качестве поисковой системы Google. Во-вторых, пока никто не знает, будет ли влиять mobile friendly фактор на основную выдачу, что вполне вероятно. Эта тема сейчас очень актуальна и мы предлагаем вам адаптированный перевод статьи от зарубежных коллег.
Кстати, в SEOlib теперь есть возможность отслеживать позиции сайта в мобильном Google. Подробнее…
Что делает сайт дружелюбным к мобильным устройствам?
С ноября 2014 года Google выделяет сайты, которые он считает дружелюбными к мобильным устройствам, помечая их в поисковой выдаче следующим образом:
Итак, что же делает сайт дружелюбным к различным мобильным устройствам? Google выделяет три пункта: оформление, контент, скорость загрузки и выдвигает следующие требования к сайту, чтобы пометить его как адаптированный под мобильные устройства:
- Сайт не должен использовать программное обеспечение, которое обычно не встречается на мобильных устройствах, сюда, например, можно отнести Flash-контент.
- Текстовый контент сайта должен быть читабельным без необходимости увеличения масштаба. Т.е. минимальный размер шрифта должен составлять 12 пикселей, а сам шрифт должен быть четким, понятным, в общем, легко считываемым. По возможности надо свести к минимуму использование изображений с текстом.
- Информацию на сайте необходимо предоставлять таким образом, чтобы она полностью помещалась на экране, т.е. чтобы не было необходимости в горизонтальной прокрутке или масштабировании.
- Ссылкам нужно отводить достаточно места, чтобы у пользователя не возникало проблем с кликом по ним. Google в этом случае советует отводить как минимум 48 dp (пиксели, не зависящие от плотности ), и минимально 8 dp на пространство между ссылками.
В дополнение к этим четырем фундаментальным пунктам Google также советует разрабатывать дизайн и структуру сайта таким образом, чтобы у пользователей не было необходимости в использовании мыши, которая не рассчитана для работы на сенсорных устройствах (планшеты, смартфоны). Используйте кнопки, прикосновение к которым приведет к открытию более полного меню. Также необходимо свести к минимуму всплывающие окна, т.к. их обилие на мобильных устройствах раздражает пользователей, впрочем, как и на ПК.
Нежелательно также использовать промежуточные страницы. Вместо этого вы должны размещать кнопки быстрой загрузки, а также всевозможные четко обозначенные кнопки, например, хлебные крошки и краткие имена категорий. Все это сделает навигацию по сайту максимально удобной и простой.
Различные способы создания mobile friendly сайта
Как уже отмечалось выше, очень важно правильно подобрать размер контента, чтобы он четко отображался в окне браузера на мобильном устройстве без необходимости его прокрутки или увеличения масштаба. Кроме того, необходимо убедиться, что контент вообще просматривается на подобных девайсах. Этого можно достичь тремя способами: использовать адаптивный веб-дизайн, динамический показ и раздельные урлы. Давайте рассмотрим каждый из этих способов и обсудим их преимущества и недостатки:
Метод № 1: Адаптивный веб-дизайн (предпочтителен)
Google рекомендует изначально выбирать адаптивный шаблон для сайта. Такие сайты используют те же HTML-коды и URL, независимо от того, с какого устройства просматривается сайт. Но при этом сайт автоматически подстраивается под размер экрана пользователя.
Преимущества адаптивного веб-дизайна:
- Контент использует одни и те же урлы, независимо от того, с какого устройства просматривается сайт. Это позволяет пользователям легко делиться материалом и упрощает поисковым системам поиск и индексацию контента.
- Сайты с адаптивным дизайном в полной мере подстраиваются под устройства, и это касается не только отображения текста, но и различных характеристик, функций.
- В таких сайтах учитывается и альбомная, и книжная ориентация.
- Нет необходимости в переотправке на другие страницы, т.к. время загрузки сокращено, а производительность улучшена.
Недостатки адаптивного веб-дизайна:
- На создание качественного адаптированного веб-дизайна для каждого типа устройства может потребоваться много времени.
- При некачественном осуществлении адаптивного дизайна он может сформировать негативное впечатление у пользователей. Например, распространенная ошибка – раздутие контента, когда пользователи с мобильных устройств вынуждены загружать полноразмерные изображения, которые подходят для ПК и быстрого интернета, но никак не для захода на сайт со смартфона или планшета. Хороший адаптивный дизайн подразумевает сокращение количества HTTP-запросов, минимизацию CSS и JavaScript, при этом загрузка видимого контента является первоочередной задачей.
СОВЕТ: Никогда не блокируйте доступ Google к вашим CSS, JavaScript и файлам изображений. Google необходим доступ к ним, чтобы понять, адаптивный ли у вас дизайн, иначе он никак не сможет пометить ваш сайт как «дружелюбный к мобильным устройствам».
Метод № 2: Динамический показ
Сайты с динамическим показом используют те же урлы, вне зависимости от того, с какого устройства просматривается сайт, но при этом используют разные версии HTML для каждого типа девайса, основываясь на том, что сервер может определить тип браузера пользователя.
Преимущества динамического показа:
- Динамический показ предоставляет настроенную пользовательскую историю, т.е. контент отображается с учетом типа устройства пользователя.
- У сайтов с таким дизайном легче настроить макет или контент для конкретного устройства, не беспокоясь, будут ли ваши изменения влиять на отображение на других устройствах.
- При таком дизайне больше возможностей оптимизировать контент под более быструю скорость загрузки страницы для каждого отдельного типа устройства.
- Как и сайты с адаптивным дизайном, данный тип использует один и тот же URL, что позволяет пользователям легко делиться ссылками на контент.
Недостатки динамического показа:
- Поскольку у вас есть несколько страниц с одинаковым содержанием, то любые обновления на какой-либо конкретной странице или статье требуют их внесения и в другие места. Это приводит к определенным трудностям в управлении контентом.
- Хотя серверы, как правило, хороши в определении конкретного устройства (т.е. с которого зашел пользователь), они не всегда срабатывают со 100% точностью. Особенно это касается случаев, когда скрипты обнаружения позволяют выходить за даты. В таком случае пользователям будет представлена неправильная версия или ориентация вашего сайта.
- Подгонка отображения сайта для каждого устройства иногда может означать, что пользователи будут по-разному видеть сайт в зависимости от того, на какой его версии они находятся. Это может привести к путанице и сформировать негативное впечатление.
СОВЕТ: Возможна такая ситуация, что поисковые боты будут не в состоянии сразу определить, что вы используете различные версии HTML в зависимости от устройства пользователя. Для разрешения этой проблемы используйте стандартный метод HTTP заголовков для того, чтобы указать ботам, что данный сервер варьируется в зависимости от агента пользователя. Что касается комплекса сайтов, убедитесь, что Google имеет доступ ко всем вашим ресурсным файлам.
Метод № 3: Раздельные урлы
Некоторые веб-сайты пытаются определить, с какого устройства зашел пользователь, а затем перенаправляют его на другой URL, который имеет другой код в зависимости от устройства просмотра.
Преимущества использования раздельных урлов:
- Использование отдельных URL-адресов предоставляет наибольшую гибкость в настройках работы, т.к. вы будете строить сайт под запросы конкретного мобильного устройства.
- Вы можете легко изменить макет или содержание сайта для мобильного устройства, не беспокоясь о том, как будут выглядеть эти изменения на других устройствах.
Недостатки использования раздельных урлов:
- Наличие нескольких URL-адресов означает переотправку пользователей в зависимости от их устройства. Распространенной ошибкой является перенаправление пользователей мобильных устройств, пришедших на страницу с большим уровнем вложенности (УВ>3), на домашнюю страницу мобильной версии сайта. Вы также должны проверить: когда пользователи мобильных устройств делятся вашим контентом, другие пользователи с ПК правильно перенаправляются на предназначенную для них страничку. При этом перенаправление может привести к увеличению времени загрузки сайта.
- Управление и обновление двух комплектов идентичного содержания всегда более затратная по времени и сложная задача.
- Необходима двусторонняя аннотация, чтобы помочь Google понять взаимосвязь между дублированным контентом для ПК и мобильных устройств. Отсутствие такой аннотации введет ботов в заблуждение и запросто приведет к дублированию контента (подробнее читайте тут – прим. ред.)
- Плохая реализация настройки двух отдельных сайтов приведет к неоднозначной ситуации и собьет пользователей с толку.
Основные правила мобильной оптимизации
Какой бы из вышеперечисленных методов для создания сайта, дружественного к мобильным устройствам вы ни выбрали, существуют 3 правила, которым необходимо следовать в любом случае:
1) Отправьте Google соответствующий сигнал, который сообщит ему, что страница специально отформатирована для мобильных устройств, либо покажите ему то место, где он может найти эквивалентную страницу, предназначенную для мобильных устройств.
2) Убедитесь, что все ваши ресурсы удобны для ботов, и особое внимание уделите файлу robots.txt, который может как-либо помешать доступу поисковым ботам к необходимым файлам, отвечающим за отображение страницы. Это касается всевозможных изображений, JavaScript и CSS. Если гуглбот не может получить доступ к этим ресурсам, то он не в состоянии определить, что данная страничка дружественна к мобильным устройствам, и, следовательно, не может маркировать ее как таковую.
3) Не используйте элементы, которые не применяются для пользователей с мобильных устройств. В качестве примера здесь можно упомянуть использование Flash-контента в качестве основного содержания страницы. Страница с таким контентом не подходит для данной категории пользователей, поэтому ваш сайт будет отображаться либо в самом конце результатов поиска, либо с предупреждением.
Типичные ошибки сайтов, дружественных к мобильным устройствам
— Медленная загрузка мобильных страниц. Быстрая загрузка сайта очень важна, и это особенно актуально для пользователей с мобильных устройств, где скорость соединения, как правило, хуже, чем у пользователей с ПК. У Google есть инструмент проверки скорости загрузки страниц (PageSpeed Insights), где можно найти специальную вкладку, содержащую все ресурсы по оптимизации скорости загрузки сайта для мобильных устройств.
Оптимизация скорости включает:
— устранение блокирующих показ сайта Java скриптов и CSS в контенте, видимом без прокрутки;
— максимальное использование кэширования в браузере, сжатие изображений, уменьшение HTML, CSS и JavaScript кода;
— неиспользование редиректа на целевую страницу.
Все эти действия как бы компануют контент и отдают приоритет загрузке видимого содержимого сайта, что благотворно сказывается на скорости загрузки/времени отклика сервера.
— Блокировка ресурсных файлов (CSS, JavaScript, изображения). Неразумно блокировать гуглботам доступ к ресурсным файлам, т.к. это мешает Google «видеть» сайт как типичному пользователю, что может негативно сказаться на рейтинге сайта. Кроме того, это препятствует Google распознать ваш сайт как дружественный к мобильным устройствам. Используйте в панели вебмастера инструмент «Fetch as Google» в Webmaster Tools, чтобы проверить, как Google «видит» ваш сайт.
Продиагностируйте файл robots.txt с помощью инструмента тестирования Robots Testing Tool. И наконец примените инструмент проверки дружественности сайта к мобильным устройствам Mobile Friendly Test. Если вы выбрали метод использования раздельных урлов, то проверьте с помощью данного инструмента и мобильную версию сайта, и версию для ПК.
— Несоответствующий кросс-линкинг. Довольно часто, если есть две версии сайта на отдельных урлах, возникает путаница со ссылками, например, для ПК версии может вылезти ссылка, предназначенная для мобильных устройств, и наоборот. Очень внимательно и тщательно проверяйте ссылки, чтобы быть уверенным, что они корректно ссылаются на необходимую версию сайта. В частности данная проблема очень часто возникает у мобильных версий сайта, установленных на поддоменах или подкаталогах, т.е. когда ссылки сильно закодированы.
— Страница 404. Иногда пользователь с мобильного устройства заходит на страничку, предназначенную только для доступа с ПК, и видит ошибку 404 (страницы не существует). Для устранения такой ошибки необходимо определять, когда мобильный пользователь заходит на страницы для ПК, и автоматически перенаправлять его на нужные ему страницы.
— Непросматриваемый контент. Некоторые видео и типы контента не отображаются на мобильных устройствах, а когда пользователь пытается получить доступ к ним, то он видит сообщение об ошибке. Для устранения такой ошибки необходимо использовать стандарты HTML5 для анимации, видеопроигрыватель, который можно воспроизводить на всех типах устройств, и обеспечить транскрипты видео для пользователей, которые не могут получить доступ, просматривать или воспроизводить его по любой другой причине.
— Использование промежуточных страниц. Иногда при заходе на страницу можно увидеть промежуточную страницу, предлагающую скачать мобильное приложение для сайта. Это производит негативное впечатление на пользователей и может вызвать проблемы с индексацией контента у ботов. Google в таких случаях советует использовать баннер для продвижения вашего приложения.
— Неисправные перенаправления. Иногда пользователи с ПК ошибочно перенаправляются на мобильную версию сайта и наоборот. При этом их отправляют на домашнюю страницу, а не на эквивалентную. Такое часто происходит, если вы используете динамически генерируемые страницы, которые хорошо не отображаются на мобильных версиях. Используйте инструменты Гугл Вебмастера («Ошибки сканирования») для выявления данной проблемы.
Инструменты для проверки Mobile Friendly в вебмастере
Инструменты вебмастера Google предоставляют конкретные указания и ссылки, помогающие создать сайт, дружественный к мобильным устройствам:
Но даже если у вас в аккаунте вебмастера не отображаются конкретные советы по устранению неполадок, вы также можете использовать инструменты вебмастера для создания сайта, более дружественного к мобильным устройствам.
Использование инструмента для отслеживания проблем мобильного юзабилити («Mobile Usability tool»)
Для использования данного инструмента для начала необходимо верифицировать сайт инструментами вебмастера. После этого у вас появится возможность выбрать данный инструмент из выпадающего списка; вы также увидите подробные отзывы о юзабилити вашего сайта для мобильных пользователей. В отчете будет представлена информация о мобильном юзабилити, касающемся всего сайта, а не только его отдельных страниц. Кроме того, вы сможете кликнуть по ссылкам и посмотреть, у каких именно страниц есть проблемы.
После того как вы это сделаете, по каждой отдельной странице будет предоставлена информация, помогающая решить проблему юзабилити, и ссылка на необходимый инструмент.
Оригинал статьи смотрите тут.