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



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

Поэтому сегодня давайте поговорим о блогах на платформе blogspot, на что нужно обратить внимание для оптимизации. Мы должны получить вот такой результат:

Проверка в программе PageSpeed Insights

Это результат для моего второго блога. Как видно на скриншоте, проблем удобства для пользователей мобильных не обнаружено. С этим блогом еще надо поработать, пока результат 99/100, осталось совсем немного.

А теперь по порядку: сайт для проверки удобства просмотра на мобильных устройствах, вот ссылка . Если даже при проверке Вы получите результат Отлично! Страница оптимизирована для мобильных устройств, не дает 100% гарантии, что все страницы блога оптимизированы. 

Ошибки отдельных страниц будем смотреть в инструментах для вебмастеров Google. В черновике blogger нажимаем Обзор-внизу открыть инструменты для вебмастеров-нужный блог. Слева-Поисковый трафик-Удобство просмотра на мобильных устройствах.

Вот скриншот этого блога, у меня 3 страницы с ошибками

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

Видим проблему с расположением злементов и шириной контента на отдельных страницах. Нажимайте на строку с описанием проблемы и увидите список всех страниц, на которых обнаружена проблема. Если кликните на url адрес, получите все необходимые рекомендации по устранению ошибок на проблемной странице.

Как найти рекомендации Google по устранению ошибок на страницах блога

Здесь интересен 1 пункт-проверить, исправлена ли ошибка. Так вот, я еще ничего не делала по устранению ошибок, а на сайте проверки получаю тот же результат Отлично! Страница оптимизирована...А вот в сервисе PageSpeed Insights проверку страница не проходит.

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

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

Используйте мета тэг viewport для создания отзывчивого дизайна. С его помощью автоматически будут заданы дополнительные правила для области просмотра контента на любых мобильных устройствах.

<meta name=viewport content="width=device-width, initial-scale=1">

Мета тэг вставляйте в шаблон-изменить шаблон после открывающего тэга <head>. Код уже преобразован, так что шаблон блоггера его сохранит. Не забывайте делать резервную копию.

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

Как выбрать и сохранить мобильный шаблон блога

Выбираете мобильный шаблон для своего блога. Предварительный просмотр-сохранить. Для этого блога я выбирала 7 шаблонов, результат стал 99/100, был 95/100. И это я еще не исправляла ошибки на проблемных страницах. Но думаю, что полученный результат 99/100 совсем не так и плохо, да и скорость тоже 99/100Здесь полезная ссылка на сайт по оптимизации блога для мобильных устройств.

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

Почитайте другие статьи блога:





Автор статьи ✎ Olga Protasova Выпуск ✹ 4/05/2015 Ярлыки ►


Открыть комментарии →

9 коммент. :

  1. Здравствуйте Ольга. У меня к вам вопрос, но он относиться не к моему блогу (у меня на wordpress), а к блогу моей хорошей знакомой. У неё блог тоже на Блоггере и он оптимизирован под мобильные устройства, но...открывая блог через моб. устройства, не отображается меню блога и рубрики. Видно только шапку и все статьи. Знакомая говорит, что она не знает как это исправить и сказала что у всех так, но я вижу, что в вашем блоге на мобильном так и да отображается меню. Подскажите пожалуйста, что нужно ей сделать для этого? Или же это зависит от шаблона? Заранее благодарен!

    ОтветитьУдалить
    Ответы
    1. Игорь Черноморец, здравствуйте. В сообществе недавно у одного участника тоже была такая проблема с меню.

      Нужно подобрать подходящий шаблон для мобильных, в админке блоггер: вкладка шаблон-нажать шестеренку-настроить мобильный шаблон. Проверять каждый выбранный шаблон в программе PageSpeed Insights, пока не добъетесь наилучшего результата для просмотра на мобильных.

      И второе, какой шаблон, родной или сторонний. Пусть знакомая посмотрит, есть в шаблоне или нет мета тэг viewport. При отсутствии вставить.

      Я сама свой блог так настраивала, шаблонов изменила много, пробуйте.

      Удалить
    2. Огромное спасибо Ольга. Дам ей почитать ваш комментарий.

      Удалить
    3. Спасибо Игорь, спасибо Ольга. Я так поняла что про мой блог идёт речь. У меня в новом шаблоне метатег viewport уже установлен. Проверяю часто в PageSpeed Insights вот сегодня 98-100. Считаю, полёт нормальный. Но покопаюсь ещё.

      Удалить
    4. Игорь, я тебе благодарна за внимание. ДО НЕМОГУ...

      Удалить
    5. Вика привет. Теперь поняла, что знакомая Игоря ты. Результат Вика у тебя нормальный. У меня сейчас такой же для этого блога. В двух других 100/100. И этого результат был такой же, но после установки скрипта куки, все время пишут: уберите HTML код сверху страницы. А как его убрать, понять не могу.

      Вика, а как дела с меню на мобильных?

      Удалить
    6. У меня в коде нового шаблона прямо отдельный скрипт прописан для мобильных. А с куки это так. завтра придумают что-то новое опять будем голову ломать.

      Удалить
  2. Привет Вика.Ты мне благодарна, а я даже забыл сообщить тебе об этом комментарии ((( Так что...накосячил я немного. Хорошо, что сама нашла этот блог и комментарий. Надеюсь, что ты и Ольга, совместными силами решите все технические проблемы )

    ОтветитьУдалить
    Ответы
    1. Привет Игорь. Да мы с Ольгой вообще не теряем друг друга. А так всё нормально. Какие косяки. Пока сама покопаюсь, а если что на связи с автором шаблона. Хотя я там столько перекроила.

      Удалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *