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



Приветствую гостей, друзей и читателей моего блога. Все или многие вебмастера уже знают, что 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 Ярлыки ►


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

16 коммент. :

  1. Здравствуйте! У меня маленькая проблема. Облазил ваш сайт и в поиске поискал, но не нашел решение своей проблемы. Да и сам уже второй день пытаюсь исправить.

    Я у себя включил мобильную версию - Дополнительно!
    У меня слишком сузились комментарии, вся страница выглядит нормально на телефоне, а вот комментарии хотелось бы увеличить, но пока не знаю, как это сделать.
    Если ставить мобильный дизайн по умолчанию, то форма комментариев становится нормального размера.
    Можете подсказать, как это исправить?

    ОтветитьУдалить
  2. Ольга, добрый день! очень нужен Ваш совет по поводу настроики метатега viewport, у Вас вот он вроде правильно работает и сайт автоматически подгоняется под разные разрешения экрана. Ну, по крайней мере - я проверял на 1024х768 и 1280х1024 ваш сайт.
    У меня монитор 1280х1024, соответственно и ширину блога я подкручивал в настройках шаблона под себя — что бы удобнее было, 1200 в ширину сделал (по умолчанию там стоит 960 вроде). Шаблон стандартный - Picture Window. Но посетители с другим разрешением экрана — видят блог либо обрезанным по краям (потому что не влазит, если у них низкое разрешение), либо видят страницы блога слишком маленькими, если у них фул-хд монитор.

    Читал в справке гугла на эту тему, но нифига не понял… Вставлял этот метатег viewport (который гугл советует) в шаблон, предварительно удалив старый мета. Но ничего не получается - шаблон не подстраивается под разные разрешения. Или не нужно старый удалять мета viewport? Ничего не понимаю, мозг уже сломал весь...
    Или может от шаблона зависит ещё? Может на моём шаблоне эта фишка не работает?
    Подскажите, если знаете, буду премного благодарен. Как именно Вы прописывали этот метатег? Удалили сначала старый код с мета из шаблона или как?
    И как у Вас блог смотрится на мониторе с фул-хд, допустим? Растягивается как и положено?

    ОтветитьУдалить
    Ответы
    1. -Аdmin- здравствуйте. Начну по порядку:
      1. Мета тэг viewport в этот шаблон (и в шаблонах других моих блогов) вставлен не был, пока я сама его не вставила.
      2. В блоггере-шаблон для мобильных: подбирайте шаблон для мобильных до тех пор, пока в программе PageSpeed Insights не увидите наилучший результат при проверке.
      3. Проверьте в вебмастере яндекс "Проверка мобильных страниц". Если будут ошибки, исправьте.
      4. У меня разрешение монитора 1152х864, при разрешении 1024х768, страницы были с прокруткой.

      Удалить
    2. Ольга, да речь то не о мобильных страницах была в моём вопросе)) Вы меня не правильно поняли. Вы сами эту тему плохо изучили, насколько я понял. Мне подсказали уже специалисты в другом месте - на форуме гугла и на другом ресурсе. А у вас тут тема эта про теги viewport раскрыта не правильно.
      Короче, смысл в том, что у меня стандартный шаблон Блоггера, а все стандартные шаблоны - он НЕ адаптивные. Поэтому они не подстраиваются как положено под мониторы более низкого разрешения. У Вас шаблон похоже тоже НЕ адаптивный, раз видите прокрутку своего блога на мониторах с более низким разрешением.
      Короче говоря - мне нужно шаблон блога менять. И вам, кстати тоже. Что бы он был адаптивный. А этот вот метатег viewport имеет смысл ставить только в адаптивные шаблоны, да и кстати во многих адаптивных шаблонах он уже прописан изначально - я проверял.
      Как то так, в общем.

      Удалить
    3. -Аdmin-, тэг viewport нужен для оптимизации именно для мобильных устройств. В родных шаблонах он вставлен автоматически, на сторонних вставляла вручную. При проверке для мобильных в гугле и яндексе этот тэг имеет большое значение. Результат проверки по ссылке: https://goo.gl/hP0Wo8

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

      Удалить
    4. -Аdmin-, у Натальи в блоге почитайте статью "Разница между фиксированной, резиновой, адаптивной и отзывчивой вёрсткой"

      http://shpargalkablog.ru/2013/06/layout.html

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

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

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

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

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

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

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

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

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

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

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

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

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

      Удалить


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

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

Имя

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

Сообщение *