H for Header: part 1 of the HASCH OnPage SEO framework

Each website begins with the header. There are no minimal or required values inside of it: the header content fully depends from our goals and laziness:) Another cause for poor designed headers is a meaning, that Google doesn't understand meta tags or doesn't take meta tags as a ranking factor. Well, Google says, it understands just a little amount of available meta tags. Here is Google's statement about understanding of meta tags. But i say:

use not only meta tags, which Google definitely understands,
use meta tags extensively,
be redundant in meta tags using.

Why? Just because the web contains much more as only Google and you. There are very much bots and spiders in the internet, their goal is to parse web contents and to create different indexes. The parsing criteria could be a bunch of existing meta tags and the parsing results on their part could be parsed from Googlebot. So Google gets into its index the content from your meta tags, which Google means not to understand.

Good, now we are agreed about benefits of meta tags using. The main SEO point is utilizing header rules to give the searchbot so much information about our site as possible. Now i list meta tags one by one and give the correct syntax, some possible values, and my point of view of the practical SEO effects.

17 rules of crowd experience, common sense and experts knowledge for header and meta tag optimizing

Follow them and be assured of your header's rock-solid SEO!

1. Doctype

Doctype declaration. With it begins each proper HTML document. Doctype declares, which version of HTML language is in use, and whether are any additional markup languages used, like RDF, MathML etc. The existence of the doctype declaration hasn't direct influence on the whole SEO of the site - W3C compliance isn't a ranking factor for Google. But otherwise correct HTML markup influences the rendering quality and velocity, and some tests demonstrate, that Google does prefer W3C-valid pages, so i think it is better to declare. Furthermore we want later use some new features of the current HTML version, so we better declare which version is in use, namely HTML5. The doctype declaration of HTML5 is pretty simple:

<!DOCTYPE html>

2. Namespace

Namespace declares, which vocabularies (not languages) are used in addition to HTML language. I recommend to use following vocabularies: Schema.org, Dublin Core, RDFa, Open Graph and Twitter. I will explain the benefits of the each one further, at this place we write down just a correct markup for the website head:

<html 
xmlns:schema="http://schema.org/"
xmlns:dcterms="http://purl.org/dc/terms/"
xmlns:v="http://rdf.data-vocabulary.org/#"
xmlns:og="http://ogp.me/ns#"
>

Stand-alone meta tags

3. Charset and content-type

Firstly we inform all bots about our code's type and charset. In other case they couldn't guess, whether our code is ASCII or in something other. The declarations are:

for pre-HTML5: meta content-type html, charset:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

for HTML5: meta content-type html, meta charset:

<meta http-equiv="content-type" content="text/html" />
<meta charset="UTF-8" />

4. Canonical

Secondly we inform searchbots about whether the URL it visits is canonical. I place this meta tag as first, cause Google does it in this example so and Matt Cutts recommends to insert the canonical tag as higher as possible in the head:

<link rel="canonical" href="http://undead-seo.blogspot.de/" />

Note!
Meta tags order doesn't matter! No! Not for SEO, not for anything else!

5. Robots

As the next we inform searchbots, they are welcome:

<meta name="robots" content="index, follow, archive, snippet" />

6. Crawling frequency

And here we invite the searchbots to come again after defined time:

<meta name="revisit-after" content="3 days" />

7. Styles

Let us load styles now. The sooner they load, the sooner our visitors see the page - the page loading velocity is an important SEO ranking factor. There are some techniques to speed up the loading of styles. You will find them in my detailed article about how to combine, minify and gzip CSS files.

<link rel="stylesheet" type="text/css" href="seo.css" />

Note!
Don't put Javascripts into the HEAD! I recommend not to include Javascripts declarations into the head. Javascripts will block and slow down the whole site loading. Try to include Javascript declarations just before closing BODY tag, so they can be loaded after visitors got the whole page to see.

8. Defining content language

The content language definition for the site with a single one language version is:

<html lang="en-US">

Sites with more then one language version must make use of the hreflang meta tag. Using of it in combination with geodata and some content details, which i describe further, will achieve, that Google clearly distinguish the country respectively language versions of the site and rank them proper.

<link rel="alternate" href="http://undead-seo.blogspot.de/" hreflang="en-gb" />
<link rel="alternate" href="http://undead-seo.blogspot.de/de" hreflang="de-de" />
<link rel="alternate" href="http://undead-seo.blogspot.de/" hreflang="x-default" />

Use the value "x-default" for the language version, which should be loaded if no defined language version is suitable. Dependently of the laziness level you could use this hreflang tags generator;)

9. Authorship

Who is the author of this content? There are in general two ways to notify searchbots about content authorship. Which way is to use depends on whether the author owns a profile webpage. If yes, the authorship notice looks like:

<meta name="author" content="Evgeniy Orlov" />
<link rel="author" href="http://google.com/+Evgeniy-Orlov?rel=author" />

If not - only

<meta name="author" content="Evgeniy Orlov" />

10. Content rating

What is with the content rating?

<meta name="rating" content="general" />

There are following values for this meta tag:

general (corresponds to the movie rating "PG"),
safe for kids (movie rating "G"),
14 years (movie rating "PG-13"),
mature (movie rating "R"),
restricted (movie rating "X").

It is for sure, that no search engine understands the rating meta tag. So why use it? Cause i'm sure too, that there are an amount of web spiders, which parse the web and understand this tag. And, as i mentioned before, the indexes created by these spiders could be used by search engines. So i guess the indirect SEO effect through using of rating meta tag.

Note!
Don't use cache control meta tags in the HEAD! Why? Cause the cache tags, which are working in the head, like pragma or cache-control are too general. The better way is to fine-tune your cache with htaccess. In one of the next articles introducing HASCH OnPage SEO framework i will detailedly describe the cache fine-tuning with htaccess, cause the cache control, as it affects the page loading time, is the one relevant tasks of OnPage SEO.

11. Title

Now we entitle our page:

<title>Title</title>

The title is a required element of each web document - without it a document isn't valid. The meta name title isn't mentioned in any public draft of W3C, so it will be ignored for sure from all bots. The title plays a big role in the OnPage SEO: you must use your title's word combination in exactly same and in synonymized form on some other places in the content and navigation. I will explain the details about title using in the later part of the HASCH OnPage SEO framework, if we talk about the content preparation.

Note!
Title length: 1 text line, shorter as 60 characters and, visually, shorter as 512 pixel.

12. Description

Page description is the one of the few meta tags, which are officially understood by Google:

<meta name="description" content="OnPage SEO framework" />

The description meta tag isn't a ranking factor at its own, but indirectly it influences the Click Through Rate of the page in search results, cause the description is one of the sources for the text snippet, which Google takes into the SERP. Open Directory and Yahoo Directory are the sources for the snippet too. If you want, that Google definitely takes the snippet from your meta description:

you must ensure, that you have unique meta description for each site's page.
Then use meta tags to block taking snippets from Open Directory and Yahoo Directory:

<meta name="robots" content="NOODP" />
<meta name="robots" content="NOYDIR" />

Note!
Description length:2-3 text lines, shorter as 160 characters

13. Keywords

With meta tag keywords is the same story, like i said about rating: since Google doesn't use meta keywords, other bots could use them, and Google could use the indexes created by other bots. Then what we do with keywords? I recommend to use exactly the 2 or 3 keywords, which are the main keywords for the page, like

<meta name="keywords" content="OnPage SEO, search engine optimization" />

Meta tags vocabularies

After we added all needful stand-alone meta tags to the header, we begin with describing our content with vocabularies of meta tags. In general there are 3 vocabularies of meta tags, which i use by my own and recommend to use. The SEO profit from using of them all is the same, as i described with meta tags rating and keywords: the properties of all of these vocabularies are parsed from different search bot, content indexers etc. which are on their part the source for Google and other search engines. This is the cause, why you don't be afraid to include in the page header redundant informations: some bots parse Dublin Core data, some another bots like Open Graph, and some other are targeted only on Twitter cards.

14. Dublin Core for SEO

The first vocabulary would be the Dublin Core. Dublin Core Metadata Initiative is an open organization managed as a project of an Association for Information, Science and Technology. Dublin Core metadata has 2 subsets:

Basic vocabulary: Dublin Core Metadata Element Set Version 1.1, containing basic 15 meta tags / properties, and
Extended vocabulary: DCMI Metadata Terms, which contains extended set of 66 meta tags / properties.

If using the basic vocabulary, the namespace must be defined as

<html xmlns:dc="http://purl.org/dc/elements/1.1/">

If using the extended one, define the namespace as

<html xmlns:dcterms="http://purl.org/dc/terms/">

The Dublin Core meta tag looks like:

<meta name="dcterms.audience" lang="de-DE" content="SEO experts" />

15. Open Graph for SEO

The second vocabulary that i strongly recommend to use, is Open Graph. The SEO benefit of Open Graph markup is in turning content into social object and enable its ability to multi-point connections to the social graph. Google populates with Open Graph metadata the Google Plus snippets. Dan Brickley from Google means, Open Graph can be combined with other vocabularies and brings an own value.

Open Graph vocabulary seems to me to be all to much media-oriented, but it has a number of very useful types and properties. After you explore all available Open Graph types and properties you can easily generate your Open Graph header meta tags with this tool or code them down manually. In my opinion the most useful SEO-relevant part of available Open Graph meta attributes is the possibility to describe locations in machine-readable form. Especially with latitude, longitude and zip code is it possible to make very significant statement (in addition to the value of hreflang meta tag), which lets Google exactly assign the site to the location. I don't need to mention, how valuable is such exact assignment for the local SEO!

16. Twitter Cards for SEO

Twitter Cards are based on the same conventions as the Open Graph, they look similar too. If a searchbot targeted to parce Twitter Cards it checks firstly Twitter Card properties, and then reads Open Graph tags. If Twitter Cards markup isn't present at all, the Twitter Cards targeted bot will read Open Graph. Using of Twitter Cards meta tags or markup doesn't need any namespace declaration, as Open Graph does. Twitter Cards uses "name", while Open Graph uses "property", but combined markups are allowed. The main thing to avoid parsing errors is to use prefixes properly:

<meta name="twitter:creator" content="@undead_seo" />

but

<meta property="og:title" content="HASCH the OnPage SEO framework" />

Twitter Cards protocol has a fine unique specialty: user can define two custom fields for presenting any kind of information, e. g. product price. Twitter offers generating / validating tool for Twitter Cards meta tags and markup. The SEO win of Twitter Cards using is supply of machine-readable informations for the social graph.

tl;dr

In this article i described what must contain a search engine optimized website header. Anybody using these directives can be sure to get anything done, what belongs to the SEO of the website header.

"H for header" was a first part of the HASCH the OnPage SEO framework. to be continued

☠ Undead SEO ☠
Advanced SEO: tools, techniques, thoughts

Freitag, 27. Juni 2014