如何为带有图像的面包屑实现 schema.org 标记？

Question

面包屑的正确内联实现应该是这样的

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

但在我的例子中，我的品牌标志位于第一位，google 抱怨缺少名称

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name"><img src="logo.svg" alt="Brand" width="56" height="60"></span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

是否可以在不添加可见文本的情况下获得正确的内联代码？

Answer 1

看起来 name 在任何情况下都是必需的

尝试在 meta 标签中添加一个名字，而不是 span 以避免它被显示

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">    
    <img src="logo.svg" alt="Brand" width="56" height="60"></a>
    <meta itemprop="name" content="dresses" />    
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

您还可以使用图像许可证：

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses" itemtype="http://schema.org/ImageObject" itemscope itemid="https://example.com/dresses" >
        <link itemprop="contentUrl" href="https://example.com/logo.svg" />
        <link itemprop="license" href="https://example.com/license" />
        <link itemprop="acquireLicensePage" href="https://example.com/how-to-use-my-images" />
    <img src="logo.svg" alt="Brand" width="56" height="60">
    </a>   
    <meta itemprop="name" content="dresses" />    
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

如何为带有图像的面包屑实现 schema.org 标记？

How to implement schema.org markup for a breadcrumb with image?

html

schema.org

breadcrumbs