Адаптивный дизайн и SEO: теория и практика

16.09.2013 SEO-продвижение

Данная статья написана Бонни Стефаником, SEO-специалистом из Internet Marketing Ninjas. Компания занимается полносервисным маркетингом сетевых ресурсов и работает в Нью-Йорке.

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

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

dis1.png

  1. Верхняя полоса

Дизайнеры, занимающиеся проектированием страниц интернет-ресурсов, часто сталкиваются с трудностями при заполнении верхней полосы страницы. SEO-специалист должен донести свои пожелания до ответственных лиц, притом сотрудничая с ними до самого утверждения макета.

Адаптивный дизайн несколько отличается от стандартных десктопных представлений, и SEO стандарты для него тоже имеют свои особенности. В адаптивном дизайне часто присутствуют "пробелы", позволяющие некоторым элементам занять больше места, чем обычно. Элементы навигации же смещаются ниже, уступая место баннерам и объявлениям. Это неверное решение: роботы, как и пользователи, учитывают подобный подход. Если посетители голосуют "ногами", то роботы - понижением рейтинга юзабилити ресурса, а значит, и его позиций в выдаче.

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

Что поместить в "шапку"?

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

  1. Стратегия наполнения

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

dis2.jpg

Сравнить частоту упоминания слов можно при помощи инструмента Side by Side SEO Comparision Tool. С его помощью можно подсчитать ключевики из нескольких слов.

Убедитесь, что на всех страницах присутствуют:

  • короткие и длинные ключевики, отвечающие тематике страницы;
  • достаточное количество ключевиков;
  • ссылки с анкорами в ключевиках.

Важно поддерживать баланс между этими элементами, не допуская излишнего употребления одного из них.

  1. Работа с внутренними ссылками

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

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

dis3.jpg

Воспользуйтесь Side-by-Side SEO Comparision Tool для проверки качества внутренних ссылок. Испытайте несколько шаблонов и выберите тот, который позволяет разместить достаточный объем ссылок. Значимые страницы должны быть тщательно перелинкованы друг с другом.

  1. Сами мобильные устройства

При создании поддоменов для мобильных пользователей, например, m.site.com, вопросов у SEO-специалиста возникает меньше, но и здесь есть подводные камни. При выдаче разных HTML-исходников по одному адресу следует указать это в заголовках, добавив Vary: User-Agent в их число. Например:

dis4.png

Приоритеты при реализации адаптивного дизайна

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

Узнать больше об адаптивной верстке и сопутствующих проблемах можно в следующих статьях:

Responsive site redesign...any benefits - обсуждение SEO-преимуществ, обеспеченных редизайном;

The SEO of Responsive Web Design - как подарить лучший опыт работы с сайтом пользователю с любого устройства;

When Responsive Web Design Is Bad For SEO - ситуации, при которых адаптивным дизайном лучше не заниматься.

 
Больше интересных статей

Оставьте номер телефона, чтобы наш менеджер связался с вами в удобное для вас время

Ваше имя*
Ваш номер телефона*
Тема для обсуждения
Выберите удобное время для звонка
9:00 9:15 9:30 9:45 10:00 10:15 10:30 10:45 11:00 11:15 11:30 11:45 12:00 12:15 12:30 12:45 13:00 13:15 13:30 13:45 14:00 14:15 14:30 14:45 15:00 15:15 15:30 15:45 16:00 16:15 16:30 16:45 17:00 17:15 17:30 17:45
Виды услуг
ОбзорМаксимальный размер файла - 10 мб