Menu
I found many ways to declare opengraph. But which one is the "right" way?
http://ogp.me/ use in source code
<head prefix="og: http://ogp.me/ns#">
but in examples the html-tag instead:
<html prefix="og: http://ogp.me/ns#">
combination with facebook look like
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
or without prefix
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#">
ogp.me link to imdb as example that use it this way
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
another sites set the og:type "website" or "article" inline like
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
ogp.me link zu a doc: https://de.scribd.com/doc/30715288/The-Open-Graph-Protocol-Design-Decisions See page 15; It said don't use this form?
xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"
So much combinations, another websites do nothing of it and only use simple the meta-tags. Is the declaration optional or which one should I use in which form?
488
prefix="og: http://ogp.me/ns#" is the required prefix for open graph protocol meta tags.
xmlns is an attribute for XML namespaces, more about that here:
Open Graph namespace declaration: HTML with XMLNS or head prefix?
You can set it on the <html> or <head> element as you like, the difference is the scope of the prefix. There is no benefit in limiting it to <head> even though in most cases you will only use the related <meta> tags inside <head>.
The fb: http://ogp.me/ns/fb#" part of the prefix that you have seen sites use is if you want to extend to use Facebook's own properties using "fb:" instead of "og:".
See: https://developers.facebook.com/docs/sharing/opengraph/object-properties
This should be perfectly fine to use:
<html lang="{lang}" prefix="og: http://ogp.me/ns#">
<head>
...
<meta property="og:type" content="website"><!-- "og:type" can be omitted for 'website' (is default), required for other types: http://ogp.me/#types -->
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="https://example.com/path/to/image.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="...">
<meta property="og:image:width" content="...">
<meta property="og:image:height" content="...">
<meta property="og:site_name" content="...">
</head>
...
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
