Об важности адаптивного дизайна с точки зрения SEO пишут не много. Я не сильно задумывался об его важности. А тем временем доля мобильного трафика в Рунете начала приближаться к 30%.

Поисковые системы начали выкладывать информацию о важности адаптивной верстки. Главная цель — это удобство юзабилити для пользователя.
Clean-Retina

Для удобства мобильного пользователя есть 2 важные проблемы:

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

Я мало задумывался о скорости загрузки своих сайтов, пока не купил планшет. Зашел на свой тайский блог и напрягся: средняя скорость загрузки главной страницы на GPRS трафике 2.5 минуты!
Как оказалось проблема в весе главной страницы сайта — она равна 1.5 мегабайта :)
И читать тексты очень сложно, нужно увеличивать контент. Еще одна проблема была в том, что на блоге мой плавающий виджет заслонял контент и мешал его читать. Пришлось сразу его убрать(ради 37% пользователей на блоге), что привело к падению на 10-15% просмотров с ПК.

И тут сегодня вижу перевод мануала от Гугла на Хабре. Смысл простой — поисковая система хочет выделять специальным микроформатом сайты в выдаче, которые адаптированные для мобильных устройств.
a339
Понятно, что такая пометка даст вам фору в выдаче и увеличит кликательность в серпе, увеличив поведенческие факторы.
В качестве инструмента оценки загрузки и скорости сайта Гугл использует свой сервис
http://developers.google.com/speed/pagespeed/insights/
Вбейте свой сайт и проверьте скорость загрузки своего сайта и удобство для пользователя.

Из всех своих сайтов мне удалось найти только один сайт, который с точки зрения сервиса был не далеко от идеала. Он был на бурж Retina шаблоне.

Я попробовал адаптировать его , увеличив скорость загрузки сайта. Удаление с сайта слайдера на главной дало 14 очков загрузки скорости и +3% удобства.
adapt
Гугл дает рекомендации по устранению проблем, правда не все можно устранить.

Основные элементы, тормозящие скорость загрузки сайта

1) CSS.
2) Картинки в большом разрешении.
3) Большое количество кодов JavaScript и библиотек.

Если заинтересуетесь, как выглядит ваш сайт на Ipad, Ipod, Android планшетах — юзайте буржуйский сервис https://deviceponsive.com

Анализ отказов мобильного трафа

Я полез в Метрику и обнаружил, что мобильный траф на тайском блоге дает в 2 раза больше отказов чем с ПК, при том, что его доля порядка 37%.

В данный момент на блоге отказов не больше 12%,что является очень хорошим показателем. Но оказывается его можно еще улучшить в разы. С помощью планшета я увидел, что причина большого количества отказов мобильного трафа = это то, что в нем не отображаются видеоролики, вставленные с Ютубе. Дело в том, что я использовал старый код встраивания(Flash), а он не поддерживается больше на планшетах и телефонах. Теперь буду менять весь код на html5 и подгружать инфреймом. Чего и вам советую.

Для себя я сделал один вывод: я буду переводить все свои сайты на адаптивную верстку и следить за скоростью загрузкой сайта (в Гугле это один из небольших факторов ранжируемости). Думаю и devvver.ru на 5 год своего существования получит новый дизайн :)

Автор

С 2007 года занимаюсь созданием контент проектов и их монетизацией. Seo специалист, блоггер.

27 комментариев

  1. seoonly.ru Ответить

    Интересно было бы на новый диз. глянуть. =)

  2. Александр Ответить

    Заказывать новые дизы будешь или где то в паблике искать?

  3. Yahikka Ответить

    Ох щи, да это же охрененнейший инструмент. Спасибо, чувак, за гугловский анализатор.

  4. Pasagir Ответить

    Да уж. И правда эта пометка «для мобильных» только начало. Дальше может быть больше. Наверняка они свою мобильную выдачу в итоге так перетрясут. что адаптированные сайты будут выше стоять. В общем, однозначно, есть смысл развиваться в этом направлении!

  5. Gandalf White Ответить

    Отличный сервис deviceponsive.com
    Адаптивная верстка уже должна быть опционально у все сайтов.

  6. work55501 Ответить

    Тоже смотрю в сторону адаптивного дизайна.

    Вчера запустил эксперимент в гугл аналитиксе, интересно, как на пф отобразится и доходе с адсенс

  7. Евгений Ответить

    Насчёт видео — вставляешь просто ссылку на ролик ютуб в тело поста и Вордпресс нормально обработает код. Никаких плагинов и кодов не надо.

  8. Shuvaloff Ответить

    Гугл еще порекомендовал открыть в роботсе папки с css+js — а то как вроде некомильфо краулить то что закрыто ))

  9. singree Ответить

    А что думаешь о мобильной версии сайта? Так же будет расцениватся в выдаче?

    • Devvver Ответить

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

      • Евгений

        Мда. Думал использовать что-то типа WPtouch. Значит только «пилить» основную тему?

      • а как насчет приложения для вордпреса например, которые сами определяют устройство и открывают нужный шаблон. им не нужны поддомены

      • Devvver

        плагины? Там перенаправление идет. Это не очень хорошо, ПС могут не правильно проиндексировать сайт.

      • Евгений

        Здесь httpss://developers.google.com/webmasters/mobile-sites/website-software/wordpress?hl=ru-RU&utm_source=MFT&utm_medium=incoming-link&utm_campaign=MFT прям таки рекомендуется использовать WPTouch и WP Mobile Detector . Мозги просто морочат?

      • Devvver

        Это рекомендации по разработке, а не SEO. С точки зрения разработки их рекомендации правильные.

  10. Вячеслав Ответить

    А не попадались кому-нибудь, случайно, в интернете бесплатные адаптивные шаблоны? Мне нужен простой сайт на две колонки в стиле минимализма. Всё, что я нахожу, чересчур навороченное. Красиво, конечно, но мне такого не надо. :)

    • Devvver Ответить

      посмотрите стандартные шаблоны от Worpress.org

  11. Sergey Ответить

    Сейчас без мобильной версии сайта никуда…. Я для форума «Кому за 40» подключил приложение Tapatalk: очень многие форумы работают с данным приложением. Страницы грузятся за секунду, китайцы рулят. )

  12. Таисия Ответить

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

  13. Геннадий Ответить

    Это точно, нужно устанавливать адаптированные шаблоны.

  14. Аля Гончарова Ответить

    Очень информативно! Спасибо!

  15. Алексей Ответить

    Текущий шаблон — супер!
    Адаптивен, выдержан — в общем стильно и правильно.
    Займусь наведением порядка на своём блоге :)

    PS
    Спасибо, что откликнулись на мою проблему на Сёрче!

  16. Кирилл Ответить

    Если раньше велись споры между адаптивным дизайном и мобильной версией, то теперь это всё в прошлом. Адативный дизайн должен быть, а мобильная версия сайта — это дубль для контента.. что не есть хорошо.

  17. Ирина Ответить

    Большое спасибо, интересная тема

  18. Full-R Ответить

    Надо PWA делать, а дизайн должен быть мобильный в той же версии что и основной сайт. PWA позволяет добавлять сайт на рабочий стол смартфона и оно потом открывается как приложение без адресной строки.

Написать комментарий