Can text content in an HTML5 <canvas> element be indexed by search engines?

Question

I was wondering if content in an HTML5 canvas element has any positive/negative effects on SEO, or if it is indexed at all.

Answer 1

Probably not, try this tool http://robot.dabase.com/ to see what a robot typically sees on your site.

Answer 2

If the text is in the HTML, between the <canvas></canvas> tags, then yes. Although I'm unsure of what context the search engine would see that text in.

If the text is drawn to the canvas then no.

Answer 3

Don't really understand the question, do you mean

 <canvas>Some text</canvas>

? That would be silly for reasons which have nothing to do with search engines. The <canvas> tag is for rendering using JavaScript, so if you are asking about that, your question is sort of equivalent to whether search engines can see text written by JavaScript.

Answer 4

Canvas renders text as images, surely if you have an image clearly displaying text, theoretically Google can recognize the image and index it as let's say header but it is very unlikely at this point. I personally would never gamble with important on-page SEO elements such as headers and text. Since bots see canvas elements as images then we could just convert site layouts to jpegs and throw it online hoping all the text would get indexed properly and the links we could handle with image maps. But that's crazy talk, right? That's why flash websites have tough time indexing their content without special bot-friendly scripting.

Until Google gives exact guidelines how to handle canvas in the SEO I would just use @font-face for nice looking headers.

Answer 5

If it is rendered into the bitmap as pixels then this is the same question as would a GIF or JPEG with text in it (w/o an alt attribute) be recognized. In other words is Google image search doing OCR on the images...the answer is probably not.

The fallback text as in

<canvas> Some alternate text here </canvas>

would likely get picked up.

Also in many cases when people are using canvas they are using overlays since putting text in a canvas drawing is a bit dicey particularly if you want fine grain control. Instead folks end up opting to put it in HTML/CSS and then overlay it. This is how many charts do their legends/labels actually.