Search code examples
htmlfontsseomicrodatarich-snippets

Microdata Markup - 'Brand > Logo' with Icon Font for Logo


<a href='' itemscope itemtype='http://schema.org/Brand' itemprop='brand'><i class="logo" itemprop='logo'></i></a>

The above class='logo' applies a font to the icon element. Can we apply the 'glyph' defined in the class (e.g., font-family: 'AnyFont'; content: '/e600') as a Microdata Markup DataType "Brand > Logo" to render the Logo in a rich-snippet the same as a image would render in the rich-snippet?

This doesn't seem likely as an image has a URL based src="..." property and a font character does not, none the less I've been researching this I've found no documentation or discussion on this and need to know if the community is aware of a way to make this work if it does't already work. Or do we have to forfeit the many well-known benefits of using an icon-font to display a logo in rich-snippets?

As validation to the common application of microdata to an image and not an font-character we see that this heavily used microdata generator doesn't give us an option to apply microdata to an element with a font applied to it. And based on the 'Brand > Logo' documentation, the only options are ImageObject and URL (which many very well may believe this answers the question (there's bound to be a way to do this without having to go back 4 years and use an image instead of a font)).


Solution

  • You could use a link element (which may be used in the body in HTML5+Microdata) to provide the URL of the logo:

    <a itemprop="brand" href="" itemscope itemtype="http://schema.org/Brand">
      <span class="logo"></span>
      <link itemprop="logo" href="logo.png" />
    </a>
    

    (I used span instead of i. And for the record, I don’t agree that it’s a good idea to include a site’s logo via CSS instead of HTML.)