Контакты  

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

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

Почему важно проверить сайт на мобильность

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

Отсюда и интерес поисковых систем к мобильному трафику, ведь заработок Яндекса и Google напрямую зависит от количества покупателей. Судите сами, на моём блоге доля поискового мобильного трафика составляет 15-20%, а ведь есть сайты и блоги, где количество поискового трафика еще больше. Ниже Вы можете посмотреть скрин, где показана доля мобильного трафика на моём блоге. Кстати, доля мобильного трафика с Дальнего Востока еще выше.

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

Это уже серьёзно, кому интересно вести блог, писать статьи просто так без нормальной посещаемости? Вместе с тем, многие сайты и блоги уже имеют встроенную мобильную версию, но нет гарантии, что там все корректно работает. Поэтому важно каждому владельцу проверить сайт на мобильность. В этой статье будет показано, как делается проверка мобильной версии сайта в Яндексе и Google.

С февраля 2016 г. Яндекс последовал примеру своего старшего брата Google и тоже ввел новый алгоритм Владивосток, который реально понижает сайты в выдаче, если они не корректно отображаются на мобильных устройствах. Итак, перейдем к практике и начнем проверять наши сайты на мобильность.

Проверка мобильной версии сайта в Google

Первым, кто начал учитывать мобильность сайта, был Google, его новый алгоритм работал еще в 2015 г. Надо сказать, что с вводом нового алгоритма, сайты, которые не имели мобильной версии, начали серьёзно проседать. Надо сказать, что у Google сразу же появился инструмент, который позволял проверять мобильную версию сайта в Google – Google Developers, этот инструмент работает и сейчас, к нему мы вернемся позже.

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

Итак, рассмотрим на практике проверку сайта на мобильность в Google, по времени проверка занимает около одной минуты. Для начала проверки нужно зайти по этой ссылке и в поле ввести доменное имя Вашего сайта (блога) и нажать кнопку «Анализировать» (смотрите скрин). Через минуту Вам будет выдан результат. Проверка мобильности сайта в Гугл показана также в представленном ниже видео.

На данной странице Вы можете прочитать также интересную информацию на эту тему. Проверка сайта на мобильность в Google очень важна. Так, например, в начале 2015 г. мой сайт не был адаптирован к мобильным устройствам и поисковый трафик с Google составлял всего 5% от трафика с Яндекса. В мае 2015 был установлен плагин WPtouch, который адаптировал мой блог и доля поискового трафика с Google, выросла до 30% и более.

Проверка мобильной версии сайта в Яндексе, алгоритм Владивосток

Яндекс любит присваивать названия своим алгоритмам в честь российских городов, в этот раз Владивосток. Не зря назвали его алгоритмом Владивосток, дело в том, что именно во Владивостоке самый высокий процент мобильного трафика. Как уже говорилось, проверка мобильности сайта Яндексом введена с февраля 2016 года по России, а в ближайшем будущем это требование распространится на страны СНГ и Турцию.

Новый алгоритм Яндекса Владивосток реально понижает сайты в выдаче, это я проверил на своей «шкуре». Так получилось, что в феврале 2016 на моем блоге вовсю шли пуско-наладочные работы (об этом писалось в статье ). На блоге сразу была установлена мобильная версия, но не получалось справиться со стрелками «Вверх» и «Вниз», это приводило к появлению горизонтальной прокрутки, а это нарушение требований алгоритма Владивосток. Результат – доля поискового трафика с Яндекса упала в два раза и пока не хочет восстанавливаться.

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

Заходим на страницу нового Яндекс вебмастера, нажимаем «Инструменты» и выбираем «Проверка мобильных страниц», теперь в поле надо прописать адрес своего сайта и нажать кнопку «Проверить». Менее чем через минуту будет выдан результат.

Как видите с представленного скрина, все 6 показателей должны отображаться зеленым цветом. Если хоть один показатель не будет соответствовать, то нужно искать причину и устранять её (выше писалось, как наличие горизонтальной прокрутки повлияло на поисковую выдачу моего блога).

Заключение

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

Если Ваш сайт не адаптирован под мобильные устройства, то у Вас есть два варианта:

  • установить плагин, который адаптирует Ваш сайт;
  • заказать на фрилансе адаптацию Вашего сайта.

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

Адаптацию сайта к мобильной версии Вам с удовольствием сделают, но стоимость этих работ достаточно высокая – 40-70$, а то, и дороже, здесь решать Вам. Возможно, проще будет заказать новый сайт, если есть еще какие-то переделки и идеи, это может обойтись в совокупности дешевле. О том, как и где заказывать разработку сайта показано в моей недавней на блоге.

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

С уважением, Иван Кунпан.

P.S. Чтобы создать свой блог, Вам пригодится разработанная мной интеллект карта « , можете её скачать и применить знания на практике, при её разработке вложен мой трёхлетний опыт. При ведении блога, важно правильно писать и оптимизировать статьи, поисковики высоко оценивают такие статьи. Можете скачать интеллект карту « » или платную книгу « .

Получайте новые статьи блога прямо себе на почту. Заполните форму, нажмите кнопку "Подписаться"

Добрый день, друзья. Сегодня я немного отойду в сторону от рекламных инструментов и начну новую рубрику на блоге. Она получает название «Вебмастеринг» и будет включать полезные материалы на тему улучшения призводительности и качества сайта, посадочных страниц. А начну с обзора классного инструмента для проверки сайта на мобильность.

Проверяем скорость сайта вместе с Google

Для этого гугл предлагает 2 инструмента.

#1 PageSpeed Insights

Я думаю, вы хорошо с ним знакомы. Вставляете ссылку на свой сайт, жмете кнопку «Анализировать» и получаете результат в виде двух вкладок.

Вкладка «Для мобильных» включает отчет по скорости загрузки сайта для мобильных устройств и — важно! — оценку удобства сайта для смартфонов. Вкладка «Для компьютеров» соответственно тот же анализ для десктопа.

Самое приятное, что сервис позволяет скачать оптимизированные изображения, css и скрипты, чтобы использовать их на своем сайте. Вот такая бесплатная помощь от Google.

Как видно из скриншота, у меня серьезные проблемы с мобильной версией. А как обстоят дела у Вас?

#2 Testmysite.Withgoogle


На самом деле это тот же инструмент, просто обертка у него красивая. Я обнаружил этот сервис на днях и меня подкупила форма предоставления отчета.

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

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

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

Вот так буквально за несколько секунд можно не только проверить сайт на мобильность и проверить скорость загрузки — но и скачать полноценный отчет с оптимизированным контентом. Бесплатно. От Google

Ну что, а как у вас обстоят дела с мобильностью?

comments powered by HyperComments

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

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

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

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

Быстрая проверка адаптивной верстки

Популярный интернет обозреватель (браузер) Mozilla Firefox оснащен встроенным инструментов проверки дизайна сайта на пригодность к отображению на мобильных устройствах. Чтобы им воспользоваться зайдите в «Меню» — «Разработка» — «Адаптивный дизайн». Либо просто нажмите на клавиатуре одновременно три клавиши ++[M]

Вы должны увидеть примерно следующую картину:


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

Браузер Google Chrome так же имеет встроенную поддержку проверки адаптивности дизайна сайта. Для этого заходим в меню, выбираем пункт «Дополнительные инструменты» и затем «инструменты разработчика» (либо нажимаем клавишу ).

После этого нажимаем иконку адаптивного дизайна (либо одновременно нажимаем на клавиатуре ++[M] ):

В середине экрана вы увидите как будет отображаться ваш сайт на экранах мобильных устройств:

SEO тестирование мобильного дизайна

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

Для проверки адаптивности с помощью сервиса Google заходим по следующему адресу и вбиваем имя своего сайта: https://www.google.com/webmasters/tools/mobile-friendly/ .

Вот так выглядит результат проверки моего блога:

С Яндексом немного сложнее, для проверки надо обязательно зарегистрироваться в сервисе Яндекс.Вебмастер и воспользоваться бета версией интерфейса:

Он-лайн сервисы по проверки адаптивности

Основной задачей этих сервисов презентовать (показать) как будет выглядеть ваш сайт на мобильном устройстве. Сайтов с таким функционалом великое множество. Я приведу лишь некоторые из них. В большинстве случаев они дублируют встроенный функционал FireFox и Chrome.

Google resizer

Начну опять же с Google, у которого есть свой сервис демонстрации адаптивности: http://design.google.com/resizer/#

Quirktools screenfly

Второй симпатичный сервис — это http://quirktools.com/screenfly/ . Он покажет как может выглядеть ваш сайт даже на телевизоре!

Symby.ru adaptest

Ну и чтобы не обидеть «отечественного производителя» приведу пример еще одного сайта: http://symby.ru/adaptest/ . На одной странице вы увидите сразу несколько представлений с различными разрешениями экранов.

Скорость работы мобильной версии сайта

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

PageSpeed Insights

Google как всегда впереди планеты всей: https://developers.google.com/speed/pagespeed/insights/ . Этот сервис покажет как выглядит сайт на экране телефона и даст рекомендации по оптимизации кода для увеличения скорости загрузки на мобильных устройствах.

WebPageTest

И в заключении приведу пример сервиса, который не только покажет как выглядит сайт на мобильном устройстве, но и покажет скорость его работы: http://www.webpagetest.org/

Выводы

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

Проверить мобильную версию сайта на предмет ошибок задача простая. Ответственность на поисковом оптимизатором. Наличие оптимизированной версии сайта является фактором ранжирования документов сайта.

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

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

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

  • Google Mobile-Friendly
  • Google PageSpeed Insights;
  • WebPage Test;
  • ScreenFly;
  • WebPage Test;
  • BrowserStack.

Mobile-Friendly

Сервис под названием Mobile-Friendly покажет насколько сайт оптимизирован под мобильные устройства и какие есть ошибки в плане оптимизации:

PageSpeed Insights

Проверить мобильную версию сайта под Google можно также используя инструмент от поисковой системы Google, который показывает.

Сервис называется просто - PageSpeed Insights.

WebPage Test

Проверку загрузки сайта правильно бы проводить для разных устройств и с разных регионов. Сделать проверку можно используя WebPage Test.

Сервис абсолютно бесплатный.

ScreenFly

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

Инструмент бесплатный.

Adobe Edge Inspect

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

Если использовать специально созданное для открытия сайта на разных устройствах приложение под названием Adobe Edge Inspect, задача упрощается.

Инструмент бесплатный.

Приложение кросс-платформенное.

BrowserStack

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

Инструмент платный.

Bing Mobile Test

Проверить бесплатно сайт на соответствие требованиям мобильных устройством можно посредством инструмента Mobile Test от поисковой системы Bing.
Ссылка на сервис -

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

Использование

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

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

Значение метатега viewport не задано

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

В метатеге viewport должно быть значение device-width

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

Контент шире экрана

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

Слишком мелкий шрифт

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