Каждый день интернет-индустрия совершает новые скачки вперед. Сейчас более продвинутые владельцы веб-проектов имеют в запасе также и мобильную версию сайта. Поэтому в связи с актуальностью этого направления мы предлагаем вам глубже ознакомиться с темой.
Эта статья предназначена для специалистов, которые пошли в ногу со временем и адаптировали свои сайты под мобильный трафик. Здесь вы получите ответы на вопросы по данной теме и сможете исправить свои ошибки по оптимизации.
Как испытать мобильную версию интернет-сайта?
Представьте, что вы уже заказали эту удобную функцию у веб-дизайнеров. Работа была проделана точно в срок. На экране смартфона вы уже убедились в корректности работы сайта, проверив при этом ссылки. Но, а где же конечный результат? Теперь вам не нужно ждать в течение двух недель реакции вашей аудитории. Благодаря нашему полезному списку вы можете проверить все самостоятельно.
Объединение мобильной и основной версий сайтов
- Переадресация должна происходить с одного сайта на другой. Переходят ли юзеры на мобильную версию через смартфоны или ПК-планшеты? Если мобильный пользователь собирается перейти на выбранную страницу, попадет ли он на нее? Если владельцы стационарных компьютеров переходят на мобильный сайт по ссылке, будут ли они переадресованы на основную версию? Можете себя поздравить, если вы ответили положительно на эти вопросы. В таком случае редиректы работают правильно.
- Разрешите мобильным пользователям использовать десктопную версию интернет-сайта. Если все настроено правильно, пользователь мобильного трафика может быстро войти в основную версию ресурса и оставаться на ней после любых переходов.
- Испытайте динамический показ. Для этого проверьте, есть ли в HTML-коде сайта HTPP-заголовок Vary: User-Agent? Если с этим проблем нет, то поисковые системы информируют о том, что отбор версии интернет-сайта обязан исполняться в согласовании с типом гаджета пользователя.
- Проверьте основные атрибуты в полной и мобильной версиях.
Добавлен ли HTML-код основной версии интернет-сайта тег rel=«alternate»?
Добавлен ли в HTML-код мобильной версии интернет-сайта тег rel=«canonical»?
Чтобы браузеры демонстрировали мобильную версию интернет-сайта обладателям телефонов и планшетов, добавьте в шапку полной версии эту строчку: />.
Чтобы браузеры демонстрировали основную версию интернет-сайта обладателям десктопов, добавьте последующую строчку: />.
Также вы должны обратить внимание на технические нюансы. Вам следует осуществить проверку ошибок с помощью меню «Индекс Google — статус индексирования» для поисковой системы Google и сервиса «Вебмастер» для Яндекса. Для удобства посещения вашего сайта создайте мобильную карту сайта отдельно для полной и мобильной версий. Также испытайте на своем смартфоне скорость, при которой будет происходить загрузка при помощи инструмента Google PageSpeed Insights.
Правила дизайна
Оформление мобильной версии должно быть удобным и понятным в использовании. Просматривайте интерфейс сайта с помощью нескольких гаджетов с разными форматами экрана и процессорами для того, чтобы удостовериться в универсальности мобильной версии. Проверяйте сайт на предмет всплывающих окон (они нежелательны) и удобства перехода по ссылкам. Также рекомендуем отказаться от технологии Flash.
Привила навигации
Убедитесь, что навигация помогает пользователю исследовать все ее основные элементы, включая разделы основной версии, и легко находить требуемый контент.
Правила контента
Контент мобильной и главной версии сайта должен совпадать в количестве страниц. В нем не должно быть рекламы (если это не главный источник дохода), а тексты лучше структурировать по блокам и заголовкам для удобного прочтения статей. Title не должен превышать 70 символов с пробелами, а description – 200.
Правила видео
Ваш видеоплеер должен поддерживать формат HTML5, идеальный вариант – видеохостинг YouTube, который, кроме этого, так же как и Vimeo, позволяет видео подстраиваться под размер экрана.
Теперь вы знаете, как самостоятельно проверить ваш ресурс. Эти основные правила застрахуют вас как от легких, так и от серьезных ошибок.