HTML5 的开放图谱验证

发布于 2024-11-17 14:04:13 字数 358 浏览 3 评论 0原文

有没有办法让 facebook 蹩脚的 Open Graph 元标记来验证我的文档类型是否为 (HTML5)？

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

我真的不想使用因为这会产生一系列全新的问题。

以下是相关验证错误之一的示例...

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

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

任何帮助将不胜感激...我已经断断续续地寻找了好几天，但没有结果。

原文

Is there any way to get facebook's crappy Open Graph meta tags to validate if my doctype is <!DOCTYPE html> (HTML5)?

Other than facebook's Open Graph meta tags, my document validates perfectly.

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.

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.

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

Any help would be appreciated... I have been searching off and on for days to no avail.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

套路撩心 2024-11-24 14:04:14

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

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

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

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

I would be inclined to say don't worry about validation, I don't believe having invalid mark up will hurt your search engine ranking. e.g. googles technical recommendations do not mention standards. http://www.google.com/support/webmasters/bin/answer.py?answer=35769#2 . Html5 allows you provide more information to search engines which they can then use, but I can't see them down ranking based on not validating.

However if you feel it helps you to validate you can use

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

to have these tags present and have a html file that will pass validators.

回复收藏 0 原文

醉生梦死 2024-11-24 14:04:14

虽然它会切断非 Javascript 用户，但我已经使用过它

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

并且它经过了完美的验证。它在 Windows 上的 Firefox、Opera、IE、Chrome、Safari 以及 Mac 上的 Firefox、Opera、Safari 上显示并运行良好。

Although it will cut off non-Javascript users, I've used this

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

and it validated perfectly. It shows and works fine with Firefox, Opera, IE, Chrome, Safari on Windows, and with Firefox, Opera, Safari on Mac.

回复收藏 0 原文

许仙没带伞 2024-11-24 14:04:13

对于 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" />

For HTML5, add this to your html element like described on ogp.me and keep your og: prefixed properties:

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

For XHTML (like OP's question), use the name attribute instead of property attribute. Facebook lint will throw a warning, but the meta value will still be recognized and parsed.

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

回复收藏 0 原文

你与昨日 2024-11-24 14:04: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 在 apple.com 上使用此方法。

Yes. To validate as HTML5, add the prefix attribute from the Open Graph docs:

<!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 validator to check.

It is production ready – Apple uses this method on apple.com.

回复收藏 0 原文

时光瘦了 2024-11-24 14:04:13

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

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

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

对于我们的主要站点，我们坚持使用 XHTML+RDFa 进行验证，并且效果很好。我希望随着 HTML5 的使用不断增长，Facebook 团队将开始接受此元数据的有效格式。

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

回复收藏 0 原文

圈圈圆圆圈圈 2024-11-24 14:04:13

仅当 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 验证）中完全删除它们。

These meta tags are only required when facebook scans the page for these tags.

    <? 
    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.

回复收藏 0 原文

携君以终年 2024-11-24 14:04:13

这里的许多答案已经过时了。请不要窥探标头或通过 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 将该属性识别为有效。此外，开放图协议文档 http://ogp.me/ 已更新以反映 RDFa 1.1 (它使用“前缀”属性）。

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

简而言之，确保您的 OG 标签符合 RDFa，您就是黄金。

回复收藏 0 原文

凤舞天涯 2024-11-24 14:04:13

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

我在 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。但我真的不喜欢这个主意！

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

回复收藏 0 原文

孤云独去闲 2024-11-24 14:04:13

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

取自这里 - 抱歉，页面是德语的...

One recent solution is to register a prefix in the html or head tag:

<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#">

taken from here - sorry, page is in german...

回复收藏 0 原文

与之呼应 2024-11-24 14:04:13

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

在脚本中包装类似按钮之类的内容有助于验证 XHTML 1.0，但不能验证 HTML5。

回复收藏 0 原文

勿忘初心 2024-11-24 14:04:13

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

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

回复收藏 0 原文