Thesis Tutorial — Clickable Thesis Header Image Without Affecting SEO

One critical website element that establishes the identity of your website is the logo. When working with WordPress and Thesis framework it is fairly simple to customize the header with a custom logo. With Thesis 1.8, adding a click-able logo in the header is just a matter of uploading the image. Go to Thesis > Header Image in the admin area, upload the logo and click on “Check out your site” to see the logo in action.

But have you ever given it a thought that adding a header image can affect the SEO of your website. Before proceeding further let’s throw some light on it. Thesis framework by default provides a header title and tagline primarily designed to boost the SEO of the website.

  • The header title shows the title of the website and is enclosed within the paragraph tag.
  • The header tagline is used for providing brief description of the website and is enclosed within <h1> tag.

While the website’s title cannot always reflect the purpose, the websites’ tagline does a good job in describing the website’s intent and objective. You can add relevant keywords and description of the website in the tagline to make your website search-relevant. Thesis utilizes the power of tagline to boost the SEO of your website. Now, when you upload the header image / logo directly from the admin area, Thesis’s default HTML tagging system breaks — header title is enclosed within <h1> tag and header tagline is completely removed, thus, affecting the SEO of the website.

The built-in Thesis feature of uploading the header image affects the SEO of the site. This tutorial shows you an easy way around to maintain the killer edge.

Instead of uploading the header-image directly from the admin area, upload the image through FTP client to keep the SEO intact. Follow the steps given below to customize the Thesis header without affecting the SEO of your website.

  1. Upload your logo to custom/images folder by using the ftp client. Refer to the article A Beginners Guide To Using FTP Client to learn how to upload the image through ftp client.
  2. Go to Thesis > Custom File Editor in the left-sidebar of the dashboard and select custom.css from the Edit Selected File drop-down menu.
  3. Paste the following code in the code-editor and save the changes made to the file. 
    .custom #logo,.custom #tagline {text-indent:-9999px;}
.custom #logo a {display:block; width:1156px;height:256px;background:url(images/logo.png) no-repeat left top;}

    Replace logo.png with the uploaded image-file and set the width and height according to your specifications. The second line of the code makes the logo click-able.

When you follow this procedure, the core HTML tagging system of the Thesis remains intact and assures that your website is optimized for search engines. Check out the article on SEO Basics for useful tips on making your website search engine friendly.

Divi WordPress Theme