如何为带有图像的面包屑实现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>

但在我的情况下，我有一个品牌标志在第一位，谷歌抱怨缺少名称

<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

尝试将名称添加到tometa标签，而不是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>