Hidden Breadcrumbs Rich Snippet

Question

I want to implement breadcrumbs for my site but I do not want to create any visible tags for that on my page. I thought of using meta tags but as they do not have href property, they can’t contain the itemprop="url" property. Following is the code I am using:

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

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

Is there any workaround method to achieve this?

Answer 1

HTML5 defines that the meta element

[…] represents various kinds of metadata that cannot be expressed using the title, base, link, style, and script elements.

The link element "allows authors to link their document to other resources".

So you have to use link instead of meta if the value is a URI. (Microdata explicitly requires this, too.)

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

Answer 2

As per Google Terms of Service, every markup up have to be visible to each user. Don't include any hidden markup because Google will penalize you.