Posted by Simon Howland March 12th, 2010
This latest LBi research explores Google site hierarchies and SEO best practice for implementing breadcrumbs in order for them to be picked up by Google.
Since November, when Google announced the arrival of ‘site hierarchies‘, we have been considering the best method of adding breadcrumbs to your site in order to be picked up by Google and added to its search results pages. The official advice provided in this Google Webmaster video for implementing breadcrumbs is somewhat vague, simply being to use a
“Set of delimited links on your site, that accurately reflect your site’s hierarchy.”
So we decided to investigate exactly what this means in terms of best practice for SEO, in order to provide the best chance of having your breadcrumbs picked up and used within Google search results. It is worth noting that Google indicates that this has not yet been rolled out for all sites:
“By analyzing site breadcrumbs, we’ve been able to improve the search snippet for a small percentage of search results, and we hope to expand in the future.”
Of course, whether having these site links is beneficial to any particular site needs to be addressed on a case-by-case basis. It will depend on whether a particular site is well suited to the use of breadcrumbs, and how your site uses top-level category pages within your site hierarchy.
A few notes on general best practice for breadcrumbs
Breadcrumbs are a secondary navigational feature used in combination with main navigation elements on large hierarchical sites. They provide a reference as to where a user is within a site’s hierarchy and help the user to quickly navigate to a higher level. This also provides the associated benefits of improved usability and reduced bounce rates.
Google’s definition of ‘delimited links that match your site’s hierarchy’ is a good description of breadcrumbs. The ‘delimiting’ character is usually a ‘greater than’ symbol, or ‘>’, which contributes to usability through recognition of uniform navigational elements. There should be no more than a few levels, and the link should start on the homepage and end on the current page. The last ‘breadcrumb’ should not be a link, as it would simply link to the current page and having a description of the current page written with no link provides additional navigational context.
The research
In order to investigate the use of breadcrumbs, we found existing examples of instances in which Google either has or has not picked up a set of delimited links and used them in its results pages. We selected 15 three word queries including keywords with navigational, informational and commercial intent, and analysed the top ten results in Google.co.uk, a total of 150 sites. We initially selected a larger sample, but retrieved enough data to make assertions sooner than expected.
Where to place breadcrumbs on the page
Breadcrumbs are usually seen at the top of the page just under the main navigation. In terms of the Document Object Model (DOM), you can expect to see breadcrumbs some way into the code. They are a secondary navigational element, included after the primary navigation and contained within the hierarchical environment of the DOM. With the addition of CSS, which can place elements anywhere on the page regardless of where they reside in the code, it is unsurprising that we found examples of breadcrumbs lower down the page, and even at the bottom of the page which triggered Google site hierarchies in search results.
However, we recommend placing breadcrumbs at the top of the page for best usability, as this is where most people will search for and recognise them.
Where to place the ‘delimiting’ characters?
Logic prevails here: the ‘delimiting’ characters should be placed in between the links. We saw a couple of sites which had either preceding or trailing delimiting characters, and these did not get picked up by Google.
Which ‘delimiting character’ should be used?
We wouldn’t advise against using any particular characters until further testing has been undertaken, although we found site hierarchy links in the search results for sites using ‘>’, ‘> >’, ‘›’ and ‘»’ characters, with white space and inline elements appearing to be inconsequential (see this example of bold tags on the home link).
The golden rule here is to make whatever is between the breadcrumb links identical, which was the case for 100% of sites which had breadcrumb links in Google results pages. Where this was not the case, breadcrumb links were not attributed to the page.
As a side note, we also found examples which did not use any characters at all, but used block level elements instead, such as the London School of Economics Website, which has a hierarchical structure and no breadcrumb links. Links in the main left hand navigation are separated via individual ‘<div>’s, which were picked up by Google and included in the results pages. This could of course be a false-positive, given that the ‘>’ character is included in the code between the links, but is unlikely.
Other tags which were found in breadcrumbs which were included by Google in the results pages included; ‘<li>’, ‘<div>’, ‘<td>’ and ‘<p>’. In each case, as with the LSE website, they were added between links in a uniform manner.
In summary, the most common method of indicating site hierarchy to Google is by separating links with a symbol such as ‘>’, ‘> >’, ‘›’ or ‘»’, but other methods involving block level elements may be used. This will need to be tested before we can recommend exactly which block level elements to use, and may prove useful where more advanced or decorative breadcrumbs are desired.
Can images be used to separate breadcrumbs?
From the sample we looked at, no images were found in the set of sites which did have Google site hierarchy links, but images were found in the set which did not, even though they had breadcrumb links. The same was the case where CSS was used to insert images as dividers.
As a best practice, we would advise against the use of images as breadcrumb link delimiters. However, we have noted that a site may be able to use images and be picked up by Google if images are contained within block-level elements or combined with relevant characters and appropriate replacement techniques. This is something which we will need to test.
Does a site need to be strictly hierarchical?
The short answer is no. Take this example from South West Water,
where the majority of the pages are numbered using a URL variable. The internal link structure and breadcrumbs are the only clues to the site’s hierarchy. Another example of site hierarchy links showing in Google even though the URL is not hierarchical is Yahoo! Shopping. You will need to follow the link to fully appreciate this. For many reasons, it is best to provide a hierarchical structure, but in a case where this is not so, breadcrumbs make an ideal addition to a site until such time as a redesign structural overhaul is feasible.
Should the first breadcrumb link to the homepage?
We found site hierarchy links in Google search results for pages both with and without breadcrumbs including links to the homepage. From a usability perspective, this is useful, in that where you have a large number of directories, missing the first few may still indicate site hierarchy for search. It is worth noting that the majority of sites do include a link to the homepage in breadcrumbs, and that we would recommend including this as it provides additional context to the hierarchical structure denoted by the breadcrumbs.
Should the last breadcrumb be a link?
We found examples of site hierarchy links in Google from both pages which did and pages which did not use the last breadcrumb to link to the current page.
It provides no benefit to the user if the last link points to the current page, and if the last breadcrumb is simply a description of the page with no link, it can only add to the relevance of the page and context of the breadcrumbs. It says “you are here”, which adds to the usability of the breadcrumbs.
Therefore our recommendation is to have a trailing breadcrumb for the existing page which is not a link. However, if it is, it will not stop you from gaining site hierarchy links in Google.
Can breadcrumbs be cross-domain or cross-subdomain?
Sites which we found with breadcrumbs which contained cross-subdomain links were not included in Google site hierarchies. Bearing in mind that the root domain is listed in the search result, this would render the hierarchy links inaccurate.
Semantically, what code should be used to mark breadcrumbs?
Although HTML lists lend themselves well to writing breadcrumbs, and were used in several examples of sites which were included in Google’s site hierarchy links, breadcrumbs are, by their hierarchical nature, not a list. HTML lists enable the use of customisable bullets to delimit links, but via CSS, which is not written to the page. Only where the list elements were separated by a delimiting character were breadcrumbs included in the search results.
It makes sense to contain the breadcrumbs within a block level element in order to distinguish them in the code, as well as to provide a clear signal to Google as to which content is actually your breadcrumb links. We would recommend using a ‘<div>’ element specifically for this purpose. The breadcrumb links should be placed inside the block level element and should then be separated by the same ‘delimiting’ character (most likely ‘>’). The same number of new lines should be used between each link (no new lines are required, but using one in between each link and each delimiting character will increase code readability).
Should you ‘label’ your breadcrumbs?
Often, breadcrumbs are labelled in the code as IDs, Classes or similar, with names such as ‘breadcrumbs’, ‘crumbs’ or ‘sitenav’. This is not required. We found examples of both labelled and non-labelled breadcrumbs which had been recognised by Google.
That said, there is no reason why you cannot label your breadcrumbs. A label in the code will make it more readable, and it won’t hurt to give an extra clue to search engines as to the content held within the containing element.
Semantically, an ID should be used over a Class, as an ID is a unique identifier to an element on the page, whereas a class can be used multiple times.
How long does it take for breadcrumbs to be found?
A ‘site:’ search in Google, followed by a restriction by date will show that pages are indexed faster than they have the breadcrumb links added. It was noted that this sometimes happens a handful of weeks apart, which suggests that it is a separate process which considers site hierarchy links outside of general indexing procedures.
Best practices for writing breadcrumb code
Based on our findings, an example of the ideal code layout for breadcrumbs is:
<div id="breadcrumbs">
<a href="http://www.cheese.com/">Home</a>
>
<a href="http://www.cheese.com/soft-cheese/">Soft Cheese</a>
>
<strong>Brie</strong>
</div>
A breakdown of the above code elements is as follows:
- Hierarchical links which match the structure of the site
- A link to the homepage
- A reference to the page the site is on rather than a link
- Contained within a ‘<div>’ element with an ID of ‘breadcrumbs’
- Uniformly divided links using ‘>’ symbols as ‘delimiting characters’, written as ‘>’
- Single line break between lines (no line break is required, but adding them makes the code more readable. Remember that if you do add any to keep the number of lines consistent between links.)
- As per our standard recommendations the inline tag <strong> has also been added to emphasise the keyword in the breadcrumb relating to the current page
A final thought
Bearing in mind that Google has said it is still experimenting with site hierarchies and that some sites may not be suitable for site hierarchy links (think Wikipedia, or sites with minimal architecture), it does not mean that just because breadcrumb links are implemented a site will receive site hierarchy links in search results (in fact, sites which were setup by LBi to test site hierarchies are still not achieving site hierarchy links).
In addition, the code above is not definitive and, as stated in this article, inline elements such as ‘<b>’ and ‘<span>’ may be added without preventing Google from understanding your breadcrumbs. That said, unless abso
lutely necessary, this is probably best avoided.
For further information on Breadcrumbs, see this article on Smashing Magazine which provides some useful information outside of the scope of this article.
Tags: accessibility, Google, research, SEO, serps
comments Share
