• Skip to main content

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Code Snippet / Genesis SEO/Schema Site Logo

Genesis SEO/Schema Site Logo

By Victor M. Font Jr.
September 14, 20153 Comments

Genesis SEO Site Logo image courtesy of pixabay.comOne 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:


Screen Capture of Google's Knowledge Graph for Apple, Inc.
Google's Apple, Inc. Knowledge Graph
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( '
%s
', 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 ); }
  • 5shares
  • Facebook0
  • Twitter2
  • Pinterest0
  • LinkedIn2
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. tapon

    February 11, 2017 at 9:37 am

    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.

    Reply
  2. Lars

    January 16, 2017 at 4:27 am

    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.

    Reply
    • Victor M. Font Jr.

      January 16, 2017 at 7:53 am

      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.

      Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2023 Victor M. Font Jr.

Return to top of page