Как оптимизировать блог для мобильных устройств
Доброго времени суток, уважаемые читатели блога Thebizfromscratch! На связи, как всегда, мы – Андрей и Даша. Думаем из заголовка, уже стало понятно, что сегодня мы опять возвращаемся к блогосозданию и тема данной статьи: адаптация сайта под мобильные устройства или планшет. Как качественнее произвести оптимизацию? С помощью установки специального плагина или лучше залезть в код, а может…? Почему не сделали этого раньше? Давайте разбираться.
Почему не оптимизировали блог под мобильные устройства раньше?
Во-первых, ещё в самом начале при выборе темы в WordPress, мы обратили внимание на такой параметр как адаптивный дизайн, благодаря которому, свой проект удобно читать/смотреть и на компьютере, и на планшете, и на телефоне. Тема сама подстраивается под любое устройство. И на самом деле, всё прекрасно видно и читабельно.
Во-вторых, большинство блогеров достаточно негативно относятся к установке подобного рода плагинам (WPtouch, WP Mobile Detector, WordPress Mobil Pack, Jetpack и др.) так как есть вероятность, что они в процессе своей работы создают дубли страниц. А мы с вами в курсе, что дубли ооочень не нравятся поисковым ботам, которых начинающие вебмастера бояться, как огня! Мы смекнули и решили пока воздержать от использования плагинов.
И вот живём себе спокойно, пишем статейки, публикуем их, следим за тем, как они смотрятся на мобильном… Нам всё нравилось! Но, не тут-то было!
Каждый день мы проверяем статистику и отслеживаем продвижения нашего ресурса с помощью Яндекс Вебмастера и Google Search Console (кстати, полезные штуки, советуем зарегистрироваться). И в один прекрасный момент сервис от гугла осведомил нас об ошибках на 16(!) страницах нашего сайта. Поначалу, мы немного испугались, ибо к созданию блога подходим очень внимательно и осторожно, успокоившись, стали разбираться в недочётах и… та-да! Ошибки связаны с удобством просмотра на мобильных устройствах:
- ширина контента не соответствует области просмотра;
- интерактивные элементы расположены слишком близко.
И ведь все посты читабельны, все картинки – видно! Мы бы и рады были забыть о такой проблеме, мало ли, пусть сервис ругается, главное, посетителей и нас всё устраивает. Но оказалось, что данный недостаток существенно влияет на выдачу поисковой системы: гугл занижает наши позиции… а это, друзья, не допустимо, особенно для молодых проектов. Так что…взвесив все «за» и «против», решили мы установить плагин.
Установка плагина WP Mobile Detector
По старинке заходим в панель администратора WordPress, раздел «Плагины» – «Добавить новый», прописываем в поиск “WP Mobile Detector”, устанавливаем и активируем. В особой настройке данная программка не нуждается.
Первым делом, после активации, мы прильнули к своим гаджетам и, мягко говоря, были не довольны увиденным…строчки, дизайн, картинки – поплыли. Зато гуглу всё пришлось по нраву! Что же делать? В код мы уж точно не полезем… с нашими знаниями программирования – это бесполезно. Как же быть в сложившейся ситуации?
Решение есть – редактируем файл Robots.txt
В самом начале поста, мы оговорились, что выбранная нами тема в WordPress имеет адаптивный дизайн, но Googlebot всё равно ругается и блокирует страницы. И тут до нас дошло…мы же сами запретили ему доступ к темам! А где прописываются правила для ботов? Правильно, в файле Robots.txt. Давайте внесём в этот файл немного изменений:
Написали отдельные указания для Googlebot, в которых удалили вот эти строки:
/wp-content/plugins
/wp-content/themes
/wp-includes
Обратите внимание, для других поисковых роботов всё оставили без изменений.
После сохранения вносимых изменений, мы проверили наш проект в сервисе Google…и, чудо! Проблема была успешно решена! Причём блог смотрелся одинаково красиво на любых устройствах.
Для более точной проверки советуем воспользоваться ещё одним сервисом от гугла – PageSpeed Insights, где вы сможете увидеть проблемы, которые нужно решить. Внимание стоит обратить на пункт – удобство для пользователей.
И на сегодня мы заканчиваем, надеемся, что адаптация сайта под мобильные устройства больше не будет вызывать проблем. Желаем удачи и до новых постов.
С уважением, Андрей и Даша.
Здравствуйте! Спасибо за статью! Но возник вопрос: не возникнет ли много «мусорных» страниц, дублей после открытия wp-content?
Здравствуйте, Ксения! Спасибо за вопрос! Таким же вопросом мы задавались при открытии этой папки. Проанализировав роботсы многих вэбмастеров и пообщавшись с опытными блоггерами, убедились что для гоши в основном нет никаких запретов. На такие дубли обращать внимание не стоит.
Раз заговорили про дубли, то совсем недавно узнали про replytocom в комментариях и как к ним относится гоша со своим фильтром, вот каких дублей нужно бояться!
Адаптация к мобильным устройствам сейчас мега важная вещь. Поисковики будут понижать и наказывать сайты без нее.
Неужели все так просто, и в любую тему можно устанавливать плагин?
Да. Плагин можно установить в любую тему.
Тут важно лишь то, чтобы он не ругался с самим WordPress, т.е. был совместим с движком
Иногда плагины и между собой конфликтуют, не только с темой
У ВАС НЕ ХВАТАЕТ СТР ПОДПИСКИ !
А разве с правой стороны «Читай новые посты первым» — это не страница подписки?
Это форма подписки на информационный канал субскраба
Не знаю, как у вас было раньше, но сейчас…Я иногда почитываю ваш блог и с телефона, и с планшета, и с компьютера и качество картинки всегда отличное.
Редактирование Robots.txt точно пошло на пользу
У ребят с самого начала нормально на смартфоне все отображалось, как и на компьютере
Спасибо вам большое! Очень помогли! Удачи вам во всём и хороших доходов!