Semantically styling breadcrumbs—What’s wrong with » > › → / • ?

We need to optimize our sites for search engines, but shouldn’t we do it in a semantically correct manner?

Apparently I’m a year late with this topic – It was about a year ago, when Google started adding breadcrumbs to SERPS, but hopefully it will make it easier to find the answers I’m looking for.

I am designing (location) breadcrumbs on our website. However I feel something’s not right. I don’t think Google quite hit the accessibility spot yet, and I’m curious to know how they recognize Breadcrumb data? Google are instructing us to use » a DOUBLE RIGHT-POINTING ANGLE QUOTATION MARK as a breadcrumb separator, but I’m reluctant to do this, since it is plain wrong.

When Google displays the URL as a breadcrumb, they are using a SINGLE RIGHT-POINTING ANGLE QUOTATION MARK as a separator. This too is wrong, since this glyphs in use do not semantically imply site hierarchy. This would hardly matter if we were only building breadcrumbs for Google SERPS, but building breadcrumbs for our users makes it a big issue.

Search result in Google
A Google search result with site hierarchy

Google also recognizes greater than (>) symbol as a breadcrumb separator. This is the worst of all practices. All breadcrumbs are annoying for screen readers, but if they encounter “Home-greater-than-Subsection” gibberish, the browsing experience will become somewhat absurd. If you are using a screen reader, please take this test.

Why does the right way not work?

Why should particular glyphs work and some do not …and why should we care—aren’t the screen reader folks just a bunch of blind folks, anyway? Well, the Internet is for everyone, and before making the choice between the popular thing and the right thing, we need to understand the difference. It looks like Google chose these glyphs for their popularity. So what is wrong with adapting a popular convention? Same thing as using your teeth to open bottle caps. There is a right way too.

Apple Store has a breadcrumb element <ol id=”breadcrumb”> which Google does not recognize. Had Apple Store used semantically incorrect greater than -symbol (>), they would do a lot better with their SERPs, but that would be evil.

Separator glyphs recognized by Google

1. Double right-pointing angle quotation mark, recommended by Google as a best practice:

Home » Section » Subsection » Current page

2. Greater than glyph:

Home > Section > Subsection > Current page

3. Single right-pointing angle quotation mark that Google uses in their SERPs:

Home › Section › Subsection › Current page

4. Forward slash:

Home / Section / Subsection / Current page

Separator glyphs not recognized by Google

5. Bullett style in whitehouse.org:

Home • Section • Subsection • Current page

6. Semantically correct separator image added with a style sheet. Live Example.

Google SERP for Apple Store.

Home (image) Section (image) Subsection (image) Current page

7. Unicode arrow style in Clearleft.com

Home → Section → Subsection → Current page

Examples 1-5 have a semantically incorrect meanings. And the sad thing is only these are recognized by Google as breadcrumbs. Read Jacob Gube’s article breadcrumbs best practices and Hongkiat’s article examining breadcrumbs to see even more styles.

Update

Thank you for comments, and thank you all who pointed out the Unicode arrow → (&rarr;) which I failed to notice in my initial text. See Allan Wood’s explanation of various arrow styles available in Unicode. Could this be the separator glyph best describing the proper use of the breadcrumbs element? Sadly, it looks like Google fails to understand it, which makesit harder to reap the benefits of a good SERP result.

as long as we have to keep making a choices between getting good SERP results and using semantic markup, I can not recommend any of the methods described here. Until then, my business-driven choice will be Single right-pointing angle quotation mark, and Unicode arrow in my personal work, both marked up with Microdata.

Marking up Breadcrumbs with RDF and Microdata

According the latest information from Google, there might be a solution to  indicate breadcrumb element using RDF or Microdata. Apparently this is an experimental technique that can not be tested. However Microdata alone does not do the job just yet: A google search for a game  ”Polar Bear Bounce“, does not give rich SERP results, even though the breadcrumbs are formatted with microdata.

Further reading

Angela Colter has studied the subject and wrote an illuminating article on how people are reading breadcrumbs. Rocky Fu has written about building breadcrumbs, and Jacob Gube wrote about styling them. Also, see Ann Smarty’s excellent article on Search Engine Journal about Breadcrumbs Best Practices.

37 thoughts on “Semantically styling breadcrumbs—What’s wrong with » > › → / • ?

  1. Is there any semantic element out there for breadcrumb navigation? The > symbol visually at least makes sense as a heirarchy…implying that you go from a broader to a more refined ‘search’. The lack of support for a semantic meaning in screen readers doesn’t mean it shouldn’t be used at all.

  2. Thanks for pointing this out. I wasn’t aware of that. I was actually planning on using an ordered list for breadcrumbs in future designs (I didn’t know that Apple was using this already) because I thought that that was reasonable for two reasons:
    1. It reflects the hierarchical structure represented by breadcrumbs.
    2. You can do whatever you like with it visually with CSS, without messing up the underlying logic.

    Pity Google is not supporting this… Are going to get into contact with them about that? Interesting also, that one of the best articles about breadcrumbs best practices does not reflect that at all: http://bit.ly/142tEp

  3. I’ve always wondered why » is considered OK for “go to” links as well. That’s not really semantically correct, either!

  4. Pingback: delicious Links: 11. November 2010 | miZine

  5. A little point of view:

    What google added a year ago on SERPs wasn’t breadcrumbs, though the engineers Jones and Rocha said so. “Breadcrumbs” are (was) simply links to recently visited pages on the current website, and not the hierarchical structure wich Google’s UI team refered to.

    I think this term changed its mean with time.

  6. YES! Thank you! This has bothered me for AGES.

    I’ve always found Unordered Lists to be the most semantic way to markup breadcrumbs… but I must confess styling them was always a hassle (more because I hated it rather than it being difficult) and was QUITE RELIEVED when I read Google recommendation. That way, all I needed was a div or a paragraph tag which enclosed the whole breadcrumb… no more floating/inline hell!

    But… it is quite incorrect. I’ll go the microdata route now. Hope it gets implemented son!

  7. I see » as a form of punctuation. A novel form of punctuation, to be sure, and somewhat ambiguous given the several options available. But punctuation can be ambiguous, and characters can be overloaded with multiple meanings. I don’t think that’s the same as “semantically incorrect”. The punctuation helps the reader understand the relation of the items — they are not a list (certainly not an unordered list), they are a sequence of actions. » means something like “leads to” or “contains”. Also, ids and classes have no semantic meaning in HTML, and in practice there’s little consistency that a reader could make use of. So Apple’s markup is no more helpful than any other markup.

    Anything Google can see and understand, a screen reader can see and understand (and neither sees RDF). From what I can tell screen readers are poorly implemented, out of date, and attempt (hopelessly) to be prescriptive instead of descriptive. In my opinion addressing those problems would be a better way of improving accessibility generally — an agile, open source, robust screen reader could be made to read breadcrumbs *as they are written*.

  8. Why do you think that double/single right-pointing angle quotation marks, greater-thans, or forward slashes do not semantically imply site hierarchy, but the live example you gave with images does? Most users understand them all. Is it because they don’t announce to the computer “hi, I’m a breadcrumb”? Is that the context in which you are using “semantic”?

    I apologize for my ignorance and thank you in advance for your answer.


  9. Apple Store has a breadcrumb element which Google does not recognize. Had Apple Store used semantically incorrect greater than -symbol (>), they would do a lot better with their SERPs, but that would be evil.

    The display of breadcrumbs in the display url, as opposed to the url itself doesn’t even put a dent in clickthrough ratio on SERPS. It’s ignorant to say having rich breadcrumbs somehow increases your Search Engine Ranking Position.

    Google recognizes essentially every repeated delimited links as a breadcrumb.

    And why are you blaming Google for recognizing screenreader unfriendly mark-up? Should it just say: Ahh they didn’t close this p-tag, lets discount this content, so as to not index screenreader unfriendly mark-up? Of course it shouldn’t. That is the responsibility of the website owner, not Googles.

    If anything rage against the experimental microformat code that invalidates your sites. And BOO-HOO! if you add them, you still aren’t sure that Google uses them. But ask yourself: Are breadcrumbs really relevant to your site and it’s content? Do you reflect your breadcrumb structure in your url? Do you get enough authority to award you full sitelinks, a definate nr #1 position and breadcrumbs display urls?

    If I’d answer for you, I’d say: No, No and ehhh.. No!

  10. What happens when you style a breadcrumb separator with `visibility: hidden` and insert an arrow (or something else) as a background image? This way, you can still have » as separator in your markup, but it’s not read by screen readers. It might be that Google ignores text that is hidden using CSS rules (as this is a well-known black hat SEO technique), but you can give it a try.

    Also see http://css-tricks.com/markup-for-breadcrumbs/

  11. So, in short, to the question “What is wrong with » > › / •?”, your answer is “it is plain wrong because it is semantically wrong”?

    A breadcrumb denotes (from my point of view) a path in the tree/hierarchy of the website. On filesystems, the ‘/’ is the typical character to separate the various nodes in a path. Another correct character would be an arrow (it is after all a directed edge) which the right quotation marks, though they have another signification, represent quite well and I never saw the single one in use, only the double one (french guillemets). The > is the mathematical symbol for orders (not just the order on numbers), the breadcrumb indeed represent an order in information (from more general to more particular), hence correct in my opinion.

    The only one I don’t understand is the bullet. It misses the hierarchy and hence “it is plain wrong” (as would | be)

  12. 3rd time lucky (got the wrong attribute in haste) – please edit this down.

    <ol>
    <li><a href=”#” title=”Home”><img src=”home.png” alt=”Home” class=”home” /></a>
    <ol>
    <li><a href=”#” title=”Sample page 1″>Sample page 1</a>
    <ol>
    <li><a href=”#” title=”Sample page 2″>Sample page 2</a>
    <ol>
    <li><a href=”#” title=”Sample page 3″>Sample page 3</a>
    <ol>
    <li>Current page</li>
    </ol>
    </li>
    </ol>
    </li>
    </ol>
    </li>
    </ol>
    </li>
    </ol>

  13. Lemme try that again, with HTML attributes instead:

    <ol&rt;
    <li&rt;<a href=”#” title=”Home”&rt;<img src=”home.png” alt=”Home” class=”home” /&rt;</a&rt;
    <ol&rt;
    <li&rt;<a href=”#” title=”Sample page 1″&rt;Sample page 1</a&rt;
    <ol&rt;
    <li&rt;<a href=”#” title=”Sample page 2″&rt;Sample page 2</a&rt;
    <ol&rt;
    <li&rt;<a href=”#” title=”Sample page 3″&rt;Sample page 3</a&rt;
    <ol&rt;
    <li&rt;Current page</li&rt;
    </ol&rt;
    </li&rt;
    </ol&rt;
    </li&rt;
    </ol&rt;
    </li&rt;
    </ol&rt;
    </li&rt;
    </ol&rt;

  14. I don’t agree with you on this. I don’t think that a single level ordered list implies a hierarchy – rather it semantically implies a list of items of an equal value but ordered in a certain way.

    Perhaps you should have lists of lists to denote a hierarchy?

    To modify your example thus:

    Sample page 1

    Sample page 2

    Sample page 3

    Current page

    This is how (e.g. legal) documents get marked up, so when referring to particular sections you say “1.5.2.3″.

  15. I often use background-images within an li to separate breadcrumb links. But the image is of a right-pointing angle quotation mark. Less markup this way

  16. Pingback: Color Chalk Blog » Breadcrumbs – Semantic Styling

  17. Isn’t it possible to put an aural display:none; in the stylesheet? As far as I know you can put aural information in CSS…

    • Sure, but that would render the breadcrumbs useless for blind people altogether. I believe they rutinely use the “Skip navigation” link to bypass all navigational elements, which should include breadcrumbs.

  18. This is a very interesting post!

    Though, to be “semantically correct” and what “Google indexes” don’t always go hand in hand.

    I’m very interested in a middle-ground and what techniques other search-engines use

    Would this be a good middle-ground:

    Contact > Form
    Contact
    Form

  19. Great article Esko I have been looking at breadcrumb trails recently and this article is a fantastic quick guide.

    The Semantically correct separator image is also hugely useful.

  20. I can kind of see the logic in using a “greater than” to imply a hierarchy – the “Toys & Games” section is larger than and contains the “Robots” section, but agree that the fact that screen readers will mangle it is not good.

    I think this would be ideal as a microformat (as opposed to the convoluted microdata example Google gives). It could be as simple as giving an <ol> a class of “breadcrumb”.. the order of the list gives the hierarchy. Can’t find a “breadcrumb” microformat on the Microformats Wiki, but I’ll put it forward…

  21. What about using nested ULs? Like normal navigation, except leaving out all the other LIs? So just one LI each level. Just a thought.

  22. so you are recommending to use “Double right-pointing angle quotation mark”, right?
    would you prefer to express them in ascii/html or just “keyboard written”??

    • Viktor, I’m afraid I can not recommend anything just yet. Many posts are suggesting the arrow → sign, which to my opinion is the best option to convey the semantic meaning of the Breadcrumb.

  23. “Greater than” separator is actually semantically correct, at least in most cases when we have some hierarchy of site content. Think of this as a nested sets: each previous set in the chain is greater than next (because the cardinality is bigger). Than, mathematical symbols like “superset” and “implication” would also be semantically correct in some sense.

    See Table of mathematical symbols for more ideas.

    Slashes are also fine as a metaphor of file system directories, I think.

    P.S. If you don’t like it – don’t use it ;) There is no one true path to do “semantical SEO” (exept keyword stuffing, lol!), and Google is not all-mighty supernatural entity which can guess what id=”breadcrumb” means in each particular case.

    • Dmitry, you are correct – but screen readers read ‘greater than’ aloud. It sounds quite annoying, when I witnessed a blind person using our site.

  24. Whenever I markup breadcrumbs or hierarchical links, I use very plain, semantically correct markup with just unordered lists, a set of list items, and anchors around the text link. As soon as you start adding extraneous list items with, let’s say a class of separator, or extra glyphs within the list items, as mentioned here, you lose the semantic structure. Like your live example, I either use background images within the style sheets, or include a glyph, such as a bullet, vertical bar, double quoted arrow, or greater than symbol using the :after pseudo-class on the list items and the content property.

  25. Fundamentally a breadcrumb separator doesn’t exist within our punctuation system, because of this we use a variety of methods none of which are ideal. How we get over this sadly would point to the introduction of “Standard” that dictates what is officially recognized as a breadcrumb separator. Until this inevitably happens my approach is to consider what the majority see as being suitable and stick with that, this may be seen as following the crowd, but when we’re all trying to show the same thing it works.