0

Подскажите, как сделать такие иконки?

введите сюда описание изображения

Самое простое - <span class="proverka">Проверка</span>, но этот текст будет индексироваться поисковиками, значит многочисленные дубли на странице. Можно еще вставлять изображения, svg, либо сделать кнопку button, но так не хочется. Какие еще варианты? Попроще, чтобы не знающий человек мог просто вставить небольшой код, чем меньше, тем лучше. Подскажите, пожалуйста. Может быть, вопрос довольно примитивный, но я правда не знаю :)

5
  • Наводите на элемент курсор, нажимаете правую кнопкой мыши, выбираете пункт меню "Исследовать", или "Посмотреть код", откроется то, что скрыто и изучаете. В частности, эти элементы сделаны при помощи настройки css для <a> и <span> 25 авг 2021 в 8:42
  • Конкретно эти элементы, если брать stack overflow, сделаны с помощью <span class="badge1"></span>&nbsp;Прокурор</a>. То есть, если у меня будет несколько сот таких бейджей на странице, получится несколько сотен повторений слова "прокурор". Вы вопрос читали? 25 авг 2021 в 8:45
  • 2
    Это так не работает... Поисковые системы уже давно лучше нас понимают, где у нас контент, где меню, где беджи. Если документ открыт для индексирования, то целиком. 25 авг 2021 в 9:00
  • Конечно читал и что? Оформление беджей через css, а текст как обычно руками по-месту. В чем вопрос? 25 авг 2021 в 9:06
  • @AlexeyVladimirov, это будет всего лишь текст, обрамленный тегом <span>. Поэтому, он будет учитываться как контент, а не элемент вёрстки. Соответственно, будь-то 500 бейджей <span>"Бейдж"</span>, это значит что страница будет сильно переспамлена словом "Бейдж". 25 авг 2021 в 9:38

1 ответ 1

1

Подсказали решение, с помощью ::before и data-атрибутов. Например, так: https://jsfiddle.net/va82t9qx/

Действительно, в этом случае бейдж идёт в виде свойства элемента, вёрстки:

<p data-test="Бейдж">Какой-то текст</p>

А не как контент, соответственно на основной текст не влияет и переспама словом "Бейдж" не будет.

2
  • 1
    Проблема, которую вы пытались решить, скорее лежит в плоскости accessibility, а не SEO. Можно, например, почитать по-русски про роли интерактивных областей статью Татьяны Фокиной на Medium 25 авг 2021 в 10:16
  • Спасибо за ссылку, почитаю. 25 авг 2021 в 10:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.