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

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

Проверка с помощью google

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

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

Чтобы проверить это дело у себя, вам нужно зайти на данный сервис — search.google.com/search-console/mobile-friendly. После этого в строке URL введите адрес этого сайта и ждите. Через непродолжительное время вам выдастся вся информация о том, удовлетворяет ли ваш сайт требованиям гугла по мобильной верстке.

Что-то я не понял…

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

Я никак не мог понять, в чем дело, поэтому полез искать решение в интернете. И вот на одном сайте я его нашел. Оказывается всё дело было в файл robots.txt. У меня в нем черным по белому было написано, чтобы поисковики не индексировали файлы моей темы, поэтому он и не видел никакой мобильной версии.

После того, как я убрал одну строчку из роботса (Disallow: https://seoblog.life/wp-content/themes/моя тема), то сервис тут же определил, что моя мобильная версия в норме. Так что не переживайте, если вдруг у вас будет то же самое. Скорее всего вы просто не разрешили гуглу индексировать вашу тему.

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

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

С уважением, Дмитрий Костин.

koskomp.ru

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

Отличный результат, что сказать

Принцип работы очень прост: копируете адрес странички, предназначенной для проверки, ждете и анализируете результат. Проверка происходит небыстро, как правило секунд 20-40. Результаты проверки довольно наглядны и позволяют быстро найти проблемные места. Чаще всего это: «Слишком мелкий шрифт», «Не задана область просмотра для мобильных устройств», «Контент шире экрана», «Ссылки слишком близко друг к другу». Сервис обязательно будет ругаться на использование Flash – в современном мире он поддерживается все хуже и хуже. Этот сервис стоит использовать в первую очередь, для проверки сайта.

Google PageSpeed Insights

Мда, как же так?

Замечательный, хоть и достаточно строгий сервис, который не раз и не два упоминался на Хабре, и которым в обязательном порядке должен проверяться любой сайт (по моему личному мнению). Принцип работы тот же – вводим ссылку, ждем, получаем ряд комментариев и оценку страницы. Чем выше – тем лучше, но редко кому удается достичь результата в 100 баллов, особенно если на сайте используется яндекс.метрика/google analytics и другие подключаемые скрипты.

Итак, чем же он полезен? Во-первых, он проводит схожую проверку страницы, что и предыдущий сервис (но немного быстрее). Во-вторых – PageSpeed, как видно из названия, предназначен для анализа и оптимизации скорости загрузки страницы. Это немаловажный фактор ранжирования, и он учитывается уже достаточно давно. Да и в любом случае, медленно загружающаяся страница всегда теряет посетителей. PageSpeed дает рекомендации не только по внешнему виду страницы на мобильных устройствах, но и напоминает о том что стоит включить кеширование, прописать gzip/deflate сжатие ресурсов, минифицировать css и js, а также убрать оные в конец кода, чтобы не блокировать загрузку. Но на практике, самый большой прирост скорости дает оптимизация картинок – именно этот ресурс обычно грузится дольше всех. Утилита под названием FileOptimizer позволяет решить эту проблему достаточно быстро, кроме нее есть ряд серверных утилит и аналогов – в общем, было бы желание.

Также, можно получить рекомендации по удобству просмотра в инструментах разработчика — www.google.com/webmasters/tools (если у вас уже есть аккаунт). Там вы можете получить все сообщения об ошибках по своему сайту, графики и другую ценную информацию. К сожалению, объем предоставляемой информации этим сервисом настолько велик, что его разбора хватит на несколько отдельных статей.

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

• www.mobilephoneemulator.com
• mattkersley.com/responsive
• www.responsinator.com

Ну или даже консоль разработчика в Google Chrome – там тоже присутствует отличный эмулятор мобильных устройств, со всем функционалом панели разработчика.

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

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

habr.com

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

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

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

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

Mobile-Friendly

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

Ссылка на сервис — google.com/webmasters/tools/mobile-friendl.

PageSpeed Insights

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

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

Ссылка на сервис — developers.google.com/speed/pagespeed/insights.

WebPage Test

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

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

Ссылка на сервис — webpagetest.org.

ScreenFly

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

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

Ссылка на сервис — quirktools.com/screenfly.

Adobe Edge Inspect

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

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

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

Ссылка на приложение — adobe.com/ru/products/edge-inspect.html.

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

BrowserStack

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

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

Ссылка на сервис — browserstack.com.

Bing Mobile Test

Проверить бесплатно сайт на соответствие требованиям мобильных устройством можно посредством инструмента Mobile Test от поисковой системы Bing.
Ссылка на сервис — bing.com/webmaster/tools/mobile-friendliness

www.megaindex.org

Дружелюбность сайта мобильным устройствам

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

• отсутствие анимации, «тяжелого» дизайна и картинок;
• скорость загрузки ресурса (должна быть минимальной);
• отсутствие необходимости горизонтальной прокрутки;
• отсутствие Silverlight-плагинов и Java-апплетов;
• простая навигация по сайта;
• в коде прописан мета-тег viewport.

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

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

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

Изменение размеров окна браузера

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

Переход в режим разработчика в браузере

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

• Mozilla: перейти в режим разработчика можно, выбрав опцию «Адаптивный дизайн» в меню «Разработка»; нажав комбинацию Ctrl + Shift + M; кликнув по кнопке «Режим адаптивного дизайна» на панели инструментов веб-разработчика;
• Chrome: переход в мобильный режим осуществляется нажатием функциональной клавиши F12, затем следует выбрать значок мобильной версии (смартфон в левом верхнем углу появившегося окна).

В Opera переход в режим разработчика для проверки мобильной версии осуществляется нажатием комбинации Ctrl+Shift+i, но есть и другой способ. Специальная версия браузера — Opera Mobile Classic Emulator — позволяет разносторонне оценить мобильный дизайн. Версии программы существуют для основных операционных систем.

Эмуляторы мобильных устройств: Android Studio и Apple Xcode

Проверить мобильную версию сайта («Яндекс» и Google) можно при помощи эмуляторов мобильных устройств, которыми для Android и Apple являются соответственно Android Studio или Apple Xcode.

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

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

Веб-сервисы проверки мобильного дизайна

Существуют и более простые способы проверить мобильную версию сайта . Например, онлайн-сервис Responsinator позволяет оценить корректность отображения ресурса на мобильных устройствах и удобство пользования сайтом со стороны пользователя. Ресурс отображает сайт в том виде, как он выглядел бы на шести различных устройствах на базе Android или Apple и в нескольких ориентациях.

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

Другие ресурсы, позволяющие проверить мобильную версию сайта, дополнительно оценивают адаптивность, а не только показывают, как выглядела бы площадка на различных устройствах. Самые авторитетные сервисы: Google Mobile Friendly и «Яндекс ВебМастер» (проверка веб-страниц). Оценивают оптимизацию сайта для мобильных устройств также средство проверки Bing или, например, Mobile Checker от W3C.

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

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

fb.ru

Приветствую всех. Интернет развивается колоссально быстрыми темпами и сегодня увидеть посещения на сайт с мобильных устройств и планшетом уже не диковинка, как это было раньше. Рынок мобильного интернета набирает очень быстрые темпы и поэтому создатели сайтов должны адаптировать свои сайты под данные устройства. Если посмотреть последние новости интернет индустрии, то можно увидеть, что все идет к тому, что мобильные устройства в ближайшие 5-10 лет заберут большую половину рынка под себя.

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

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

То, что сайты будут помечаться информация 100%, остальная информация только предположения.

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

loleknbolek.com

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

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

1. Удобно читаемый контент (читается без увеличения), крупные поля форм и кнопки.
2. Отсутствие «тяжелых» картинок, Flash — элементов и излишней анимации.
3. Отсутствие Java-апплетов и Silverlight-плагинов.
4. Отсутствие горизонтальной полосы прокрутки.
5. Минимальная скорость загрузки сайта.
6. Максимально простая навигация.
7. Прописан мета-тег viewport.

Сервисы для проверки сайта на «мобильность»

Для демонстрации работы сервисов возьмём сайт моих хороших партнёров — бюро переводов КОНТЕКСТ.

1. Google Mobile Friendly

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

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

https://search.google.com/test/mobile-friendly

2. Яндекс Вебмастер (beta) — инструмент «проверка мобильных страниц»

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

Сервис отображает общую оценку, проверяет по 6 пунктам соответствия и показывает как выглядит сайт на смартфоне.

https://beta.webmaster.yandex.ru/

3. Средство проверки Bing

Проверяется общая оптимизация плюс соответствие 4 пунктам.

Также отображается то, как сайт выглядит на экране смартфона (конечно же, на OS windows, в то время предыдущие сервисы отображали android-смартфон =)).

https://www.bing.com/webmaster/tools/mobile-friendliness

4. Mobile Checker от W3C

Самый «долгий» из всех сервисов. Настолько «долгий», что окончания проверки я так и не дождался =)

Ждал минут 5, в то время как остальные сервисы справлялись за 5-20 секунд.

Пробовал Google chrome и Opera.

https://validator.w3.org/

5. Responsinator

В отличии от остальных не даёт каких-либо оценок, но отображает как выглядит ваш сайт на 6 различных устройствах в двух ориентациях на IOS и Android, что очень круто.

http://www.responsinator.com/

UPD1: 20.07.2017:

6. Adaptivator

Сервис предложенный в комментариях к этой статье. Лично не пользовался, но вроде всё довольно-таки неплохой. Возможности аналогичны респонизатору, но есть ещё и оценка результата адаптивности.

http://adaptivator.ru/

UPD2: 3.11.2017:

7. iloveadaptive.ru

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

www.iloveadaptive.ru

spark.ru

Проверить мобильную версию сайта Гугл

Начнем с поисковой системы Google, поскольку с её помощью проверить, как видят ваш ресурс другие устройства (не компьютеры), намного быстрее.

Для это нужно перейти по этой ссылке, ввести адрес сайта в соответствующую строку, и нажать «Анализировать«.

Если система проверит нужные теги, отсутствие вредных скриптов, мешающих показу страниц — тогда появится надпись: «Отлично! Страница оптимизирована для мобильных устройств«.

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

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

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

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

Здесь всё достаточно понятно и сразу вам пишут в чем суть проблемы. Посмотрев справку можно легко справиться с ними. О самой распространенной из проблем (отсутствие тега viewport), расскажем в конце статьи.

Проверить мобильную версию сайта Яндекс

Теперь перейдем непосредственно к русской поисковой системе Яндекс.

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

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

Даже если вы зашли в Яндекс.Вебмастер — не обязательно, что вы сможете проверить мобильную версию сайта. Эта функция есть только в новой бета версии вебмастера по адресу —beta.webmaster.yandex.ru/.

Наконец-то вы смогли войти в нужный сервис. Теперь нужно найти в разделе Инструменты, подпункт — Проверка мобильных страниц.

Чтобы появилась надпись: «Всё в порядке!«, система проверит ваш сайт по нескольким пунктам:

• наличие тега viewport;
• отсутствие горизонтальной прокрутки;
• отсутствие Flash-элементов;
• отсутствие Java-апплетов;
• отсутствие Silverlight-плагинов.

Здесь также как и в Гугле каждую страницу нужно проверять в отдельности. Но, на наш взгляд, если они у вас достаточно однотипны или имеют несколько разновидностей — проверьте мобильную версию сайта на нескольких пример и убедитесь в своем «диагнозе».

Самая распространенная ошибка мобильных страниц

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

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

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

Для этого нужно найти в корневой папке сайта файл с названием header.php и добавить в него строчку: «<meta name=»viewport» content=»width=device-width, initial-scale=1″>» . Делайте это рядом с другими тегами, использующими частицы «meta name».

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

Спасибо за внимание. Будем признательны, если воспользуетесь кнопочками «Поделиться».

sitesnulya.ru

Проверяем качество мобильной вёрстки с помощью Google Chrome

Для разработчиков у Google есть отличный инструмент для имитации мобильных устройств. Этот инструмент встроен в браузер Google Chrome. Для доступа к нему нужно нажать F12 в браузере (перейти в режим разработчика) и нажать на значок смартфона:

Страница преобразуется в режим переключения устройства, где вы сможете выбрать одно из популярных мобильных устройств, тип сети (GPRS, 2G, 3G, 4G и т.д.), указать строгие параметры дисплея. Это позволяет имитировать работу сайта на конкретных мобильных девайсах. К числу доступных устройств относятся различные версии iPad, iPad Mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxy и некоторых других популярных устройств.

Выбрав определенный девайс вы сможете проверить сайт на мобильном устройстве. Например, отображение главной страницы сайта «Нубекс» на iPad 3:

И на Samsung Galaxy S4:

Здесь вы сможете не только увидеть отображение сайта на том или ином девайсе, но и полноценно работать с сайтом, будто перед вами находится нужный гаджет. Несомненно, этот инструмент является просто незаменимым при разработке мобильной версии сайта, но как будет отображаться ваш сайт на реальных устройствах — нужно проверять на реальных устройствах. Особенно это важно, если нужно проверить отображение сайта в «родных» браузерах (Safari — для iPad/iPhone, IE — для Windows Phone и т.д.).

nubex.ru