/ Адаптивный веб дизайн – рекомендации специалистов Google

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

• разные url;
• адаптивный дизайн сайта;
• динамический показ.

 Рассмотрим подробнее каждую из перечисленных техник.
 

Метод «разные url»

Разработка адаптивного сайта по данной технологии подразумевает использование различных url для стационарной (десктопной) версии сайта и мобильной. Так же используются разные коды html. То есть создается отдельный от основного, самостоятельный ресурс. Он может быть размещен на поддомене, а может быть выведен в доменную зону .mobi. Как правило, на мобильной версии основного сайта серьезно урезается функционал, специалисты также рекомендуют исключать любой контент, который можно обозначить, как не основной.

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

Как реализовать метод

На основной версии добавить к тегу link атрибут rel="alternate" со следующими значениями: media (устанавливает условие экранного разрешения для перенаправления на мобильную версию) и href (ссылка на альтернативный url). Атрибут размещается непосредственно в коде или прописывается в файле Sitemap.

На мобильной версии к тому же тегу прописать атрибут rel="canonical". Здесь должна быть ссылка на основной сайт с аналогичной страницей.
 

Метод «адаптивный дизайн сайта»

В данном случае сайт будет иметь один url и код html для всех мобильных устройств и стационарных компьютеров.

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

Как реализовать метод

При работе с мета-данными прописывайте на каждую страницу тег meta name="viewport". Он поможет ботам поисковиков и браузерам определить, что страница адаптивна к мобильным устройствам. Не пренебрегайте готовыми решениями, которые созданы разработчиками крупных платформ CMS.
 

Метод «динамический показ»

При использовании данного метода ресурс имеет одинаковый url для разных устройств, но коды html для каждого типа различны.

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

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

Для того чтобы не только браузер мог получить корректную версию ресурса, но и поисковый робот имел возможность определить Mobil friendly ресурс специалисты используют HTTP-заголовок Vary.
 

Какой метод выбрать

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

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

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

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

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