Займёмся мобильной версией

Суть мобильной версии достаточно проста - нужно сделать так, чтобы сайт сохранил функционал обычной версии и стал удобен для посетителей мобильных устройств. Сегодня перечень таких устройств достаточно разнообразен - мобильные телефоны на операционной системе Android, телефоны Iphone, несколько версий планшетных компьютеров Ipad, планшетные компьютеры на ОС Android и множество более мелких игроков. Разрешения экранов всех этих устройств сильно отличаются, плюс есть горизонтальная и вертикальная ориентации экрана - ну не кошмар ли! 

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

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

Начнём с общих проверок

1. Добавим сайт в Google Search Console
2. Проверим, нет ли агрессивной рекламы на сайте в весь экран телефона.
3. Проверим, если есть видео, корректно ли оно работает и правильно ли настроены размеры окна. Для адаптации видео под все экраны должен использоваться тег <video>.
4. Если есть виджет онлайн-консультанта, то корректно ли он отображается. Если нет, то нужно поставить адаптивную версию или вообще его убрать.
5. Визуально оценим удобство нажатия на ссылки. Рекомендуется отступы между ссылками делать не менее 28 пикселей, чтобы было удобно нажимать на них пальцами.
6. Сайт занимает всю ширину экрана и нет горизонтальной прокрутки.
7. Номера телефонов кликабельны - при нажатии на них можно позвонить. Формат номера телефона должен быть понятен.
8. Работают формы отправки сообщений и оформления заказа. Рекомендуется сделать для мобильной версии покупку в один клик.
9. Тестируем мобильную средствами Google Chrome и в нескольких мобильных браузерах.
10. Если все выше отмеченное проверено, то отдадим сайт на проверку сервису Google - https://search.google.com/test/mobile-friendly

Далее перейдем к техническим нюансам

1. Мета-тег viewport - он должен быть в блоке HEAD - <meta content="width=device-width, initial-scale=1" name="viewport" />
2. Есть ссылка на главную страницу.
3. Меню сайта доступно сразу при загрузке страницы на первом экране, есть мобильное меню.
4. Изображения - важный пункт. Проверим адаптированы ли изображения для мобильных устройств. Это же касается сладеров и фото-галерей, если они есть на сайте.
5. Папки javascript, css и изображений открыты для индексации и к ним есть доступ у поискового робота.
6. Если проверяем интернет-магазин, то ссылка на корзину на заметном месте.
7. Проверим валидность кода через сервис W3C
8. Проверяем, передаётся ли заголовок Vary: User-Agent.
9. Проверим обнаружил ли Google-бот ошибки - Crawl > Crawl Errors.
10. Проверим скорость загрузки мобильной версии сайта по сервису PageSpeed Insights . Если показатель менее 80, то рекомендуется оптимизировать код сайта для его ускорения. Помните, что если сайт слишком долго загружается, то поисковые роботы могут его вовсе не проиндексировать.

Для мобильной версии проверяем 

1. Работает переадресация с заголовком 302 для пользователей мобильных устройств.
2. Пользователи обычной версии сайта перенаправляются на неё с мобильной с переадресацией 302.
3. В мобильной версии есть кнопка перехода на обычную версию сайта.
4. После перехода пользователем с мобильной версии на обычную не происходит перенаправление на мобильную версию.
5. Перекрёстные ссылки работают корректно. Пользователь должен попадать на ту же страницу обычной версии сайта, на которой он был на мобильной версии. Например, со страницы m.costamedia.es/about/ пользователь должен попасть на страницу www.costamedia.es/about/
6. Ссылки на полную и мобильную версии сайта указаны с атрибутом rel="canonical" 
7. Указаны альтернативные ссылки rel="alternate" для мобильной и обычной версий.
8. В файле robots.txt создана отдельная карта сайта для мобильной версии. Она добавлена в Google Search Console.
9. Стиль мобильной версии соответствует стилю обычной версии сайта.

Все сделано? Поздравляем!

Следите за нашим блогом, пишем кратко и по делу, без воды