Menu

How to use Google’s Organisation Logo Schema.org markup with WordPress Theme Logo

The Organisation Logo schema.org markup allows web designers to specify their website’s preferred company logo to use in Google searches. For example, a business whose homepage is www.yourdomain.co.uk can add the following html markup to display the logo on a web page whilst providing Google with the appropriate Schema.org markup:

<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.yourdomain.co.uk/">
<img itemprop="logo" src="http://www.yourdomain.co.uk/logo.png" alt="Company name" />
</a>
</div>
view raw logo_schema.html hosted with ❤ by GitHub

In this guide we’re going to use WordPress’ Theme Logo feature to generate the image and url part of the code. First you need to make your theme supports ‘custom-logo’. Add the following to your functions.php:

function mytheme_setup() {
add_theme_support('custom-logo');
}
add_action('after_setup_theme', 'mytheme_setup');
view raw function.php hosted with ❤ by GitHub

Then add the following to your header.php where you want your logo to go

<div itemscope itemtype="http://schema.org/Organization">
<?php if ( function_exists( 'the_custom_logo' ) ) {
the_custom_logo();
} ?>
</div>

This will output html code similar to this:

<div itemscope itemtype="http://schema.org/Organization">
<a href="https://www.thewirelessguy.co.uk/" class="custom-logo-link" rel="home" itemprop="url" tabindex="0">
<img width="249" height="56" src="https://www.thewirelessguy.co.uk/wp-content/uploads/2016/05/logo.png" class="custom-logo" alt="The Wireless Guy logo" itemprop="logo">
</a>
</div>

Notice that the_custom_logo() function automatically adds the correct itemprop tags. You don’t have to use a div tag to wrap the image and link. You can use any html tag you like as long as it contains itemscope itemtype=http://schema.org/Organization inside it.