Дублирование контента на html странице

115
10 сентября 2019, 16:40

Есть страница, она является адаптивной, но для ее адаптивности приходится дублировать контент, т.е. на мобильной версии показывается один блок информации, а на пк версии показывается другой блок информации, в то время как мобильный блок скрывается (display: none;), и наоборот, получается так что информация в этих блоках идентичная, но она представлена в разном виде.

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

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

Answer 1

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

Эта проблема давно решена Гугл. Проверьте руководство Гугл Разные url:

Аннотации в коде HTML На обычной странице (http://www.example.com/page-1) добавьте следующий код:

<link rel="alternate" media="only screen and (max-width: 640px)" 
href="http://m.example.com/page-1">

На странице для мобильных устройств (http://m.example.com/page-1) используйте следующие атрибуты:

<link rel="canonical" href="http://www.example.com/page-1">

В URL, который размещен на странице мобильного сайта и указывает на аналог этой страницы с обычным форматированием, необходимо добавить тег rel="canonical".

Answer 2

"...получается так что информация в этих блоках идентичная, но она представлена в разном виде."

"...Например в пк версии определенный блок находится в правой колонке контента, на планшетной в левой колонке, на телефоне колонки пропадают и блок показывается во всю ширину"

В мобильной и десктопной версии сайта используется один и то же контент, если я правильно понял. Нет разницы где какой блок размещается. Ознакомьтесь со [справкой google][1]

[1]: https://developers.google.com/search/mobile-sites/mobile-first-indexing, раздел "Подготовка к индексированию, ориентированному на мобильные устройства".

READ ALSO
Как сделать так, чтобы ширина сайта изменялась по примеру vk.com

Как сделать так, чтобы ширина сайта изменялась по примеру vk.com

Как сделать так, чтобы ширина сайта изменялась по примеру vkcom ? То есть, у меня есть центральная часть шириной 960px, а отступы слева=справа=примерно...

147
БЭМ и состояния блока

БЭМ и состояния блока

Каким образом, в соответствии с БЭМ, реализовать кнопку имеющую два состояния: нажата и не нажата? Использовать псевдо-классы или создать...

95
Плавный поворот элемента в Jquery

Плавный поворот элемента в Jquery

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

110
Плиточная сетка работа со строками

Плиточная сетка работа со строками

Делаю плиточную сетку, не могу понять, как работать с каждой строкойВсе работает, но только для одной строки

123