HTML hCard微格式用法

Posted 2021-05-24

<!-- 
Use of the vCard(hCard) microformat, used to mark up contact details of
people, companies, organisations and places.
-->

<!--
hCard for person
-->
<div class="vcard">
	<span class="fn n"><!-- FN = Full Structured Name -->
		<span class="given-name">John</span>
		<span class="additional-name">Jonny</span>
		<span class="family-name">Smith</span>
		Born <abbr class="bday" title="1965-09-22">September 22nd 1965</abbr>
	</span>
	<div class="adr">
		<div class="street-address">123 Fake Street</div>
		<div class="extended-address">Fake Floor 1</div>
		<span class="locality">Fake locality</span>
		<span class="region">Fake region</span>
		<span class="postal-code">FAK3 0DE</span>
		<span class="country-name">Fakeland</span>
	</div>
	<p><span class="title">Web Monkey</span>, <span class="org">Fake Company Name</span></p>
	<p><a href="http://thisisfake.com/" class="url">http://thisisfake.com/</a></p>
	<p><a href="mailto:[e-mail]" class="email">[e-mail]</a></p>
</div>

<!--
hCard for an organisation
-->
<div class="vcard">
	<p class="fn org">Fake Organisation Ltd 
		(<a href="http://thisisfake.com/" class="url">http://thisisfake.com/</a>)
	</p>
	<div class="adr">
		<div class="street-address">123 Fake Street</div>
		<div class="extended-address">Fake Floor 1</div>
		<span class="locality">Fake locality</span>
		<span class="region">Fake region</span>
		<span class="postal-code">FAK3 0DE</span>
		<span class="country-name">Fakeland</span>
	</div>
	<p>Phone:
		<span class="tel">
			<span class="type">Work</span>
			<span class="value">[phone]</span>
		</span>
	</p>
	<p><a href="mailto:[e-mail]" class="email">[e-mail]</a></p>
</div>

Google结构化数据测试工具和微格式hcard的问题

【中文标题】Google结构化数据测试工具和微格式hcard的问题

【英文标题】：Problem with Google structured data testing tool and microformat hcard

【发布时间】：2020-02-08 16:43:52

【问题描述】：

美好的一天。 我正在尝试实现组织的微格式（hcard），以便 Google 和 Yandex 都能正确地感知它。 Yandex 中一切正常，但 Google 的结构化数据验证器会显示 pricerange 字段的警告 - 但它已被指示。它甚至写在验证器中......这是一个截图

这是代码本身：

<div class="vcard">
  <a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
  <img class="logo-ft photo" src="images/logo-footer.png" >
  <div class="adr">
    <span class="type">Work</span>:
    <div class="street-address">169 University Avenue</div>
    <span class="locality">Palo Alto</span>,  
    <abbr class="region" title="California">CA</abbr>&nbsp;&nbsp;
    <span class="postal-code">94301</span>
    <div class="country-name">USA</div>
  </div>
  <div class="tel">
   <span class="type">Work</span> [phone]
  </div>
   <div>Pricerange: 
   <span class="pricerange">from $10 to $20</span>
  </div>
</div>

可能是什么问题？提前感谢所有提供帮助的人。

【参考方案1】：

从class="fn org url" 中删除org，或将其替换为任何其他字符串，这样您的sn-p 就会得到验证。 org似乎制造了一种冲突。

【讨论】：

抱歉，但这对我不起作用...我需要代码中的 org 和 fn，它们应该具有相同的值。我认为这个问题无法解决，我会拒绝这个标记并使用另一个（schema org）。谢谢