breadcrumbs-brainstorming: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(JSON output for simple example)
(JSON outputs updated/fixed/added)
Line 26: Line 26:
Use <code>class="h-breadcrumb"</code> on each breadcrumb hyperlink. E.g. here's a breadcrumb example from [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 Google's breadcrumb documentation] about a page for a particular dress (all breadcrumbs indicate ancestor pages)
Use <code>class="h-breadcrumb"</code> on each breadcrumb hyperlink. E.g. here's a breadcrumb example from [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 Google's breadcrumb documentation] about a page for a particular dress (all breadcrumbs indicate ancestor pages)
<source lang=html4strict>
<source lang=html4strict>
<a href="http://www.example.com/dresses">Dresses</a> ›  
<a href="http://example.com/dresses">Dresses</a> ›  
<a href="http://www.example.com/dresses/real">Real Dresses</a> ›  
<a href="http://example.com/dresses/real">Real Dresses</a> ›  
<a href="http://www.example.com/dresses/real/green">Real Green Dresses</a>  
<a href="http://example.com/dresses/real/green">Real Green Dresses</a>  
</source>
</source>


Line 34: Line 34:


<source lang=html4strict>
<source lang=html4strict>
<a class="h-breadcrumb" href="http://www.example.com/dresses">Dresses</a> ›  
<a class="h-breadcrumb" href="http://example.com/dresses">Dresses</a> ›  
<a class="h-breadcrumb" href="http://www.example.com/dresses/real">Real Dresses</a> ›  
<a class="h-breadcrumb" href="http://example.com/dresses/real">Real Dresses</a> ›  
<a class="h-breadcrumb" href="http://www.example.com/dresses/real/green">Real Green Dresses</a>  
<a class="h-breadcrumb" href="http://example.com/dresses/real/green">Real Green Dresses</a>  
</source>
</source>


This might be rendered as: (live example)
This might be rendered as: (live example)


<span class="h-breadcrumb">[http://www.example.com/dresses Dresses]</span> › <span class="h-breadcrumb">[http://www.example.com/dresses/real Real Dresses]</span> › <span class="h-breadcrumb">[http://www.example.com/dresses/real/green Real Green Dresses]</span>
<span class="h-breadcrumb">[http://example.com/dresses Dresses]</span> › <span class="h-breadcrumb">[http://example.com/dresses/real Real Dresses]</span> › <span class="h-breadcrumb">[http://example.com/dresses/real/green Real Green Dresses]</span>


Compared to existing alternatives ([http://www.bing.com/webmaster/help/markup-breadcrumbs-72419f3f Bing], [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 Google]), the <code>h-breadcrumb</code> microformats markup is much simpler.
Compared to existing alternatives ([http://www.bing.com/webmaster/help/markup-breadcrumbs-72419f3f Bing], [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 Google]), the <code>h-breadcrumb</code> microformats markup is much simpler.
Line 57: Line 57:
       "properties": {
       "properties": {
         "name": ["Dresses"],
         "name": ["Dresses"],
         "url": ["http://www.example.com/dresses"]
         "url": ["http:\/\/example.com\/dresses"]
       }
       }
     },
     },
Line 63: Line 63:
       "properties": {
       "properties": {
         "name": ["Real Dresses"],
         "name": ["Real Dresses"],
         "url": ["http://www.example.com/dresses/real"]
         "url": ["http:\/\/example.com\/dresses\/real"]
       }
       }
     { "type": ["h-breadcrumb"],
     { "type": ["h-breadcrumb"],
       "properties": {
       "properties": {
         "name": ["Real Green Dresses"],
         "name": ["Real Green Dresses"],
         "url": ["http://www.example.com/dresses/real/green"]
         "url": ["http:\/\/example.com\/dresses\/real\/green"]
       }
       }
     }
     }
Line 106: Line 106:
Thus the markup is still much simpler than existing alternatives which require much more explicit markup.
Thus the markup is still much simpler than existing alternatives which require much more explicit markup.


JSON output:
JSON output as produced by a conformant [[microformats2]] processor parsing this example:
* TODO: add JSON output as produced by a conformant [[microformats2]] processor.
<source lang=javascript>
{
  "items": [
    { "type": ["h-breadcrumb"],
      "properties": {
        "name": ["Books"],
        "url": ["http:\/\/example.com\/books"]
      },
      "children": [
        { "type": ["h-breadcrumb"],
          "properties": {
            "name": ["Authors"],
            "url": ["http:\/\/example.com\/books\/authors"]
          },
          "children": [
            { "type": ["h-breadcrumb"],
              "properties": {
                "name": ["Stephen King"],
                "url": ["http:\/\/example.com\/books\/authors\/stephenking"]
              }
            }
          ]
        }
      ]
    },
    { "type": ["h-breadcrumb"],
      "properties": {
        "name": ["Books"],
        "url": ["http:\/\/example.com\/books"]
      },
      "children": [
        { "type": ["h-breadcrumb"],
          "properties": {
            "name": ["Fiction"],
            "url": ["http:\/\/example.com\/books\/fiction"]
          },
          "children": [
            { "type": ["h-breadcrumb"],
              "properties": {
                "name": ["Horror"],
                "url": ["http:\/\/example.com\/books\/fiction\/horror"]
              }
            }
          ]
        }
      ]
    }
  ]
}
</source>


==== FAQ ====
==== FAQ ====
<div class="discussion">
<div class="discussion">
* Why do you nest the breadcrumbs?
* Why do you nest the breadcrumbs?
** You nest the breadcrumbs only when there are multiple breadcrumb paths on a page. So processors can distinguish each path instead of assuming all breadcrumbs on the page are part of one path.
** You nest the breadcrumbs only when there are multiple breadcrumb paths on a page. Nesting is needed for processors to distinguish the paths instead of assuming all breadcrumbs on the page are part of one path.


== see also ==
== see also ==

Revision as of 01:07, 7 March 2013

<entry-title>breadcrumbs brainstorming</entry-title>

This page is for documenting proposals for a breadcrumbs microformat per the microformats process:

analysis of existing formats

Existing breadcrumbs-formats have a high degree of overlap in terms of what properties they use:

  • name/title
  • url
  • child (all but schema)

And they all agree on calling breadcrumbs, "breadcrumbs", and the singular for the individual breadcrumbs. This should be taken into consideration for any proposed breadcrumbs format.

proposals

h-breadcrumb

root class name: h-breadcrumb
profile/itemtype: http://microformats.org/profile/h-breadcrumb

properties

properties:

  • p-name
  • u-url

example

Use class="h-breadcrumb" on each breadcrumb hyperlink. E.g. here's a breadcrumb example from Google's breadcrumb documentation about a page for a particular dress (all breadcrumbs indicate ancestor pages)

<a href="http://example.com/dresses">Dresses</a> › 
<a href="http://example.com/dresses/real">Real Dresses</a> › 
<a href="http://example.com/dresses/real/green">Real Green Dresses</a>

With h-breadcrumb:

<a class="h-breadcrumb" href="http://example.com/dresses">Dresses</a> › 
<a class="h-breadcrumb" href="http://example.com/dresses/real">Real Dresses</a> › 
<a class="h-breadcrumb" href="http://example.com/dresses/real/green">Real Green Dresses</a>

This might be rendered as: (live example)

Dresses › Real Dresses › Real Green Dresses

Compared to existing alternatives (Bing, Google), the h-breadcrumb microformats markup is much simpler.

The simpler microformats markup is possible since p-name and u-url properties are two of the implied microformats2 properties and there is no need to explicitly specify them in common cases (e.g. when a single hyperlink element provides all the information).

consuming processors

Consuming processors simply treat the set of breadcrumbs in document order as the set of breadcrumb ancestors, first being the top, and last breadcrumb being the immediate parent of the current page.

JSON output as produced by a conformant microformats2 processor parsing the simple example above:

{
  "items": [
    { "type": ["h-breadcrumb"],
      "properties": {
        "name": ["Dresses"],
        "url": ["http:\/\/example.com\/dresses"]
      }
    },
    { "type": ["h-breadcrumb"],
      "properties": {
        "name": ["Real Dresses"],
        "url": ["http:\/\/example.com\/dresses\/real"]
      }
    { "type": ["h-breadcrumb"],
      "properties": {
        "name": ["Real Green Dresses"],
        "url": ["http:\/\/example.com\/dresses\/real\/green"]
      }
    }
  ]
}

multiple breadcrumb paths

If a page has multiple breadcrumb paths to the current document, then more explicit markup must be used. Pre-existing formats use an explicit "child" property to do this. However, since nested microformats are automatically parsed into a children collection in their parent microformat, we can use that mechanism for multiple breadcrumb paths on a page.

Example (re-used again from the Google documentation) of multiple breadcrumb paths on a page for a specific Stephen King book:

<div class="h-breadcrumb">
  <a class="p-name" href="http://example.com/books">Books</a> ›
  <div class="h-breadcrumb">
    <a class="p-name" href="http://example.com/books/authors">Authors</a> ›
    <div class="h-breadcrumb">
      <a href="http://example.com/books/authors/stephenking">Stephen King</a>
    </div>
  </div>
</div>

<div class="h-breadcrumb">
  <a class="p-name" href="http://example.com/books">Books</a> ›
  <div class="h-breadcrumb">
    <a class="p-name" href="http://example.com/books/fiction">Fiction</a> ›
    <div class="h-breadcrumb">
      <a href="http://example.com/books/fiction/horror">Horror</a>
    </div>
  </div>
</div>

In this case we:

  • have to use explicit p-name properties to distinguish the name of the breadcrumbs that contain other breadcrumbs
  • can still rely upon implied u-url, since there is only one hyperlink that is a direct child of each breadcrumb

Thus the markup is still much simpler than existing alternatives which require much more explicit markup.

JSON output as produced by a conformant microformats2 processor parsing this example:

{
  "items": [
    { "type": ["h-breadcrumb"],
      "properties": {
        "name": ["Books"],
        "url": ["http:\/\/example.com\/books"]
      },
      "children": [
        { "type": ["h-breadcrumb"],
          "properties": {
            "name": ["Authors"],
            "url": ["http:\/\/example.com\/books\/authors"]
          },
          "children": [
            { "type": ["h-breadcrumb"],
              "properties": {
                "name": ["Stephen King"],
                "url": ["http:\/\/example.com\/books\/authors\/stephenking"]
              }
            }
          ]
        }
      ]
    },
    { "type": ["h-breadcrumb"],
      "properties": {
        "name": ["Books"],
        "url": ["http:\/\/example.com\/books"]
      },
      "children": [
        { "type": ["h-breadcrumb"],
          "properties": {
            "name": ["Fiction"],
            "url": ["http:\/\/example.com\/books\/fiction"]
          },
          "children": [
            { "type": ["h-breadcrumb"],
              "properties": {
                "name": ["Horror"],
                "url": ["http:\/\/example.com\/books\/fiction\/horror"]
              }
            }
          ]
        }
      ]
    }
  ]
}

FAQ

  • Why do you nest the breadcrumbs?
    • You nest the breadcrumbs only when there are multiple breadcrumb paths on a page. Nesting is needed for processors to distinguish the paths instead of assuming all breadcrumbs on the page are part of one path.

see also