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.
Related
I have the following two meta tags on my website
<meta name="author" content="#vanntile" />
<meta name="twitter:creator" content="#vanntile" />
I know that I cannot use two name atributes in the same meta tag, like this:
<meta name="author" name="twitter:creator" content="#vanntile" />
My question is, is the following meta valid?
<meta name="author,twitter:creator" content="#vanntile" />
According to the HTML5 Standard, the a meta element with a name attribute expresses a single metadata name-value pair, and the name attribute contains the name part of the pair.
While the code you suggested is not invalid, it will mean the metadata pair ("author,twitter:creator" : "#vanntile"), not both ("author" : "#vanntile") and ("twitter:creator" : "#vanntile").
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 am looking at migrating over pages written in XHTML 1.0 to HTML 5 and am looking at the minimum requirements when including meta tags in the <head> element. For example, my current page which is XHTML 1.0 compliant has the following meta tags
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="copyright" content="© 2012" />
<meta name="robot" content="noindex, nofollow" />
Are the following sufficient for HTML 5 and can I also include them?
It is also my understanding that the meta element <meta http-equiv="content-language" content="en-us" /> can now be globally be applied to the <html> element.
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="copyright" content="©" />
<meta name="robot" content="noindex, nofollow" />
<title>sample code</title>
</head>
</html>
There is no such thing as minimum meta tags (unless of course I got your question wrong). As far as I am aware no meta tag is required and the ones you add are the ones for your specific needs.
Consider the following document:
<!DOCTYPE HTML>
<html>
<head>
<title>Some Title</title>
</head>
<body>
</body>
</html>
You can validate it and not get any warning whatsoever. The validator just reminds you that the default encoding is missing. This is not even a warning, just an information.
The working draft has this to say about meta tags:
The meta element represents various kinds of metadata that cannot be expressed using the title, base, link, style, and script elements.
And it goes on:
4.2.5.1 Standard metadata names
application-name, author, description, generator, keywords
Further it mentions some additional tags concerning a page's status, contextual representation and character encoding.
Although none of these ar explicitly required by the standard, there are in fact best practices, especially concerning search engine optimization (SEO). This has nothing to do with the HTML standard but with web (search) crawlers.
You can get some good advice which meta tags matter (for Google) at the Webmaster Tools meta tag support page
According to http://validator.w3.org/ the following is an absolutely minimal example of a valid HTML5 document, literally everything else is optional.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Valid HTML5 Document!</title>
</head>
</html>
So, you absolutely must have the charset meta tag defined, and everything else is a matter of accomplishing your goals (search engine related stuff, cache control, etc).
No meta tag is required by any HTML5 draft. (HTML5 is work in progress and may change at any moment without prior notice.)
Many of the tags you list, including the one with content-language, aren’t even allowed (conforming) according to HTML5 drafts. In practice, most of them are useless, but some of them are actively harmful (such as the one that excludes robots, and in most cases those that try to prevent all caching).
Your latter fragment of code is invalid: the html element must contain all other elements, and the head element must contain a title element (in all HTML versions).
Consult the newest W3C HTML5 draft and use the experimental checker http://validator.nu.
I have a company web page that I've added a Facebook 'Like' button too. I have defined the namespace for FB and OG and added in all my Metatags - my code is below. URL is www.akascia.com.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" xmlns:og="http://ogp.me/ns#">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="Akascia" />
<meta property="og:type" content="company" />
<meta property="og:url" content="http://www.akascia.com" />
<meta property="og:image" content="http://www.akascia.com/images/akascia_fb_logo.png" />
<meta property="og:site_name" content="Executive search, purely done by Akascia" />
<meta property="fb:admins" content="********" />
<meta property="fb:page_id" content="**********" />
<meta property="og:email" content="admin#akascia.com"/>
<meta property="og:phone_number" content="+44 2070 787 665"/>
However, when I run the site through the Facebook linter, I get the following results:
Warnings that should be fixed
Extraneous Property: Objects of this type do not allow properties named fb:page_id.
Extraneous Property: Objects of this type do not allow properties named og:email.
Extraneous Property: Objects of this type do not allow properties named og:phone_number.
Open Graph Object Properties
fb:admins Array of length 1
⍾ ********
og:url http://www.akascia.com/
og:type website
og:title Akascia
og:image
og:site_name Executive search, purely done by Akascia
og:updated_time 1320835017
Raw Open Graph Document Information
Canonical URL http://www.akascia.com/
Meta Tag <meta property="og:title" content="Akascia" />
Meta Tag <meta property="og:type" content="company" />
Meta Tag <meta property="og:url" content="http://www.akascia.com" />
Meta Tag <meta property="og:image" content="http://www.akascia.com/images/akascia_fb_logo.png" />
Meta Tag <meta property="og:site_name" content="Executive search, purely done by Akascia" />
Meta Tag <meta property="fb:admins" content="731575475" />
Meta Tag <meta property="fb:page_id" content="114216411121" />
Meta Tag <meta property="og:email" content="admin#akascia.com" />
Meta Tag <meta property="og:phone_number" content="+44 2070 787 665" />
So it seems that it thinks the webpage should have the og:type:webpage, even though I'm declaring as a 'company' and in the raw data it's showing it's scraped it as 'company' too. Hence it's giving the warnings for the telephone numbers etc.
The 'Like' button seems to work but I'm not 100% sure it's right. So I'm a bit confused as to why this is happening.
The current list of builtin object types is listed here: http://developers.facebook.com/docs/beta/opengraph/objects/builtin/
Company isn't in the list. Website is the default that it's falling back to, and if you scroll down the page to where it has an example for a Website Object type, you can see it doesn't list support for all your properties, hence the Extraneous Property warnings.
You can create your own object type, though, that supports any properties you want. Create a Facebook Application, and go to the "Open Graph" section. You can create an action and an object type (such as, perhaps "like" a "company"), and then go to the "Open Graph/Dashboard" to add custom properties to your "company" object type. One type of custom property is a ContactInfo that would include your phone number and such; or you could just add a few string properties that are exactly what you need. You can then click "Get Code" to copy the new set of meta tags to use on your page.
This walkthrough probably describes the process better: https://developers.facebook.com/docs/customopengraph/walkthrough/
But really, after all that, if you're happy with how it is showing up on peoples' feed when they "Like" your page, then it is probably fine the way it is. You could add an og:description tag with any extra info you want in there, and just delete the extraneous tags.
old og:type like company, product ... are deprecated. They are not included in the current OpenGraph specification.
Very few og:type are still available (website, article, video....).
If you really want to use the og:type company, you will have to declare it in your own opengraph namespace.
CF : http://ogp.me/ , http://graph.facebook.com/schema/og/ and http://developers.facebook.com/docs/beta/opengraph/objects/builtin/
(the last link was first added by Melinda Weathers)
For the fb:admin tag, try putting in a personal profile's link.
i.e. your facebook page has a profile associated with it which is an admin to the page- the ID for the profile should work.
Is it possible to combine the meta description and Open Graph Protocol description…
<meta name="description" content="My meta description copy." />
<meta property="og:description" content="My meta description copy." />
…into one when they contain the same content?
<meta name="description" property="og:description" content="My meta description copy." />
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.
Some additional info on why this is possible/allowed:
HTML+RDFa 1.1 extends 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.
So when using RDFa's #property the name is not required but it is not forbidden either, making
<meta name="description" property="og:description" content="great description">
perfectly ok according to spec.
I found this from the answer to this related question: Is it possible to use the same meta tag for opengraph and schema.org