Как лучше скрыть текст?

Question

[Айдар Иванов]

На сайт начали добавлять инфографику которая дублирует текст, я скрыл текст через Display:none, будет ли текст в поиске и проиндексирован (будет ли учитываться поисковиком) или лучше скрыть через комментирование

Comments

[ThunderCat]

>>я скрыл текст через Display:block,
новый метод на замену display: none ?

[Айдар Иванов]

ThunderCat, да ))))) не то написал

Answer 1

[Александр Присяжнюк]

Используйте паттерн visually-hidden:

.visually-hidden {
  /* Удаляем элемент из потока документа */
  position: absolute;
  /* Временное решение для неверно произносимого, размазанного текста */
  white-space: nowrap;
  /* Устанавливаем минимально возможный размер (некоторые скринридеры игнорируют элементы с нулевой высотой и шириной) */
  width: 1px;
  height: 1px;
  /* Скрываем вылезающий за границы контент */
  overflow: hidden;
  /* Сбрасываем любые свойства, которые могут повлиять на размер элемента */
  border: 0;
  padding: 0;
  /* Вырезаем ту часть контента, которая должна отображаться. */
  /* Устаревшее свойство clip для старых браузеров */
  clip: rect(0 0 0 0);
  /* clip-path для новых браузеров. inset(50%) определяет область вставки, которая позволит контенту исчезнуть.  */
  clip-path: inset(50%); 
    /* Похоже, никто до конца не понимает, почему тут margin: -1px. Кроме того, это приводит к проблемам (читай: https://github.com/h5bp/html5-boilerplate/issues/1985). */
  margin: -1px;
}

Answer 2

[Alex]

Только так:

<figure>
    <p><img src="images/info.jpg" alt="" /></p>
    <figcaption class="screen-reader-text">Some info text</figcaption>
</figure>

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

Текст будет четко асоциирован с инфографикой. И останется доступным для поисковиков и читалок

Answer 3

[Валентин]

Будет в индексе.
Генерируй, показывай и скрывай через JS

Comments

[Айдар Иванов]

js не хотелось бы применять, за ответ спасибо