Рекомендации по адаптивному дизайну: Дублирование html-элементов для запросов МУЛЬТИМЕДИА и SEO-воздействия?
У меня есть страница с тегом рисунка, тегом headgroup и тегом статьи в порядке отображения html.
Чтобы сделать дизайн страницы адаптивным с использованием медиа-запросов, мне нужен другой порядок элементов, чтобы изображение появлялось после заголовка.
Самое простое решение, которое я могу придумать, - это клонировать тег headgroup в исходном коде и поместить копию перед тегом figure, что позволит отображать/скрывать соответствующий тег в соответствии с окном просмотра размер.
Но у меня такое чувство, что это не идеально с точки зрения SEO.
Мой вопрос прост:
Действительно ли эта простая техника влияет на SEO?
Существует ли атрибут html для объявления повторяющихся элементов на странице?
Есть ли другое рекомендуемое решение? Лучшая практика?
Заранее благодарим за любые рекомендации!
2 answers
Но у меня такое чувство, что это не идеально с точки зрения SEO.
Да, я бы не стал этого делать.
Что еще хуже, это плохо для ваших пользователей, которые полагаются на ваш план документа (программа чтения с экрана, ...), или для пользователей, которые не используют CSS (текстовые браузеры, программы чтения каналов,...).
Есть ли другое рекомендуемое решение? Лучшая практика?
Используйте CSS.
Используя "классические" float или position или более новые способы, такие как Регионы, Гибкая коробка, Расположение сетки, Макет шаблона, ...
Существует ли атрибут html для объявления повторяющихся элементов на странице?
Нет, не совсем так. Там есть hidden атрибут:
Если указано в элементе, это указывает на то, что элемент еще не имеет или больше не имеет прямого отношения к текущему состоянию страницы, или что он используется для объявления содержимого, которое будет повторно использоваться другими частями страницы, в отличие от прямого доступа пользователь.
В вашем случае вам придется использовать JS, чтобы переключить его (и распознать, какой медиа-запрос сработал).
<hgroup> является устаревшим и поэтому не должен использоваться.
По моему опыту, разница в SEO-влиянии заказа незначительна. Используйте семантический HTML (т. Е. соответствующие заголовки, подписи и т.д.), И все будет в порядке.
Как отмечалось выше, просто используйте CSS для позиционирования.