Open Graph validation for HTML5

2019-01-06 11:30发布

站内问答 / Html5
1161 12 4

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.

12条回答
你好瞎i
2楼-- · 2019-01-06 12:11

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人赞 添加讨论(0) 举报
叛逆
3楼-- · 2019-01-06 12:15

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人赞 添加讨论(0) 举报
叛逆
4楼-- · 2019-01-06 12:16

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

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/check recognizes 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).

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.

In short, make sure your OG tags conform to RDFa and you are golden.

查看更多
0人赞 添加讨论(0) 举报
爷的心禁止访问
5楼-- · 2019-01-06 12:18

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人赞 添加讨论(0) 举报
一夜七次
6楼-- · 2019-01-06 12:20

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.

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.

With the ubiquity of Facebook, it really isn't a good solution 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.

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.

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 aware of 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.

查看更多
0人赞 添加讨论(0) 举报
何必那么认真
7楼-- · 2019-01-06 12:20

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人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)