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