Image credit: Dominicspics

Well, no one can truly predict the future but by looking at recent past developments we can certainly find a general trend that we are all starting to follow. In my first post as an seo consultant at SEOGadget I will be looking into the use of HTML 5 and (Richards favourite) Micro Formats.

HTML5 – What’s New?

Ok let’s start off with HTML 5 and the introduction of new elements and attributes which not only make a webmasters job a lot easier and more flexible, but more importantly provide a greater context about the content contained on a web page.

For example here are some of these new HTML 5 elements:

• <nav>
• <footer>
• <audio>
• <video>

Although W3C standards are a set of generic website guidelines which do not necessarily influence SEO directly, the mark up can to some extent be understood by search engines e.g. they expect to see a website header, navigation, content area and some kind of footer. Back at the start of 2009 Dave Harry wrote a great post on page segmentation concepts and how search engines are able to identify common elements on page to determine a framework for a website.

As a result of HTML 5, areas of a web page can now be more easily defined which in turn will provide a solid framework of a page to search engines. In doing so will at the same time provide more specific detail of the content contained on a given web page, which search engines can then use to their advantage in their algorithms.

The Launch of Rich Snippets (Micro Formats, Micro Data and RDFa)

The developments in Micro Formats (as well as Micro Data and RDFa) are also part of an evolutionary chain to provide even greater detail about specific pieces of content on a web page. When Google launched rich snippets back in 2009, support for some micro formats was introduced and as a result these have gradually been incorporated within some types of search queries.

Here are some Micro Formats which are currently supported to some extent by Google:

• hReview-aggregate – This property provides a generic average rating based on the data within individual hreview listings. Attributes include rating, count, and summary.
• hReview – Describes individual review listings with attributes including rating, reviewer, dtreviewed (ISO date format) and description.
• hProduct – Describes an individual product with attributes including fn (name), brand, category, price, description and photo.
• hCalendar – Describes an event including attributes location, dtend (ISO date format) and duration (ISO date duration).
• hRecipe – Describes a specific recipe with attributes including ingredient, instructions, duration and photo.
• hCard – Describes contact/profile information with attributes including fn (name), email, logo, photo, and url.

These micro formats can all influence the information presented on search results. For example a combination of hreview-aggregate, hreview and hrproduct (which could typically be used to describe a product on an ecommerce website), can produce a listing with rating information pulled in:

An example listing of hcalendar incorporated within a web page:

An example of a search result including hrecipe and hreview-aggregate:

An example of a search result incorporating hcard:

Although these are the only Micro formats that we have seen influence search results to date, there is still a number of attributes which although supported do not provide a direct impact on the display of search results and are currently under-going testing.

For example if we take the hproduct property, we have the ability to add attributes such as category, price and photo which currently do not bear any impact on the display of product page search results (although hproduct can be incorporated alongside hreview to display the price), but the attributes themselves are supported by Google.

Could this be an early indicator from Google that micro formats will be playing a more influential role in the development of search listings?

As the idea of micro formats is to provide even greater detail about specific content contained on a web page (as a set of standards), you can clearly see why search engines such as Google have jumped in and developed their search results to display this data. By encouraging webmasters to include micro formats, Google will be able to understand more about the content contained within a website, and could use this information to further judge the relevance of a website to different search queries and provide an insight into developing new potential products.

A recent article on readwriteweb.com – ‘Google’s Semantic Web Push: Rich Snippets Usage Growing‘ also indicates the growing popularity of rich snippets and how Google is trying to encourage web masters to introduce this on their websites.

If we then combine this with news that micro formats 2.0 discussions are already under way to simplify the integration, could this amplify Google’s quest for a greater understanding of website content.

The Evolution of Content is King

In a “Content is King” SEO world how can Google look to evolve this one key strategy to create even more relevant results for its users?

Google have reached out directly to the guys behind the internet, website developers/designers/owners and encouraged the use of even simpler coding with HTML5. A great article at Techcrunch on Google’s HTML5Rocks explains how Google is one of the major players pushing the development of HTML5.

The integration of rich snippets and support for Micro Formats, Micro Data and RDFa is another step to encourage webmasters for the change in mark up by displaying more informative search listings in their rankings.

When you combine the two and look behind the scenes Google have been very clever in gradually integrating a format which will ultimately provide them with a lot more knowledge on the structure and content of websites. This will undoubtedly become an influential factor within the rankings, and future services provided by Google.

The developments in website mark up and rich snippets go a long way in providing a greater insight into the future evolution, not only in SEO but the internet as a whole.

———–

Hope you enjoyed my first post on SEOGadget, it would be great to hear your feedback!
Daniel

Google’s Underlying Plan for HTML5 and Rich Snippets is one of our latest posts from: SEOgadget.co.uk, UK SEO consultants helping people and organisations succeed in search.

Image credit: KennyMatic

If you’re playing around with SEO based Microformats recommendations for your clients, you might have considered how exactly to test and present those recomendations. What things can you do before sending off an SEO consultation document with Microformats change requests to make you feel confident that your recommendations will work, should Google begin parsing your Microformats in to the search results pages?

The very simple answer is to set up a test page all of your own, and demonstrate the validated test to your target audience. Here’s how:

Start with a template

Examples like the ones below can be found pretty easily – there are a ton of useful templates for hReview, hProduct, hCalendar and so on to be found on Microformats.org:

<div class="vcard">
   <img class="photo" src="http://www.example.com/bobsmith.jpg" alt="Photo of Bob">
   <p><strong class="fn">Bob Smith</strong></p>
   <p><span class="title">Senior editor</span> at <span class="org">ACME Reviews</span></p>
   <p class="adr">
       <span class="street-address">200 Main St</span><br>
       <span class="locality">Desertville</span>, <span class="region">AZ</span>
       <span class="postcode">12345</span>
   </p>
</div>

Source: http://microformats.org/wiki/google-rich-snippets-examples

Upload your template to a test / ftp site

Once you’ve found a template that covers the elements you’ll need for your webpage, you’ll need to save a local copy of the template and start adding the data. It’s good to use actual client data in your example so the web development team don’t have to spend too much time unpicking the details of the request. Identify your class attributes (elements), and using copy and paste, start adding reviewer names, ratings, product names or whatever else floats your fancy.

Here’s one I made earlier – a simple webpage containing the bear (that’s no typo) minimum data and content you need to demonstrate your point.

Demonstrate the example using the rich snippets testing tool

While we’ve been working with the tool we’ve noticed some weirdness with the testing process. Firstly, if you’re refining a template and refreshing the testing tool, there seems to be some kind of caching where the tool doesn’t always fetch the latest version of the file. Granted this could be caching on either our hosting or Google’s servers (I’m not sure), but what is totally weird, is that on refresh, entire elements of the Microformatted data can disappear and reappear in Google’s rich snippet testing tool!

If you use the tool a lot you’ll know what I mean – beware. Anyway, your finished product should look a little like this:

Identfiy the same data on the current webpage

For the more hardcore, you could save a version of a clients webpage, change a bunch of class attributes and see if you can make an almost live example for them. If you haven’t got the time to do that (it takes a while sorting out the CSS etc), then create a simple Snagit of your target page with some of the Microformat elements highlighted:

Providing the template, and a guide to where the data currently sits on the page should easily be enough for you to master Microformats and get your clients up to speed too. Have fun with Microformats! One last thing – but definietly not least, I’d like to thank Daniel for his help writing this post.

Simple Testing Strategy for Microformats Implementation is one of our latest posts from: SEOgadget.co.uk, UK SEO consultants helping people and organisations succeed in search.

I’ve written about HTML5 and SEO before, but it’s nice to have your own examples, so I’m delighted to show off the first version of SEOgadget in HTML5 – take a look at the source code!

I think (as a learning / development piece) there’s still some way to go with this site, and there are a few remaining items left for us to resolve – but as a learning exercise it’s been extremely interesting to make this happen. Under the bonnet you might see some of the following tags:

• <header> (Specifies a header for a section or page)
• <article> (Specifies an article)
• <aside> (Specifies content aside from the page content)
• <footer> (Specifies a footer for a section or page)

I’d just like to thank ThinkDave who custom built the SEOgadget WordPress theme and is a smart, patient guy!

Some resources on the topic of HTML5

Building Web Pages With HTML 5 – Webmonkey

Coding a HTML5 Layout from Scratch – Smashing Magazine

HTML5 Examples – SEOgadget

HTML5 Specification – W3.org

5 Clever uses of the CANVAS tag – CSS Ninja

HTML5 Canvas Examples – PHPguru

HTML5 Boilerplates – HTML5 Doctor

GeoLocation API - Dive Into HTML5

HTML5 Video Examples – html5video.org

Feedback

I’d be really delighted to hear your thoughts, feedback and ideas – give me a shout in the comments below!

SEOgadget Gets a HTML5 Upgrade is one of our latest posts from: SEOgadget.co.uk, UK SEO consultants helping people and organisations succeed in search.

This post looks at a few small Microformats that you might be using already…

Image credit: Kevin Dooley

Elemental and Compound Microformats

Perhaps you don’t realise that the chances are you’re already using elemental Microformats in your day to day lives as SEO’s. Elemental Microformats can be joined together to create compound Microformats such as hCard, hReview and hEvent. As I write this post, those 3 compound Microformats are the only formats supported (via a not yet fully automated review process, I think) by Google. In this post we examine link based Microformats that do and do not (but perhaps should) have an impact on your search engine rankings.

Rel vs Rev – What’s the difference?

Firstly, there’s a small point to make on the types of attributes you can use for your Microformat rich links. You can insert two attributes into your link and anchor elements: rel=”" or rev=”". According to the rel-faq on the Microformats Wiki,

“rel” describes the relationship of a hyperlink in terms of what the destination (href) is, to the source, or from the source’s perspective. rel=”stylesheet” is perhaps the easiest example to understand in this manner, because it is saying that this resource over there (indicated with the href) is a “stylesheet” for the current document.

Then what does “rev” mean?

Rev indicates a relationship of the linked to document, back to the linked from document. Here’s how they put it at Microformats.org:

“rev” is the precise opposite (or “reverse”) of the “rel” attribute. E.g. a rev=”help” link indicates that the current document is “help” for the resource indicated by the href.

Now we’ve got that point out of the way, let’s take a look at some of the individual Microformats and how they can be applied in a link

rel=”licence”

The rel=”licence” Microformat is an open format for indicating content licenses which is embeddable in HTML or XHTML, Atom, RSS, and arbitrary XML. This is the standard for which we’re advised to markup Creative Commons attribution. Want to attribute a Flickr image correctly? You could do a lot worse than use ImageCodr, a tool that will choose your licence and mark up the attribution perfectly.

Here’s an example:

This work is licenced under a Creative Commons Licence.

The code for which looks like this:

<a rel="license" href="http://creativecommons.org/licenses/by-nd/2.0/uk/">
<img alt="Creative Commons License" style="border-width:0" src="http://creativecommons.org/images/public/somerights20.png" />
</a><br />This <span xmlns:dc="http://purl.org/dc/elements/1.1/" href="http://purl.org/dc/dcmitype/Text" rel="dc:type">work</span> is licenced under a
<a rel="license" href="http://creativecommons.org/licenses/by-nd/2.0/uk/">Creative Commons Licence</a>.

rel=”nofollow”

The use of the rel=”nofollow” element is probably one of the most famous and often contentious issues to touch our industry, but did you know rel=”nofollow” is in fact a Microformat, developed in 2005 by Matt Cutts and Jason Shellen? You did? Great! Even back in 2005 rel=”nofollow” was amongst the most frequently (6th most to be exact) occurring “relationship” attributes on the known Internet (Source, Google Code, 2005). This April 2009 post on Linkscape data at SEOmoz found around 2.7% of their index contained nofollowed links.

Votelinks

Votelinks, “vote-for” “vote-abstain” and “vote-against”, represent agreement, abstention or indifference, and disagreement respectively.

In this example, found via the Microformats Wiki page on Votelinks, the “vote for” button uses rev=”vote-for” to indicate the link represents a supporting vote to the page it is linked from (hence the “rev” instead of “rel”):

Here’s what the full code looks like:

<a class="left_value " rev="vote-for" href="/auth/login?dest=http%3A%2F%2Fjyte.com%2Fcl%2Fi-seldom-use-the-shuffle-feature-on-digital-audio-players"
rel="nofollow" id="votes_left" style="background-color: pink;">
<span style="color: rgb(255, 255, 255);" id="votes_left_text">4
</span></a>

I’m dubious as to the practical search engine optimisation value of this particular Microformat, although in principle the idea of expressing how far you agree with a page by linking to it is an interesting point.

rel=”tag”

The rel=”tag” attribute simply indicates that the link is an “author-designated “tag” (or keyword/subject) for the current page”. You’ve got to wonder how the passing of PageRank could be affected by the insertion of this attribute in to your tag cloud links. I’ve never tested for it, and I doubt I’ll ever get time to. Certainly some blog platforms support this format “out of the box” or you can get plugins for platforms such as WordPress that support the rel=”tag” attrbute in their output. Mine doesn’t, although the URL structure of the tag pages indicate what they are.

Here’s an example of rel=”tag” in action taken from the Microformatique blog.

<a href="http://technorati.com/tag/microformats" rel=”tag”>microformats</a>

rel=”me”

I think rel=”me” is amongst the most interesting Microformats at the moment. As the Microformats Wiki page states: ” rel=”me” is used on hyperlinks from one page about a person to other pages about that same person”. Why is that important? According to some, Google may well be using this as an indicator for establishing relationships for its Social Search results and that you can use the attribute to create a “social hub on the open web”. Some have observed strange behaviour however. Marshall Kirkpatrick (Editor: ReadWriteWeb) warns his readers to implement the tag carefully to avoid changing the way you rank for your own name.

Google do include this Microformat in their own pages. If you check out the links on my Google profile page, you’ll see each link to my social profiles use the attribute in the external links. I’ve also added it to the links from this blog to my Posterous, Twitter and Linkedin profiles, like this:

<a rel="me" href="http://richardbaxter.posterous.com/">Posterous</a>

rel=”home”

By adding rel=”home” to a hyperlink, a page indicates that the destination of that hyperlink is the homepage of the site in which the current page appears. It’s questionable what “SEO value” this one adds, although you could imagine that rel=”home” might be a useful indicator for the canonical version of a homepage (think: default.htm, index.html etc) although (of course) we already have the canonical tag!

Here’s an example, although I’m yet to decide if I’m going to put this on my blog:

<link href="http://seogadget.co.uk" rel="home" />

So, as you can see, elemental Microformats are all around us and you’re probably using some of them already. Where some are more interesting or easier to implement than others, it’s definitely interesting putting some though in to how these attributes could impact the way search engines perceive the links on your pages.

Update 26th May 2010

rel=”friend”

Rel=”friend”, part of the XFN – The XHTML Friends Network is now being parsed by Google to establish relationships between Facebook accounts:

Here’s the code for that grey rich snippet, highlighted in red:

<a title="Chantal Lulu" rel="friend" href="http://fr.facebook.com/people/Chantal-Lulu/717474542" class="title">Chantal<wbr></wbr> Lulu</a>

Thanks very much to Micheal Cottam for the heads up on this new Google rich snippet feature!

If you’re interested, here’s a complete list of all rel= values that could be inserted into your HTML links.

Applying Microformats to Links – You're Probably Doing It Already is one of our latest posts from: SEOgadget.co.uk, UK SEO consultants helping people and organisations succeed in search.

Image credit: Hamad M

What is the hRecipe Microformat? [Definition]

hRecipe is a simple, open, distributed format, suitable for embedding information about recipes for cooking in (X)HTML, Atom, RSS, and arbitrary XML. hRecipe is one of several microformats open standards.

http://microformats.org/wiki/hrecipe

Recipe websites are extremely popular on the internet, and it’s actually quite a competitive industry to be part of. So why wouldn’t you investigate the use of hRecipe on your site?

hRecipe example

Google demonstrate this result in their announcement, and as we see the new Google UI rollout, I wonder if we’ll see a “recipes” link in the left hand options menu as more websites adopt a similar approach.

Using hRecipe in WordPress

If you have a WordPress blog, you’re in luck. Dave Doolin has written a plugin for WordPress called hRecipe. The plugin integrates with WordPress and allows you to insert a recipe into any WordPress post page. The editor looks like this:

To test the output generated by the plugin, and to produce some quick and easy example code, I thought I’d borrow this recipe for my favourite cake.

<div class="hrecipe">
<h2 class="fn">Recipe: <a class="url" href="http://www.bbcgoodfood.com/recipes/7380/banana-cake">Banana Cake</a></h2>
<p class="summary"><strong>Summary</strong>: <em>Moist banana cake, easy to make and uses up overipe bananas</em></p>
<div class="ingredients">
<h4>Ingredients</h4>
<ul class="ingredients">
<li class="ingredient">2 ripe bananas  (overipe is best) 170g caster sugar 170g self raising flour 170g soft margarine 3 eggs Few drops of vanilla essence</li>
</ul>
</div>
<div class="instructions">
<h4>Instructions</h4>
<ol class="instructions">
<li>Use a food processor Pre heat oven to 160C / gas mark 3  Add all ingredients and blend until well mixed  Pour into lined loaf tin  Bake for 1 hour  Cool and enjoy  If you are a nut lover, once ingredients are blended add 60g chopped walnuts and blend in to the mixture</li>
</ol>
</div>
<p class="duration"><span class="hrlabel">Cooking time (duration): </span><span class="hritem">90</span></p>
<p class="yield"><span class="hrlabel">Number of servings (yield): </span><span class="hritem">8</span></p>
<p class="mealtype"><span class="hrlabel">Meal type: </span><span class="hritem">snack</span></p>
<p class="tradition"><span class="hrlabel">Culinary tradition: </span><span class="hritem">English</span></p>
<p class="myrating">My rating:<span class="rating">5</span> stars: ?????</p>

Putting it to the test

Sadly, Google seem to be extremely slow when it comes to responding to completed rich snippets testing form submissions. Regardless, if you can get the Google team to review your site and include hRecipe rich snippets in your search results pages, it’s quite possible you’ll get a competitive edge in the organic click through rate for your site. At the moment I’m not seeing this implementation in the UK, but it’s bound to follow the US soon.

Microformats: Mark-up Your Recipes Online With hRecipe is one of our latest posts from: SEOgadget.co.uk, UK SEO consultants helping people and organisations succeed in search.

Image credit: Oimax

We’ve looked at ways to implement the hCard Microformat already, so today, let’s take a look at the hReview Microformat.

What is the hReview Microformat? [A Definition]

hReview is a simple, open, distributed format, suitable for embedding reviews (of products, services, businesses, events, etc.) in HTML, XHTML, Atom, RSS, and arbitrary XML.
http://microformats.org/wiki/hreview

hReview is a component of the Microformats standard. Microformats are purely frameworks created to best describe a type of data, be it an event, an address, a review and numerous others. By inserting the attributes defined by the standard into your source code, the data you’re presenting in the web page becomes more easily understood by search engines that support interpretation of the format. hReview is ideal for any site that contains user generated review based content. Slightly confusingly, RDFa and Microformats are different disciplines, I’ll use an RDFa example later on but in the meantime this is a good primer on the differences between the two. Google understands both, so you really just need to make a decision on which approach to take.

A typical piece of markup containing hReview attributes

Rather usefully, Google have provided a crash course in applying hReview to your web pages. From their guide, here are the properties that Google can recognise:

Thanks to this very useful Knol on Rich Snippets, I learned that the pricerange property is unofficially supported allowing us to show general price ranges associated with a business or product in listings, too.

Here’s some example markup using all of the properties mentioned in the table above:

<div class="hreview">
   <span class="item">
     <span class="fn">Google Nexus One</span>
   </span>
   <span class="rating">3.5</span>
   <span class="reviewer">Richard Baxter</span>
   <abbr class="dtreviewed" title="20100110">January 10th 2010</abbr>
   <span class="summary">"Great so far..."</span>
   <span class="description">"The phone syncs easily with a Google account, in fact,
   you should definitely have a Google account before you get this phone. If you use Google
   calendar and mail, the phone regularly pulls new mail and calendar items to your phone."</span>
</div>

Aggregate reviews

An aggregate review summarises the average sentiment of multiple reviews. If you have 4 reviews of differing values, an aggregate can be used to markup that summary. Typically you’ll find an aggregate review included in a vCard (address, pricerange etc) implementation at the top of the review page.

<div class="hreview-aggregate">
   <span class="item">
     <span class="fn">Google Nexus One</span>
   </span>
   <span class="rating">Rating: <span class="average">3.5</span>
   out of <span class="best">5</span>
   </span>
   based on <span class="count">35</span> reviews.
   </span>
</div>

Don’t forget you can do all of this with RDFa too, for which Google provides all you need to know in this webmaster help page.

Life is better with examples

It can be quite difficult finding actual working examples of the implementation that have been accepted into Google’s search results as “rich snippets”. You can start by taking a look at the “hReview examples in the wild” page at Microformats.org, though inclusion on the microformats list far from guarantees inclusion in Google’s SERPs. Sometimes it’s easier just to do a few Google queries:

Here’s a rich snippet from website menuism.com:

On the web page for this result, we can see examples of review attributes in the source code inside a vCard implementation:

Here’s a result I found while searching for a Google Nexus One review:

Where this review website uses an RDFa implementation to markup and aggregate user reviews.

Yelp.co.uk use a combination of vCard and aggregated hReview markup to get this result:

Yelp also use the pricerange property (mentioned above) which appears next to the aggregated review in the search result.

(Very) Useful resources

Once you’ve implemented hReview on your website, you might wish to test and tweak the markup using Google’s Rich Snippets testing tool. As soon as you’re happy with the results, try submitting your site to Google through their rich snippets feedback form. Here are some highly recommended resources for further reading:

Know your hReview – Microformatique (John Allsopp)

About Review Data – Google Webmaster Help

Google Rich Snippets: Ratings that Don’t use a 5 Point Scale – Kavi Goel’s Knol

Google Rich Snippets Tips and Tricks

hReview Specification – Microformats.org

hReview Examples in the Wild – Microformats.org

Using the hReview Microformat for your Review Pages is one of our latest posts from: SEOgadget.co.uk, UK SEO consultants helping people and organisations succeed in search.

Photo by: Mango Escobar

Why HTML5?

HTML 5 is “the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).” W3C Working Draft 10 June 2008. The new language is generally considered a step forward from the previous version, HTML 4.01. Basically, HTML 5 is being created to fix some problems and improve “interoperability” between different “user agents”. In plain English, this means a few things:

• HTML5 will allow for better cross browser compatibility between mobile, desktop, netbook, pda, Ereader and whatever else can display a web page
• HTML5 gives web developers new functionality to make for a more dynamic, improved user experience
• The language should allow for some performance improvements in page load as the need for additional code in web pages is thinned down a little

All in all, HTML5 sounds like a good thing and there has been much more mainstream coverage of the language’s development of late. Wondering what’s under the bonnet of a HTML5 page? I found some live HTML5 examples for you to take a look at:

“Embedded” Video

HTML5 allows for embedded video content inside the <video> tag. Interestingly there’s some debate as to which codec should be used as standard, read more on that here. In the meantime, here’s an example of a HTML5 embedded video, where the browser is able to display the MP4 file just like it would an image:

Note the <article> and <footer> elements in the source – we’ll get back to those later.

Youtube have built a HTML5 demo version of their site and use much the same markup to embed a video file in MP4:

Another awesome example of HTML5 video players is the new Sublime HTML5 video player which, I believe is still in beta but demos nicely in Google Chrome: http://jilion.com/sublime/video

Document structure

HTML5 gives us a more disciplined framework to define basic web page layout. We mentioned the <article> and <footer> elements earlier. Here’s how the specification intends a HTML5 page to be structured:

To show you just what a HTML5 web page looks like, what better example could we choose than a HTML5 WordPress theme?

In this screenshot, we see the <header> element opened and closed, rather than something like my site, which would uses <div id="header"> to do the same thing:

You can see the <article> element begins slightly below the <nav> element, all new elements introduced by HTML5. It’s worth noting at this point that a large scale implementation of these HTML5 elements would greatly reduce the typical inconsistency between different front end web developments, allowing for (potentially) better block analysis by the search engines, a different approach to on-page SEO and easier HTML / web page scraping with XPath.

Here’s a <footer> element out in the wild which, again is new to HTML5. You’ll also notice the rel=”tag” attribute:

Rel=”tag” is a Microformat that you could read more about on Microformatique, John Allsop’s blog. John is author of Microformats: Empowering Your Markup for Web 2.0 – worthwhile reading if you’re looking to max out your Microformats knowledge!

This blog

Yep – SEOgadget is a HTML5 WordPress blog. We’ve not actually announced this as of the 22nd July 2010 while a few styling issues are sorted out, but take a look at the code for yourself!

Editable content

I enjoyed playing with this example of HTML5 driven editable content. On a HTML5 editable page,  the content contributor can add and edit text on the web page, without having to use an editor. Typically, a Wiki or Web page editing tool today would force the user to a new “edit” page, while often demanding basic knowledge of WikiMarkup or basic HTML. In this example, a visitor is able to edit text live on the page. This could have some impressive implications for public, collaborative web page editing:

RGraph / HTML5 Canvas Graphs

Using a combination of the HTML5 CANVAS tag and some clever JavaScript, RGraph allows the web developer to construct graphs on the fly inside the browser. Typically, this would have been carried out by the web server or an image would have to be embedded in the document. As RGraph constructs its graph in the browser, page load time is significantly improved and the charts can be interactive!

From the RGraph website:

RGraph is a HTML5 canvas graph library. It uses features that became available in HTML5 (specifically, the CANVAS tag) to produce a wide variety of graph types: bar chart, bi-polar chart (also known as an age frequency chart), donut chart, funnel chart, gantt chart, horizontal bar chart, LED display, line graph, odometer, pie chart, progress bar, pseudo radar chart, scatter graph and traditional radar chart.

Here’s an example, but I recommend you check out their site to examine the interactivity of the charts:

Browser GEO Location

HTML5 makes use of the Geo Location API allowing “scripted access to geographical location information associated with the hosting device”. Here’s a live example of just that:

Try visiting FindMebyIp.com’s “IP Address” details page with your Firefox 3.5 browser. You’ll see the page grab your IP address, GEOLocation and Map location thanks to Browser GEO location.

If you’re interested in more HTML5 examples, I recommend you take a look at these sites – have fun!

5 Clever uses of the CANVAS tag – CSS Ninja

HTML5 Canvas Examples – PHPguru

HTML5 Boilerplates – HTML5 Doctor

Coding A HTML 5 Layout From Scratch – Smashingmagazine.com

HTML5 and the Future of the Web – Smashingmagazine.com

How HTML5 Will Change the Way You Use the Web – Lifehacker

HTML5 Examples in the Wild is one of our latest posts from: SEOgadget.co.uk, UK SEO consultants helping people and organisations succeed in search.

Microformats have been around for a while and there’s plenty of evidence that search engines wish to continue supporting the emergence of these standards in an effort to better dissect the web’s information. In fact, some known search engineers are directly involved with Microformat development.

Making sure there’s enough support for webmasters and SEO’s, Google have gone so far as to give  tools to test Microformat implementations on webpages and there’s definitely a feeling from all of the search engines that structured data is part of their future.

What direction are Microformats taking us in? Here’s a selection of Microformats old and new that have useful SEO applications, today.

My favourite (approved) Microformats

Based on Microformats.org’s specifications page, here’s a list of all current, stable Microformats:

- hCalendar (creator)

A simple, open, distributed calendaring and events format, using a 1:1 representation of standard iCalendar. Good for sites that describe events, with a markup for start time, end time, location and many other options.

- hCard – (hCard creator)

A simple, open, distributed format for representing people, companies, organizations, and places. I use this particular format to markup the contact details on my jobs pages, based on a guide to using hCard I wrote.

- rel-license

An open format for indicating content licenses which is embeddable in HTML or XHTML, Atom, RSS, and arbitrary XML. This is the standard for which we’re advised to markup Creative Commons attribution. Want to attribute a Flickr image correctly? You could do a lot worse than use ImageCodr, a tool that will choose your licence and mark up the attribution perfectly. Nice.

- rel-nofollow

By adding rel=”nofollow” to a hyperlink, a page indicates that the destination of that hyperlink SHOULD NOT be afforded any additional weight or ranking by user agents which perform link analysis upon web pages (e.g. search engines). You might be interested to see that Matt Cutts was a concept contributor for this standard.

- rel-tag

By adding rel=”tag” to a hyperlink, a page indicates that the destination of that hyperlink is an author-designated “tag” (or keyword/subject) for the current page. Note that a tag may just refer to a major portion of the current page (i.e. a blog post). Yahoo announced support for this on June 11th 2009.

- VoteLinks

“Indexing and tracking applications treat all links as endorsements, or expressions of support. This is a problem, as we need to link to those we disagree with as well, to discuss why.”

By including the attributes: rev=”vote-for” or rev=”vote-against” we can indicate in the hyperlink whether we agree with the sentiment in the linked to post, or not. Cool.

- XFN - XFN creator

XFN is a simple way to represent human relationships using hyperlinks. WordPress (allows? – I haven’t checked for a while) you to indicate your relationship to the linked to site in your blog roll. Are you a friend, colleague, family? That’s what XFN does.

Draft Microformats – the future looks structured

These Microformats are draft status, essentially meaning, use them, but they might change. That’s not a problem as most front end developers would likely agree. Microformats are reasonably easy to implement if you understand them, so what’s the risk in getting there early? I’ve included the ones that caught my eye, and the one’s I’ll probably use somewhere sometime soon.

- Geo

For marking up longitude and latitude. Tripit has a very good example of this – check the source in your contacts list.

- hAudio

Adding a link to a music file, say, an MP3 in your web page is great for people, but not so much for search engines. Use this markup to define details such as artist, production date, duration and thumbnail image. Could be very useful if you’re optimising for Google Music.

- hRecipe

Who’d have thought recipes would get their own Microformat? No longer are the subtleties of a pinch of salt or a miggins of lark’s tongue a mystery to search engine crawlers. Recipes have a markup, so will this mean recipe search wilget smarter?

- rel-Home

Rel-home indicates a hyperlink to your site homepage. One for testing, perhaps a search engine engineer might use this to determine the level of relevance passed by a specific type of anchor text?

- hResume

hResume is a microformat for publishing resumes and CVs, developed by jobs board provider Madgex, it’s reported to be in use by Guardian Jobs CV matching functionality. I know from my own experience that CV parsing has historically been a challenge, so all standards to describe candidates, their experience, work history, location and qualifications are most welcome.

There’s no doubt about it, Microformat standards are expanding their reach rapidly. With search engines looking for ever more meaningful data in webpages, I’m glad the Microformats team is here. On page SEO is about to get a lot more interesting…

Draft Microformats – the Future Looks Structured is one of our latest posts from: SEOgadget.co.uk, UK SEO consultants helping people and organisations succeed in search.

On this, the last meaningful day of Summer in the UK I say, thanks be to Google for giving us their Rich Snippets Testing Tool allowing even us mere mortals to view and tweak a rich snippet result after implementing a structured markup modification on a site.

On the news of the release, Barry Schwartz at Search Engine Land writes:

Brian Ussery spotted that Google released a beta version of the Rich Snippets Testing Tool that does just that. What is interesting is that you can plug in any URL, not just URLs that you own via the verification process in Google Webmaster Tools, and preview the snippet data.

Here’s the preview of one of the job postings on SEOgadget.co.uk:

Google points out that “there is no guarantee that a Rich Snippet will be shown for this page on actual search results.” and helpfully advises: “For more details, see Documentation“. Fair enough.

I’ve already learned a lot from reviewing a few of my own results. A tool like this can really inspire a “penny drop” moment or two, an experience I’ll be taking note of ready to make some changes to my hcard markup in the very near future.

Google launches Rich Snippets Preview Tool (RDfa) is one of our latest posts from: SEOgadget.co.uk, UK SEO consultants helping people and organisations succeed in search.

Photo: AsGood

Ever since I started doing SEO, I remember coming across “The Future of SEO” style blog posts, taking a punt at what the future might hold in store for Search Engine Marketers. Among some of the more recent posts on the topic, Rand at SEOmoz gave a lot of weight to user data and the social graph beginning to play a role, while, over at SES San Jose, experts discussed subjects ranging from search query refinement for better results quality, to understanding semantic intent in search queries and the mechanics of mobile search.

The Future of SEO

No SEO blog would be complete without at least one post on the subject of the future of SEO, so I’d like to put my thoughts out there too – feel free to feedback, comment and add to the discussion. The “future SEO” subject I’m feeling most passionate about at the moment is the use of structured, uniform markup to highlight data in web page development and how this could impact search user experience, and on page SEO.

I’m talking about the introduction of standards such as Microformats, RDFa, HTML5, the Common Tag and thinking about the likely impact on search results these structured data formats will have.

What is structured data?

Let’s imagine a website that contains products, reviews and prices. Our imaginary website has been lovingly crafted in W3C compliant HTML, offers a great user experience, generates heaps of revenue and has plenty of authority according to Google. For a search engine, there’s a wealth of product and price data to crawl and display in search results for users. As a result of a predictable, consistent code build and good solid levels of authority, we begin to see details from product pages (such as price) appear in search results:

Today, the way a search engine “sees” the information it gathers from one website can be quite different to the way it sees another. That’s because the data is very likely to be marked up differently. This is no problem for users as they’re unaware of the differences found in the page code, but it’s a challenge for search engines looking to enhance and develop their search results pages.

Consistency and standards are the key

Imagine a world where important data, such as prices, reviews and dates are all identified in a more consistent way across the internet via a uniform approach to semantic markup. What you need are Microformats, RDFa and HTML5 – all standards that will or are enabling search engines to interpret data more easily.

Search engines and structured data playback

We’re already seeing search engines developing different ways to playback search results pages to users, with the intention of presenting information in a more useful and meaningful way. If search engines are more able to discover and understand the data being collected, they’re in a much stronger position to play back that data in their search results.

In May 2009 Google announced their support for RDFa and Yahoo had already been working on this for a year or so via the Search Monkey application, with early example implementations in sites such as Linkedin and Yelp.

So if we’re already seeing search results changing as a result of more structured data on the web, what examples can we see to prove search engine companies intentions towards more meaningful, structured and information rich results?

Google Squared

Google previewed Google Squared at the Searchology conference back in May 09.

According to Search Engine Watch, “Searching via Google Squared means searching for pure information.”.

SEW hit the nail on the head with that quote, but sadly for Google, the data has to exist in the first place! Take the example above for “resturant in London“.

Out of the first 4 results on the page, only 1 address has been found and there’s really very little alternative information to work with. No menu data and critically, no reviews. Further acceptance and processing of Microformats standards such as hreview could address this small problem quickly and easily, and give search engines the data they need to create a more convincing search experience.

Prices from the page

About a week ago we started seeing an option in Google search using the “show options” link.

This is an example of Google playing price data back to the user, though laterooms.com do not appear to be using the standards we’ve discussed so far in their page build.

“Prices from the page” options are definitely an early sign of Google’s longer term intentions to develop a richer, informative experience on their serps, though without webmasters implementing a more structured approach to their code, progress could be slow.

My future of SEO is the ability to bring the knowledge of structured, consistently marked up data to the table to allow search engines to play back results in as meaningful and relevant way as they see fit. Ultimately, keeping up to date with new standards could give you the advantage over your competitors in the search results, making your site stand out, winning you the clicks.

Useful resources

Google’s Support page for Webmasters implementing RDFa

How will HTML5 and XHTML2.0 affect SEO?

How to markup location data with the hCard Microformat

The hCard Creator at Microformats.org

A preview of HTML5 – A List Apart

The Future of SEO – Structured Markup is one of our latest posts from: SEOgadget.co.uk, UK SEO consultants helping people and organisations succeed in search.

In his post, Chris writes:

In the past, I’ve strongly recommended the use of semantic markup in the form of hCard microformats as a component of local search optimization. hCard allows contact info such as addresses and phone numbers to be disclosed precisely to devices that are able to read them.

Let’s take a look at a working example of hCard in action. For the purposes of demonstration, I’ve decided to use an example job posting – for our friends at Distilled who are recruiting for their latest Web Developer position.

Fortunately, the good folks at Microformats.org have built a hCard creator, which enables quick and easy templates that fit your available data. Here’s a screenshot:

Markup location data on your pages with the hcard Microformat is one of our latest posts from: SEOgadget.co.uk, UK SEO consultants helping people and organisations succeed in search.

How will HTML 5 and XHTML 2.0 affect the way we do search engine optimisation?

According to xhtml.com “The competition to become the next markup language for the Web is heating up.” So I’ve learned, “heating up” can be loosely translated to 7+ years development, an expected delivery of 2012 (if at all), and a lot of arguments along the way. What am I talking about? XHTML 2.0

I’ve been looking at the draft XHTML 2.0 and HTML5 markup language standards from the point of view of a search engine optimisation consultant. What are these languages and how will they affect the way we do SEO, if at all? What do you need to know now, and when will the way we work be impacted by the eventual replacement of XHTML 1.0 and HTML 4.01, the current common markup languages of the web.

What’s HTML 5?

HTML 5 is “the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).” W3C Working Draft 10 June 2008. The new language is generally considered a step forward from the previous version, HTML 4.01. Basically, HTML 5 is being created to fix some problems and improve “interoperability” between different “user agents”.

How will HTML 5 affect SEO?

HTML 5 will introduce new features that help us (and search engines) better dissect a webpage. In the past, <div> elements have been used everywhere where, in HTML 5 an array of elements will be available to describe navigation, text sections, articles and headers. The improved sectioning could quite easily assist a search engine in understanding the layout of a page – check out this post on block analysis to understand why that’s cool.

Here are two excellent diagrams explaining the differences found on A List Apart: HTML 5:

Current layout with  HTML:

Layout with HTML 5:

There are a few other interesting additions too. For example, the dialog element will allow better representation of conversations in HTML. For example, a WP Twitter plugin could output code like this:

<dialog id="Twittering">
<dt> <time>14:22</time> richardbaxter
<dd> Has anyone seen the latest Battlestar?
<dt> <time>14:23</time> ZakaZaka
<dd> @richardbaxter Get on with your job!
</dialog>

The best articles I found on HTML 5 were this Webmonkey article and the article I mentioned earlier on alistapart.com – excellent background reading.

What’s XHTML 2.0?

“XHTML 2 is a general-purpose markup language designed for representing documents for a wide range of purposes across the World Wide Web. To this end it does not attempt to be all things to all people, supplying every possible markup idiom, but to supply a generally useful set of elements.” – XHTML2.0 draft specification, July 2006

XHTML 2.0 is an upgrade or replacement for the existing markup standards. It’s not “backwards compatible” with HTML 4.01 and not yet supported by browsers such as Firefox and Internet Explorer. The standard is designed to generate better search results, and to create a more accessible Web for people of all abilities and using all types of devices.

Fundamentally, XHTML 2.0 is considered a significant leap forward in markup language devvelopment and as a result, is not backwards compatible with the current HTML 4.01 standards. Current expectation is that the language (if it ever arrives), will be expected for sometime around 2012.

How will XHTML 2.0 affect the way we do SEO?

Here’s a page created in XHTML 2.0. If you’re an SEO, here are the main things to look out for:

Headings

Where H1, H2, etc would describe the relationships between headings (and therefore the semantic structure of the document) in HTML, XHTML 2 lets you explicitly markup the document structure with the section element, and its related header element “h”.

So, in XHTML 2.0, your optimised document looks like this:

<h>A study of Monkeys and Dishwashers</h>
<p>An introductory text explaining the purpose of my study of dishwashers and monkeys.</p>
<section>
<h>Dishwashers</h>
<p>Text about Dishwashers</p>
<section>
<h>Monkeys</h>
<p>Text about monkeys</p>
<section>
<h>Conclusion</h>
<p>Dishwashers and monkeys have little, if anything to do with each other</p>
</section>

You can add links or images to any “element”

<p src="images/picture.gif">some text here</p>

No more alt=”" attribute

The alt attribute of the img element has been removed, so in XHTML 2 you give the descriptive text in the content of the actual element  e.g., <img src=”image-profile.jpg”>Profile picture – Richard</img>.

There are a great deal of changes to be aware of, and frankly, my work on this subject has not finished. That said, I think it’s extremely important for SEO’s today to understand the markup languages of the future. It’s definitely worth paying attention to the subject of HTML and XHTML development. They will change the way we work with front end code for SEO.

Photo credit: pasukaru76

XHTML 2.0, HTML5 and SEO is one of our latest posts from: SEOgadget.co.uk, UK SEO consultants helping people and organisations succeed in search.