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 themeta
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 anitemprop
attribute, thename
,http-equiv
, andcharset
attributes must be omitted, and thecontent
attribute must be present.
That means:
It’s not allowed to use Microdata’s
itemprop
attribute together with HTML5’sname
attribute.It’s allowed to use RDFa’s
property
attribute together with HTML5’sname
attribute:<meta name="description" property="og:description" content="great description" />
(possibly an issue with having this in the
body
instead of thehead
)It seems to be allowed to use Microdata’s
itemprop
attribute together with RDFa’sproperty
attribute if HTML5’sname
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
, notlink
(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
Best JSON-Ld Practices: Using Multiple <Script> Elements
How to Make Last Cell of a Row in a Table Occupy All Remaining Width
Add Outward Curving Border to Elements Like This: ◝◟_◞◜
What Does the Clearfix Class Do in CSS
Space Between Buttons with Bootstrap Class
How to Get a Div Centered with Another Div on the Right of It
Browsers Does Not Reflects Updates in the Code
How to Create a Box-Shadow That Covers the Entire Page
Aligning Elements Left and Center with Flexbox
How to Center-Align One Flex Item and Right-Align Another Using Flexbox
Is There a Disadvantage of Using 'Display:Table-Cell'On Divs
CSS Wrong Appearance of Border-Radius on a Nested Div
Google Maps Shows "For Development Purposes Only"
How to Use External Font in CSS
Highlighting the Current Page in a List of Links Using CSS/Html