inline SVG - best alternative to "alt" tag normally used for < img > SEO? [duplicate]

Question

Say I were to swap out an <img> within my main site header to use SVG instead. Normally I would depend on the <img>'s alt tag.

Is the SVG <title> the best replacement method for "alt" with this type of changeover?

<svg role="img" aria-label="title + description here]">
  <title>[title here]</title>
  <desc>[long description here]</desc>
  ...
</svg>

Cohen

To achieve exactly what? Since it's just markup, search engines can (and i know Google does to some extent) read SVGs. – Bodkin

To achieve the same SEO benefits that you would get from using the <img> alt tag. I know that the engines read SVG's, so I just want to be sure that using the Title (or Description) within the SVG is indeed the way to go. – Cohen

Answer 1

I have studied 508 quite a bit over the years. For the tiny bit of overhead it will cost you to create an alternative text attribute to the svg image, it really isn't worth skipping it. Keep in mind that all screen readers are different, and so are their users. SVG has a lot of capability to harness, but we aren't there yet. Yes, Google will index the text in your image, but if you care about non-sighted users being able to access your content across the board, you should throw in an alt tag. It is literally the bottom rung of accessibility features. There is no sense in letting the low hanging fruit rot on the vine.

Cannery

Answer 2

According to SVG Open, a <title> must be supported by screen reader of for example blind people, still there are workarounds already discussed on StackOverflow <-- HERE IS YOUR ANSWER, this topic might be a duplicate?

Uhhuh

Answer 3

Im quite interested in this matter too. As of now my best guess is to use an <img> with the alt tag in your page code, then with javascript replace the img with the actual svg code inline. You can check this answer for a small script replacing the img with your svg inline content.

Gossamer

what would be the purpouse of that? – Uhhuh

@hRvoed Your pointed solution looks indeed more appropriate and officially reccomended. The purpose of my suggested expedient is a quick and dirty way to clean up source code from inline svg and mostly to retain the <img> alt tag function for seo and screen readers. – Gossamer

Answer 4

Absolutely best to pull an SVG in from an <img src="" alt=""> to get all the benefits of an SVG + simple SEO. It is likely that Google spiders know that an SVG's title should be the alt tag but there is not guarantee and I'm sure that their are plenty of crawlers that don't.

Merman

This is not always the benefit as it requires a round trip to the server for the image. Given that the image is a logo, and very prominent on the site, you do not want to wait to fetch it. It could be inlined with the rest of the site, especially if it's a SPA where it won't even be destroyed from the page most of the time. – Milium

Answer 5

If SEO is your main concern, why not refer to the SVG from an img element's src attribute? It's surely implemented more widely that inline SVGs, so it's probably the better choice in that case.

Bodkin

This is a specific concern for inline SVG, since I am styling the "fill" of one of the paths with CSS. – Cohen

You can still do that, if you refer to an external CSS file from within your SVG IIRC. – Bodkin

Answer 6

Would this work?

<svg role="img" id="my-svg-img">

  ...
</svg>

<img src="#my-svg-img" alt="Hey hey, kids!" >

(Or if you found that your <title> approach works woudl you be so good as to post as an answer? I'm kinda fumbling around in the dark with the same problem at the moment)

Mignon