Как скрыть текст в заголовках сообщений?

Question

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

Например, в заголовке сообщения текст " Человек-паук [Новости кино] может появиться в фильме " Яд " ", но видимый текст заголовка этого сообщения в сообщении " Человек-паук может появиться в фильме " Яд " ".

Но когда люди найдут его в Google, текст будет иметь оригинальное название поста, иначе, " Человек-паук [Новости кино] может появиться в фильме Venom ".

Я видел несколько сайтов, которые делают это, но никогда не понимал, как это сделать самостоятельно. Заранее спасибо тому, кто поможет мне с этим.

Answer 1

Легко, как привет: не задавайте им высоту и скрывайте переполнение.

.article {
  border: 1px solid #ccc;
  padding: 12px;
  background: #ccc;
}

.search-engine {
  overflow: hidden;
  height: 0;
  max-height: 0;
  background: #ddd;
}

.title {
  background: #ddd;
  padding: 12px;
  font-size: 15px;
  font-family: Helvetica;
}

<div class="article">
  <div class="search-engine">[Movie News] Spiderman may appear in the Venom movie</div>
  <div class="title">Spiderman may appear in the Venom movie</div>
</div>

РЕДАКТИРОВАТЬ

Если вы можете ввести JS, добавьте это

const titles = document.getElementsByClassName('your class that is applied to your titles')
for (const title of titles) {
  const SEstring = title.textContent;
  title.textContent = title.textContent.replace(/^\s*\[[\w\s]*]\s*/, '');
  const SEelement = document.createElement('div');
  SEelement.style.height = '0';
  SEelement.style.maxHeight = '0';
  SEelement.style.overflow = 'hidden';
  SEelement.textContent = SEstring;
  document.insertBefore(SEelement, title);
}

Это удалит текст и квадратные скобки из вашего заголовка, и создаст невидимый div непосредственно перед ним с заголовком и квадратными скобками. То же самое сделано в фрагменте, но в JS!