Use logo to mark regions or items on the page for a particular brand or organization. For example, rich heading showcasing the latest hardware from HP will use the HP logo in the rich heading. The ability to navigate from the logo to the company is optional, however, clicking on the logo should take the user to the highest level of the IA tree for the company and scope of the site.
- Be mindful of the variations of proportions and details in different logos. There may be adjustments needed to best fit the space where the logo appears.
- Do not use logo to link to pages that aren't the highest point in the IA for the scope of the site. For instance, clicking on the Microsoft logo on a store site should take the user to Microsoft.com, not the home page of the store.
- Span: Span element is required in case an image fails to load.
- Aria label:
aria-labelis used in combination with an anchor to notify the screen reader that the anchor links to a logo.
- Microdata: We've used the ImageObject schema for logo injestion by search engines for a more rich experience.
- Schema definition: The logo schema defines the acceptable configurations, requirements, and options for each component.
Code and preview
<div class="c-logo"> <span>Company</span> </div>
<a href="#" class="c-logo" aria-label="Logo"> <img class="c-image" src="http://placehold.it/150x50" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject"> <span>Company</span> </a>