How to Use the Same Meta Tag for Opengraph and Schema.Org

Is it possible to use the same meta tag for opengraph and schema.org

HTML+RDFa 1.1 and Microdata extend HTML5’s meta element.

HTML+RDFa 1.1 (W3C Recommendation) defines:

If the RDFa @property attribute is present on the meta element, neither the @name, @http-equiv, nor @charset attributes are required and the @content attribute MUST be specified.

Microdata (W3C Note) defines:

If a meta element has an itemprop attribute, the name, http-equiv, and charset attributes must be omitted, and the content attribute must be present.

That means:

  • It’s not allowed to use Microdata’s itemprop attribute together with HTML5’s name attribute.

  • It’s allowed to use RDFa’s property attribute together with HTML5’s name attribute:

    <meta name="description" property="og:description" content="great description" />

    (possibly an issue with having this in the body instead of the head)

  • It seems to be allowed to use Microdata’s itemprop attribute together with RDFa’s property attribute if HTML5’s name attribute is not provided:

    <meta itemprop="description" property="og:description" content="great description" />

    (but the W3C Nu Html Checker reports an error)

Using Schema.org itemprop on Facebook OG meta tags

itemprop is defined by Microdata, property is defined by RDFa. So your question is: Can Microdata and RDFa be used on the same meta element?

Yes, as I have explained in a similar (but not identical) question:

When using Microdata on meta, the following attributes are not allowed: name, http-equiv, charset. When using RDFa on meta, these three attributes are optional. In both cases the content attribute is required.


Note that you could stop using Microdata and use RDFa also for Schema.org:

<html typeof="schema:WebPage">
<!-- … -->
<meta property="og:type" content="website" />
<meta property="og:title schema:name" content="My Title" />
<meta property="og:image schema:image" content="http://example.com/socialimage.jpg" />
<meta property="og:url schema:url" content="http://example.com" />
<meta property="og:description schema:description" content="My description" />
<meta property="og:site_name" content="My Site"/>

Also note that you should use link instead of meta when the value is a URL:

  <meta property="og:type" content="website" /> 
<meta property="og:title schema:name" content="My Title" />
<link property="og:image schema:image" href="http://example.com/socialimage.jpg" />
<link property="og:url schema:url" href="http://example.com" />
<meta property="og:description schema:description" content="My description" />
<meta property="og:site_name" content="My Site"/>

Image social meta tags - property= og:image name= twitter:image itemprop= image

The property attribute is from RDFa, the itemprop attribute is from Microdata, and the name attribute is from plain HTML.

Using itemprop and property together is possible, but Microdata doesn’t allow a name attribute on a meta element with the itemprop attribute (while RDFa allows it), so you could use two elements:

<meta property="og:image" name="twitter:image" content="http://example.com/image.jpg" />
<meta itemprop="image" content="http://example.com/image.jpg" />
<!-- note that this snippet is still invalid, see below -->
<meta name="twitter:image" content="http://example.com/image.jpg" />
<meta itemprop="image" property="og:image" content="http://example.com/image.jpg" />
<!-- note that this snippet is still invalid, see below -->

As Schema.org can also be used with RDFa, you could omit the Microdata (unless you need to support a consumer that doesn’t support RDFa):

<meta property="og:image image" name="twitter:image" content="http://example.com/image.jpg" />
<!-- note that this snippet is still invalid, see below -->

Why are these invalid? Because you have to use a link element instead of a meta element, if the value is a URI. However, in practice this is problematic, because:

  • twitter:url is defined as meta extension, not as link type (but because the value is a URL, it should have been a link type)
  • Facebook seems to recognize only meta, not link (I didn’t test it, it’s what I read several times when answering questions about it here -- se for example: Should og:image and og:url put in <meta> or <link>?)

So while Twitter Cards and Facebook’s OGP suggest to use (and probably support only) invalid markup, this is not necessarily the case for Schema.org consumers. So you might want to combine the invalid and the valid way:

<meta name="twitter:image" property="og:image" content="http://example.com/image.jpg" /> <!-- invalid, but expected -->
<link property="image" href="http://example.com/image.jpg" /> <!-- valid -->

(Note that all these snippets with Schema.org’s image property expect a parent element with a vocab. If you don’t provide it, it’s not clear to which vocabulary the image property belongs. If you can’t, you should use schema:image instead.)

Combining the meta description and Open Graph Protocol description into one tag

Yes, you can combine them. To test it, I made the simple HTML page below, uploaded it to a server, then ran the page through Facebook's URL Linter. It reported no warnings related to the description tag (only about the missing og:image tag) and correctly read the description.

<!doctype html>
<html>
<head>
<meta name="description" property="og:description" content="My meta description copy." />
<meta property="og:title" content="Test page" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://example.com/ogtest.html" />
</head>
<body>
Test
</body>
</html>

Note that, if the og:url value is different to the current page url, Facebook will look for a description on that url instead of the current one and ignore the current page's description tag.

It might also interest you to know that, even though it's possible to combine the two description tags, Facebook doesn't do this on their own website.

meta tags for google vs meta tags open graph for facebook

You can have meta tags for Google and the other search engines as well as Facebook in the same page without one affecting the other. Having Facebook meta tags will not affect your rankings (and for that matter neither will regular meta tags) or get you penalized.

Order of Open Graph, Twitter Cards and Meta Data

Most documentations don't mention a required or recommended order (Twitter, FB, OG).

According to this source the order matters for the Google+ button. I'm not sure if that is still true.



Related Topics



Leave a reply



Submit