Назад в 2013 году,
Google официально announced 1 , что он начнет штрафовать сайты, которые предоставляют неисправный пользовательский опыт на мобильных устройствах.Конкретные примеры включают в себя перенаправление внутренние URL-адреса на главную страницу, если смотреть в мобильной версии веб-сайта, а также показывает ошибки 404 для людей, пытающихся страницы доступа к мобильной .
К концу 2014 года, представитель Google намекнул, что мобильная пользовательский опыт станет рейтинг factor 2 .В январе 2015 года, число владельцев веб-сайтов полученные сообщения, предупреждающие о проблемах мобильных юзабилити на своих сайтах, ссылающихся на секции Webmaster Tools, где они могли бы рассмотреть проблемы .
3 В этой статье мы рассмотрим, как флаг мобильного вопросы в Webmaster Tools, объяснить самые общие вопросы и научиться оценивать мобильных проблемы с юзабилити на вашем сайте на основе этих флагов.Потому что мобильная юзабилити стала больше внимания в алгоритме ранжирования Google, обеспечивая оптимальное мобильный опыт на каждом сайте стало более важным, чем когда-либо.Смотрите результаты поиска ниже, где Google помечаются специальный мобильный веб-сайт (DP отзыв) и отзывчивую сайт (CNET) как для мобильных устройств.Результат для PC Magazine не хватает Эта метка .
5 Взглянув на каждом URL показывает нам ясно,Причины, почему DP Обзор и CNET, полученные для мобильных устройств этикетки и почему PC Magazine не было и уступает другим.Мало того, что ссылка PC Mag не идут в правильном мобильной версии сайта (который не существует), а также обеспечивает продвижение всплывающее окно с крошечной кнопки закрытия, что неудобно, чтобы нажать на мобильный .
7 Настройки сторону законные мобильные вопросы, не только люди уходят из вашего веб-сайта после неудачного опыта, но и ваш органический поисковый трафик может снизиться из-за позиции могут пострадать в результатах мобильного поиска.С другой стороны, когда вы делаете улучшить проблемный веб-сайт, вы могли видеть значительное улучшение в органическом поискового трафика, как мы увидим в следующем примере .
Мое агентство построен новый веб-сайт, чтобы заменить тот, который многие из мобильных проблем мы рассмотрим в этой статье.Оригинальный сайт содержит ряд флэш-элементов, не хватало какой-либо конфигурации видовых экранов, и содержал мелкого текста и сенсорных элементов при просмотре на экране мобильного телефона.Новый веб-сайт был построен на быстродействие формате, устраняя эти вопросы.В течение двух месяцев возобновления, сайт увидел рост числа новых пользователей из органических поиск Google на мобильных устройствах, в два раза увеличение видели на рабочем столе 44%.В то время как ряд других факторов, безусловно, сыграла свою роль, например, уточнение содержания, то, что мобильная показал такой значительный рост отражает стоимость Google приписывает мобильного юзабилити .
Поиск Mobile Проблемы для веб-мастеров Tools
Чтобы просмотреть мобильные вопросы, помеченные на вашем сайте, вы будете в первую очередь необходимо установить для веб-мастеров Инструменты Google.В то время как многие сайты уже запустили Webmaster Tools, некоторые не делают, и вот краткие инструкции по настройке.Перейдите к Webmaster Tools 9 страницы, и войти с вашей учетной записью Google.Вы увидите поле для ввода вашего URL.Затем выберите “Добавить на сайт.”
Далее вам нужно проверить на веб-сайте.Webmaster Tools будет показывать различные методы для этого, в том числе загрузив HTML-файл на ваш сайт, добавляя мета-тег или войдя в поставщика имени домена.Вы также можете проверить с помощью Google Analytics или Google Сообщить менеджера, если либо код находится в месте на своем сайтеи у вас есть доступ к счету.Если вы работаете в WordPress веб-сайт, плагин, таких как Йоаст в WordPress SEO позволит вам проверить Webmaster Tools легко скопировать и вставить номер из мета-тег в поле в плагине .
После установки Webmaster Tools на вашем сайте, вы можете не увидеть каких-либо данных в интерфейсе в течение нескольких дней. Предложить сайт map 10 может ускорить процесс обхода и индексирования вашего сайта .
Вы найдете в разделе «Мобильный юзабилити” в разделе “поисковый трафик” в левой навигационной панели.Это покажет вам, какие ошибки, если таковые имеются, были найдены на своем сайте.Нажмите любую из категорий ошибок, чтобы увидеть конкретные URL-адреса, помеченные для каждого .
11 Google показывает мобильные вопросы по шести основным категориям:
- Использование вспышки,
- Видовой не настроен,
- Фиксированной ширины окна просмотра,
- Содержание не размер, чтобы видовом
- Маленький размер шрифта,
- Коснуться элементов слишком близко .
Для устранения этих проблем, посмотреть на плавающих под флагом URL, и определить, какие правки должны быть сделаны .
Что касается “Использование вспышки”, какие-то элементы Flash-не сделает правильно на большинстве мобильных устройств.Например, когда я пытаюсь получить доступ Мы выбираем Moon 13 от iPhone, он заставляет меня Скачать Flash испытать веб-сайт.Ну, я, очевидно, не может установить флэш на моем iPhone, поэтому я не могу испытать этот сайт вообще на мобильном .
14 Решение этой проблемы просто означает, реструктуризации сайт, чтобы не включать любую флеш когда служил на мобильном устройстве .
“Viewport не написал” означает, что сайт не сбалансированы по размеру устройства.Посетите веб-сайт ниже, часть из которых отрезаны в небольших браузеров .
16 Используйте мета viewport тег для того, чтобы высота и ширина изменения на сайте в зависимости от размера телефона или на экране планшета.Установка следующий код в голову сайта вызовет его, чтобы изменить размер и изменить элементы, чтобы соответствовать различные размеры экрана .
<meta name="viewport" content="width=device-width, initial-scale=1"> В этом коде width=device-width автоматически размер по ширине сайте с размером окна, в котором он рассматривается.И initial-scale=1 будет установить уровень масштабирования веб-сайте на 100%, масштабирования веб-сайт, чтобы заполнить окно, независимо от размера экрана.С этого атрибута в месте, контент будет перерисовывать, когда телефон или планшет перевернуть с вертикальной на горизонтальную ориентацию .
“Фиксированной ширины окна просмотра” относится к страницам, которые создаются, чтобы показать на определенную ширину пикселя.Это проблематично, когда сайт не правильного масштабирования к неожиданному размера экрана.Таким образом, используя device-width в viewport мета-тег, как и в предыдущем примере, позволит веб-сайт для масштабирования в зависимости от размера экрана любого устройства .
18 Например, обратите внимание, как режет навигации на правой стороне сайта гимна, как показано на скриншоте выше.Этот веб-сайт включает в себя viewport мета-тег, но использует его, чтобы определить конкретную ширину .
<meta name="viewport" content="width=1100" /> Замена width=1100 с device-width вызовет сайт, чтобы масштабировать по ширине браузера, фиксируя проблему.Конечно, разработчик будетвероятно, хотите, чтобы решать вопросы с тем, как элементы на веб-сайте адаптироваться к изменениям в размере, а также .
“Содержимое не размер, чтобы области просмотра” указывает, что пользователи с маленькими браузеров нужно прокрутить из стороны в сторону, чтобы посмотреть элементы (как и в фитнес и примеры Anthem).Это может оказаться раздражает, особенно по телефону.Замена абсолютное позиционирование с относительным позиционированием в CSS, скорее всего, поможет решить эту проблему.Например, обратите внимание, как элементы на веб-сайте ниже бок о бок в большей браузера, но стек в верхней части друг с другом, когда браузер меньше .
20