HTML5的Open Graph验证

Question

HTML5的Open Graph验证

facebookvalidationhtmlfacebook-opengraph

59

有没有办法让脸书糟糕的 Open Graph 元标签在文档使用（HTML5）的情况下验证通过？

除了脸书的 Open Graph 元标签之外，我的文档完全验证无误。

我真的不想使用，因为那会带来一整套新问题。

这是其中一个验证错误的示例...

错误行 11，列 47：元素 meta 不允许使用属性 property。

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

希望能得到任何帮助...我已经断断续续地搜索了几天，但仍然没有结果。

- Scott Greenfield

4

显而易见的答案是：不行，它不符合HTML5标准，因此无法通过验证。为什么你会担心那个验证器的警告呢？验证器的作用只是指出代码中可能存在的问题，但在这种情况下显然并不存在问题。 - Wladimir Palant

6

有一些理论认为，验证错误会损害搜索引擎排名，这是一个原因。无论如何，我为什么不想让网站通过验证呢？ - Scott Greenfield

6

截至2012年4月10日，使用HTML5合规检查器时，我惊讶地发现验证器不再对og-meta信息进行抱怨。 - m90

2

RDFa（和Lite）是HTML5的扩展，现在将“property”属性标记为有效和符合规范。请参见http://www.w3.org/TR/rdfa-primer/。显然，验证器已更新以识别它。 - WraithKenny

1

@WraithKenny 你说得对。我正在使用RDFa，它验证非常好。 - Jonadabe

显示剩余4条评论

12个回答

13

是的。要将其验证为HTML5，请从Open Graph文档中添加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验证器中进行检查。

它已经可以用于生产环境 - 苹果在apple.com上使用这种方法。

- Justin

（HTML5）“前缀”不是html元素的有效属性。 - Green_qaue

W3C验证器显示为100%有效。请检查一下。 - Justin

没错 :) 但是那个错误来自于Visual Studio 2012 ASP.NET代码。可能应该明确说明一下。 - Green_qaue

3

即使没有“prefix”属性，这个验证过了并且没有错误。那么，“prefix”属性还是必需的吗？ - theyuv

太好了，看起来不再需要验证了！不过原始文档仍然建议这样做。 - Justin

2

一个小的补充：我有一个无效的 <html prefix="og:http://ogp.me/ns#">。而 <html prefix="og: http://ogp.me/ns#"> 是有效的。区别在于 og: 和 http 之间的空格字符。 - JP Hellemons

11

短期内，没有解决方案可以在Facebook的标签上使用HTML5验证。任何其他答案都是变通方法、技巧或非常疯狂的方法。唯一的长期解决方案是Facebook需要创建一个可用的HTML5备选语法。建议使用“facebookexternalhit”用户代理来针对Facebook，但要记住，其他公司正在按照Facebook的标签来使用这些标签。大多数网站都没有使用Schema.org属性（特别是如果他们花时间正确地使用OpenGraph），因此遵循此建议可能会使您在Google+等网站上错过增强片段的机会。虽然直接针对Facebook并不是一个好的解决方案，但由于Facebook的流行性，我们还是希望Facebook团队开始接受此元数据的有效格式。对于为什么我们关心验证的原因，我们发现验证有助于通过不忽略错误来警示我们页面中的错误。验证扩展程序可以帮助我们立即知道页面上是否存在验证错误（或警告），并且可以调查是否可以消除它（99+%的情况下是可以的）。我们意识到我们的页面是有效的，并且知道浏览器中发生的事情与特定UA可能无法预期解释的无效标记无关，因此我们节省了处理规范的限制性实现所需的时间，特别是在边缘和移动平台上。我们已经看到奇怪的错误减少了很多。

- justbeez

5

这些元标签只有在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验证。

- thejudge

25

Facebook 不是唯一使用 Open Graph 标签的消费者。 - Matthew

2

是的，Twitter 卡片也使用它们。 - Ravi

1

这个选项存在问题：它隐藏了问题而非解决问题。感觉回到了过去，一些网站根据你使用的是IE3还是Netscape提供不同的内容（例如参见javascript - Browser detection versus feature detection - Stack Overflow）。这种方式很脆弱且封闭。现在的世界已经比那更加广阔，未来更是如此。 - Stéphane Gourichon

5

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

W3C建议（HTML5扩展）称为RDFa 1.1和RDFa Lite 1.1（参见http://www.w3.org/TR/rdfa-lite/和http://www.w3.org/TR/rdfa-primer/）已使“property”属性有效并合规。与此同时（自旧答案以来），验证器http://validator.w3.org/check将属性识别为有效。此外，Open Graph Protocol文档http://ogp.me/已更新以反映RDFa 1.1（它使用“prefix”属性）。

W3C的工作是在OpenGraph和schema.org等人的输入下完成的，以解决此问题引发的问题类型。

简而言之，确保您的OG标签符合RDFa规范，您就会成功了。

- WraithKenny

4

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

在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 来说，这确实是有效的。但我真的不喜欢这个想法！

- Leonel

4

最近的一个解决方案是在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#">

以下内容来自这里 - 抱歉，页面是德语...

- Kjell

2

关于meta标签的不良解决方案。如果您将它们包装在Javascript中，那么Facebook Linter将无法找到它们。这与根本不放置它们相同。

像按钮之类的包装在脚本中可以帮助验证XHTML 1.0，但不能用于HTML5。

- Kenneth Benjamin

1

只要FB和Google满意，而且客户没有强制要求验证，你就不必担心验证的问题... - Omiod

@UVL，然后继续处理这个混乱不堪的东西吗？不，我们应该进行验证，并且应该尝试停止对我们的HTML中几乎无法解析的垃圾如此宽容。 - Roman Starkov

1

在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>

- cupto

0

好的，Visual Studio 2011告诉我“property”属性无效。然而，W3C似乎更加宽容：

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

您会注意到，我按照Facebook的建议为该网站添加了Open Graph标签，并且它不会破坏W3C验证器，我认为这是权威的。

查阅官方W3C HTML5规范的meta标签后，可以清楚地看到使用“property”属性（而非“name”，“http-equiv”，“charset”或“itemprop”属性）是无效的。然而，他们的验证器却对其进行了验证（？？？）。我对此差异没有任何解释。

- Ethan Brown

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Blaise · Accepted Answer

对于HTML5，将此添加到您的html元素如在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" />