HTML5 的开放图验证

Posted

技术标签:

【中文标题】HTML5 的开放图验证【英文标题】：Open Graph validation for HTML5 【发布时间】：2011-09-23 23:27:52 【问题描述】：

有什么方法可以让 facebook 的糟糕 Open Graph 元标记来验证我的文档类型是否为 <!DOCTYPE html> (HTML5)？

除了 facebook 的 Open Graph 元标记，我的文档完美验证。

我真的不想使用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">，因为这会带来一系列全新的问题。

这里是有问题的验证错误之一的示例...

错误第 11 行，第 47 列：此时元素元上不允许使用属性属性。

<meta property="og:type" content="website" />

任何帮助将不胜感激...我一直在寻找几天无济于事。

【问题讨论】：

显而易见的答案是：不，它是无效的 HTML5，因此它不可能验证。你为什么担心那个验证器警告？验证器的目的只是指出代码中可能的问题 - 在这种情况下，它显然不是问题。 嗯，原因之一是有理论认为验证错误会损害搜索引擎排名。无论如何，我为什么不想要网站验证？ 截至 2012 年 4 月 10 日，我很惊讶验证器在使用 HTML5 一致性检查器时不再抱怨 og-meta 信息。 RDFa（和 Lite）是 HTML5 的扩展，现在将“属性”属性标记为有效且符合要求。见w3.org/TR/rdfa-primer。很明显，验证器已经更新以识别它。 @WraithKenny 你是对的。我正在使用 RDFa，它的验证非常好。 【参考方案1】：

我倾向于说不要担心验证，我不认为无效标记会损害您的搜索引擎排名。例如谷歌的技术建议没有提到标准。 http://www.google.com/support/webmasters/bin/answer.py?answer=35769#2 。 Html5 允许您向搜索引擎提供更多信息，然后他们可以使用这些信息，但我无法看到它们基于不验证而降低排名。

但是，如果您觉得它可以帮助您验证您可以使用 

<script>document.write('<meta property="og:type" content="website" />')</script>

拥有这些标签并拥有一个将通过验证器的 html 文件。

【讨论】：

我考虑过这一点，但 og 元标记的全部意义在于允许 facebook 的分享获得有关页面的更多详细信息。例如要附加到共享的图像。由于 facebook 的爬虫不会获取任何由 javascript 呈现的内容，因此它看不到元标记。 是的，在那种情况下，我会回去接受页面上的这个元素是无效的 html5。【参考方案2】：

虽然会切断非Javascript用户，但我用过这个

<script type="text/javascript">
//<![CDATA[
document.write('<fb:like href="" send="false" layout="button_count"  show_faces="true" font=""></fb:like>')
//]]>
</script>

它完美地验证了。它可以在 Windows 上的 Firefox、Opera、IE、Chrome、Safari 以及 Mac 上的 Firefox、Opera、Safari 上正常显示和工作。

【讨论】：

我在点赞按钮和推文按钮上都使用了相同的东西，但他尝试使用的 OpenGraph 标签在插入到 document.write 时确实没有被 Facebook 拾取，可悲！【参考方案3】：

元标记的错误解决方案。如果您将它们包装在 Javascript 中，那么 Facebook Linter 将找不到它们。这和根本不放进去是一样的。

在脚本中包装类似按钮等有助于验证 XHTML 1.0 而不是 HTML5。

【讨论】：

只要 FB 和 Google 都满意，并且您没有被客户强制验证，您不应该打扰验证...... @UVL 继续搞这么一团糟？不，我们应该验证，我们应该尝试stop being so tolerant of barely parseable junk in our HTML。【参考方案4】：

这些元标签仅在 facebook 扫描页面以查找这些标签时才需要。

    <? 
    if(eregi("facebookexternalhit", $_SERVER['HTTP_USER_AGENT']))

      echo '<meta property="og:type" content=xxxxxxxxxxxxx';
      // continue with the other open graph tags
    
   ?>

只有当 facebook 需要这些标签时才会出现 - 这种 php 方法会在所有其他实例（包括 W3C 验证）中完全删除它们。

【讨论】：

Facebook 并不是 Open Graph 标签的唯一消费者。 是的，推特卡也使用它们 这个选项有问题：它隐藏了问题而不是修复它。感觉回到了某些网站根据他们认为您使用的是 IE3 还是 Netscape 提供不同内容的时代（例如，参见 javascript - Browser detection versus feature detection - Stack Overflow）。这是脆弱和封闭的。世界已经比这更大，未来更大。【参考方案5】：

对于 HTML5，将此添加到您的 html 元素 like described on ogp.me 并保留您的 og: 前缀属性：

<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
     <meta property="og:type" content="website" />
     ...

对于 XHTML（如 OP 的问题），使用 name 属性而不是 property 属性。 Facebook lint 会发出警告，但元值仍会被识别和解析。 

<meta name="og:title" content="Hello Facebook" />

【讨论】：

这实际上并没有验证。 它使用 OP 的文档类型 (&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"&gt;) 进行验证。不适用于 HTML5，它不允许未注册的元名称。 是的，我想这不适用于 HTML5。但是，我宁愿使用元名称而不是元属性，元属性仅在一种晦涩的文档类型（我知道）中受支持。老实说，我不再关心找到一个“完美”的解决方案，因为真的没有。 使用name 代替property 对所有OpenGraph 消费者都不起作用。即 Internet Explorer 的阅读模式。 您可以通过在 HTML 标记中设置前缀来验证 HTML5。请看下面我的回答。 ***.com/a/25575860/922522【参考方案6】：

在 JSP 中：

<%
  String ua=request.getHeader("user-agent").toLowerCase();
  if(ua.matches(".*facebookexternalhit.*"))
  
%>
<meta property="og:image" content="images/facebook.jpg" />
...
<%
  
%>

或者：

<c:set var="ua" value="$header['User-Agent']" scope="page"/>
<c:if test="$ua.matches('.*facebookexternalhit.*')">
  <meta property="og:image" content="images/facebook.jpg" />
  ...
</c:if>

【讨论】：

【参考方案7】：

一年多过去了，我们最好的解决方案是将元标记包装在某种服务器端验证中。

我在 PHP 中做过：

<?php if (stristr($_SERVER["HTTP_USER_AGENT"],'facebook') !== false)  ?>
  <meta property="og:title" content="Title of the page" />
  <meta property="og:url" content="http://www.example.com/" />
  <meta property="og:type" content="website" />
  <meta property="fb:admins" content="123456789" />
  <meta property="og:image" content="http://www.example.com/images/thumb.jpg" />
<?php  ?>

它确实适用于 Facebook。但我真的不喜欢这个主意！

【讨论】：

【参考方案8】：

简短的回答是否定的，目前不是。所有其他答案都是变通办法，黑客，或者只是疯狂。唯一的长期解决方案是 Facebook 需要创建一种有效的 HTML5 替代语法。

对于那些建议通过“facebookexternalhit”用户代理定位 Facebook 的人，您必须记住，其他公司正在使用这些标签来效仿 Facebook。例如，如果不存在首选的 Schema.org 标记，Google+ 将回退到 OpenGraph 标记。由于大多数网站都没有使用 Schema.org 属性（尤其是如果他们花时间正确使用 OpenGraph），因此您很容易错过在 Google+ 等网站上遵循此建议来增强 sn-ps 的机会。

随着 Facebook 的普及，直接针对他们确实不是一个好的解决方案——即使他们选择的实现对开发人员来说是个问题。在 Stack Overflow 等网站上寻找解决方案时，您始终必须记住，这些方法可能会产生无法预料的后果。

对于我们的主要站点，为了验证，我们坚持使用 XHTML+RDFa，它运行良好。我希望随着 HTML5 使用量的增长，Facebook 团队将开始接受此元数据的有效格式。

至于我们为什么关心验证： 我们发现，在可能的情况下，验证有助于提醒我们页面中的错误，而不是教我们忽略它们。由于我们都在浏览器中使用验证扩展，我们可以立即知道页面上是否存在验证错误（或警告），并且可以调查是否有可能消除它（99% 以上的时间）。这节省了我们处理规范的限制性实现的时间，尤其是在当今的边缘和移动平台上。我们已经看到奇怪的错误大幅减少，因为我们知道我们的页面是有效的，并且知道浏览器中发生的事情与特定 UA 可能的无效标记无关没有按预期解释。

【讨论】：

【参考方案9】：

嗯，Visual Studio 2011 告诉我“属性”属性无效。不过，W3C 似乎要宽容一些：

http://validator.w3.org/check?uri=http%3A%2F%2Fpacificfoods.com%2F

您会注意到，我根据 Facebook 向该网站的推荐添加了 Open Graph 标签，并且它不会破坏我认为具有权威性的 W3C 验证器。

咨询官方W3C HTML5 specification for the meta tag，明确使用“property”属性（代替“name”、“http-equiv”、“charset”或“itemprop”属性）无效.但是，他们的验证器会验证它（？？？）。我无法解释这种差异。

【讨论】：

【参考方案10】：

这里的许多答案已经过时了。请不要窥探标头或通过 JavaScript 编写（因为处理器可能不会评估 JS）。

称为 RDFa 1.1 和 RDFa Lite 1.1 的 W3C 建议（HTML5 扩展）（请参阅http://www.w3.org/TR/rdfa-lite/ 和http://www.w3.org/TR/rdfa-primer/）已使“property”属性有效且符合要求。同时（因为这里有较早的答案）验证器http://validator.w3.org/check 将属性识别为有效。此外，开放图协议文档 http://ogp.me/ 已更新以反映 RDFa 1.1（它使用“前缀”属性）。

W3C 的工作已通过 OpenGraph 和 schema.org 等机构的意见完成，以解决此问题引发的问题。

简而言之，确保你的 OG 标签符合 RDFa 并且你是金子。

【讨论】：

【参考方案11】：

最近的一个解决方案是在 html 或 head 标签中注册一个前缀：

<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">

或

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">

取自here - 抱歉，页面是德文...

【讨论】：

【参考方案12】：

是的。要验证为 HTML5，请添加来自 Open Graph docs 的 prefix 属性：

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Valid HTML5!</title>
<meta charset="utf-8"/>
<meta property="og:title" content="">
</head>
<body></body>
</html>

将以上内容复制并粘贴到w3 validator 进行检查。

已经准备好生产了——Apple 在apple.com 上使用了这种方法。

【讨论】：

(HTML5) 'Prefix' 不是元素 html 的有效属性 W3C 验证器说它是 100% 有效的。请检查。 确实如此 :) 但该错误来自 Visual Studio 2012 ASP.NET 代码。可能应该指定 即使没有prefix 属性，也可以验证没有错误。 prefix 属性还需要吗？ 一个小补充：我有 &lt;html prefix="og:http://ogp.me/ns#"&gt; 这是无效的。而&lt;html prefix="og: http://ogp.me/ns#"&gt; 是有效的。区别在于 og: 和 http 之间的空间字符。

以上是关于HTML5 的开放图验证的主要内容，如果未能解决你的问题，请参考以下文章

Html5之高级-3 HTML5表单验证(验证属性验证状态)

html5表单验证，无效表单操作并在所有html5表单元素都被验证时执行jQuery？

HTML5 表单验证

仅使用 HTML5 表单验证验证可见字段？

开放式身份验证需要密码。 预共享密钥不需要密码。

HTML5 表单验证