13

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?

5
  • This has no real answer as the answer changes wildly with situation.
    – insidesin
    Jan 9, 2018 at 0:37
  • 2
    @insidesin, no logos should always be images.
    – zzzzBov
    Jan 9, 2018 at 5:42
  • We're not talking about logos here, we're talking about logos and company names.
    – insidesin
    Jan 9, 2018 at 5:51
  • 2
    @insidesin No, the OP says the logo comprises an image and a company name. The name is part of the logo. Jan 9, 2018 at 8:19
  • >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. No, he's contemplating not putting it in. It's not rocket science. In some situations the text left outside the image would be beneficial.
    – insidesin
    Jan 10, 2018 at 0:11

2 Answers 2

17

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

4
  • 3
    The ALT tag should contain any text in the image for accessibility reasons in any case. Remember that its purpose is to help blind and visually-impaired people who use screen readers to know what an image is and, in the case of logos that contain text, what they say. It should contain the company name, phone number if present, and any other text. Jan 8, 2018 at 11:28
  • 2
    @GeekOnTheHill A logo should never contain a telephone number for accessibility and ux reasons, since on mobile devices they will be unable to tap it and dial the number. But I agree that the alt description should describe the contents of image if the logo contains additional information such as a slogan. Jan 8, 2018 at 11:45
  • 5
    I agree, Simon. Putting phone numbers in logos is horrid practice in the era of mobile devices and touch screens. However, if the phone number is there despite being inadvisable, I think it also needs to be in the ALT tag. The reason I say this is because representatives of organizations for the blind have emphatically told me that it should be. Apparently, being unable to contact a company because the phone number doesn't appear in any way that a screen reader can interpret is a frequent source of frustration for blind visitors. But I agree, it's better that it it's not be in the logo at all. Jan 8, 2018 at 12:12
  • The alt content for a logo should not contain "logo" (unless "logo" is part of the name, of course).
    – unor
    Jan 10, 2018 at 17:41
9

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).

1
  • Alt tags should be used for every image and/or loaded object in your scene/site. It should be almost boilerplate by now.
    – insidesin
    Jan 9, 2018 at 0:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.