21 апреля Google официально выкатил новый алгоритм ранжирования: оптимизированные для просмотра на мобильных устройствах сайты теперь имеют преимущество при мобильном поиске. Давайте разберемся, так ли страшны изменения в алгоритме ранжирования Google, и что следует делать сайтовладельцам, чтобы остаться на плаву в мире мобильный устройств.
Что за диковинный зверь этот Mobile-Friendly? Специалисты из поискового гиганта сообщают, что это изменение повлияет на результаты выдачи больше, чем черно-белые алгоритмы-предшественники. Есть основания полагать, что изменится не менее 11% результатов выдачи. Впрочем, мы пристально следили за обновлением — и ни на один из наших сайтов алгоритм не повлиял. Пока что не повлиял.
Google просто усложняет жизнь SEO-шникам? Или это очередной хитрый ход, который заставит бизнес уйти в контекстную рекламу?
Несмотря на расхожее мнение, Google просто заботится о своих пользователях. «Результаты должны быть релевантными, удобными для просмотра и всеобъемлющими» — вот главная заповедь поисковика. Не так давно представители Google обнародовали статистику, согласно которой в 10 странах мира поиск с мобильных устройств превысил поиск с десктопов. Проще говоря, интернет становится мобильным. Пользователи ищут информацию со своих смартфонов и хотят находить ее в удобном для мобильного экрана формате.
Каким должен быть сайт, чтобы приглянуться Google?
Проверьте, чтобы элементы дизайна и контент соответствовали требованиям:
- Крупный, читабельный шрифт;
- Крупные, удобные для нажатия с сенсорного экрана ссылки;
- Удобное расположение блоков на странице;
- Меньше длинного текста, больше интерактивного контента (например, видео-обзоры вместо целой «википедии» статей на сайте пластиковых окон).
На что повлияет это обновление?
- На ранжирование при мобильном поиске. Важно: в Рунете процент поисковых запросов с мобильный устройств достаточно невелик. Бить тревогу не стоит, но и сидеть сложу руки также: самое время работать на перспективу.
- На отдельные страницы, но не на весь сайт.
- На все страницы на всех языках по всему миру.
Как узнать, является ли ваш сайт Mobile-Friendly?
Google предоставляет специальный сервис Mobile-Friendly Test, при помощи которого определяется удобство просмотра вашего сайта на мобильных экранах.
Кроме этого, можно найти свой сайт в поисковой выдаче и посмотреть, стоит ли перед сниппетом специальная пометка «Для мобильных». Этот знак качества — лучшее доказательство, что сам Google расценивает страницу, как адаптированную к мобильному просмотру.
Проверить скорость загрузки сайта на мобильном устройстве можно при помощи еще одного инструмента Google — PageSpeed Insights.
Но, даже если результаты данных трех тестов вас обрадовали, не думайте, что только из-за этого сайт сразу же переместится в ТОП. Специалисты Google акцентируют внимание на том, что Mobile-Friendly — только один из факторов ранжирования, и пренебрегать остальными в надежде лишь на симпатию поисковика перед мобильной версией не стоит.
Если сайт не адаптирован к новым правилам игры — все пропало?
Нет, конечно. Во-первых, новый алгоритм работает в режиме реального времени (в отличии от своих предшественников). Иногда заметка «Для мобильных» может запаздывать, но, как правило, поисковая машина берет во внимание адаптивность страницы к мобильным уже через 2-72 часа. Так что все в ваших руках, дерзайте.
Во-вторых, остальные факторы ранжирования никуда не делись. «Все, что нажито непосильным трудом» остается при вас, и в выдаче на ПК ваш сайт не изменит своих позиций.
Если значительная часть органического трафика приходит к вам по брендовым запросам (название вашей компании, торговой марки, бренда и т.д.) — ваши позиции и на мобильных устройствах не изменятся.
А если на сайте сотни или тысячи страниц?
Значит, адаптацию для мобильным необходимо начинать с самых важных страниц. И далеко не всегда это главная страница: проанализируйте, с каких страниц происходит больше всего продаж, какая страница приносит вам больше подписчиков.
Может ли быть страница частично Mobile-Friendly?
Нет, страница либо хороша для просмотра и использования на мобильных устройствах, либо нет. Здесь представители поискового гиганта непреклонны.
Как сделать сайт Mobile-Friendly?
Представители поисковика акцентируют внимание, что Mobile-Friendly — это способ взаимодействия с пользователем, а не техническая реализация. И хотя сами они рекомендуют использовать адаптивные сайты (т.е. сайт подстраивается под устройство, с которого происходит визит), однако такой способ решения не обязателен.
Три метода сделать страницу Mobile-Friendly
Адаптивный веб-дизайн
Его суть заключается в использовании адаптивных css-стилей и команды @media. С помощью этой команды задаются размеры, позиционирование, видимость и другие параметры элементов страницы. Однако не все можно сделать с помощью CSS, поэтому CSS обычно используют в сочетании с JavaScript. Это решает самые сложные задачи в адаптации контента.
Преимущества:
- Страница имеет одинаковую структуру для всех версий девайсов, меняется только внешний вид.
- Контент для всех девайсов идентичен, не дублируется для мобильной версии.
- Все ссылки имеют один источник, нет путаницы с поддоменами.
Недостатки:
- Адаптивная верстка — это очень трудоемкий процесс и занимает много времени.
- Если к задаче подойти несерьезно, получится провальный продукт, который отпугнет пользователя.
- Появятся дополнительные скрипты и css, которые увеличат время загрузки страницы.
- Сложность отладки.
Динамический показ
В отличие от адаптивной верстки динамический показ не адаптирует содержание страницы с помощью внешних средств, а делает это на сервере. Другими словами, на сервере идет проверка типа устройства и после этого выводит то или иное представление.
Преимущества:
- Готовая страница, которая не требовует дополнительной обработки браузером.
- Меньше скриптов и css, что ускорит загрузку страницы.
- Возможность отключить ненужные плагины для мобильной версии, что также ускорит работу страницы.
- Данный тип использует единые ссылки (как и в адаптивной верстке).
Недостатки:
- Больше нагрузки на сервер за счет дополнительных условий.
- Больше файлов на сервере.
- Верстка сайта для мобильной версии осуществляется практически с нуля.
Мобильный поддомен
Мобильная версия сайта располагается на отдельном поддомене, обычно в виде «m.site.com». Преимущества:
- Можно разработать мобильный сайт, выкинув ненужный для него функционал (какие-то функции доступные на ПК не пригодятся на смартфоне), это позволит ему быстро работать.
Недостатки:
- Разные ссылки на страницы с одним контентом.
- Дублирование данных, что неудобно при обновлении.
- Необходима двусторонняя аннотация, чтобы Google понял связь между аналогичным контентом на странице для десктопов и мобильных устройств.
Повлияет ли алгоритм на трафик контекстной рекламы Google Adwords?
Нет, новый алгоритм влияет только на органический поиск. Правда, сервис Adwords самостоятельно оценивает качество страницы, на которую приземляется пользователь, но это не относится к алгоритму ранжирования органической выдачи.
Когда Google перестанет менять алгоритмы и правила?
Настало время постоянных и быстрых изменений в интернет-технологиях. Специалисты Google стремятся сделать опыт пользователя в своей системе максимально удобным, а, значит, веб-мастера и владельцы сайтов должны также следовать этому принципу и вносить изменения часто. Будьте готовы, что правки, вносимые в сайт сегодня, устареют уже через год. Сайты должны быстро эволюционировать, ведь выживают в интернет-среде только сильнейшие.
Создаем ТЗ по разработке мобильной версии сайта
Рекомендации ниже предназначены владельцам сайтов, которые планируют поручить создание мобильной версии программисту, но при этом хотят:
- быть в курсе «о чем идет речь»,
- знать, как правильно донести до программиста свое видение сайта,
- уметь проверить проделанную работу.
1. Определитесь с функционалом
Задайте себе вопрос: мне нужна мобильная версия — для чего?
Чтобы пользователь мог совершить полноценную покупку через корзину или достаточно взять у него номер телефона для перезвона?
Составьте список страниц, которые следует оставить (создать).
| Основная версия | Для мобильных |
| Главная | + |
| Каталог | + |
| Страница товара | + |
| Новости | — |
| Партнеры | — |
| Корзина | + |
| Контакты | + |
| Отзывы | + |
Для каждой страницы определите, какие элементы имеет смысл оставить, а какие лучше удалить, чтобы не тратить драгоценное место.
| Страница | Элемент | Оставляем? |
| Главная | Поиск | + |
| «Звонилка» | + | |
| Главное меню | + | |
| Лого с редиректом на главную | + | |
| Слайдер | — | |
| Галерея | — | |
| Текст (статья) | — | |
| Видео | + |
Будьте лаконичны
| Элемент | Составляющие |
| Главное меню | О нас |
| Услуги | |
| Прайс |
Рекомендации:
- Не захламляйте шапку ненужными функциями. Обычно туда помещают кнопку вызова главного меню, лого с редиректом на главную и кнопку «Назад».
- Выпадающие меню должны содержать только самое главное, т.к. много информации на небольшом экране не поместится. Меню должно быть полностью видно на одном экране.
- Определить вспомогательные блоки (блоки которые выезжают слева или справа, например, фильтр по товарам).
Найдите несколько мобильных сайтов, которыми вам удобно пользоваться, дизайн которых вам нравится.
Крадите идеи, как художник.
| Сайт | Что нравится |
| Site1.com | Крупные кнопки, видео на главной |
| Site2.com | Удобная навигация, кнопка «Показать еще» |
| Site3.com | Форма для контактов, фильтр в выезжающем блоке |
2. Дизайн
Приблизительный дизайн можно нарисовать при помощи онлайн-сервиса Moqups.
Создайте за четверть часа примерный макет, это поможет вам быстро найти общий язык с программистом.
Рекомендации по разработке дизайна:
- Наименьшая ширина экрана, на которой сайт должен отображаться корректно — 320 рх.
- Нужно продумать такой дизайн, при котором все активные элементы располагаются на достаточном расстоянии друг от друга. Пользователь должен иметь возможность легко «тапать» по выбранной кнопке (не задевая лишние элементы).
- Не должно быть прокруток по ширине.
- Сайт должен иметь читаемый шрифт размером не менее 12px.
3. Скорость загрузки сайта
Скорость загрузки зависит от размера (веса) страницы: качества картинок (для моб. версии качество картинок должно быть умеренным), подключаемых скриптов и стилей.
«Гугл» рекомендует размещать подключения и стили равномерно по всей странице, чтобы отображение не зависало на загрузке этих файлов.
Один из способов увеличения скорости — это правильная конфигурация файла robots.txt, в котором может быть прописана блокировка файлов js, css или картинок.
Включив кеширование браузером, можно значительно увеличить скорость загрузки страниц. Функция кеширования включается в хостинг-аккаунте или прописывается в настройках сервера.
Важно помнить: чем меньше весит графика, тем быстрее грузится сайт. А, значит, процент отказов (уходов с сайта через считанные секунды) падает.
Рекомендации:
- Иконки (если они имеют простую графику) должны быть векторными.
- Для того, чтобы найти узкие (читай — тяжелые) места сайта используйте Google PageSpeed Insights.
- Инструменты для уменьшения веса изображений:
4. Оценка готового сайта
- Оценка на скорую руку: «все хорошо» или «все плохо».
- Проведите экспресс-тестирование.
- Более подробную оценку можно получить в Google PageSpeed Insights.
- Главное доказательство того, что Google одобрил мобильную версию — надпись «Для мобильных» перед сниппетом вашего сайта в поисковой выдаче.
P.S. Идеального результата в тесте Google добиться нереально. Даже мобильная версия поисковика не дает 100% показателя скорости, а на стартовой странице Google Developers графику можно сжать на 71%.
Удачной оптимизации!
