Best Practices for SVG SEO in Google Image

January 14, 2019 ·  Yi Qian · Web Design · Everything SVG

With the proliferation of high resolution devices, SVG is definitely the future to serving high res screens with responsive images, at a small file size and low bandwidth. In fact, some sites that we check-in daily like Google, YouTube, Twitter are already using SVGs in their website (similartech.com). As SVG usage trend goes upwards, there will be more webmasters transitioning from PNGs to SVGs, because really what's not to like about SVG? Less work done with optimal image performance, favoring both users and businesses.

But there isn't much literature found in the web about SEO for SVG, which leads us to write this piece to answer these 3 questions:

1. Will SVG be indexed in Google Image search?
2. Which way of embedding SVG is best for SEO and what to keep in mind when using them?
3. What's the simplest way to get your SVG images optimized for search engines?

Knowing the fact that Google Image Search in itself is the 2nd largest search engine in ranking right after Google Search (credits to Moz and Jumpshot), there's a huge opportunity for you to boost your brand's visibility by doing well in it, all at NO cost!

Whether you're a webmaster, front-end developer, or designer, this piece is for you. Equipping yourself with the know-hows of optimizing your SVG images for search engine presents you a competitive advantage, and be ready to roll in the future of graphics - SVG.

Before you continue reading, you should already know what are the available methods to embed SVG images into your website, such as image tags, object tags, inline svg etc. If you don't, I'd recommend you to take a quick glance through this blog post: The Best Way to Embed SVG.

Let's dive right in.

The simplest and fastest way: Use Image tags with the good ol' alt and title tags

Embed SVG into your website like how you used to do it with PNGs and JPGs, with img src, title and alt tags, like this:

<img src="https://cloud-spanner.svg" alt="Cloud Spanner icon in PNG, SVG, JPG formats" title="Cloud Spanner" />

And it will show up in Google Image search with SVG format without failing:

Pros: Support from all browsers, no security concerns, simple, straightforward and fast, cache enabled.

Cons: Your fonts on SVG might not turn out as expected (you can workaround it using Nano), and you cannot animate or allow any interactivity.

Those who wanted interactivity and SEO: Use Object tags with fallback

If you're using SVG on your website for interactivity or animation, the only available options would be <object> tag or Inline SVG. For <object> tag, Google Image bots will not recognize your SVG as images, which make full sense for a search engine. After few rounds of experiments, in order to index your images in Google Image, you'll have to:

1. Add a fallback to your image:

<object type="image/svg+xml" data="your_image.svg">
    <img src="your_image.svg" alt="This is your image alt" title="Your image title tag">
</object>

2. Insert your image link into image sitemaps to fasten the crawling process

We tested this method on our sister site at Siemens Industry Software Sdn. Bhd., and it is showing up perfectly in Google Image few days after changes are made.

The only concern using this method would be double loading - the browser will load the image twice. But you can cache the images, mark these files as cacheable on your server, at least, the browser will load these images from the cache, but still, there is no stopping the double loading.

Pros: Interactivity (scripts and css enabled), caching, gzip compression

Cons: Potential security threats, requires fallback for Google image indexing, double loading.

Those who are using Inline SVG

If you're using Inline SVG in website for graphics, we'd recommend you to stick with the above 2 options - <img> tags and <object> tags instead.

We've ran experiments from our end by using <noscript> in our Inline SVG:

<noscript>
<img src="/images/burger-menu.fbe818ad3c.svg" alt="Burger Menu" title="Burger Menu SVG">
</noscript>

And we tried adding SVG role as img with title and description into our Inline SVG:

<svg role="img" aria-label="Google Fonts Vecta" xmlns="http://www.w3.org/2000/svg"><title>Google Fonts Vecta</title><desc>Embed fonts using Vecta</desc></svg>

But it doesn't show up on Google Image even after 1 month upon submitting sitemaps. From our past experience, it usually takes 3-7 days to be indexed, given that we're using the same website.

Conclusion

Currently at the time of writing, we'd recommend you to go with <img> tags as the simplest option and <object> tags only if you require interactivity in your graphics. Avoid Inline SVG in order to be indexed in Google Image.

I hope this piece makes it easier for you to decide whether to use PNG or SVG for your website, and how to make your SVG optimized for search engines, so you can bring this up to the team's discussion even prior to the designers getting to their drawing board.

If you want to know more about SVG in comparison to PNG, we've also written up a complete comparison piece here. Do check it out!

Yi Qian

CXO at Capital Electra X/ Vecta.io. Solving problems by connecting dots between brains, over a cup of coffee.