HTML 5 SEO Good Pratices

Posted: May 30, 2012 in Anouncements

In HTML 5 Universe when we talk about Good Pratices we always associate to the struture of our markup to be strict or to the excellent template initiative of Boilerpart (http://html5boilerplate.com/) .

But their are other good Pratices to think about when developing for the WEB…One of the things few people talk about is SEO, let’s take a look in to some good pratices for the HTML 5 and is friend SEO.

SEO & HTML 5

First of all HTML 5 per sí, is not a solution for every SEO problems and quests. From a usability perspective HTML 5 have the quality to maximize user’s experience without extra plugin’s. This is really good foremost searchbot’s since they could arawl and index our site even if we have a ritch experience (this was a gap in the RIA web app’s based on flash Silverlight and other’s).

Other good notice that HTML 5 brings to SEO are their new Tag’s, let’s take a look at some of them:

  • <article> specifies an independent block of content. The contents of an article tags should be entire self-contained. A blog post or new article could be wrapped in an <article> tag, for example.
  • <section> specifies a subsection of a block of content, such as an <article>. If a blog post was broken into several sections by subheaders, each section could be wrapped with a <section> tag. Just as books have chapters, blocks of content can have section.
  • <header> could server two purposes: (1) to specify the header of a page or (2) to indicate the header section of a self-contained block of content (an <article>). <header> tags might contain navigation, branding or the document headline.
  • <hgroup> is used to wrap a section of headings (<h1> through <h6>). A great example would be an article with both a headline and subheadline at the top:
  • <footer> is a bit like the <header> tag. It could specific the <footer> of an entire HTML document or the footer of an <article>. This may contain things like footer navigation or meta-data about an article (author, data, etc)
  • <nav> is mean to enclose site navigation. This can be used anywhere: main site navigation, previous/next article links, or pagination.
  • <aside> is for content related to the parent element in which is resides, but not strictly part of the main document. In other words,could be used on a website sidebar or it could be used within an <article> for special call outs – like the “did you know” call outs found in many books.
  • <video> is for video content. Its purpose is to provide a cross-browser compatible way to display video.

But this is just one vector of SEO in HTML 5, the other vector is maintain all the good practices you already had in the past.

i will give some off the topic’s i consider as the most important pratices to have at a SEO level that are equal true to HTML 5 as it was in the past.

Use Title Tags

The <title> tag make a web page more meaningful and search-engine friendly. In HTMl 5 consider how this relates with the different outlines you have in a page

Use Descriptive Meta Tags

Meta tags make your web page more meaningful for user agents like search engine spiders.

<meta name="description" content="This blog talks about Technology and how to understand it and live with her" />

The keywords meta attribute contains a comma-separated list of key words and phrases that relate to your web page. These keywords make your web page even more meaningful.

<meta name="keywords" content="type here your important and meanfull keywords" />

attention don’t spam your descriptions and keyword’s.

Minify, Unify and Move Down JavaScript

This is one off the most important rules that many people often forget.

Use Heading Elements in a smart way

Don’t forget that heading have also a related semantic in the outline where they live, so don’t forget to take that in consideration when choosing your headings.

 

Hope this posts help to ignite your SEO and kill some off the half trues around about HTML 5 and is relation with SEO.

Advertisements
Comments
  1. fidel says:

    Good post and desmistify some thoughts i had

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s