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.