Как сделать микроразметку хлебных крошек?

Question

[Анатолий]

Есть хлебные крошки вида:
Home > Military > This page

Вопрос такой, как быть, если я хочу заменить название "Home" на иконку.
Если я так делаю, то при тесте я получаю ошибку: "Укажите свойство name или item.name."

Как быть?

Чисто для примера, приведу текст своей разметки из wordpress:

<ol class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="' . home_url() . '" rel="nofollow">
       <span itemprop="name"><i class="icon-home"></i></span>
    </a>
    <meta itemprop="position" content="' . $content . '" />
   </li>
   <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
     <a itemprop="item" href="' . get_category_link( $cat ) . '" rel="nofollow">
       <span itemprop="name">' . get_the_category_by_ID( $cat ) . '</span>
     </a>
     <meta itemprop="position" content="' . $content. '" />
   </li>
   <li> This page </li>
</ol>

Это иконка "домика" -
<i class="icon-home"></i>

Answer 1

[Stalker_RED]

Можно указать текст в атрибуте content
<meta itemprop="name" content="Home">

Или вообще, бросайте это, и переходите на json-ld

Answer 2

[sergski]

задайте для

.icon-home {text-indent: -1000px;
    overflow: hidden;}

и верните в него вывод Home

Comments

[Анатолий]

Я не понял ответ, и причем тут css?

[sergski]

Анатолий, если я правильно понял вопрос, вы убрали вывод слова Home, и заменили его на <i class="icon-home"></i>? я вам предложил вставить его вывод в <i class="icon-home"></i> и дописать в стили .icon-home

[Анатолий]

Я понял, вопрос зачем? Вопрос был про микроразметку, а не про отображение, которое привел ради примера.

Answer 3

[FeST1VaL]

Я не уверен, но возможно можно указать content="home" ? Иначе то что предложили выше как вариант... или возможно даже подойдет font-size: 0;

Answer 4

[William]

столкнулся с данной проблемой сам. решение:
вы можете вставить иконку, но текст должен присутствовать.., чтобы убрать текст, добавьте
font-size:0;line-height: 40px;