Optimizing with microdata and address tag

Question

Can I improve this markup? Is it SEO friendly?

<div class="bloc-contenu group" itemscope itemtype="http://schema.org/Hotel" itemref="logo nom-hotel">
 <p><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d89225.49873817024!2d-74.4423141!3d45.664941!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sca!4v1389731001791" width=667 height=325 frameborder=0 style="border:0"></iframe><br>
<small><a itemprop=map href="https://www.google.ca/maps/preview#!q=Brownsburg-Chatham%2C+QC&data=!4m15!2m14!1m13!1s0x4ccedde9eac0cb83%3A0xf994ff962e761612!3m8!1m3!1d110951!2d-74.4423141!3d45.664941!3m2!1i1920!2i955!4f13.1!4m2!3d45.6608378!4d-74.4472133" target=_blank>Agrandir le plan</a></small>
 <p>Pour réserver ou pour plus d'informations sur nos services&nbsp;:
 <address>
 <p itemprop=telephone>555&nbsp;555-5555
 <p itemprop=address itemscope itemtype="http://schema.org/PostalAddress"><span itemprop=streetAddress>38, street name</span>,<br>
 <span itemprop=addressLocality>City</span> (<span itemprop=addressRegion>Province</span>)<br>
 <span itemprop=postalCode>XXXXXX</span>
 </address>
 <p><a href="https://www.facebook.com/" target=_blank><strong>Retrouvez-nous sur Facebook</strong></a>
</div>

itemref="logo nom-hotel" refers to two tags at the top of the page:

<img id=logo src="/img/logo.20140104.png" alt="Name of the place" width=161 height=175 itemprop=logo>

and:

<h1 itemprop=name id=nom-hotel>Name of the place</h1>

• ChrisW: There's a different standard microformat you could use. It's an HTML representation of this and this. I don't know why you might prefer this one instead of the schema.org one.

Answer 1

From some research:

• If your code will be used on mobile, I would look into making that phone tag ( which seems to miss </p> ) into a functional phone tag : https://stackoverflow.com/a/11143507/7602

• I would imagine you want your facebook link to point to your actual page.

• Your <p>aragraphs are not closed properly..

• I would leave <p>aragraphs out of <address> and would use styled <span>s

• frameborder is obsolete for iframe, while iframe should have a title

• Your quoting of HTML attributes is inconsistent, in my mind they should all be surrounded with double quotes.

• Maximilien: Thank you for the phone tag link. The Facebook link points to the actual page, I just want to keep it anonymous for now. And I'm ok with unclosed tag in this case. I don't do it in big projects, only in small websites like this. It is W3C valid and there's no bug caused by that. But why would you use <span>s instead of <p>s in <address>?
• konijn: Because semantically, those are not paragraphs ( `a distinct section of a piece of writing, usually dealing with a single theme and indicated by a new line, indentation, or numbering. ) but pieces of data

Answer 2

Your Microdata is fine.

Some HTML suggestions:

• I wouldn’t use p as container for iframe + the map. I’d use div instead.
• Don’t use <br> after the iframe (br is for line breaks that are part of the content only). Your usage of br in the postal address is correct.
• Don’t use small for the link to the map (as it doesn’t seem to be a side comment).
• You could use rel-external for the external links to Google and Facebook.

• You could link the telephone number with the tel URI scheme. But then you should include the anchor text in a span element, as schema.org’s telephone property expects "Text", not "URL" (which would be the value for the itemprop if used on a).

  <a href="tel:555..."><span itemprop=telephone>555 555-5555</span></a>
  

• In contrast to what tomdemuyt answered, using p for the postal address seems to be fine (as it’s used in an example in the HTML5 spec).