RDFa introduced a property attribute for the <meta> element, and the W3C even recommends this as an extension to HTML5. Facebook's Open Graph protocol, for example, uses the RDFa property attribute like this (example from the Open Graph site):
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
…
However the HTML5 specification seems to prohibit this usage. I'm not talking about whether it allows the property attribute; I'm referring to its explicit prohibition of the content attribute without a name attribute for the <meta> element:
If either name or http-equiv is specified, then the content attribute must also be specified. Otherwise, it must be omitted.
Isn't this in direct conflict with current RDFa usage such as in Open Graph? The HTML5 specification seems to require the presence of a name attribute as well here.
The W3C Recommendation "HTML+RDFa 1.1" extends the HTML spec (you can find all extensions in a W3C Note).
This extension changes HTML’s conformance requirements for the meta element:
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.
So, these two HTML+RDFa elements are valid:
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
(The other two meta elements are invalid, because they have URL values, for which the link element must be used instead.)
Related
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)
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.)
I dont like the amount of tags in the head of my document.
here is an example of some meta tags.
<!--w3c-->
<title>Page Title</title>
<meta name="description" content="great description">
<!--schema.org-->
<meta itemprop="name" content="Page Title">
<meta itemprop="description" content="great description">
<!-- opengraph-->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="great description">
Is it possible to combine the tags/properties to reduce the code size without affecting SEO?
for example
<title itemprop="name">Page Title</title>
itemprop attributes can be used anywhere so I'm pretty sure this is fine
but as far as i am aware the property="og:*" attribute must be used with a meta tag.
So is the following markup acceptable?
<meta name="description" itemprop="description" property="og:description" content="great description">
and how will this affect SEO?
many thanks
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)
How much meta data you use is up to you. There are at least 5 standards, some like Google+ or Pinterest will fall back to OpenGraph. I don't think any search engine will penalize you for following industry standards. If your website sells product and you have product listing pages with many products per page you will likely want to use schema.org, all the major English language search engines and Yandex have agreed to support it. If your website is more content focussed, schema.org is a lot less important but supporting OpenGraph plus Twitter Cards and even Rich Pins may be more of a necessity.
This is a good article on the various competing standards and which to use. Many people want all the traffic they can get so support many standards.
<!DOCTYPE html>
<html vocab="http://www.w3.org/2011/rdfa-context/rdfa-1.1" lang="en" dir="ltr">
<head>
<!--w3c-->
<title property="schema:name">Page Title</title>
<meta name="description" content="great description">
<!--schema.org-->
<meta property="schema:name" content="Page Title">
<meta property="schema:description" content="great description">
<!-- opengraph-->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="great description">
<meta property="schema:description og:description" content="great description">
</head>
<body>
</body>
</html>
I use a bunch of semantic markup on my site, from schema.org, Dublin Core, OGP, FBML, data-vocabulary. But since I use HTML5, the W3C-validator doesn't like all of XMLNS markups, like
xmlns:schema="http://schema.org/"
xmlns:dcterms="http://purl.org/dc/terms/"
xmlns:og="http://ogp.me/ns/book#"
xmlns:fb="http://www.facebook.com/2008/fbml"
xmlns:v="http://rdf.data-vocabulary.org/#"
The question is: if I don't use XMLNS (or prefix:dcterms etc), would search engines still understand the semantic of the site? Yes, Google Rich Snippets testing tool still shows all of markups … But the question still remains.
Such markup is used:
<html>
<head>
<meta property="og:title" content="Book-Title" />
<meta name="dcterms.title" lang="de-DE" content="Book-Title"/>
</head>
<body>
<div itemscope itemtype="http://schema.org/Book">
<h2 itemprop="name">Book-Title</h2>
</div>
</body>
</html>
You are using three different ways to specify metadata here:
meta-name
Your use of Dublin Core in <meta name="dcterms.title" lang="de-DE" content="Book-Title"/> is fine as it is, because you use a registered HTML5 name value here.
Microdata with schema.org vocabulary
Your use of Microdata with the schema.org vocabulary is fine as it is, because you specify the full URI:
<div itemscope itemtype="http://schema.org/Book">
<h2 itemprop="name">Book-Title</h2>
</div>
RDFa with OGP vocabulary
With <meta property="og:title" content="Book-Title" /> you are using the RDFa syntax (because of the property attribute), therefore you’d need to specify the URI, as og is a prefix here.
You could use a full URI instead of the prefix, e.g.:
<meta property="http://ogp.me/ns#title" content="Book-Title" />
You could specify the prefix in the html or head element with the prefix attribute:
<head prefix="og: http://ogp.me/ns#">
<meta property="og:title" content="Book-Title" />
</head>
Or you may use the meta-name instead of RDFa (in the same way you used the Dublin Core dcterms.title), because og:title is a registered HTML5 name value (depends on your use case if you may want to stop using RDFa here):
<meta name="og:title" content="Book-Title" />
What are the list of standard meta tags defined in W3C other than the below given at http://www.w3.org/wiki/HTML/Elements/meta
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="copyright" content="© W3C" />
<meta name="author" lang="en" content="" />
<meta name="robots" content="Index,Follow" />
<meta name="description"
content="The World Wide Web Consortium (W3C) is an international community
where Member organizations, a full-time staff,
and the public work together to develop Web standards." />
<meta name="keyword" content="W3C, HTML, CSS, SVG, Web standards" />
HTML5
You can only use the following values in HTML5. If you need a value not listed, you’d have to register it first.
name values
Standard metadata names (defined in the HTML5 spec)
MetaExtensions (registered in the WHATWG wiki according to the HTML5 spec)
http-equiv values
Pragma directives (defined in the HTML5 spec)
PragmaExtensions (registered in the WHATWG wiki according to the HTML5 spec)
HTML 4.01
In HTML 4.01 there is no registry defined, so you can use whatever values you like. See http://www.w3.org/TR/html401/struct/global.html#h-7.4.4:
This specification does not define a set of legal meta data properties.
The spec gives some examples for name values, like:
author
keywords
description
copyright
date
ROBOTS
And for http-equiv values, like:
Expires
PICS-Label
Content-Type
I am trying to include extracted structured data in my webpages.
I included this for description:
<meta itemprop="description" content="my description" />
However I realised that there is already a normal meta description on the page:
<meta name="description" content="my description" />
Is it ok to leave both of them or it is really necessary to merge them together maybe like:
<meta itemprop="description" name="description" content="" />
You should leave both of them. The Microdata Spec says:
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.
so it would be invalid to merge them.