Blog

Живой мобильный просмотр (превью) для оптимизации адаптивного веб-дизайна

Живой мобильный просмотр (превью) для оптимизации адаптивного веб-дизайна – тест для мобильных устройств + отладчик Facebook

Мгновенный мобильный просмотр веб-сайта (страниц, сообщений, продуктов) для адаптивного веб-дизайна на телефоне (+ двойной экран).

Описание

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

То, что вы должны знать:

  • Мобильная доля веб-трафика растет на 30% в год, и в основном этот рост приходится на развивающиеся страны (Hootsuite).
  • В настоящее время более половины всех поисков выполняется с помощью мобильного телефона, и это число продолжает увеличиваться (Search Engine Land).
  • 57,3% всего интернет-трафика приходится на мобильные устройства / планшеты; 42,7% с рабочего стола (Stat Counter).
  • Количество пользователей в США, которые используют только настольные компьютеры, уменьшается. Это число сократилось с 25 миллионов в 2015 году до 18 миллионов в 2017 году. К 2021 году оно должно снизиться до 11 миллионов. (Wiredseo).
  • Напротив, количество пользователей мобильного Интернета увеличилось на 28% за последние два года, достигнув 41 миллиона в Соединенных Штатах в 2017 году. (eMarketer).

О MOBILOOK. Этот плагин, который является расширением Google DEVTOOL, позволяет мгновенно проверять визуальный адаптивный дизайн ваших страниц, ваших статей или ваших продуктов на мобильных устройствах и в различных форматах (Apple, Samsung, устройства Google) (включая складные телефоны с экраном). как Samsung Galaxy Fold с PRO-версией).

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

Больше нет необходимости проверять, как ваш сайт выглядит на вашем мобильном телефоне, чтобы увидеть, хорошо ли он подходит для телефонов, планшетов и других медиафайлов (отзывчивый).

PRO ОСОБЕННОСТИ

MOBILOOK PRO предлагает несколько функций:

  • Активация плагина для ваших страниц, сгенерированных WooCommerce, для вашего интернет-магазина, чтобы вы могли сразу увидеть, отзывчивый ли дизайн страницы продукта
  • Активация дополнительных форматов – версия PRO позволяет получить доступ к большому списку форматов мобильных телефонов / планшетов (15), даже для телефонов со складным экраном (DualScreen).
  • Активация трех очень полезных функций
  • Facebook Debugger позволяет вам сканировать ваши страницы с помощью ботов Facebook, чтобы генерировать современные OpenGraphs
  • LinkedIn Post Inspector позволяет сканировать ваши страницы ботами LinkedIn для создания современных OpenGraphs
  • Google Mobile-Friendly Test Tool позволяет вам проанализировать вашу страницу в Google, чтобы определить, соответствует ли она всем критериям эффективности..

ДОСТУПНЫЕ ФОРМАТЫ УСТРОЙСТВ

  • Samsung Galaxy S9 = 360 x 740
  • iPhone 6/7/8 = 375 x 667
  • Google Pixel 2 = 441 x 731
  • Samsung Galaxy FOLD (Dualscreen – Exp) = 585 x 668
  • iPhone 6/7/8 plus = 414 x 736
  • Samsung Galaxy S8 Plus = 360 x 740
  • iPhone XS Max = 414 x 896
  • Google Pixel 3 XL = 411 x 823
  • Samsung Galaxy S8 = 360 x 740
  • Samsung Galaxy Note 9 = 414 x 846
  • iPhone X = 375 x 812
  • Ipad = 768 x 1024
  • Ipad PRO = 1024 x 1366
  • iPhone 5/SE = 320 x 568
  • Galaxy S5 = 360 x 640

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

Что такое Facebook Debugger и LinkedIn Post Inspector? Вы случайно не поделились ссылкой на свой сайт в LinkedIn или Facebook и увидели неправильное название, описание или изображение для предварительного просмотра? Это нормально! Обычно, когда вы делитесь ссылкой из WordPress, боты Facebook/LinkedIn извлекают изображения и другую информацию о контенте. Facebook/LinkedIn обычно очищает каждый URL-адрес, который разделяют пользователи и страницы, и показывает рекомендуемое изображение, заголовок и описание.

Однако, когда вы создаете новую новую страницу и публикуете ее непосредственно в Facebook или LinkedIn (или изменяете содержимое существующей страницы), Facebook и LinkedIn не всегда могут отображать ваши метаданные (предварительный просмотр изображения, заголовок и описание) и рендеринг не идеален («часто рекомендуемое изображение» не появляется). Как только ваш контент опубликован, функции, доступные на каждой из ваших страниц, позволяют сканировать ваш URL в отладчике Facebook/LinkedIn Post Inspector, чтобы генерировать современные OpenGraphs, чтобы они выглядели идеально в социальных сетях.

Что такое Google Test-Friendly Test Tool? Этот инструмент, по сравнению с Google DEVTOOL, на самом деле говорит вам, как робот Googlebot (Google Spider) видит вашу страницу, а не то, как ваши мобильные пользователи могут ее видеть. Это само по себе очень полезно, потому что вы можете использовать обратную связь и для целей SEO. Если ваш веб-сайт пройдет тест, вы увидите зеленое сообщение с надписью «Отлично! Эта страница удобна для мобильных устройств». Если она не пройдёт, сообщение будет красным и скажет «Не подходит для мобильных устройств».

В случае, если ваш веб-сайт не пройдет мобильный тест, он также предоставит причины, по которым он не прошел, например, содержание шире, чем экран, или ссылки расположены слишком близко друг к другу. Это ИНСТРУМЕНТ, который показывает, считает ли Google вашу страницу удобной для мобильных устройств. Эта функция (доступна на каждой из ваших страниц) позволяет вам проанализировать ваш URL в Google после публикации вашего контента.

Что такое адаптивный сайт?

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

В последние годы Google все больше стремится к тому, чтобы все веб-сайты были мобильными. Это имеет смысл, поскольку количество поисковых запросов с 2009 года постоянно растет, а в 2018 году, наконец, превзошло количество поисков с настольных компьютеров (в 2018 году 52,2% мирового веб-трафика приходилось на мобильные телефоны).

Почему это важно для SEO?

С апреля 2015 года Google официально начал поощрять сайты, удобные для мобильных устройств, и штрафовать сайты, которые не были совместимы с мобильными устройствами в своем поисковом рейтинге. Исследование, проведенное Blue Corona, показало, что веб-сайты, которые не переходили на мобильные платформы до обновления в 2015 году, получили штраф в размере 50% + сокращение трафика. Это наказание произошло из-за того, что Google опустил свои SEO-рейтинги, что привело к тому, что меньше людей видели и нажимали эти сайты

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

Click to rate this post!
[Total: 2 Average: 5]