Как победить «Удобство для мобильных» и «Ресурсы не удалось загрузить» в google?
На сайте постоянно увеличивается количество страниц с ошибками Слишком мелкий шрифт и Интерактивные элементы расположены слишком близко
При открытии страницы висит соотв надпись: Страница не оптимизирована для мобильных устройств
Нажимаю «проверить на сайте» и далее 2 варианта: либо страница оптимизирована, что никак не влияет на то, что она остается в ошибках, либо страница не оптимизирована, и в результатах проверки следующее:
Ресурсы страницы
17 ресурсов из 19 не удалось загрузить, среди которой и CSS со значением: Другая ошибка
Другими словами он тупо не жрет CSS, но делает четкий вывод что у меня ошибки.
Как такое можно починить?
На ум приходит только ловить его по агенту, и вставлять CSS в HTML (а может и JS тоже)
- Вопрос задан более трёх лет назад
- 3286 просмотров
Простой 3 комментария
- Вконтакте
dbus, Да их никто и не закрывает никогда по моему 🙂
Сейчас вот проверил еще одну, написал:
Страница оптимизирована для мобильных устройств
Эта страница оптимизирована для мобильных устройств.
Потому что стиль он скушал и в подробнее:
Ресурсы страницы
7 ресурсов из 19 не удалось загрузить
А там где запрещено роботсом, он пишет:
Роботу Googlebot заблокирован доступ в файле robots.txt
Скрипт
https://an.yandex.ru/system/context.js
Ткнув эту же страницу через часик, результат может быть противоположным и отчет будет:
Ресурсы страницы
15 ресурсов из 19 не удалось загрузить
в которых и стиль сайта 🙂
Побывал включить стили в HTML код — эффект тот же самый.
Смотрим индекс — Страница не оптимизирована для мобильных устройств (стили есть все в HTML, а не в файле)
Жмем «Проверить на сайте» и получаем: Страница оптимизирована для мобильных устройств
Вывод напрашивается только один — это разные боты 🙂
А вот что не нравится индексирующему боту так и не понял. На мобиле сайт выглядит норм, как и на суженном экране.
вы — не прятали, а в Joomla по умолчанию они закрыты.
в robots.txt в корне сайта добавьте в конец
User-agent: Googlebot
Allow: /*.js
Allow: /*.css
- Вконтакте
Задайте на страницу «Проверка оптимизации для мобильных» запустите проверку.
Если появились ошибки, нажмите на ссылку «Данные о ходе загрузки страницы»
Увидите что-то подобное и сразу всё поймете.
Слишком мелкий шрифт и Интерактивные элементы расположены слишком близко
Две наиболее часто встречающиеся ошибки в Google Search Console. Вот как они выглядят:
Зачастую ничего страшного в них нет, иногда Google ошибочно выдает ошибку и после проверки она пропадает. Вот что нужно сделать:
Кликаем по ошибке и переходим на страницу с адресами, на которых обнаружена эта ошибка. Дальше наводим на первый адрес и жмем иконку Проверить URL.
Нам открывается проверка по URL. Здесь мы нажимаем на кнопку Проверить страницу на сайте.
Начинается проверка страницы, обычно занимает меньше минуты.
Если проблемы на страницы нет, мы получим в результате следующее сообщение:
В таком случае вам не нужно ничего делать, страница оптимизирована и проблем нет. Google через время снимет эту ошибку, нужно дать 1-2 недели на обновление кеша Google. Сразу ошибка в консоли не пропадает, только через время.
В случае, если после проверки ошибки остались, нужно открывать страницу на мобильном и смотреть, где слишком маленькой шрифт, либо элементы расположены близко к друг другу.
Дополнительно вы можете проверить вашу страницу в этом сервисе Google для проверки оптимизации на мобильном.
Мобильная адаптация как инструмент SEO
Андрей Кузнецов, специалист по поисковой оптимизации
Задача мобильного SEO — улучшение видимости сайта в мобильных версиях поисковых систем, а следовательно, увеличение мобильного трафика. Мобильное SEO часто пересекается с понятием mobile friendly, введенным специалистами Google, которое означает адаптацию сайта для мобильных устройств. Они тесно взаимосвязаны: без одного не может быть другого.
Если вы заботитесь об эффективности своего проекта, есть 3 основных причины адаптировать сайт.
- Адаптация как фактор ранжирования (об этом говорилось в феврале 2015 года в официальном блоге Google).
Изменение позиций нашего портала auto-offer.ru в Google после адаптации — 57% позиций улучшилось.
- Снижение показателя отказов.
После адаптации сайта показатель отказов снизился на 4,4%.
- Увеличение конверсии.
Конверсия с мобильного трафика выросла на 1%.
Инструменты выявления ошибок, возникающих при просмотре сайта на мобильных устройствах
Search Console
Выявить ошибки, возникающие при просмотре сайта на смартфонах и планшетах, довольно просто: вся необходимая информация есть в Search Console (бывший Google Webmaster Tools): раздел «Поисковый трафик», пункт «Удобство просмотра на мобильных устройствах».
Этот способ возможен только для сайтов, подтвержденных в Search Console. Подтверждая сайт, вы получаете исчерпывающие рекомендации по каждой проблеме и список страниц, на которых эта проблема встречается.
Mobile-Friendly Test
Инструментом от Google Mobile-Friendly Test можно проверить любой сайт, не добавляя его в Search Console.
Положительный результат теста вы можете видеть на скриншоте, а при отрицательном инструмент дает общие рекомендации по устранению найденных ошибок и показывает сайт так, как его бы видел поисковый робот Google.
Responsive.is
Отличается от остальных тем, что тут можно посмотреть, как выглядит ваш сайт на разных типах устройств: монитор, планшет в горизонтальном и вертикальном положениях и смартфон в таких же положениях.
В поле для url нужно вставлять только имя домена (без http:// и https://).
Google Chrome
Для пользователей Google Chrome существует удобный инструмент для проверки адаптации, встроенный в браузер. Нажимаем F12 на подопытном сайте, на открывшейся внизу панели инструментов слева кликаем на значок смартфона. Теперь рабочая область браузера масштабируется под выбранное мобильное устройство. Вверху этого блока вы можете выбрать одно из нескольких популярных устройств и его расположение (вертикальное или горизонтальное). А потянув за край окна, можно посмотреть, как сайт адаптируется под данный размер.
Ошибки
В большинстве случаев на неадаптированных сайтах появляются первые 3 ошибки из скриншота.
Область просмотра не настроена
Данная ошибка появляется, когда страница сайта не подстраивается под размер окна мобильного браузера. В итоге мы можем видеть обрезанный текст, картинки и блоки сайта.
Одно из решений: страницы должны содержать в контейнере head метатег viewport. Он сообщает браузеру, как нужно контролировать размер и масштаб страницы.
Маленький размер шрифта
Эта ошибка чревата не только тем, что некоторые тексты невозможно прочитать без масштабирования, но и тем, что перейти по ссылке в меню или тексте практически невозможно, а это сильно затрудняет навигацию по сайту. Рекомендуется в качестве базового размера шрифта задавать 16 пикселей.
Интерактивные элементы расположены слишком близко
Когда ссылки, поля форм, кнопки и другие кликабельные элементы сайта находятся на близком расстоянии друг от друга, то прицельно кликнуть по ним пальцем на порядок сложнее, чем курсором мыши. Поэтому располагать такие элементы нужно с интервалом около 10 мм друг от друга (средняя ширина подушечки пальца человека).
Использование Flash
Большинство мобильных браузеров не поддерживает воспроизведение Flash-контента. В качестве альтернативы можно использовать HTML-5.
Виды сайтов
Различают 3 основных вида сайтов с точки зрения верстки, корректно отображающихся на мобильных устройствах: адаптивный дизайн, динамический показ и отдельный домен с мобильной версией.
Адаптивный дизайн
Google рекомендует использовать именно этот вариант, так как при заходе на сайт с адаптивным дизайном с любого устройства (не важно, с ПК или смартфона) мы получаем от сервера один и тот же ответ, один и тот же HTML-код, а элементы сайта трансформируются с помощью стилей CSS. Это позволяет избежать ошибок в индексировании сайта при продвижении, а неизменный URL позволяет удобнее делиться контентом.
Динамический показ
При этом варианте настраивается определение устройства, обращающегося к сайту, на уровне сервера, и в зависимости от того, с какого устройство зашел пользователь, серверу отдается разный HTML-код: для пользователя, зашедшего со смартфона, показывается сайт с одним HTML-кодом, а для пользователя, зашедшего с ПК — с другим.
Поддомен с мобильной версией
При таком варианте создается отдельный сайт для мобильной версии: m.site.ru, mobile.site.ru и т. д. Здесь надо быть осторожным, так как поддомен имеет ту же структуру и почти тот же контент (обычно, упрощенный), поэтому по умолчанию создаются страницы с одинаковым содержимым, т. е. дубли, которые негативно сказываются на поисковом продвижении. Необходимо правильно расставить теги rel="canonical" и rel="alternate" на основном и мобильном домене, чтобы Google верно определил, где оригинал страницы, а где дубль.
Часто бывает, что пользователь, не успев дочитать интересную статью на смартфоне, сохраняет ее в закладках. А когда открывает ее на ПК, открывается та же мобильная версия сайта, и переадресации на основной сайт не происходит. Чтобы этого избежать, делайте в подобных случаях редирект на основной сайт, определяя устройство пользователя, или просто используйте адапативный дизайн.
Кроме того, реализовать мобильный сайт можно и другими способами. Например, в подпапке сайта site.ru/m/ или для каждого устройства сделать свой дизайн. Так удобнее контролировать конверсию сайта в целевом сегменте: создавая свой дизайн для каждой версии сайта, легче подстроиться под аудиторию.
Если при проверках вы выявили некоторые ошибки или некорректное отображение в мобильном браузере, необходимо, чтобы верстальщик настроил отображение во всех основных форматах, в противном случае потенциальные клиенты из мобильного трафика так и останутся только потенциальными.
Оптимальный вариант — проектировать адаптацию сайта еще на этапе разработки. Это сэкономит вам средства на дополнительной работе верстальщика и усилит динамику развития проекта как в области конверсий, так и в области поисковой оптимизации.
Страница не оптимизирована для мобильных устройств
Вопрос. Какие именно элементы расположены близко? Почему эта утилита такая убогая что не может сказать конкретно что ему не нравится? Я уже сохранил статический html и выборочно удаляю блоки. 2 часа просидел, вбивал их гребаную каптчу, но так и не нашел какие div ему не нравятся. Метод исключения не сработал.
Как решить проблему? Визуально сайт нормальный.
Есть ли оффлайн утилиты?
- Что вы назначаете footerу id или class?
- Вопросы представителю Яндекса
- Google запустил инструмент проверки дружественности сайта к мобильным устройствам Mobile-Friendly Test
iHector:
1) Интерактивные элементы расположены слишком близко
2) Контент шире экрана
1) Мелкие ссылки, кнопки, любые элементы, которые пользователь должен нажимать, что бы выполнить действие на странице: переход по ссылке, подтверждение и тд. Это может быть картинка-ссылка, что угодно. Обычно в превью это видно. Либо используйте инструменты вебмастера в вашем браузере для просмотра адаптивного режима.
2) Это значит, что какой-то из блоков по ширине не применяет адаптивный размер и не уменьшается в достаточной мере, выходя за границы экрана. Таким же элементом может быть и картинка, и что угодно.
Покажите пациента, можно в личку, может навскидку смогу сказать, какой элемент вылетает за границы.
Одно нашел — это были ссылки в футере. На скрине их конечно не видно было. Сделал между ними больше расстояние — проблема ушла. Копаю дальше.
Просто очень долго он проверку делает еще и каптча, чувствую себя мартышкой.
Именно для этого и нужно пользоваться или адаптивным видом в браузере (F12, режим адаптивного дизайна или сразу в меню, если есть, после — выбираете нужный размер), или сторонними сайтами, которые соответственно уменьшают размер, имитируя мобильное устройство. А так конечно можно сутками копаться над задачей, которая ровно на 5 минут. Ну и где блоки вылезают за границу экрана — вы в гугл тесте и не увидите, сначала нужно визуально глянуть какой блок «уходит», а затем его найти в css и исправить.
Алеандр, да ничего там не выходит в том и дело.
Скормил ему точную html копию страницы на которой делал тесты. Так вот она проходит тест, а аналогичная на сайте источнике — нет. Визуально и по html они идентичные. Про средства разработки я в курсе.
Рендерит он безголовым браузером (скорее всего фантом или может свой хром). В общем то ли утилита сырая то ли лыжи не едут.
Может быть и такое что на сайте-источнике, на котором не проходится тест, не подгружаются какие-нибудь стили, либо закешировались старые стили, если используете кеширование с помощью ETag/Cache-Control заголовков. Посмотрите внимательнее на @media директивы в CSS.
скорей второе. Если считаете. что все ок то не обращайте внимания на утилиту 🙂
Проверьте. что не закрыты стили и дополнения в роботс. Он его учитывает при проверке. не будет загружать, и просчитывать с их учетом тоже.
Раньше показывало ошибки. После переделки — только сторонними сервисами.
Могу скинуть ссылку, если нужно. Ну или пришлите сайт — гляну что не так, подскажу.