Если на вкладках используются все изображения для отображения текста + значок на каждой вкладке, то как добавить текст, чтобы помочь поисковой системе найти ключевые слова на вкладках?

Question

В особенности каждое изображение, содержащее текст и значок, отображается с помощью background-image в CSS (с использованием CSS-спрайтов), поэтому четных alt или title, если изображение было показано с использованием <img>. Итак, чистый образ в этом случае. Как можно добавить фактический текст (или использовать другой механизм) для поисковых систем, чтобы лучше индексировать эти вкладки?

Answer 1

Вы бы использовали «метод замены изображения»:

http://www.mezzoblue.com/tests/revised-image-replacement/

Answer 2

Просто используйте актуальный соответствующий текст в каждом элементе и используйте text-indent:-9999em;, чтобы переместить его за пределы экрана.Это может потребовать дополнительных стилей, таких как display:block для элемента, если он обычно встроен, чтобы text-indent работал, но в итоге вы получите базовую реализацию замены изображений .

Answer 3

Если вы используете <span> и устанавливаете его display на none с помощью CSS, тогда вы можете поместить любой текст там, где вам нравится, для SEO.

Это делается, например, <h3>теги на css дзен сад.Некоторые из них используют эту конструкцию:

<h3>
  <span>The Road to Enlightenment</span>
</h3>

... где вы затем задаете <h3> CSS background-image и устанавливаете отображение <span> на none.Вы должны быть в состоянии использовать тот же тип идеи для вкладок, которые используют изображения.

Answer 4

Вы обязательно должны где-то использовать текст, хотя бы alt-тег.

Попробуйте что-то вроде <span>Text</span> с text-indent:-9999px; или любым другим вариантом скрытия / маскировки текста CSS.

Может быть полезно добавить атрибут title к этим вкладкам.