Genesis SEO/Schema Site Logo

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.

  Home
  

In 2014, Google added support for JSON-LD syntax to indicate organizational logos:

Markup like this is a strong signal to Google's algorithms that you want them to show this image in preference to others that may be found on your site's pages. One example might be when Google displays a Knowledge Graph of your business on the right hand side of the Search Engine Results Page (SERP) based on users’ queries.

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.

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.

/* 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( '
', 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', $wrap, $inside, $wrap );
	$title .= genesis_html5() ? "{$inside}" : '';

	//* Echo (filtered)
	echo apply_filters( 'genesis_seo_title', $title, $inside, $wrap );

}