Html HTML5 的开放图验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6501189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open Graph validation for HTML5
提问by Scott Greenfield
Is there any way to get facebook's crappy Open Graph meta tags to validate if my doctype is <!DOCTYPE html>(HTML5)?
有什么方法可以让 facebook 糟糕的 Open Graph 元标记来验证我的文档类型是否为<!DOCTYPE html>(HTML5)？
Other than facebook's Open Graph meta tags, my document validates perfectly.
除了 facebook 的 Open Graph 元标记之外，我的文档可以完美验证。
I really don't want to use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">as that creates a whole new set of problems.
我真的不想使用，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">因为这会产生一系列全新的问题。
Here is an example of one of the validation errors in question...
这是有问题的验证错误之一的示例...
Error Line 11, Column 47: Attribute property not allowed on element meta at this point.
错误第 11 行，第 47 列：此时元素元不允许属性属性。
<meta property="og:type" content="website" />
Any help would be appreciated... I have been searching off and on for days to no avail.
任何帮助将不胜感激......我一直在寻找几天无济于事。
采纳答案by Blaise
For HTML5, add this to your htmlelement like described on ogp.meand keep your og:prefixed properties:
对于 HTML5，将其添加到您的html元素中，如 ogp.me 上所述，并保留您的og:前缀属性：
<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:type" content="website" />
...
For XHTML (like OP's question), use the nameattribute instead of propertyattribute. Facebook lint will throw a warning, but the meta value will still be recognized and parsed.
对于 XHTML（如 OP 的问题），使用name属性而不是property属性。Facebook lint 会发出警告，但仍会识别和解析元值。
<meta name="og:title" content="Hello Facebook" />
回答by Justin
Yes. To validate as HTML5, add the prefixattribute from the Open Graph docs:
是的。要验证为 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>
Copy and paste the above to the w3 validatorto check.
将以上内容复制并粘贴到w3 验证器进行检查。
It is production ready – Apple uses this method on apple.com.
它已准备好生产 – Apple 在apple.com上使用此方法。
回答by justbeez
The short answer is no, not at this time. All other answers are workarounds, hacks, or just plain crazy. The only long-term solution is that Facebook needs to create an alternate syntax that is valid HTML5.
简短的回答是否定的，不是在这个时候。所有其他答案都是变通方法，黑客，或者只是疯狂。唯一的长期解决方案是 Facebook 需要创建一种有效的 HTML5 替代语法。
To those recommending targeting Facebook by the "facebookexternalhit" User Agent, you have to remember that other companies are following Facebook's lead with these tags. For example, Google+ will fall back to the OpenGraph tags if their preferred Schema.org markup isn't present. Since most sites aren't using Schema.org attributes (especially if they're spending the time to use OpenGraph correctly), you can easily miss out on enhancing your snippets on sites like Google+ by following this advice.
对于那些建议通过“facebookexternalhit”用户代理定位 Facebook 的人，您必须记住，其他公司也在使用这些标签跟随 Facebook 的脚步。例如，如果不存在首选的 Schema.org 标记，Google+ 将回退到 OpenGraph 标记。由于大多数网站不使用 Schema.org 属性（尤其是当他们花时间正确使用 OpenGraph 时），因此您很容易错过在 Google+ 等网站上通过遵循此建议来增强您的代码段的机会。
With the ubiquity of Facebook, it really isn't a goodsolution to target them directly--even if their choice of implementation is problematic for developers. When looking for solutions on a site like Stack Overflow, you always have to remember that there can be unforeseen consequences to these methods.
由于 Facebook 无处不在，直接针对他们确实不是一个好的解决方案——即使他们的实施选择对开发人员来说是有问题的。在 Stack Overflow 等网站上寻找解决方案时，您必须始终记住，这些方法可能会产生不可预见的后果。
For our main sites, we've stuck with XHTML+RDFa for validation sake, and it's worked well enough. I'm hoping that as HTML5's usage grows, the Facebook team will start accepting a valid format for this metadata.
对于我们的主要站点，为了验证，我们坚持使用 XHTML+RDFa，并且它运行良好。我希望随着 HTML5 使用量的增长，Facebook 团队将开始接受此元数据的有效格式。
As for why we care about validation:We've found that validation, when possible, helps to alert us to errors in our pages by not teaching us to ignore them. Since we all use validation extensions in our browsers, we know instantly if there's a validation error (or warning) on a page, and can investigate whether it's possible to eliminate it (which 99+% of the time it is). This saves us time dealing with restrictive implementations of the specs, especially on fringe and mobile platforms nowadays. We've seen a huge reduction in odd bugs because we're awareof our pages being valid and know that what's going on in the browser doesn't have to do with invalid markup that a particular UA might not interpret as expected.
至于为什么我们关心验证：我们发现验证在可能的情况下通过不教我们忽略它们来帮助提醒我们页面中的错误。由于我们都在浏览器中使用验证扩展，因此我们可以立即知道页面上是否存在验证错误（或警告），并且可以调查是否可以消除它（99+% 的时间是这样）。这节省了我们处理规范的限制性实现的时间，尤其是在当今的边缘和移动平台上。我们已经看到奇怪的错误大大减少了，因为我们知道我们的页面是有效的，并且知道浏览器中发生的事情与特定 UA 可能无法按预期解释的无效标记无关。
回答by thejudge
These meta tags are only required when facebook scans the page for these tags.
仅当 facebook 扫描这些标签的页面时才需要这些元标签。
<?
if(eregi("facebookexternalhit", $_SERVER['HTTP_USER_AGENT'])){
echo '<meta property="og:type" content=xxxxxxxxxxxxx';
// continue with the other open graph tags
}
?>
The said tags will only be present when facebook needs them - this method with PHP removes them completely for all other instances including W3C validation.
所述标签仅在 facebook 需要它们时才会出现 - 这种使用 PHP 的方法会为所有其他实例（包括 W3C 验证）完全删除它们。
回答by Leonel
More than a Year has passed and the best solution we've got is to wrap the meta tags in some sort of server-side verification.
一年多过去了，我们得到的最佳解决方案是将元标记包装在某种服务器端验证中。
In PHP I did:
在 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 } ?>
It really works for Facebook. But I really don't like this idea!
它确实适用于 Facebook。但我真的不喜欢这个主意！
回答by WraithKenny
Many of the answers here have become outdated. Please don't snoop for headers or write via JavaScript (since the processors might not evaluate the JS).
这里的许多答案已经过时了。请不要窥探标题或通过 JavaScript 编写（因为处理器可能不会评估 JS）。
The W3C Recommendations (Extensions to HTML5) called RDFa 1.1 and RDFa Lite 1.1 (see http://www.w3.org/TR/rdfa-lite/and http://www.w3.org/TR/rdfa-primer/) have made the "property" attribute valid and conforming. In the mean time (since the older answers here) the validator http://validator.w3.org/checkrecognizes the attribute as valid. In addition, the Open Graph Protocol documentation, http://ogp.me/, has been updated to reflect RDFa 1.1 (it uses the "prefix" attribute).
W3C 建议（HTML5 的扩展）称为 RDFa 1.1 和 RDFa Lite 1.1（参见http://www.w3.org/TR/rdfa-lite/和http://www.w3.org/TR/rdfa-primer/) 使“属性”属性有效且符合要求。同时（因为这里有较旧的答案）验证器http://validator.w3.org/check将属性识别为有效。此外，开放图谱协议文档http://ogp.me/已更新以反映 RDFa 1.1（它使用“前缀”属性）。
The W3C work has been done with input from OpenGraph and schema.org among others to resolve the kind of issue raise by this question.
W3C 的工作是在 OpenGraph 和 schema.org 等人的意见下完成的，以解决这个问题引发的问题。
In short, make sure your OG tags conform to RDFa and you are golden.
简而言之，确保您的 OG 标签符合 RDFa 并且您是金子。
回答by Kjell
回答by Kenneth Benjamin
Bad solution for the meta tags. If you wrap those in Javascript then the Facebook Linter won't find them. That's the same as not putting them in at all.
元标记的错误解决方案。如果您将它们包装在 Javascript 中，那么 Facebook Linter 将找不到它们。这与根本不放入它们是一样的。
Wrapping like buttons and such in script works to help validate against XHTML 1.0 but not HTML5.
在脚本中包装类似按钮等有助于验证 XHTML 1.0 而不是 HTML5。
回答by cupto
In JSP:
在 JSP 中：
<%
String ua=request.getHeader("user-agent").toLowerCase();
if(ua.matches(".*facebookexternalhit.*")){
}
%>
<meta property="og:image" content="images/facebook.jpg" />
...
<%
}
%>
Or:
或者：
<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>
回答by Ethan Brown
Well, Visual Studio 2011 tells me that the "property" attribute is invalid. However, the W3C seems to be a little more lenient:
好吧，Visual Studio 2011 告诉我“属性”属性无效。不过，W3C 似乎稍微宽容了一些：
http://validator.w3.org/check?uri=http%3A%2F%2Fpacificfoods.com%2F
http://validator.w3.org/check?uri=http%3A%2F%2Fpacificfoods.com%2F
You'll notice that that I added Open Graph tags per Facebook's recommendation to that site, and it does not break the W3C validator, which I consider to be authoritative.
您会注意到，我根据 Facebook 对该站点的建议添加了 Open Graph 标签，并且它不会破坏 W3C 验证器，我认为它是权威的。
Consulting the official W3C HTML5 specification for the meta tag, it is clear that the use of the "property" attribute (in lieu of the "name", "http-equiv", "charset", or "itemprop" attributes) is not valid. However, their validator validates it (???). I have no explanation for this discrepancy.
查阅官方W3C HTML5 规范的元标记，很明显使用“property”属性（代替“name”、“http-equiv”、“charset”或“itemprop”属性）不是有效的。但是，他们的验证器会对其进行验证 (???)。我对这种差异没有任何解释。
