Being documentation for my charting software, I have a lot of pages on my website that have SVG and/or canvas tags on them.

I recently learned from a Google video that during indexing, the JavaScript on the page isn't run immediately and can take several days to be rendered.

So given this, could the fact that a lot of my pages have JavaScript-dependent charts on them be holding my site back in terms of rankings?

  • The value is in your content, not how many tags you use.
    – Rob
    Commented Sep 9, 2022 at 14:17
  • How about replacing the canvas/SVG tags with images of each chart?
    – Richard
    Commented Sep 23, 2022 at 10:35
  • My experience has always been that when the page is indexed and findable in search whatever text or attributes that are made available are findable. It is an easy test - append and SVG or canvas element with a custom alt="125267" and site search for 125267. A page may take several days to be indexed ... although if your site is know by google to update at a faster rate google will index it faster. Commented Dec 4, 2022 at 1:23

1 Answer 1


The svg and canvas tags will basically just be seen as images or graphic elements, which generally only have an alt="" for SEO.

However, there are changes being made. These are coming from a friend of google, the people who want more accessibility; Google has not promoted this kind of content yet, as they have done for mobile devices but ... The Google bot is basically a screen reader.

How can webmasters/designers/coders make or code SVG better?

SVG works with CSS and we now have @prefers-color-scheme and @prefers-reduced-motion ... Basically the @prefers-color-scheme, when set by the user would be a dark theme or a light theme. This setting is for people with limited vision.

An SVG can be placed on the page with an image tag, which has had the alt="words" for a long time. Aria has added a role, class, aria-label.

  aria-label="What does the fox say?" 

For SVG and canvas the role="img" is specifically helpful when they ask to see all of the images. Both can also use the alt or aria-label attributes.

Specific to text in SVG, it is readable and there is a visual-hidden property so that it will only be read - as reading menu on a hamburger menu icon is helpful, otherwise none-viewers only know its a button.

<svg role="img" alt="Fox Speaking">
   <text class="visually-hidden" font-size="0">What does the fox say?</text>
   [design code]

We also have a title within an SVG.

<svg role="img" aria-describedby="myimage" ...>
   <title id="myimage">These words are what the image is about.</title>
   <text class="visually-hidden" font-size="0">This is the description of the image</text>
   [design code]

or alternative coding ... for those like me that don't feel good about a font-size="0"

<svg role="img" aria-describedby="fox12 description12" ...>
   <title id="fox12">What does the fox say?</title>
   <desc id="description12">Will we ever know?</desc>
   [design code]

img vs svg vs canvas

Currently, the SVG is the winner regarding coding readability and readability based SEO. Just try one of the aria-compliant screen readers and listen to your page. Or try using the tab key to manually go through the links without a mouse device.

But be advised, you may discover you have places, maybe drop-down menus that are not properly reading ... Content that does not follow in a logical manner ... we can do better.

Specific to Canvas

role="img" exists to put tags that are not img tags into the list of images so that the visitor can press the correct button on his device and get the list of all images.

So a role="img" alt="words" can be used with a canvas element.

Canvas as of today has no caption system like is available for video, that can read what is being animated in the canvas element. Don't know when that could change.

One can use the alt attribute on the canvas. As well as the aria-describedby="myimage" pointing to either an element with a "visually-hidden" style ...

(again I don't like the font-size 0 ... if the browser can not understand visually-hidden then I don't want to force it not to be seen, but a visually-hidden on a tag within the canvas element pointed to by the canvas aria-describedby makes sense to me. But it is not a suggested pattern by aria, so maybe wait for aria to decide how they want to address canvas tags?)

... or an element that is also shown to people who can see the context around the canvas image.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.