Social networks do a pretty good job extracting title and description from websites when URL is shared, but for images it is still necessary to create custom meta tags: property="og:image" name="twitter:image" itemprop="image". My question is, will this work?
<meta property="og:image" name="twitter:image" itemprop="image" content="http://example.com/image.jpg" />
So I don't have to create 3 different meta tags for every single web page on my web site.
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)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.)