Loading
70da84b7244f94c88b2b45134d6bd35d

Алгоритм Google Mobile-Friendly. Как сделать мобильную версию сайта

Алгоритм Google Mobile-Friendly. Как сделать мобильную версию сайта

21 апреля Google официально выкатил новый алгоритм ранжирования: оптимизированные для просмотра на мобильных устройствах сайты теперь имеют преимущество при мобильном поиске. Давайте разберемся, так ли страшны изменения в алгоритме ранжирования Google, и что следует делать сайтовладельцам, чтобы остаться на плаву в мире мобильный устройств.Что за диковинный зверь этот Mobile-Friendly? Специалисты из поискового гиганта сообщают, что это изменение повлияет на результаты выдачи больше, чем черно-белые алгоритмы-предшественники. Есть основания полагать, что изменится не менее 11% результатов выдачи. Впрочем, мы пристально следили за обновлением — и ни на один из наших сайтов алгоритм не повлиял. Пока что не повлиял.

Google просто усложняет жизнь SEO-шникам? Или это очередной хитрый ход, который заставит бизнес уйти в контекстную рекламу?

Несмотря на расхожее мнение, Google просто заботится о своих пользователях. «Результаты должны быть релевантными, удобными для просмотра и всеобъемлющими» — вот главная заповедь поисковика. Не так давно представители Google обнародовали статистику, согласно которой в 10 странах мира поиск с мобильных устройств превысил поиск с десктопов. Проще говоря, интернет становится мобильным. Пользователи ищут информацию со своих смартфонов и хотят находить ее в удобном для мобильного экрана формате.

Каким должен быть сайт, чтобы приглянуться Google?

Проверьте, чтобы элементы дизайна и контент соответствовали требованиям:

  • Крупный, читабельный шрифт;
  • Крупные, удобные для нажатия с сенсорного экрана ссылки;
  • Удобное расположение блоков на странице;
  • Меньше длинного текста, больше интерактивного контента (например, видео-обзоры вместо целой «википедии» статей на сайте пластиковых окон).

На что повлияет это обновление?

  • На ранжирование при мобильном поиске. Важно: в Рунете процент поисковых запросов с мобильный устройств достаточно невелик. Бить тревогу не стоит, но и сидеть сложу руки также: самое время работать на перспективу.
  • На отдельные страницы, но не на весь сайт.
  • На все страницы на всех языках по всему миру.

Как узнать, является ли ваш сайт Mobile-Friendly?

Google предоставляет специальный сервис Mobile-Friendly Test, при помощи которого определяется удобство просмотра вашего сайта на мобильных экранах.

Кроме этого, можно найти свой сайт в поисковой выдаче и посмотреть, стоит ли перед сниппетом специальная пометка «Для мобильных». Этот знак качества — лучшее доказательство, что сам Google расценивает страницу, как адаптированную к мобильному просмотру.

Читайте также: 6+ инструментов для проверки скорости сайта

Проверить скорость загрузки сайта на мобильном устройстве можно при помощи еще одного инструмента Google — PageSpeed Insights.

Но, даже если результаты данных трех тестов вас обрадовали, не думайте, что только из-за этого сайт сразу же переместится в ТОП. Специалисты Google акцентируют внимание на том, что Mobile-Friendly — только один из факторов ранжирования, и пренебрегать остальными в надежде лишь на симпатию поисковика перед мобильной версией не стоит.

Если сайт не адаптирован к новым правилам игры — все пропало?

Нет, конечно. Во-первых, новый алгоритм работает в режиме реального времени (в отличии от своих предшественников). Иногда заметка «Для мобильных» может запаздывать, но, как правило, поисковая машина берет во внимание адаптивность страницы к мобильным уже через 2-72 часа. Так что все в ваших руках, дерзайте.

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

Если значительная часть органического трафика приходит к вам по брендовым запросам (название вашей компании, торговой марки, бренда и т.д.)  — ваши позиции и на мобильных устройствах не изменятся.

А если на сайте сотни или тысячи страниц?

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

Может ли быть страница частично Mobile-Friendly?

Нет, страница либо хороша для просмотра и использования на мобильных устройствах, либо нет. Здесь представители поискового гиганта непреклонны.

Как сделать сайт Mobile-Friendly?

Представители поисковика акцентируют внимание, что Mobile-Friendly — это способ взаимодействия с пользователем, а не техническая реализация. И хотя сами они рекомендуют использовать адаптивные сайты (т.е. сайт подстраивается под устройство, с которого происходит визит), однако такой способ решения не обязателен.

Алгоритм Google Mobile-Friendly. Как сделать мобильную версию сайта

Три метода сделать страницу Mobile-Friendly
Адаптивный веб-дизайн

Его суть заключается в использовании адаптивных css-стилей и команды @media. С помощью этой команды задаются размеры, позиционирование, видимость и другие параметры элементов страницы. Однако не все можно сделать с помощью CSS, поэтому CSS обычно используют в сочетании с JavaScript. Это решает самые сложные задачи в адаптации контента.

Преимущества:

  • Страница имеет одинаковую структуру для всех версий девайсов, меняется только внешний вид.
  • Контент для всех девайсов идентичен, не дублируется для мобильной версии.
  • Все ссылки имеют один источник, нет путаницы с поддоменами.

Недостатки:

  • Адаптивная верстка — это очень трудоемкий процесс и занимает много времени.
  • Если к задаче подойти несерьезно, получится провальный продукт, который отпугнет пользователя.
  • Появятся дополнительные скрипты и css, которые увеличат время загрузки страницы.
  • Сложность отладки.

Динамический показ

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

Преимущества:

  • Готовая страница, которая не требовует дополнительной обработки браузером.
  • Меньше скриптов и css, что ускорит загрузку страницы.
  • Возможность отключить ненужные плагины для мобильной версии, что также ускорит работу страницы.
  • Данный тип использует единые ссылки (как и в адаптивной верстке).

Недостатки:

  • Больше нагрузки на сервер за счет дополнительных условий.
  • Больше файлов на сервере.
  • Верстка сайта для мобильной версии осуществляется практически с нуля.

Мобильный поддомен

Мобильная версия сайта располагается на отдельном поддомене, обычно в виде «m.site.com». Преимущества:

  • Можно разработать мобильный сайт, выкинув ненужный для него функционал (какие-то функции доступные на ПК не пригодятся на смартфоне), это позволит ему быстро работать.

Недостатки:

  • Разные ссылки на страницы с одним контентом.
  • Дублирование данных, что неудобно при обновлении.
  • Необходима двусторонняя аннотация, чтобы Google понял связь между аналогичным контентом на странице для десктопов и мобильных устройств.

Повлияет ли алгоритм на трафик контекстной рекламы Google Adwords?

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

Определитесь с функционалом

Задайте себе вопрос: мне нужна мобильная версия — для чего? Чтобы пользователь мог совершить полноценную покупку через корзину или достаточно взять у него номер телефона для перезвона

Дизайн

Приблизительный дизайн можно нарисовать при помощи онлайн-сервиса Moqups.

Создайте за четверть часа примерный макет, это поможет вам быстро найти общий язык с программистом.

Рекомендации по разработке дизайна:

  • Наименьшая ширина экрана, на которой сайт должен отображаться корректно — 320 рх.
  • Нужно продумать такой дизайн, при котором все активные элементы располагаются на достаточном расстоянии друг от друга. Пользователь должен иметь возможность легко «тапать» по выбранной кнопке (не задевая лишние элементы).
  • Не должно быть прокруток по ширине.
  • Сайт должен иметь читаемый шрифт размером не менее 12px.

Скорость загрузки сайта

Скорость загрузки зависит от размера (веса) страницы: качества картинок (для моб. версии качество картинок должно быть умеренным), подключаемых скриптов и стилей.

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

Один из способов увеличения скорости — это правильная конфигурация файла robots.txt, в котором может быть прописана блокировка файлов js, css или картинок.

Включив кеширование браузером, можно значительно увеличить скорость загрузки страниц. Функция кеширования включается в хостинг-аккаунте или прописывается в настройках сервера.

Важно помнить: чем меньше весит графика, тем быстрее грузится сайт. А, значит, процент отказов (уходов с сайта через считанные секунды) падает.

Рекомендации:

  • Иконки (если они имеют простую графику) должны быть векторными.
  • Для того, чтобы найти узкие (читай — тяжелые) места сайта используйте Google PageSpeed Insights.
  • Инструменты для уменьшения веса изображений:
    • Jpegtran — сжимает картинку и удаляет метаданные
    • Pngquant — инструмент для уменьшения веса изображений PNG с потерей качества (уменьшается количество цветов)
    • Pngcrush, Tinypng — сервисы для сжатия PNG без потерь качества
    • Jpegmini — облачный сервис по уменьшению веса картинки на 20–30%

Оценка готового сайта

  • Оценка на скорую руку: «все хорошо» или «все плохо».
  • Проведите экспресс-тестирование.
  • Более подробную оценку можно получить в Google PageSpeed Insights.
  • Главное доказательство того, что Google одобрил мобильную версию — надпись «Для мобильных» перед сниппетом вашего сайта в поисковой выдаче.

P.S. Идеального результата в тесте Google добиться нереально. Даже мобильная версия поисковика не дает 100% показателя скорости, а на стартовой странице Google Developers графику можно сжать на 71%.

Удачной оптимизации!

Источник

1

Автор публикации

не в сети 2 года

Максим-seo

14
Комментарии: 0Публикации: 15Регистрация: 07-01-2016

Отправить ответ

Оставьте первый комментарий!

Войти с помощью: 
  Subscribe  
Notify of
Авторизация
*
*
Войти с помощью: 
Регистрация
*
*
*
Войти с помощью: 
Генерация пароля