Logo SEO: How to SEO your logo
Your company logo and branding are extremely important as they provide the image that you want to portray to your customers. However, very often the logo SEO is overlooked by web design companies and is entered in the header of the site without really thinking of the implications. It’s amazing how many logos I see named logo.jpg or logo-trans.png. This is a massive missed opportunity to get your firm more Internet exposure.
Here, I have just created four simple logos for the sake of demonstration. The logo was created in Inkscape but Adobe Illustrator Click here (SEO Joke) can also be used. If you’re using WordPress, you’ll need to add an SVG render; we use the plugin SVG Support.
Logo-SEO.SVG
6 KB
Transparent
As “img” no Link
Logo-SEO.PNG
76 KB
Transparent
Logo-SEO.JPG
29 KB
White Background
Logo-SEO.GIF
6 KB
Transparent
SVG Logo SEO!
This Logo has an embedded hyperlink!
Hover over the Red
If using the web builder package Elementor, you may have to insert the image as an object rather then an image to enable the hyperlink.
<object id=”svg1″ data=”https://www.artofdata.com/wp-content/uploads//2021/02/logo-SEO-red.svg” type=”image/svg+xml”></object>
Please note, don’t use a BMP file format. Use a dash – not a underscore _ as a space.
The file name of your logo for logo SEO.
Do not name your logo “logo.filename” or your company name then the word logo. Unless everybody in the world already knows your company name. Lazy web designers will just name your logo, logo because it is easy and convenient (It is also a schoolboy error). We have named ours “Digital web agency Reading” because that is what we do and where we are. So, name your logo what you do or sell. If you need to rename your images use this plugin Phoenix Media Rename.
File size of your logo for SEO
Google states that page load time is especially important for mobile devices. If your webpage doesn’t open quick on a mobile, you will lose visitors. So the smaller the image size the better. I will test this experiment in a couple of weeks using our SEO tools.
Type of File for your logo
I would recommend a SVG file type. Traditionally gifs and pngs were used for graphics and jpgs for photographs.
SVGs (Scalable Vector Graphic) have several advantages for logos:
- They are small.
- They are scalable.
- Tracing to a SVG is relatively easy.
- Very sharp edges no anti-aliasing.
- Text file type (Very easy for search engines to index).
- You can add a hyperlink.
- Searchable metadata.
Use a websafe font text for your strapline.
Font converted to a path design mode zoomed in.
Font converted to path result.
Nice sharp edges on zoom in of svg.
Zoom in of a jpg edge anti-aliasing clearly visible.
Add a hyperlink to a SVG
Right click on your image in Inkscape and click ‘Add Link’. Then, if someone borrows or scrapes your logo or infographic, they will be doing you favour!
Here's the magic for SEO of a logo... Metadata
Document Properties > Metadata
Add a source link, Description and Keywords
Alt tag
Please ensure your logo image alt tag is populated with relavant text not just the word “Logo”. Not only does it improve your website accessibility it will help raise your image rank in google images.
Test your logo, inspect your logo
Right click on your Logo. Your browser will inform you of your image name and alt tag. Right click and save the image to discover how big your image is.
Example here…
<img src=”https://www.artofdata.com/wp-content/uploads/2020/09/digital-web-agency-Reading-logo.svg” data-src=”https://www.artofdata.com/wp-content/uploads/2020/09/digital-web-agency-Reading-logo.svg” class=”attachment-full size-full ls-is-cached lazyloaded” alt=”ArtofData Web Design Agency – Digital Agency – SEO Search engine optimisation – Graphic Design – Reading Berkshire” width=”2754″ height=”610″>
Image Resources
Image indexing
https://stackoverflow.com/questions/12575709/using-svg-as-image-replacement-for-website-logo
What Google Says about images
https://developers.google.com/search/docs/advanced/guidelines/google-images
SVG Warning!
Some fonts will not render in a browser correctly unless you use websafe fonts. If your fonts do not render correctly convert the fonts to paths.
Anyone looking for a "Horizontal red HEX"
Adobe sells them.
Inspect Adobes logo Adobe_Corporate_Horizontal_Red_HEX.svg
