Irsah in Designs


Current Published

Popular References

Contact Us


Rich Snippets Breadcrumbs - Between SEO and User Experience Click Throughs?


By:

In this article we will describe on presenting your website's pages in search engines using breadcrumbs; a rich snippet markup for a webpage. A better presentation to users means, better navigational towards your content for your site.

There are myths that most search engines will present your webpages slightly higher than your competitors for a given keyword/keyword phrases. But, implementing breadcrumbs trails does not guarentee that search engine results as per say.

Using rich snippets markup in your webpages, as experienced by us, gives a better picture, navigational wise to users. We also noticed an increase of clicks throughs from users searching for a competitive keyword or keyword phrases. It shows that any new features displayed for your web pages, will definitely build an impact in search engines results.

SEO wise, using useful tips and guidelines from search engine developers really helps in presenting your web pages in search results. There were some of our clients website's that had better results and mostly came from products selling websites. Which means, using this method (breadcrumbs) it gives a better leverage with website's who has a wide range of contents with layers of folder/files hierachy.

As noted by Google, microdata rich snippet is an experimental format. So goes with schema.org and RDFa format for breadcrumbs trails. Depending on feedback and on other available markup standards, it may be modified or replaced in the future.

breadcrumbs-rich-snippets-search-result-pages-and-seo

What is Breadcrumbs?

A breadcrumb trail is a set of links (breadcrumbs) that can help a user understand and navigate your site's hierarchy, like example given below:

www.irsah.com › Tools › Check Page Rank › Mass Page Rank Checker

This live link trail will be displayed for every web pages for your concrete5 live webpages. Pages can also have more than one breadcrumb trail. For example like below:

www.irsah.com › Tools › Check Page Rank › Mass Page Rank Checker

Check Page Rank › Articles › How To's › Submit URL

When you mark up a breadcrumb information in the body of a web page, Google and major search engines can identify it and use it to understand and present the information on your pages in their search results.

Breadcrumb Properties

Breadcrumbs can contain a number of different properties which you can label using microdata or RDFa markup. search engine recognizes the following breadcrumb properties.

  • title - The title of a breadcrumb.
  • url - The URL of a breadcrumb.
  • child - The next breadcrumb in the hierarchy. The child must be another Breadcrumb item.

Below is the HTML code describes a breadcrumb trail for a product page ie. free online web tool page.

<a href="http://www.example.com/web-tools">Web Tools</a> ›

<a href="http://www.example.com/web-tools/pr-checker">PR Checker</a> ›

<a href="http://www.example.com/web-tools/pr-checker/how-to">How To Use</a>

This set of breadcrumbs will appear on the page like this:

Web Tools › PR Checker › How To Use

From the above example breadcrumb trail, user's can easily identify the related pages displayed in their search results, hence a more likeable click to your page. Any live links to your webpages is a plus in search engines results and will dfinitely give that extra edge from your competitors.

The HTML Mark Up Detected by Search Engines

Below is an example HTML format mark-up using Microdata (one breadcrumb trail) which can be easily implemented in your website's code - source Google Webmaster.

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
   <a href="http://www.example.com/dresses" itemprop="url">
      <span itemprop="title">Dresses</span>
   </a> ›
</div> 

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
   <a href="http://www.example.com/dresses/real" itemprop="url">
      <span itemprop="title">Real Dresses</span>
   </a> ›
</div> 

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
   <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
      <span itemprop="title">Real Green Dresses</span>
   </a>
</div>

If your page contains only a single breadcrumb trail, search engine will use the order of items above as they appear on your page.

However, if your page contains more than one breadcrumb trail, you must indicate the breadcrumb trail to which each breadcrumb belongs. To do this, use the child property to specify the next item in the hierarchy, like this:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
   <a href="http://www.example.com/books" itemprop="url">
      <span itemprop="title">Books</span>
   </a> ›
   <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/books/authors" itemprop="url">
         <span itemprop="title">Authors</span>
      </a> ›
      <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="http://www.example.com/books/authors/stephenking" itemprop="url">
           <span itemprop="title">Stephen King</span>
        </a>
       </div>
   </div>
</div>

Here is another HTML mark-up using the RDFa format for single breadcrumb trails in search engine:-

<div xmlns:v="http://rdf.data-vocabulary.org/#">
   <span typeof="v:Breadcrumb">
   <a href="http://www.example.com/dresses" rel="v:url" property="v:title">Dresses</a> ›
   </span>
   <span typeof="v:Breadcrumb">
   <a href="http://www.example.com/dresses/real" rel="v:url" property="v:title">Real Dresses</a> › </span>
  <span typeof="v:Breadcrumb">
  <a href="http://www.example.com/dresses/real/green" rel="v:url" property="v:title">Real Green Dresses</a> › </span>
</div>

If your page contains only a single breadcrumb trail, major search engines will use the order of items above as they appear on your page.

However, if your page contains more than one breadcrumb trail, you must indicate the breadcrumb trail to which each breadcrumb belongs. To do this, use the child property again in RDFa format to specify the next item in the hierarchy, like this:

<div xmlns:v="http://rdf.data-vocabulary.org/#"> 
   <span typeof="v:Breadcrumb">
   <a href="http://www.example.com/books" rel="v:url" property="v:title">Books</a> › 
      <span rel="v:child">
         <span typeof="v:Breadcrumb">
         <a href="http://www.example.com/books/authors" rel="v:url" property="v:title">Authors</a> › 
            <span rel="v:child">
               <span typeof="v:Breadcrumb">
                  <a href="http://www.example.com/books/authors/stephenking" rel="v:url" property="v:title">Stephen King</a> › 
                  </span>
            </span>
       </span>
    </span>
</span>
</div>

<div xmlns:v="http://rdf.data-vocabulary.org/#"> 
   <span typeof="v:Breadcrumb">
     <a href="http://www.example.com/books" rel="v:url" property="v:title">Books</a> ›
        <span rel="v:child">
           <span typeof="v:Breadcrumb">
             <a href="http://www.example.com/books/fiction" rel="v:url" property="v:title">Fiction</a> ›
                 <span rel="v:child"> 
                   <span typeof="v:Breadcrumb">
                     <a href="http://www.example.com/books/fiction/horror" rel="v:url" property="v:title">Horror</a> ›
                   </span>
               </span>
          </span>
      </span>
   </span>
</div>

Below you will find a link to a tutorial on how to implement breadcrumb trail for your concrete5 web pages using the breadcrumb block by SmartWebProject. It is an easy hack which as concrete5 users knows, it is a simple file copy and making new template, without modifications to the original/core files.

Easy tutorial in installing breadcrumbs using swp_breadcrumbs block by SWP for concrete5 powered websites, thanks to Denis Vlasov.

source: Google Webmaster


…