【问题标题】:Microdata Markup - 'Brand > Logo' with Icon Font for Logo微数据标记 - 带有图标字体的“品牌 > 徽标”
【发布时间】:2015-11-04 03:22:00
【问题描述】:

<a href='' itemscope itemtype='http://schema.org/Brand' itemprop='brand'><i class="logo" itemprop='logo'></i></a>

上述class='logo' 将字体应用于图标元素。我们能否将类中定义的“字形”(例如font-family: 'AnyFont'; content: '/e600')应用为Microdata Markup DataType "Brand > Logo",以在rich-snippet 中呈现徽标,就像在rich-sn-中呈现图像一样吗?

这似乎不太可能,因为图像具有基于 URL 的 src="..." 属性而字体字符没有,但我一直在研究这个我发现没有关于此的文档或讨论,需要知道如果社区知道一种方法可以使这项工作在它还没有工作的情况下工作。还是我们必须放弃使用图标字体在rich-sn-ps 中显示徽标的许多众所周知的好处?

作为对图像而非字体字符的常见应用微数据的验证,我们看到this heavily used microdata generator 没有为我们提供将微数据应用到应用了字体的元素的选项。基于'Brand > Logo' documentation,唯一的选择是ImageObjectURL(很多人很可能认为这回答了问题(肯定有一种方法可以做到这一点,而不必回到4年前并使用图像而不是字体))。

【问题讨论】:

    标签: html fonts seo microdata rich-snippets


    【解决方案1】:

    您可以使用 link 元素(在 HTML5+Microdata 中为 may be used in the body)来提供徽标的 URL:

    <a itemprop="brand" href="" itemscope itemtype="http://schema.org/Brand">
      <span class="logo"></span>
      <link itemprop="logo" href="logo.png" />
    </a>
    

    (我使用了span instead of i。为了记录,我不同意通过 CSS 而不是 HTML 包含网站徽标是一个好主意。)

    【讨论】:

    • 感谢您的反馈,但即使它有效,我也不能使用这种方法,因为它违反了&lt;link&gt; 标签w3.org/QA/Tips/use-links 的 W3C 标准。 &lt;link&gt; 标签只能嵌套在&lt;head&gt; 标签中。
    • @id.ot:你错了,它在 HTML5+Microdata (details) 中完全有效。
    • 有一种感觉我错了,这就是我写操作并发表评论的原因。谢谢您的意见。不幸的是,您的答案没有包含验证合规性的链接,并且不知道itemprop&lt;link&gt; 扩展到&lt;body&gt; 的事实我不得不放弃答案。但是,您是正确的,如果您可以编辑答案以包含链接的 stackoverflow 帖子,我将能够将答案标记为有用。同时,这是一个可靠的解决方案,会将您的答案标记为“答案”。谢谢@unor。
    • @id.ot:谢谢;我添加了答案的链接。
    猜你喜欢
    • 1970-01-01
    • 2023-03-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多