0

I've recently decided to update a website by adding rich snippets - microdata. The thing is I'm a newbie to this kind of things and I'm having a small question about this.

I'm trying to define the Organization as you can see from the code below:

<div class="block-content" itemscope itemtype="http://schema.org/Organization">
<p itemprop="name">SOME ORGANIZATION</p>
<p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Manufacture Street no 4</span>, 
<span itemprop="PostalCode">4556210</span><br />
<span itemprop="addressLocality">CityVille</span>, 
<span itemprop="addressCountry">SnippetsLand</span></p>
<hr>
<p itemprop="telephone">0444 330 226</p>
<hr>
<p><a href="mailto:info@snippets.com" itemprop="email">info@snippets.com</a></p>
</div>

Now, my problems consists in the following: I'd like to also tag the LOGO in order to make a complete Organization profile, but the logo stands in the header of my page, and the div I've posted above stands in the footer and the style/layout of the page doesnt permit me to add the logo in here and also make it visible.

So, how can I solve this thing? What's the best solution?

Thanks.

DanCapitanDePlai
  • 457
  • 2
  • 6
  • 19

2 Answers2

1

You can use the itemref attribute.

Give your logo in the header an id and add the corresponding itemprop:

<img src="acme-logo.png" alt="ACME Inc." itemprop="logo" id="logo" />

Now add itemref="logo" to your div in the footer:

<div class="block-content" itemscope itemtype="http://schema.org/Organization" itemref="logo">
  …
</div>

If this is not possible in your case, you could "duplicate" the logo so that it’s included in your div, but not visible. Microdata allows meta and link elements in the body for this case. You should use the link element, as http://schema.org/Organization expects an URL for the logo property. (Alternatively, add it via meta as a separate ImageObject).

<div class="block-content" itemscope itemtype="http://schema.org/Organization">
  …
  <link itemprop="logo" src="logo.png" />
  …
</div>

Side note: I don’t think that you are using the hr element correctly in your example. If you simply want to display a horizontal line, you should use CSS (e.g. border-top on the p) instead.

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
0

Dan, you could simply add in the logo schema with this code:

<img itemprop="logo" src="http://www.example.com/logo.png" />

So in your example, you could simply tag it as:

<div class="block-content" itemscope itemtype="http://schema.org/Organization">
<p itemprop="name">SOME ORGANIZATION</p>
<img itemprop="logo" src="http://www.example.com/logo.png" />
<p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Manufacture Street no 4</span>, 
<span itemprop="PostalCode">4556210</span><br />
<span itemprop="addressLocality">CityVille</span>, 
<span itemprop="addressCountry">SnippetsLand</span></p>
<hr>
<p itemprop="telephone">0444 330 226</p>
<hr>
<p><a href="mailto:info@snippets.com" itemprop="email">info@snippets.com</a></p>
</div>

I believe that should work for your particular case and it won't actually show the logo and you wouldn't have to mark up the logo separately. Hope that helps.

daviddeering
  • 819
  • 1
  • 7
  • 9
  • Thanks David. I already found a way : microdata has elements that are hidden by default, they're called ````. Still, I've accepted your question because it is another variant that works. – DanCapitanDePlai Sep 23 '13 at 17:44