发表新帖
发表新帖

Open Graph validation for HTML5

后端 未结
关注
12 667
情歌与酒
情歌与酒 2020-11-29 01:04

Is there any way to get facebook\'s crappy Open Graph meta tags to validate if my doctype is (HTML5)?

Other than facebook\'s Open

相关标签:
12条回答
  • 我寻月下人不归
    2020-11-29 01:36

    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)
  • 难免孤独
    2020-11-29 01:43

    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)
  • 甜味超标
    2020-11-29 01:45

    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)
  • 借酒劲吻你
    2020-11-29 01:47

    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)
  • 清歌不尽
    2020-11-29 01:49

    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.

    Wrapping like buttons and such in script works to help validate against XHTML 1.0 but not HTML5.

    0 讨论(0)
  • 走了就别回头了
    2020-11-29 01:51

    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 讨论(0)
 看不清?
提交回复
热议问题