Should og:image and og:url put in <meta> or <link>?

Asked 28/1, 2017 at 22:44 Answered 29/1, 2017 at 0:45

Solved html facebook-opengraph meta-tags rdfa

For og:image and og:url, since they have URL, can I place them in a link tag instead of a meta tag, and is it preferable?

Also what is the difference in using these two tags w.r.t. og:image and og:url?

Backdrop answered 28/1, 2017 at 22:44 Comment(0)

I don't know about other major consumers of the OGP so this might not be a problem for your case, but if you plan to implement it for Facebook,

stick to meta tags.

Doing a quick live test with the open graph debugger and fiddling with the og: tags, it appears that facebook only recognizes them if they are placed in <meta>s.

Try it

If you create an empty HTML file with a single og:url tag in its <head> section, upload it to any URL and run it through the debugger above, both

<link rel="og:url" href="http://www.imdb.com/title/tt0117500/" />

and

<link property="og:url" content="http://www.imdb.com/title/tt0117500/" />

edit or, as suggested in the comments

<link property="og:url" href="http://www.imdb.com/title/tt0117500/" />

will fail to parse and return the original URL, while

<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />

parses correctly and returns the contents of The Rock on IMDb instead. At the end of the day semantics are nice, but working code is even better.

Odele answered 29/1, 2017 at 0:45 Comment(3)

thanks for your answer. I am following meta for url with respect to open graph. – Backdrop 30/1, 2017 at 18:44

For the link element, you have to use the href attribute instead of the content attribute. So it should be <link property="og:url" href="http://www.imdb.com/title/tt0117500/" />. Unfortunately I can’t test it because their debugger requires an account. – Trotter 30/1, 2017 at 19:25

Good point, although property looks just as awkward on it. Anyway, to be sure I've tested it with <link property="og:url" href="http://www.imdb.com/title/tt0117500/" /> as you suggested but it doesn't parse either. Seems like meta is the only accepted tag. – Odele 30/1, 2017 at 23:27

You must use link instead of meta if the value is a URL.

From the definition of the meta element:

The meta element represents various kinds of metadata that cannot be expressed using the […] link […] elements.

But a URL can of course be expressed using a link element (as it’s its purpose).

If you use a meta element for a URL value, RDFa parsers would extract a string value instead of a URL value. This also means that they wouldn’t be able to apply relative references against the base URL.

Example

Let’s say these elements are in a document with the URL http://example.com/foo:

<link property="schema:url"    href="/bar" />
<meta property="schema:url" content="/bar" />

The value from the link element is the URL http://example.com/bar.
The value from the meta element is the string /bar.

However, in the case of OGP …

The examples in OGP’s documentation use the meta element for URL values; there is no example with a link element.

While this means that many of their examples are invalid HTML+RDFa, and RDFa parsers will extract strings instead of URLs in those cases,
it may be the case that Facebook (or any other consumer) isn’t actually using RDFa to parse the content, and it may be the case that they don’t support link elements.

Note: These are just possibilities, judging from the quality of their documentation. I don’t have any experience/insight, as I don’t use Facebook. So you might want to test it with Facebook if you care about their OGP-based features.

Trotter answered 29/1, 2017 at 0:9 Comment(1)

I was concerned with open graph for now. Though your answer gave me insights on RDFa parsers which I am planning to implement next. Thanks for the answer. – Backdrop 30/1, 2017 at 18:43

stick to meta tags.

Try it

Example

However, in the case of OGP …

Recommended topics

Hot tags