Сегодня поговорим о том, каким образом нужно проверять сайт и оптимизировать мобильную и адаптивную версию сайта. Какими должны быть основные критерии?
Общая проверка
- Мобильная версия сайта корректно сканируется в Search Console. Нужно проверить при помощи инструмента Fetch as Google.
- Для проигрывания видео-контента применяется HTML5.
- Видео воспроизводится правильно – без ошибок и запинок.
- Нет окна онлайн-консультанта (оно скрыто для удобства).
- Отсутствует навязчивая реклама на весь экран.
- Отступы между ссылками – не меньше, чем 28 пикселей по вертикали и горизонтали.
- Мобильная или адаптивная версия сайта протестированы минимум на пяти различных разрешениях экрана, в двух мобильных браузерах и на трех устройствах с разными разрешениями экрана.
- Мобильная версия сайта содержит возможность заказа товара в один клик.
- Номера телефонов кликабельны и соответствуют тому региону, по которому происходит реклама.
Проверка адаптивного дизайна
- Для правильного отображения содержимого в блоке <head> есть метатег viewport с такими показателями: <meta name=«viewport» content=«width=device-width, initial-scale=1.0»>
- Размеры картинок сайта без проблем адаптируются по размер экрана любого устройства.
- Поисковый робот имеет доступ JavaScript, файлам CSS и картинкам, как и обычный пользователь сайта.
- Меню сайта размещено на экране № 1.
- Ссылка на корзину размещена в первом экране.
- Чтобы адаптировать видео под любые разрешения экранов, на сайте размещен тег HTML5 <video>.
Детальный анализ мобильной версии сайта
- Пользователи мобильных телефонов в автоматическом режиме на мобильную версию сайта посредством 302 редиректа.
- Пользователи десктопов перенаправляются на стандартную версию сайта посредством 302 редиректа.
- Мобильная версия сайта содержит кнопку для перехода на стандартную версию сайта, кнопку видно четко.
- Если пользователь присутствовал на мобильной версии сайта и попал на обычную, то при переходе на иные страницы он не попадает на мобильную версию сайта.
- Перекрестные ссылки работают правильно.
- Для десктопа и мобильной версии указываются канонические URL-адреса посредством тегов <link> с элементами rel=«canonical» на десктопную версию.
- Для десктопа и мобильной версии указываются альтернативные ссылки rel=«alternate» обоих версий.
- В robots.txt и Google Search Console создали и добавили отдельную XML-карту для «мобильного» сайта.
- Проведен технический SEO-аудит с аналогией по аудиту стандартной версии сайта.
- Посредством сервиса PageSpeed Insights проверили загрузку сайта для мобильных сайтов с получением низких баллов (менее 80) и разработкой технического задания по оптимизации на базе подсказок сервиса.
- Общий стиль мобильной версии отвечает стилю десктопной.
Проверка динамического показа
- В ответе сервера настроен HTTP-заголовок Vary: User-Agent. Это нужно для того, чтобы отправлять сообщение Google и браузеру о том, что HTML код сменяется по признаку User-Agent.
Придерживаясь этих простых советов ваш сайт будет иметь привлекательный вид и удобный функционал.
