Should company name in logo be an image or text?

Question

I'm putting a logo (comprising of an image and company name) on my website. I'm not sure whether to save the company name text as part of an image file, or to have it as actual text in the html and styled using css.

Obviously if I save it all as an image then I don't have to worry about the user having the right fonts etc.. But I thought that having it as text might be better for SEO.

Is this a matter of taste or is one way much better than the other?

Answer 1

As the text is part of the logo, I would keep it in the image (saves on trying to match any non-standard fonts and having to position it exactly like it is in the logo) - you can always put it in the alt attribute or use microdata to to enhance your seo:

<div id="main-logo-holder" itemscope itemtype="http://schema.org/Organization">
  <meta itemprop="name" content="Company Name">
  <meta itemprop="description" content="Company Description">
  <a itemprop="url" id="logo-home" href="https://www.website.co.uk/" class="main-logo">
    <img itemprop="logo" src="logo.jpg" alt="Company Name Logo">
  </a>
</div>

More information on organisation microdata

Google Microdata Validation Tool

Google Guidelines on Logo markup

Answer 2

Google likes company alt attribute

Both Google and Bing understand that a logo will often be repeated throughout in PNG, GIF and JPEG. Simply markup the logo using the alt description to inform search engines that it is LOGO for your business.

A basic example:

<img src="logo.png" alt="Company Name Logo">

A Schema example:

<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" alt="Company Name Logo"/>
</div>

A JavaScript Schema example:

If you want to keep your code simple then use JSON-LD Schema as you then never need to edit the page code but rather add a code at the end of your page or use Google Tag Manager to inject into the page without lifting a finger,

e.g

<img src="logo.png" alt="Company Name Logo">
<script type="application/ld+json">
  {
  "@context": "http://schema.org/",
  "@type": "Organization",
  "url": "http://www.example.com/",
  "logo": "http://www.example.com/logo.png"
  }
</script>

---

Google also likes SVG logos

If you want Google or Bing to see your company name within the image then you can do so by using SVG format. This format allows you to use TEXT within the image which will be seen by user and search engines. If accessibility is a concern then you should keep the company name as TEXT and not as a shape e.g create outlines.

e.g something like this:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <polygon fill="#998675" points="125,466.5 0,250 125,33.5 375,33.5 500,250 375,466.5 "/>
    <rect x="137.5" y="137.5" fill="#534741" width="225" height="225"/>
    <polygon fill="#C7B299" points="250,175 294.1,189.3 321.3,226.8 321.3,273.2 294.1,310.7 250,325 205.9,310.7 178.7,273.2 178.7,226.8 205.9,189.3 "/>
    <text transform="matrix(1 0 0 1 196.3787 253.5039)" font-family="'Montserrat-Bold'" font-size="12">COMPANY NAME</text>
</svg>

Google dislikes CSS hacked logos

Search engines dislike logos being displayed with tricks and other things alike, such as text-indent e.g -9999px; background: url(logo.png) no-repeat;. Backgrounds should always be used as a background. If it's an on-page resource element then its always an image and never a background. Use the 2 previous examples and not this one... this was useful 'back in the day' but no longer required with the markup available.

This method also sucks for accessibility (impaired users).