Using RDFa with an image inside of an H1 tag

Question

I come from a development background but just recently starting learning SEO along with RDFa. I am working on our companies new website where the designer is using our different divisions logos at the top of their respective pages. There currently are not any H1 tags. I know I need to add and H1 but the way the pages were designed the logos are where I would usually put an H1 heading. And if I added an H1 with text it would throw off the design.

I also know that using images inside H1 isn't good practice even if I use the alt attribute.

So my question is if I put H1 tags around the image, then use RDFa will Google find this acceptable or will this be penalized. Here is my code example:

<div class="twelve columns" typeof="gr:BusinessEntity">
  <h1 property="gr:name" content="Thoughtwire Marketing">
     <img rel="foaf:depiction" src='http://www.thoughtwiremarketing.com/images/TW-marketing-logo.png' class='twmarketing' alt="Thoughtwire Marketing"/>
  </h1>
</div>

I defined my prefixes in the body tag and when I run my code through the validator at http://rdfa.info/play/ it seems like it would work, just not knowledgeable enough yet with SEO to know for sure.

Answer 1

(I adjusted my answer that I gave to your (now closed) question on SO.)

When a user-agent (including search engines) parses your RDFa, it doesn’t matter which element the RDFa is used on (except for special parsing rules). The user-agents learns something like the following:

There is a business entity (http://purl.org/goodrelations/v1#BusinessEntity) which has the name (http://purl.org/goodrelations/v1#name) "Thoughtwire Marketing" (= literal value of the content attribute).

As you can see, it does not relate this statement to div or h1.

After this RDF is extracted, you could essentially imagine that the RDFa is "removed" from your page. So user-agents will see/interpret your plain markup, e.g.:

<div>
 <h1>
  <img src='http://www.thoughtwiremarketing.com/images/TW-marketing-logo.png' alt="Thoughtwire Marketing"/>
 </h1>
</div>

RDFa and HTML (semantics) are two different concepts.

I’m not sure that I understand your actual problem, but now you might have two questions:

• Is my RDFa fine that way? As you already linked to and tested your page with a RDFa parser/validator, probably yes, if the extracted RDF is what you want to say about your content.
• Is my HTML fine that way? From the HTML specification perspective, yes. And all consuming user-agents (including search engines) should be fine with it, too. Having images (especially logos) as content for headings is very common.

Answer 2

I agree with what unor said. The only thing I want to add is that you could use @property instead of @rel to align with RDFa Lite. So your snippet would like:

<div class="twelve columns" typeof="gr:BusinessEntity">
  <h1 property="gr:name" content="Thoughtwire Marketing">
     <img property="foaf:depiction" src='http://www.thoughtwiremarketing.com/images/TW-marketing-logo.png' class='twmarketing' alt="Thoughtwire Marketing"/>
  </h1>
</div>