One of the most common modifications a user wants to make to their WordPress powered website is to remove the text based Site Title and Description in favor of a custom logo image. A custom logo graphically represents an individual's or business's persona. Your persona is the public image you present to the world. Logos provide instant visual identification of a company, nonprofit organization, brand, event, or other entity. Logos can convey messages, drive sales, make small organizations appear large, and help big businesses garner global brand recognition. There's no doubt that logos are important for marketing.
Schema.org Logo Markup
The search engines behind Schema.org thought so too. Logos are so important that schema.org has defined logos as entities worthy of their own itemprop=“logo” markup. Schema.org logo markup may be applied to Brands, Organizations, Places, or Products.
Google & Logo Schema Markup
Since 2013, Google has supported Schema.org logo markup for organization logos. They want to make it as easy as possible for business owners to specify which image they'll use as your business's logo in Google search results. The following example HTML comes directly from the Google webmaster blog post announcing their support for logo markup.
|
1 2 3 4 |
<div itemscope itemtype="http://schema.org/Organization"> <a itemprop="url" href="http://www.example.com/">Home</a> <img itemprop="logo" src="http://www.example.com/logo.png" /> </div> |
In 2014, Google added support for JSON-LD syntax to indicate organizational logos:
|
1 2 3 4 5 6 7 8 |
<script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Organization", "url": "http://www.example.com/", "logo": "http://www.example.com/logo.png" } </script> |
WordPress Logo Theme Support
WordPress supports the use of logos in custom headers. In order to use a custom header, you have to turn on theme support for WordPress custom headers by adding add_theme_support( ‘custom-header’ ); to your functions.php file. Unfortunately, that's as far as it goes. If you want to add schema.org logo markup, you need to relegate that task to a plugin, your theme, or customize some code yourself.
Genesis Logo Theme Support
The Genesis Framework takes custom header support to the next level. Since the release of Version 2.2.2, the framework also provides Section 508, WCAG 2.0, and A11Y accessibility support, as well as significantly improved schema.org mark up. As great as all of this is, organizational logos are still handled as CSS background images on the site header link. Background images handled in this manner can't be wrapped in the appropriate schema.org code. The best we can do is add a meta tag to the site header to let the search engines know there is a logo.
|
1 |
<meta itemprop="logo" content="/images/logo.png" /> |
Luckily, since we're using the Genesis Framework, there is a better way. The Genesis Framework is built for professional developers who understand how to use hooks, actions, and filters. The code below is a customized version of the genesis_seo_site_title function that can be found in the genesis/lib/structure/header.php file. This customized version incorporates the schema.org markup, as recommended by Google, in the output.
To use this code, copy it to your functions.php file. It looks for your logo image, named logo.png, in your child theme's /images/ folder. It is important to note that this code will not work if you already have a logo image assigned as a background image in the Appearance/Header or Customize/Header page(s), if your child theme supports that feature. You have to remove the logo background image first in order to have the SEO/Schema friendly logo appear. You can even add your own classes to the code below or modify header classes to further customize your logo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
/* remove the text title and description */ remove_action( 'genesis_site_title', 'genesis_seo_site_title' ); remove_action( 'genesis_site_description', 'genesis_seo_site_description' ); /* use the SEO logo */ add_action( 'genesis_site_title', 'vmf_seo_schema_site_logo' ); /** * Filter genesis_seo_title to use an image for the logo instead of a background image * You must remove any logo images you set on the appearance/header or customize/header page(s) * * The genesis_seo_site_title function is located in genesis/lib/structure/header.php * @link //victorfont.com/genesis-seo-site-logo * */ function vmf_seo_schema_site_logo() { //* Set what goes inside the wrapping tags $inside = sprintf( '<div itemscope itemtype="http://schema.org/Organization"><a itemprop="url" href="%s" title="%s"><img class="site-logo" itemprop="logo" src="'. get_stylesheet_directory_uri() .'/images/logo.png" title="%s" alt="%s" width="390" height="44" /></a></div>', trailingslashit( home_url() ), get_bloginfo( 'name' ), get_bloginfo( 'name' ) . ' logo', get_bloginfo( 'name' ) ); //* Determine which wrapping tags to use $wrap = genesis_is_root_page() && 'title' === genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : 'p'; //* A little fallback, in case an SEO plugin is active $wrap = genesis_is_root_page() && ! genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : $wrap; //* Wrap homepage site title in p tags if static front page $wrap = is_front_page() && ! is_home() ? 'p' : $wrap; //* And finally, $wrap in h1 if HTML5 & semantic headings enabled $wrap = genesis_html5() && genesis_get_seo_option( 'semantic_headings' ) ? 'h1' : $wrap; /** * Site title wrapping element * * The wrapping element for the site title. * * @since 2.2.3 * * @param string $wrap The wrapping element (h1, h2, p, etc.). */ $wrap = apply_filters( 'genesis_site_title_wrap', $wrap ); //* Build the title $title = genesis_html5() ? sprintf( "<{$wrap} %s>", genesis_attr( 'site-title' ) ) : sprintf( '<%s id="title">%s</%s>', $wrap, $inside, $wrap ); $title .= genesis_html5() ? "{$inside}</{$wrap}>" : ''; //* Echo (filtered) echo apply_filters( 'genesis_seo_title', $title, $inside, $wrap ); } |
Many thanks to You that you share with us, has published a great article. I really, really super happy with your work.
However,
Thank you again for your work will wait for the next great writing.
Hello Victor,
Thanks for this solution, I implemented this on a new site that I am making and it works just great.
However, the code seems to be adding an empty paragraph between the and
You can see a screenshot here: https://dl.dropboxusercontent.com/u/2666961/Screen_Shot_2017-01-16_at_10_22_09.jpg
Is that intentional? The reason I ask is because that empty gets a standard bottom margin and thus adds unnecessary space between the logo and site description.
It’s easy to fix with with something like div.title-area p:first-child {display: none;}, but not sure if it’s meant to stay there.
Thanks.
Thanks Lars, I actually caught this last night on a site I’m developing for a client. This extra paragraph tag was introduced in either the last WordPress or Genesis update, although I think it is due to the WordPress update. They way I fixed it on the client site was to just leave the $wrap as a H1 tag. Site title is supposed to be H1 anyway. I’ll look into it deeper when I have a little more time.