January 14, 2019 · SVG · Web

Best Practices for SVG SEO in Google Image

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?
Search engines ranking
Search engines ranking

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:

SVG with <img> tags indexed in Google Image search
SVG with <img> tags indexed in Google Image search

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 Radica Software, and it is showing up perfectly in Google Image few days after changes are made.

SVG with <object> tags indexed in Google Image search
SVG with <object> tags indexed in Google Image search

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!

Subscribe to our newsletter!

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript.

Like the article? Give the author some claps.

Share it with your friends!
AUTHOR

Yi Qian

CXO at Vecta.io. Solving problems with people for people by connecting dots between brains, over a cup of coffee.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...

IF YOU LIKE THIS POST, YOU'LL LIKE THESE TOO

March 09, 2019 · SVG · Web · PNG

Improving mobile page speed by 200% using SVG and Nano

According to Google, your page should load within 3 seconds, otherwise 53% of mobile visitors would abandon your page. If it takes 6 seconds, the probability of bounce increases to 106%. In short, your website's performance has a direct correlation t...

December 12, 2018 · SVG · Web · CSS

The definitive guide to CSS styling order

Ever wondered why your CSS does not apply and require the important keyword instead? Or why SVG editors uses inline attributes instead of CSS style sheets? Read on to find out how styling methods affect what's being applied to your elements.

December 01, 2018 · SVG · Web · PNG

Responsive images using SVG instead of srcset

It used to be, if you embed an image onto your website, that will be the end of the story. But with the proliferation of high resolutions displays, webmasters all over the world are scrambling to update their websites with high-res images using srcse...