12

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?

user706420
  • 1,167
  • 3
  • 13
  • 23

2 Answers2

7

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>
Null
  • 975
  • 13
  • 13
-1

I did as instructed here, it worked 100%, I also had the same doubt.

Paulo Afonso
  • 1
  • 2
  • If a solution worked for you that had already been posted here, please, upvote the solution. Additionally, you can leave a comment on what you did differently. In case you want to leave a better solution or add something to an already existing one, please adhere to [How do I write a good answer](https://stackoverflow.com/help/how-to-answer). – Vaclav Pelc Aug 22 '22 at 11:13