Разработка мобильных сайтов: рекомендации по оптимизации

Рекомендации от веб студии «Аванзет» по оптимизации контента, применяемые при разработке адаптивных и мобильных сайтов. Весь контент: графика, тексты, формы обратной связи должны корректно отображаться и хорошо визуально восприниматься на всех гаджетах.

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

Краткие рекомендации по оптимизации и применению CSS

При разработке необходимо адаптировать ваш сайт для просмотра на небольших экранах. Так как все более число пользователей будут переходить на сайт именно при помощи мобильных устройств. Это возможно тремя различными способами:

Классическая разработка веб-сайта с адаптивным дизайном.

В этом случае на различных устройствах будут открываться одни и те же страницы с одинаковыми URL. При этом HTML код не меняется. Адаптация веб-страницы под определенную платформу обеспечивается за счет таблицы стилей (CSS).

Для лучшего продвижения Google рекомендует применять именно этот способ. Так как разработка мобильных сайтов и магазинов становится все более популярной в сфере электронной коммерции (e-commers).

Использование отдельного HTML кода для разных типов устройств

Это называется динамической версткой. При такой разработке, сайт будет задействовать одинаковый набор URL на любых платформах, но при этом мобильным устройствам и обычным компьютерам будет динамически предаваться различные стили CSS и HTML код.

Контент для разных типов устройств размещается на разных сайтах.

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

Адаптивный веб-дизайн

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

Основные преимущества адаптивного дизайна:

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

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

Применение динамической верстки для оптимизации контента при разработке сайта

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

Тогда браузер автоматически определяет тип устройства и пользователю показывается контент, предназначенный для этого гаджета. Это динамический показ. Или происходит подстановка URL, например, www.example.com на m.example.com

Если при разработке сайта вы будет применяться динамический показ, мы рекомендуем использовать заголовок Vary для HTTP протокола. Этот заголовок сообщает прокси-серверам о необходимости кэшировать обе версии ресурса

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

Рекомендации по оптимизации контента при размещении на разных сайтах

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

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

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