Приветствую Вас, мой Друг!

В этой статье мы поговорим с Вами об оптимизации страниц блога для мобильных устройств . Эта проблема сегодня, я уверена, волнует многих блоггеров.

С 21 апреля 2015 года компания Google начала отдавать предпочтение в своей поисковой выдаче сайтам, адаптированным под мобильные устройства. Поэтому я не осталась равнодушна к судьбе моих сайтов и приняла решение исправить все недостатки отображения страниц моих сайтов на тех же смартфонах.

После диагностики своих блогов на сервисе Google Webmaster Tools (инструменты для веб-мастеров), в своем профиле я получила результаты анализа на совместимость их с мобильными устройствами. И вот что я увидела…

Проверив домен http://сайт Google выдал мне вот такую картинку с четырьмя проблемами отображения блога на смартфонах и айфонах.

• Контент шире экрана
• Значение метатега viewport не задано.
• Интерактивные элементы расположены слишком близко
• Слишком мелкий шрифт

Ну, тут все понятно. Просто этот домен является зеркалом моего основного домена https://сайт, который я недавно перевела на и плюс еще активировала на нем плагин WPTouch .

Обязательно почитайте мою Пошаговую Инструкцию со скриншотами по бесплатному переводу сайта на «https». Уверена, она Вам очень понравится и пригодится в работе с блогом.

На зеркале своего блога я до этого вообще ничего не делала для оптимизации сайта под разные мобильные гаджеты. Вот Гугл и возмутился…

А после установки на основной домен блога умного плагина по мнению Гугл все нормализовалось.

Сервис Yandex Webmaster

Практически тот же результат после проверки сайта был и на сервисе Yandex Webmaster.

Было обнаружено правда три ошибки. Но их нужно было как-то решать. Свои рекомендации Яндекс выдал мне в таком виде.

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

1. С помощью плагина WPtouch Mobile;
2. Вручную прописывая html-коды.

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

Полное и правильное название этого чудо-плагина WPtouch Mobile Plugin .

Скачать его дистрибутив Вы можете на официальном сайте WordPress: wordpress.org/plugins/wptouch/ (скопируйте ссылку и вставьте ее в адресную строку своего браузера).

Как установить и активировать плагин WPtouch Mobile на свой блог

• Скачайте файл с архивом плагина себе на компьютер по ссылке с официального сайта WordPress;
• Зайдите в админке WP в раздел Плагины , затем- Добавить новый ;
• Загрузите файл плагина на свой сервер из админки своего блога, с или на своем хостинге;
• Активируйте плагин.

После загрузки и активации плагина на сервер в меню слева в Амин-панели Вашего блога появится кнопка WPtouch. Нажмите на нее и выберите Настройки. Появится страница с настройками по умолчанию.

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

Тарифы сами видите какие… :-)) Но, кому нужны более расширенные настройки плагина для оптимизации страниц сайтов для мобильных устройств, про и про+ будут очень даже кстати.

Двум моим блогам настройки ПО УМОЛЧАНИЮ вполне помогли. Проверив оба сайта на специальных сервисах я успокоилась. Там было все ОК!

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

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

Проверьте видимость Вашего сайта на смартфоне с помощью трех сервисов.

Сначала войдите на сайт этого сервиса Google:

www.google.com/webmasters/tools/mobile-friendly/

Введите там адрес Вашего блога в поле для проверки и нажмите на кнопку Analyze . Если с Вашим сайтом все хорошо, то Google выдаст такую надпись.

Второй сервис Google для проверки мобильности сайта PageSpeed Insights

developers.google.com/speed/pagespeed/insights/

Внизу этой страницы я скачала zip-архив с рекомендациями по исправлению небольших косяков на моем сайте. Внутри архива Google было три папки с изображениями, текстовым файлом со ссылками на не оптимизированные страницы и папка с файлами js.

Будет время-разберусь с всем этим хозяйством. А пока плагин WPtouch Mobile неплохо справляется со своими обязанностями. Главное- мои посты на смартфонах читать МОЖНО и вполне удобно.

Третий вебресурс для проверки сайта: www.cy-pr.com

Этот сервис часто используют для полного Анализа сайтов. Что касается совместимости с мобильными устройствами, сервис выдал мне подробнейший отчет.

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

Думаю, что это не критичные погрешности. А вот что касается метатега viewport , то тут уже проблемка посерьезнее. И нужно ее как-то решать.

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

Для чего нужен метатег «viewport» и куда его вставить

Давайте разберемся теперь с этим метатегом. Для чего Google и Yandex так упорно требуют его присутствие в html-коде нашего сайта.

Мета-тег viewport был введен компанией Apple для корректировки отображения страниц сайта на мобильных устройствах. Как говорит в своих инструкциях Google, мета-тег «вьюпорт» должен обязательно присутствовать в блоке «head».

Справа в списке файлов Темы выберите файл header.php и проверьте, есть ли там у вас между тегами «head» и «/head» что-то типа этого кода:

или как в моем шаблоне: (этот вьюпорт оказывается у меня есть в коде хейда!)

В первом случае метатег viewport прописывает то, что просмотр контента стандартный-происходит только «подгон» по ширине мобильного устройства. А во втором (моем) мета-теге еще и стоит ограничение на максимальный масштаб=1.0.

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

Если мой пост был Вам полезен, напишите об этом в поле для комментариев. Будет интересно всем!

Петух — символ Нового 2017 года, встречайте!:) Приколы с петухом в главной роли))

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

Сегодняшняя статья расскажет об основных правилах проведения оптимизации сайта для корректной работы на мобильных устройствах. Это даст дополнительный трафик на сайт с мобильных устройств.

Viewport

Тег meta viewport – это обыкновенный HTML-код, который отвечает за отображение сайта на экране мобильного устройства и изменении масштаба страницы. Этот тег позволяет прописать масштаб страницы при первой загрузке сайта, а также указать максимальное значение масштабирования страницы или полностью отключить увеличение страницы.

meta viewport выглядит примерно так:

Meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1.0;">

initial-scale указывает масштаб сайта при первом посещении сайта в окне мобильного браузера,

maximum-scale указывает максимальное значение увеличения страницы сайта.

Для разработки адаптивного шаблона этот тег просто незаменимый, однако его можно применять и в неадаптивных шаблонах. Этот мета тег необходимо использовать в паре с спецификацией Media Queries.

Технология Media Queries позволяет оптимизировать стиль сайта с помощью точек преломления. Традиционный шаблон сайта не будет корректно отображаться на мобильных устройствах. С технологией Media Queries можно определить стили шаблона для экранов любых размеров. Технология также позволяет добавлять стили шаблона в зависимости от расположения устройства (вертикально или горизонтально) и количества точек на экране смартфона или планшета.

Встроить Media Queries можно прямо в шаблон страницы:

Технология Javascript, которая позволяет определить способности гаджета или используемого браузера. Браузеры мобильных устройств имеют различные характеристики в отображении информации.

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

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

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

Владельцы продукции компании Apple – IPhone или IPad могут добавлять иконки сайтов на главный экран. Добавить иконку сайта для продукции Apple не составит труда.

Реализовать отображение иконки с помощью следующего кода:

Данный код необходимо вставить в раздел head. При этом необходимо добавить изображение иконки в корень сайта. Название файла должно начинаться с фразы apple-touch-icon-.

Экран заставки

Экран заставки – это изображение, которое видит пользователь после запуска приложения. Экран заставки показывает пользователям состояние загрузки приложения. Заставка в идеале не должна содержать рекламы бренда сайта.

Добавить заставку можно путем вставки следующего кода в шапку сайта:

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

С помощью быстрых исправлений вы можете спасти свой сайт от Мобайлгеддона, и обеспечить ему прохождения теста Google на совместимость.

Введение

В апреле 2015 произошел настоящий переворот в виртуальном мире, который уже получил название «Мобайлгеддон». Все потому, что Google изменил свой алгоритм и начал ставить сайты, оптимизированные для мобильных устройств, выше остальных. Потому все владельцы сайтов массово ринулись вносить изменения на свои ресурсы.

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

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

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

Итак, на что же обращает внимание тест на мобильную совместимость от Google?

Google разбивает тест на пять составляющих, за прохождение каждого вы можете набрать баллы:

1. Конфигурация окна просмотра

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

2. Четкость шрифта

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

3. Избегайте использования плагинов

Flash, Java и Silverlight доставляют много неудобств пользователям мобильных устройств. Делайте выбор в пользу родных веб-технологий (например, HTML5).

4. Размер содержимого

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

5. Размер кнопок и ссылок

Вы должны не только испытать свой сайт сами, на мобильных устройствах, но и применить Google’s PageSpeed Insights, чтобы оптимизировать время загрузки и улучшить пользовательский опыт.

Некоторая справочная информация

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

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

Затем появились CSS3 и медиа-запросы. Теперь веб-дизайнеры и разработчики могут создавать сайты, которые в состоянии проверить устройство, с которого просматривается страница, и настроить макет дизайна соответственно. Содержание может быть адаптировано к конкретному диапазону выходных устройств без необходимости изменять само содержание.

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

Ну что ж, давайте попробуем сделать это.

Но учтите, что все эти исправления – временные, которые могут выручить вас, пока вы делаете настоящий, полноценный, адаптивный сайт.

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

Пожалуйста, проконсультируйтесь с квалифицированным SEO-специалистом, прежде чем вносить какие-либо изменения на живой сайт.

Итак,

*У вас есть существующий сайт;

*Вы хотите внести минимальные изменения в HTML и CSS веб-сайта.

В таком случае у вас есть несколько вариантов:

Измените шаблон вашего сайта

Многие сегодняшние CMS позволяют менять тему, или шаблон. И многие из шаблонов – адаптивные, то есть подстраиваются под нужную ширину экрана.

Если, например, вы используете WordPress, то работы тут на пять минут. Тема может быть изменена всего несколькими щелчками мыши. Практически мгновенно ваш сайт получит свежий дизайн, и будет подходить для мобильных устройств.

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

Плюсы

Возможность менять дизайн мгновенно.

Доступно несколько тысяч тем (некоторые бесплатно).

Минусы

Не все предыдущее содержимое может быть видно на новом шаблоне без дополнительной работы.

Новая конструкция не всегда может соответствовать вашему бренду.

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

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

И снова хорошая новость для владельцев сайтов на WordPress – есть плагины, которые создают мобильную версию вашего сайта на поддомене, например, WP Mobile Edition.

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

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

Что мы получим?

Дополнительный адрес сайта на поддомене ”m.” с отличным от основного домена дизайном, упрощенным. В сети примеров такой реализации полно, вот, например, известный всем сайт:

Если вы определились с выбором и заказали один из методов реализации, не забудьте при приеме работ проверить, как ваш сайт отображается на мобильных устройствах и в онлайн-тестах Google .

Еще по теме:

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.

Проверьте себя, все ли вы делаете для высокого ранжирования в мобильной выдаче?

Содержание статьи:
-
-
-
-
-
-
-

1. Специфика мобильной оптимизации

Мобильная оптимизации имеет свои особенности и сложности, состоящие в том, что удобство и простота взаимодействия пользователя с сайтом является самым важным показателем качества мобильного сайта. Кроме того, результаты мобильного поиска локализированы, то есть привязаны к местоположению пользователя, поэтому мобильный трафик, зачастую, это региональный трафик. Также несколько усложняет мобильную оптимизацию, тот момент, что частотность запросов в мобильном поиске отличается от частотности в обычном поиске и статистику запросов мобильной выдачи приходится собирать отдельно, таким образом и семантическое ядро мобильной версии сайта будет отличаться. Кстати, проверить частоту запросов в мобильной выдаче можно с помощью Yandex.Wordstat . А проанализировать список запросов в мобильной выдаче поиска, по которым ваш сайт показывается в мобильной выдаче, вы можете с помощью Google Webmaster Tools и Google Analytics.

Как проверить мобильность сайта?

Проверить свой сайт на удобство сайта для мобильных пользователей вы можете следующими инструментами:

• Основной инструмент - Page Speed Insights – не только проверяет лояльность сайта к пользователям мобильных, но и дает рекомендации по ускорению и оптимизации сайта под мобильные.
• – с помощью это инструмента вы сможете увидеть как мобильный робот поисковой системы Google видит ваш сайт.
• - внутренний сервис поисковой системы, проверяющий насколько ваш сайт соответствует требованиям мобилопригодности.
• TestMySite - внешний сервис, красиво и наглядно проверяет мобайлфрендли, мобильную скорость сайта и скорость загрузки на десктопных устройствах.
• W3 mobile checker - инструмент для веб - разработчиков, которые хотят сделать свои веб - страницы или веб - приложение лучше работающим на мобильных. Пока находится на доработке.
• Resizer - интерактивная программа просмотра, которая помогает дизайнерам тестировать контент сайта на настольных компьютерах, мобильных и планшетах
• Quirktools - сервис для просмотра сайта на разных устройствах: мобильных, планшетах, компьютерах и даже телевизорах.
• Проверка мобильных страниц в Яндекс.Вебмастер – также проверяет лояльность сайта к мобильным пользователям

3. Какие особенности различных способов мобильной оптимизации?

• Мобильная версия - когда и URL, и код изменяются. Сервер определяет тип устройства, а потом перенаправляет на нужную страницу - m.site.com (для смартфонов), t.site.com (для планшетов), phone.site.com – для телефонов попроще. Для разных типов устройств используются разные варианты кода и разные URL страниц.
Плюсы: в альтернативную мобильную версию легко вносить правки, не затрагивая основной сайт; простота и удобство для пользователей, быстрая загрузка.Минусы: отличающийся от основного URL, есть вероятность дублирования контента и 404 ошибки, упрощение функционала ведет к ограничению нужного контента.
• Динамический показ (RESS - Responsive Design + Server Side) - один URL, разный код под разные user-agents. Сервер отправляет в ответ на запрос определенного URL различные варианты кода HTML и CSS. Какой именно код отправлять, определяется за счет сканирования поисковым роботом, размещенного HTTP-заголовка Vary, который помогает выбирать именно тот контент на сайте, который оптимизирован для мобильных.
Плюсы: ненужные JavaScript можно удалить из HTML; можно настроить для каждого устройства свою верстку и свои приложения. Минусы: сложный в разработке и не отработанно до конца определение типов мобильных устройств.
• Адаптивный дизайн - когда URL и код не изменяются. Сервер отправляет всем устройствам и мобильным, и десктопным одинаковый HTML- код, который адаптируется в зависимости от размеров экрана с помощью CSS. В этом случае, нужно проследить, чтобы были открыты для индексации нужные файлы CSS, JavaScript и изображения.
Плюсы: относительно легкий в разработке и то что URL не изменяется.Минусы: медленная скорость загрузки и безальтернативность.

4. Что говорят поисковые системы по поводу способов мобильной оптимизации сайтов?

GOOGLE: В инструкциях говорится о том, что система не отдает предпочтения каким-либо типам адаптации, но адаптивный дизайн все-таки выделяет как рекомендованный, хотя на первый взгляд в ТОП5 моб. выдачи 3-и из 5-ти - сайты с мобильной версией, однако это единичное наблюдение просто имеющее место быть и не претендующее.

В ЯНДЕКСе алгоритм ранжирования мобильной выдачи «Владивосток» определяет все виды оптимизации - и адаптивный дизайн, и мобильную версию, и RESS. Как и Google, Яндекс оставляет выбор за веб-мастерами, которые должны выбрать способ оптимизации самостоятельно. Но при этом сообщает, что в Рунете есть постоянная тенденция снижения количества мобильных версий и увеличения сайтов с адаптивным дизайном и RESS. Поэтому для того, чтобы выбрать для себя подходящий метод оптимизации, рекомендуется определить, какие именно задачи должен выполнить пользователь с помощью своего мобильного устройства на вашем сайте. Размышления вместе с Google и обсуждение в Клубе о поиске Яндекса помогут детально сопоставить все плюсы и минусы различных способов реализации мобильных версий сайтов и выбрать именно тот, который больше всего подойдет вашему сайту и бизнесу.

5. Как правильно оптимизировать сайт под мобильные устройства?

<1> Скорость загрузки страницы, для мобильных пользователей важнее, чем для пользователей десктопов. Она не должна превышать 3-и секунды, однако страницы из мобильной выдачи на устройстве пользователя грузятся в среднем целых 22 секунды. Чтобы понять, как вы можете облегчить и сжать свой сайт, воспользуйтесь сервисом Page Speed Insights – в нем вы найдете подробные рекомендации по ускорению своего сайта под мобильные. А именно, сжатию или вынесению в отдельный файл JavaScript и CSS, анализатор дает их детальный список. Не забывайте, что можно использовать асинхронноую загрузку скриптов , чтобы пользователи не теряя времени и не уходя с вашего сайта во время загрузки скриптов в фоновом режиме.

<2> JavaScript, CSS и изображения нельзя блокировать. Проверить блокировку, вы можете в Google Search Console в разделе Индекс Google >> Заблокированные ресурсы. Блокировка JavaScript, CSS и картинок может привести к низким позициям в мобильной выдаче.

<3> Не должно быть «ошибок 404» на страницах, которые показываются мобильным веб-серферам. Бывает такое, что страница может нормально отображаться на десктопах, но выдает "ошибка 404" на смартфонах, например, или на планшетах. Проверить на наличие ошибок вы сможете с помощью программ Xenu, ScreamingFrog или с помощью Google Search Console в разделе Сканирование >> Ошибки сканирования.

<4> Если у вас мобильная версия, то для того, чтобы контент основной и мобильной версии не дублировался, нужно правильно настроить их индексацию. Если мобильная версия на поддомене попадает в обычную выдачу поисковиков, то не нужно создавать отдельный robots.txt и указывать: User-agent: * Disallow: / Лучше прописать на страницах m.site.com/page-1 следующий код - а на страницах основного сайта и поисковая система поймет, какой урл основной.

<5> Для мобильных версий страниц сайта нужно правильно настроить редирект для каждой из них, так как переадресация например на главную будет расцениваться поисковиками как ошибка. Однако, на мобильных страницах не должно быть больше 5-ти редиректов, так как считается, что уже после пятого редиректа поисковики не индексируют их.

<6> Если на мобильной версии сайта есть анимация в формате Flash или видео с проприетарным проигрывателем, то нужно заменить их на теги HTML5, так как этот способ поддерживается всеми браузерами. Например, создать подобную анимацию можно с помощью Google Web Designer .

Вместо заключения

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

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

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