Приветствую всех. Интернет развивается колоссально быстрыми темпами и сегодня увидеть посещения на сайт с мобильных устройств и планшетом уже не диковинка, как это было раньше. Рынок мобильного интернета набирает очень быстрые темпы и поэтому создатели сайтов должны адаптировать свои сайты под данные устройства. Если посмотреть последние новости интернет индустрии, то можно увидеть, что все идет к тому, что мобильные устройства в ближайшие 5-10 лет заберут большую половину рынка под себя.
К чему я веду? А к тому, что необходимо адаптировать свои сайты и делать их удобными для просмотра на мобильных гаджетам.
Компания Google недавно заявила, что будет отмечать в сайты, которые дружественные к смартфонам и планшетам. Многие эксперты говорят, о том, что сайты которые не будут соответствовать данным критериям будут немного понижаться в выдаче и хуже . Так же есть предположения, что Google может сделать отдельную выдачу для мобильных сайтов.
То, что сайты будут помечаться информация 100%, остальная информация только предположения.
Мое мнение таково, что необходимо следовать всем стандартам и делать дружественным сайт к разного рода мобильным гаджетам. Мы свой сайт почти закончили адаптировать, осталось еще несколько штрихов и все будет готово. Хотя если посмотреть уже сейчас, то можно увидеть, что сайт хорошо отображается на смартфонах и планшетах. Пока я занимался этой работой, то выбрал для себя несколько онлайн сервисов с помощью которых можно проверить сайт на мобильных устройствах . Хочу ими поделится с вами.
5 бесплатных онлайн сервисов для проверки сайта на мобильных устройствах.
Давайте перечислим все бесплатные сервисы и потом рассмотрим каждый по порядку:
- Google Webmaster Tools ()
Выше я перечислил 5 бесплатных онлайн сервисов, которыми сам пользуюсь и Вам рекомендую. Их функционала полностью хватит для решения любых посталенных задач. Давайте по порядку разберем каждый из них.
1. Google Webmaster Tools (Mobile Friendly Test). Самый лучший сервис поскольку он разработан компанией Google. Хорош он тем, что можно посмотреть не только как отображается сайт на экране, а и получить все необходимые рекомендации для устранения ошибок и правильного отображения. Для того, что бы увидеть все ошибки необходимо перейти в Google Webmaster Tools , в пункте “Поисковый трафик” выбрать “Удобство просмотра на мобильных устройствах”. После перехода на страницу можно увидеть проблемы с удобством просмотра.
Удобство просмотра на мобильных — Google Webmaster После просмотра ошибок можно перейти к тесту самого сайта. Переходим к тесту , вводим и получаем все рекомендации, которые необходимо выполнить. Для просмотра всех рекомендаций, справа нажимаем на кнопку «Далее » в пункте “Как сделать страницу удобной для мобильных” .
2. Теперь переходим к остальным сервисам с помощью которых можно проверить сайт на мобильных устройствах.
Все они довольно просты в применении, достаточно ввести в строку адрес сайта и получите все результаты сайта на различных устройствах. Давайте для примера рассмотрим сервис Responsinator . Переходим и вводим адрес и нажимаем «GO «, я ввожу loleknbolek . Результаты получены.
Листая вниз можно увидеть сайт в разных разрешения, что есть очень хорошо. Все остальные выше перечисленные сервисы работают аналогично. Я использую несколько сервисов потом, что не всегда на одном можно получить правильный результат. При использовании нескольких процент ошибки падает к нулю.
Пользуйтесь сервисами для проверки сайта на мобильных устройствах — на здоровье. Могу сказать, только одно — адаптируйте сайты под мобильные, этот рынок растет очень быстро, не успеете оглянутся как Ваши конкуренты уже используют мобильные версии и собирают большую аудиторию.
Добрый день, друзья. Сегодня я немного отойду в сторону от рекламных инструментов и начну новую рубрику на блоге. Она получает название «Вебмастеринг» и будет включать полезные материалы на тему улучшения призводительности и качества сайта, посадочных страниц. А начну с обзора классного инструмента для проверки сайта на мобильность.
Проверяем скорость сайта вместе с Google
Для этого гугл предлагает 2 инструмента.
#1 PageSpeed Insights
Я думаю, вы хорошо с ним знакомы. Вставляете ссылку на свой сайт, жмете кнопку «Анализировать» и получаете результат в виде двух вкладок.
Вкладка «Для мобильных» включает отчет по скорости загрузки сайта для мобильных устройств и — важно! — оценку удобства сайта для смартфонов. Вкладка «Для компьютеров» соответственно тот же анализ для десктопа.
Самое приятное, что сервис позволяет скачать оптимизированные изображения, css и скрипты, чтобы использовать их на своем сайте. Вот такая бесплатная помощь от Google.
Как видно из скриншота, у меня серьезные проблемы с мобильной версией. А как обстоят дела у Вас?
#2 Testmysite.Withgoogle
На самом деле это тот же инструмент, просто обертка у него красивая. Я обнаружил этот сервис на днях и меня подкупила форма предоставления отчета.
Когда вы вставите ссылку на сайт и нажмете «Проверить», сервис предложит результат в виде полноценного динамичного лендинга, на котором емко и убедительно расскажет, как обстоят дела с сайтом, и предложит скачать полный отчет.
Разумеется, я попросил полный отчет и через пару минут получил его на почту. Выглядит он толково, несколько экранов полезных инструкций с ссылками на конкретные материалы:
Примечательно, что если анализировать один и тот же сайт, то цифры по этим инструментам будут немного различаться. Однако работают они на одной технологии.
Вот так буквально за несколько секунд можно не только проверить сайт на мобильность и проверить скорость загрузки — но и скачать полноценный отчет с оптимизированным контентом. Бесплатно. От Google
Ну что, а как у вас обстоят дела с мобильностью?
comments powered by HyperCommentsВерсии сайта - это не только возможная прихоть разработчиков, дополнительная статья расходов (или заработка, если говорить о подрядчиках) и проявление заботы о посетителях ресурса. Согласно последним заявлениям представителей корпорации Google, сайты, не отвечающие требованиям адаптивного дизайна, будут пессимизированы в поиске, осуществляемом с мобильных устройств. Отечественная поисковая система Яндекс также выпустила рекомендации "Как важно быть мобильным" и заверила, что, действуя ради удобства пользователей мобильных устройств, будет маркировать в поисковой выдаче мобильные версии и отдавать предпочтение адаптивным страницам.
Так, разработчикам в обязательном порядке необходимо адаптировать сайты для смартфонов и проверять исправность отображения ресурса. В противном случае в скором времени можно ожидать потерю значительной части трафика, а значит, и потенциальных клиентов, ведь новые алгоритмы работы от Google и "Яндекс" уже действуют. Проверить мобильную версию сайта можно различными способами: изменением браузера при переходе в режим разработчика, при помощи эмуляторов мобильных устройств или веб-сервисов.
Дружелюбность сайта мобильным устройствам
Адаптивность к мобильным устройствам оценивается по различным параметрам. Важно проверить мобильную версию сайта не только в плане корректного отображения, стоит учесть и другие факторы:
- отсутствие анимации, "тяжелого" дизайна и картинок;
- скорость загрузки ресурса (должна быть минимальной);
- отсутствие необходимости горизонтальной прокрутки;
- отсутствие 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.
Все что требуется от веб-мастера при оценке версии сайта для мобильных устройств при помощи онлайн-сервисов, так это ввести адрес ресурса и дождаться окончания анализа. Большинство вышеуказанных сервисов проверяют оптимизацию по параметрам дружелюбности к мобильным устройствам, которые были перечислены выше.
Итак, оценить адаптивность веб-ресурса можно несколькими способами: начиная от тестирования на реальных смартфонах, планшетах или других мобильных устройствах или изменения размеров окна веб-браузера, проверки в эмуляторах или в режиме разработчика веб-браузеров и заканчивая использованием сервисов от "Яндекс" и "Гугл". Проверить мобильную версию сайта всесторонне очень просто, а это позволит внести необходимые правки и улучшить позиции сайта в поисковой выдаче.
Сегодня уже нет нужды убеждать кого-либо в необходимости мобильной версии сайта. Ведь с каждым днем посетителей со смартфонов и планшетов становится все больше и больше. На момент написания этой статьи около 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. После чего, конечно же, необходимо проверить лояльность поисковых систем к вашему дизайну. А уже потом, для успокоения души или чтобы похвастаться, можно воспользоваться онлайн сервисами.
Здравствуйте друзья! В статье рассмотрим вопрос, как проверить сайт на мобильность. Способность сайта корректно отображаться на всех видах мобильных устройств влияет теперь на его продвижение и посещаемость, а значит и на заработок через Интернет.
Почему важно проверить сайт на мобильность
Не секрет, что доля трафика с мобильных устройств растет ежемесячно, а если посмотреть за прошедшие пару лет, то он вырос в несколько раз. И это понятно – у пользователей появились смартфоны, 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. Чтобы создать свой блог, Вам пригодится разработанная мной интеллект карта « , можете её скачать и применить знания на практике, при её разработке вложен мой трёхлетний опыт. При ведении блога, важно правильно писать и оптимизировать статьи, поисковики высоко оценивают такие статьи. Можете скачать интеллект карту « » или платную книгу « .
Получайте новые статьи блога прямо себе на почту. Заполните форму, нажмите кнопку "Подписаться"