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" />
Related
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.)
So I was looking at Schema.org. Do I need to change my <html> tag to this
<html itemscope itemtype="http://schema.org/Article">
or can I just use only the meta tags within my <head></head> block?
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">
Properties need to belong to an item. You create an item with the itemscope attribute (and the itemtype attribute can give this item a type).
Without itemscope, your markup example is invalid.
It is possible to provide Microdata only within the head element, but it’s not recommended for two reasons:
Microdata was intended to be used on your existing markup. While it can often make sense to include certain meta/link elements in the head (with itemref, see an example), most of the content is typically in the body. If you only want to use elements within head, you would have to duplicate most your content. But if you want to go that route, you might prefer to use JSON-LD.
As head doesn’t allow the use of a grouping element (like div), it gets complex to express Microdata. You would have to use itemref for every property and misuse an element like style for every item (see the first snippet in this answer as example).
Your example could look like this:
<head>
<style itemscope itemtype="http://schema.org/Article" itemref="p1a p1b p1c"></style>
<meta id="p1a" itemprop="name" content="The Name or Title Here">
<meta id="p1b" itemprop="description" content="This is the page description">
<link id="p1c" itemprop="image" href="http://www.example.com/image.jpg">
</head>
If you can use itemscope on the head element, it would be better:
<head itemscope itemtype="http://schema.org/Article">
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<link itemprop="image" href="http://www.example.com/image.jpg">
</head>
But as soon as you need more than one item (which is typically the case, e.g., for the Organization/Person which is the author etc.), this doesn’t work anymore, and you would need a solution like in my first snippet.
Note that it’s allowed to use meta/link elements for Microdata within the body element. This makes it way easier, as you can use div elements for the itemscope. So even if you duplicate your content instead of marking up your existing content, it would be preferable to do this in the body:
<div itemscope itemtype="http://schema.org/Article">
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<link itemprop="image" href="http://www.example.com/image.jpg">
</div>
(I replaced the meta element for the image property with a link element, because using meta is invalid for this purpose.)
According to the given example from scheme.org, yes both are compulsory for Google.
To validate whether your data is being captured properly you can use this tool:
Structured data testing tool
By using the tool above you can see that if you omit itemtype="http://schema.org/Article" the data will not get captured.
The section about Microdata on whatwg.org doesn't mention meta-elements in the head-element of a HTML document explicitly. In conclusion you need itemscope to have valid markup.
If you take a look at the description at schema.org you'll find this section about WebPages:
Every web page is implicitly assumed to be declared to be of type WebPage, so the various properties about that webpage, such as breadcrumb may be used. We recommend explicit declaration if these properties are specified, but if they are found outside of an itemscope, they will be assumed to be about the page.
The interesting part is this:
[…] if they [the properties] are found outside of an itemscope, they will be assumed to be about the page.
According to this you don't need to itemscope to the html-element. But it reads more like a suggestion then a definite specification.
You can see this behavior also in Google's Structured Data Testing Tool. When you run this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">
</head>
</html>
… you'll find that it doesn't capture any data. It'll start capturing data, as soon as you add itemscope resulting in an Unspecified Type without any error:
Using itemtype="http://schema.org/Article" will fail or at least throw errors as too few properties are given for type Article.
All different types can be found on the WebPage overview on scheme.org. Maybe one is suitable for the whole page.
You can safely use <html itemscope itemtype="http://schema.org/Article">. This allows you to define itemprop's inside <head> element.
Google Rich Test Snippets and w3 validator, both validate this approach as I have already tested it.
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 just wanted to know what is the HTML5 itemscope attribute used for basically?
The [itemscope] attribute is a boolean attribute to define the scope of the metadata contained within the element.
It's defined in the HTML5 Microdata API:
Every HTML element may have an itemscope attribute specified. The itemscope attribute is a boolean attribute.
An element with the itemscope attribute specified creates a new item, a group of name-value pairs.
In other words, it's a way of associating metadata with a particular DOM node.
This is used by the Schema.org API to associate data for search engines and social networks. Google+ uses schema as the way to provide titles, thumbnails, and descriptions for pages shared by users.
It should also be noted that [itemscope] and [itemprop] are compatible with Facebook's Open Graph Protocol when providing meta data for a webpage. The same metadata can be listed for search engines, Facbook, and Google+ in a single set of <meta> elements rather than having to list the same information more than once:
<html itemscope itemtype="http://schema.org/WebPage" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>An Example Title</title>
<meta content="An Example Title" itemprop="name" property="og:title" />
<meta content="Lorem ipsum dolor sit amet" itemprop="description" name="description" property="og:description" />
<meta content="http://www.example.com/image.jpg" itemprop="image" property="og:image" />
<meta content="http://www.example.com/permalink" itemprop="url" property="og:url" />
<link rel="canonical" href="http://www.example.com/permalink" />
</head>
<body>
...content...
</body>
</html>
Note that in the example, [itemscope] was added to the <html> element. This means that any [itemprop] attributes in the <head> and <body> are part of the WebPage item.
Search engines including Bing, Google, and Yahoo! are now using itemscope and friends to identify semantic data in webpages. On the website schema.org, they have an explanation of how to use itemscope with predefined schemas to improve the data that is provided to search engines.
http://schema.org/docs/gs.html
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
There are <meta> tags and other things you can place in the <head> of your HTML document. What <meta> tags etc. and best practices do you make use of in your HTML document to make it more accessible, searchable, optimized etc.
In my case:
Title (should do [Section Name - Site Name] for better SEO)
Meta tag for Content-type, description, and keywords
Link to stylesheet(s) (don't forget to specify the media="").
<script> tag that links to external javascript files.
All tags should follow the W3C's standard. The W3C site has a more technical and detailed section about the HTML <head> section.
Do your users a favor and make their IE engine switch to Chrome one when Chrome Frame is installed :)
<meta http-equiv="X-UA-Compatible" content="chrome=1">
You'll want to put SCRIPT elements at the end of the page before the close of the BODY element. See http://developer.yahoo.com/performance/rules.html#js_bottom for details.
Besides the usual doctype, title, etc, I will try and provide you with some things I have learned and implemented that might be of assistance to you.
Firstly, remember that the title, for best user experience should have the most relevant sub section first. This is because it is usually displayed in the title bar/tab list/bookmark name. Consider this page title...
Stack Overflow - HTML head best practices
becomes Stack Overflow... (munched to save room in tab bar/bookmark list)
Now if you had 5 Stackoverflow tabs open (as I often do :P) then how would the user know which one is which?
Also note with CSS the cascading nature... So the order of these will matter. Same with Javascript, any dependencies on other external sites must be allowed for. I put mine in the head and havn't noticed a performance decrease. I put them there because it to me looks more tidy and logical. Though some other people will recommend putting the <script src=""> links in just before </body> so the browser won't temporarily stall... Just use whatever works best for your site.
Also a Meta tag of 'rating' with 'general' let's Net Filtering software know your site is safe for viewers of all ages (as long as it is, of course!)
I also use..
<link rel="start" href="/" title="Home" />
to let the browser know where the home of my site is. And for any browser prefetching systems, though I believe these are yet to be implemented by browsers without assistance of plugins.
Also consider the 'next' and 'prev' <link rel=""> if your pages are in a sequence of sorts.
First, make sure the < !DOCTYPE is the verry first element of the document, i.e. no space, tab or corrupted BOM marker.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- declare all page rendering and programmatic related tags -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Care about IE ? -->
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- globalise scripting and styling content language -->
<meta name="Content-Type-Script" content="text/javascript" />
<meta name="Content-Type-Style" content="text/css" />
<!-- title tag is MANDATORY -->
<title>Short and relevant, about 64 characters/spaces</title>
<!-- declare all CACHE controll -->
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta name="revisit-after" content="7 days" />
<!-- declare all content description tags -->
<meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1))'>
<!-- language specific keywords -->
<meta name="keywords" lang="en-us" content="vacation, Greece, sunshine" />
<!-- For french example -->
<meta name="keywords" lang="fr" content="vacances, Grèce, soleil" />
<meta name="description" content="about 255 characters/spaces WORDS relevant to the content of the actual page" />
<meta name="Abstract" content="about 96 characters/spaces PARAGRAPH describing the actual page content within your site" />
<!-- declare all situationnal and external relativity related tags -->
<link rel="DC.identifier" type="text/plain" href="http://www.ietf.org/rfc/rfc1866.txt" />
<link rel="start" href="/" title="Home" />
<link rel="prev" href="../" title="Parent section" />
<!-- declare all page rendering cascading style sheets in order of incidence -->
<link rel="stylesheet" type="text/css" href="globaly-used.css" />
<link rel="stylesheet" type="text/css" href="specificly-used.css" />
<!-- declare all page rendering specific cascading style i.e. IE only, hacks etc -->
<link rel="stylesheet" type="text/css" href="more-specificly-used.css" />
<link rel="stylesheet" type="text/css" href="i-love-ie.css" />
<!-- not relevent to subject, declare all javascripts AFTER css linking -->
</head>
<body>
</body>
</html>
I didn't see this mentioned: the <base> tag, if specified, should be the first element in <head>. (The base URI of the document is assumed to be . before/if not specified.)
IMHO, the two most important child tags of <head> are <title> and the Content Type meta tag. Search engines actively look at <title>. Whereas the other meta tags are often ignored. As a multi-lingual web user - I cannot stress more the importance of adding the Content Type tag because without it, the browser needs to autodetect the character set of the web page and this operation is often flaky. The result ends up being that various characters are not rendered correctly to the user or sometimes none at all in the case of Japanese or Chinese.
Here is an snippet of some of the header code from a current project of mine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Reports Blah Blah</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
...
</head>
There is a related question here that may help add some light regarding the order of the tags.
Generally my pages include the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>...</title>
<meta name="Description" ...>
<meta name="Keywords" ...>
<meta name="Copyright" ...>
<meta name="Author" ...>
<meta name="Language" ...>
<style type="text/css" ...>
DocType is important to enforce strict rendering (No quirks mode) by the browser. You may want to use XHTML instead - as long as there is one there. I add Copyright and Author purely because I design and create the pages for other companies. Description is for SEO, and Language is for the browser (if it supports it).
I don't believe it makes to much of a difference which meta tag comes first, or whether the title should be above. What counts in most cases is that it exists on the page, and has the correct content.
As far as I'm aware, most search engines ignore any "keywords" or "description" meta tags, instead preferring to read the content of the document.
Getting the page title right however, is of extreme importance.
Title, meta tags for keywords, content-type (if not explicitly set by the web server), and any CSS to be applied to the page.
Declaring the CSS up front allows the browser to lay out the page more efficiently (see http://developer.yahoo.com/performance/rules.html#css_top).
I would add an important note: if you're using IE's meta X-UA-Compatible tag to switch rendering modes for Interet Explorer, you must insert it as the first item in HEAD:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Page title</title>
...etc
</head>
In addition to the answers above I use the Dublin Core initiative meta-tags.
They are very useful for actual content/papers etc.
<meta name="DC.abstract" content="Document abstract" />
<meta name="DC.audience" content="Target audience" />
etc.