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.

35 Comments

  1. Posted November 11, 2010 at 1:37 pm | Permalink

    Shouldn’t breacrumbs be an ordered list? Then styled however you like.

  2. Drew
    Posted November 11, 2010 at 1:39 pm | Permalink

    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.

  3. Posted November 11, 2010 at 1:40 pm | Permalink

    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.

  4. Posted November 11, 2010 at 1:50 pm | Permalink

    “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.

  5. Posted November 11, 2010 at 1:50 pm | Permalink

    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”??

  6. OkkE
    Posted November 11, 2010 at 1:53 pm | Permalink

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

  7. Posted November 11, 2010 at 1:59 pm | Permalink

    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…

  8. Posted November 11, 2010 at 2:02 pm | Permalink

    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.

  9. OkkE
    Posted November 11, 2010 at 2:16 pm | Permalink

    It seems HTML5 + Microdata has something: http://css-tricks.com/markup-for-breadcrumbs/

  10. Posted November 11, 2010 at 2:27 pm | Permalink

    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

  11. Joop Kiefte
    Posted November 11, 2010 at 2:28 pm | Permalink

    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…

  12. Mark B
    Posted November 11, 2010 at 2:34 pm | Permalink

    Hmm, I don’t know. Perhaps we should ask the experts? http://bit.ly/s0PPB

  13. Posted November 11, 2010 at 3:15 pm | Permalink

    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

  14. Luke Pryor
    Posted November 11, 2010 at 3:36 pm | Permalink

    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. Luke Pryor
    Posted November 11, 2010 at 3:38 pm | Permalink

    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;

  16. Luke Pryor
    Posted November 11, 2010 at 3:39 pm | Permalink

    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>

  17. milosh
    Posted November 11, 2010 at 3:55 pm | Permalink

    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)

  18. Marcel Korpel
    Posted November 11, 2010 at 4:52 pm | Permalink

    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/

  19. Whine
    Posted November 11, 2010 at 6:18 pm | Permalink


    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!

  20. Posted November 11, 2010 at 6:29 pm | Permalink

    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.

  21. Michał Czernow
    Posted November 11, 2010 at 6:44 pm | Permalink

    What about rightwards arrow: → ?

  22. Posted November 11, 2010 at 7:12 pm | Permalink

    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*.

  23. Posted November 11, 2010 at 7:28 pm | Permalink

    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!

  24. coltcha
    Posted November 11, 2010 at 9:55 pm | Permalink

    Did somebody try to use → in breadrumb? How does Google evaluate this entity?

  25. Posted November 11, 2010 at 10:56 pm | Permalink

    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.

  26. Posted November 11, 2010 at 11:09 pm | Permalink

    Unicode to the rescue? → ?

    E.g.

    Main → 2009 → January 2009 → Wednesday, January 28th 2009

    http://svr225.stepx.com:3388/date/2009/01/28

  27. Nhan Nguyen
    Posted November 12, 2010 at 2:12 am | Permalink

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

  28. Posted November 12, 2010 at 10:31 am | Permalink

    so what IS the correct glyph to use for breadcrumbs?! :-)

  29. Posted November 12, 2010 at 10:38 am | Permalink

    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

  30. WellYaKnow
    Posted November 12, 2010 at 4:30 pm | Permalink

    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.

  31. assd
    Posted November 12, 2010 at 7:07 pm | Permalink

    i really don’t care and like the way google displays it

  32. Posted November 13, 2010 at 12:14 am | Permalink

    Right Arrow I say →

  33. eskokumpunen
    Posted November 16, 2010 at 10:41 am | Permalink

    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.

  34. eskokumpunen
    Posted November 16, 2010 at 10:43 am | Permalink

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

  35. eskokumpunen
    Posted November 16, 2010 at 10:51 am | Permalink

    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.

2 Trackbacks

  1. By Color Chalk Blog » Breadcrumbs – Semantic Styling on November 11, 2010 at 3:14 pm

    […] the point, I spotted this topic of Semantically styling Breadcrumbs with reference to Google written by Esko Kumpunen. Which made me think how i ignored the styling of […]

  2. By delicious Links: 11. November 2010 | miZine on November 12, 2010 at 2:01 am

    […] Semantically styling breadcrumbs—What’s wrong with » > › / • ? – Kumpunen.com 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. Tags: separator breadcrumbs breadcrumb google serps use […]