On pages that have many SVG images, it would be desirable to inline all the svg images since this will reduce the number of HTTP requests and significantly reduce the size of all SVGs combined because when all the SVGs are in a single page, compression is much better than when they are each in their own separate file.
The problem with inlining SVG images is that they would not be indexed because they are not separate files. The obvious solution to this is to have all SVG images avaiable as individual files, and let search engines know the URL of each inlined SVG image, so that it can be indexed.
I found 3 possible ways of doing this:
1) Use a <noscript>
element with an <img>
element inside, just after
the inlined <svg>
, which looks like this:
<svg aria-labelledby="svg-title-id" role="img">
<title id="svg-title-id">Image alt text</title>
...
</svg>
<noscript>
<img src="file-with-same-content-as-inline-svg.svg" alt="Image alt text" >
</noscript>
Note that both the <title>
of the inline SVG as well as the <img>
alt
attribute have the image alt text.
2) Using structured data mark up:
<script type="application/ld+json"> {
"@context": "http://schema.org",
"@type": "WebPage",
"image": [
"first-inlined-svg.svg",
"second-inlined-svg.svg",
...
]
}
</script>
3) Use an image sitemap:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>https://www.example.com/page.html</loc>
<image:image>
<image:loc>https://www.example.com/first-inlined-svg.svg</image:loc>
<image:title>Image alt text</image:title>
</image:image>
<image:image>
<image:loc>https://www.example.com/second-inlined-svg.svg</image:loc>
<image:title>Image alt text</image:title>
</image:image>
...
</url>
</urlset>
Which of the above approaches is preferred in order to have inline SVG images indexed?
Or is there a better way?
<noscript><img>
approach, mainly because it gives the image more context since the<noscript><img>
appears right after the inline<svg>
and thus has relevant text around it.