Оптимизация сайта под мобильные устройства

Оптимизация сайта под мобильные устройства

Мобильные устройства завоевали мир. Просмотреть почту, узнать дорогу, забронировать билеты, заказать пиццу, прочитать последние новости можно с простенького смартфона. Наши первоклашки бодро шагают в школу с телефонами, а бабушки требуют привозить внуков вместе с планшетами. В эпоху мобильного интернета игнорирование мобильного трафика в бизнесе равносильно самоубийству. Как же оптимизировать сайты для мобильных устройств?

URL проекта

Мобильную версию сайта обычно выносят на поддомен http://m.sait.ru или сабфолдер http://sait.ru/m/.

Новый «робот» Google - GoogleBot Mobile - ищет и заносит в индекс отдельные мобильные версии стандартных сайтов. Страницы мобильной версии сайта на отдельном URL не будут смешиваться в поиске со страницами базового сайта. Имея две страницы сайта, проиндексированные под одну, вы повышаете свои шансы на получение большого поискового трафика.

Если некоторые страницы сайта полностью идентичны страничкам мобильной версии, можно оставить те же URL для мобильного поиска, но желательно применить редиректы и канонические теги.

Мобильные страницы, не являющиеся абсолютными дублями обычных страничек сайта, в канонических тегах не нуждаются.

Дизайн и структура

Адаптивный дизайн мобильного сайта, как правило, предполагает смену отображения информации через CSS-стили в зависимости от используемого пользователем браузера. Вы можете приобрести для вашей CMS тему, в которой уже реализован адаптивный дизайн, или дать задание веб-дизайнеру адаптировать действующий нам сайте дизайн.

Структура мобильной версии сайта должна быть лаконичной, а дизайн – упрощенным, но выдержанным в общем стиле. Не пытайтесь втиснуть максимум контента на страницу.

Обозначьте действительно важные и полезные разделы, разместите только конкретную, относящуюся к делу информацию, отключите рекламу. Помните, что большинство пользователей мобильного поиска не будут искать иголку истины среди стога информации.

На страничке мобильной версии можно поместить небольшой текст с коротеньким описанием миссии сайта. Пусть посетитель поймет, что найденный ресурс поможет найти ответ на все вопросы.

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

Подача контента должна быть максимально простой. Значительно улучшат интерфейс кнопки «Назад» и «Вперед». Максимально упростить способ оплаты помогут PayPal, cookies и почтовые индексы.

Для того, чтобы пользователи могли сохранить полезную информацию и в дальнейшем к ней вернуться, предложите им возможность загрузить контент в PDF формате. Посетители сайта непременно это оценят.

Контент будет выглядеть аккуратно, если в процессе верстки активно использовать возможности CSS. Увеличение кнопок и прочих элементов на странице непременно стоит задать в описании стиля в CSS. Пользователи не любят увеличивать масштаб, сделайте всю работу за них.

Не любят пользователи и прокрутку. Постарайтесь обеспечить подачу самой необходимой информации и появление формы авторизации сразу после загрузки страницы. Информацию большого объема лучше делите на блоки и размещайте на отдельных страничках.

Оптимизируйте изображения для мобильной версии с помощью Google Goggles. Добейтесь того, чтобы изображения быстро грузились, а шрифт легко читался. Размер изображений задавайте в процентах, а не пикселях. Проверьте, все ли элементы сайта хорошо видны на маленьких экранах.

Постарайтесь не использовать на мобильном сайте технологии Java, Flash, Ajax и Frames. Предпочтение отдавайте HTML 5 для смартфонов и планшетов, cHTML (iMode), XHTML (WAP 2.0) или WML (WAP 1.2).

HTML5 и CSS3 помогут организовать сворачивание страницы и горизонтальной навигации. Так вы сможете компактно разместить контент на странице.

Если на стандартной версии сайта используется технология Flash, обязательно настройте редирект на мобильную версию.

Убедитесь, что версия сайта корректно работает на различных мобильных устройствах и в разных браузерах. Проверьте скорость загрузки страниц и правильность отображения контента. Помните, что не у всех есть смартфоны, некоторые люди пользуются обычными телефонами. Позаботьтесь и о них.

Обязательно дайте мобильным пользователям возможность перейти на полную версию сайта для настольных компьютеров.

Ключевые слова

Люди ищут в мобильном поиске немного иначе, чем с ПК. Запросы становятся короче и конкретнее. Постарайтесь лучше узнать потенциальных мобильных пользователей. Что они ищут и почему? На помощь вам придет инструмент подбора ключевых слов от AdWords.

Оценивая количество запросов, связанных с вашими услугами, продуктами и брендом, вы сможете подсчитать процент запросов в мобильном поиске. Сравнивайте трафик, показы и объемы мобильного поиска с показателями, характерными для поиска обычного. Выделяйте слова и понятия наиболее релевантные для юзеров, пользующихся смартфонами и планшетами.

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

Мобильные приложения

Владельцам интернет-магазинов советуем разработать приложение, которое позволит пользователю напрямую попасть на главную страницу магазина или страницу с товарами без использования поиска в web. Грамотно скроенное приложение упрощает работу с сайтом, ускоряет загрузку страничек, оптимизирует процесс оплаты.

Не спешите браться за разработку мобильных приложений, не создав интересного мобильного сайта. Приложения появляются в поиске далеко не по всем ключевым запросам. Да и ссылка на ваше творение в этом случае принесет больше пользы магазину или сервису, распространяющему приложение, чем вам.

Внешняя и внутренняя оптимизация

Драка за первые позиции в мобильном поиске еще жестче, чем в традиционном. Первые три позиции в мобильной выдаче значат еще больше, чем топ в выдаче для ПК.

Все страницы мобильной версии должны иметь метатеги title и description и структурные элементы текста с подзаголовками. Обязательно создайте мобильную карту сайта, продумайте файл robot.txt.

Пройдите верификацию мобильного сайта в панели вебмастера в Google и Яндексе, чтобы отслеживать проблемы с индексацией.

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

Разработка и продвижение мобильной версии сайта – это верный путь увеличению трафика и завоеванию благодарных клиентов.

Автор , на 26 января 2015 г. в Технические вопросы.

Расскажите друзьям:


Понравился пост?

Подпишитесь на ежедневное обновление нашего блога прямо сейчас!

без спама, не чаще одного раза в неделю

Комментарии

  1. VK
    11.09.2016 19:03 #

    Неплохо было бы привести базовый HTML + CSS макет сайта с адаптированной версткой. В целом полностью согласен, доля мобильного трафика будет только увеличиваться и нужно адаптировать сайты под эти устройства.

Комментирование отключено.

Услуги
Спецпредложения

Подписка на блог

без спама, не чаще одного раза в неделю

Кто победит?

Яндекс.Браузер

Chrome