画布元素内内容的搜索引擎优化

Ric*_*ton 6 html seo canvas

我最近创建了这个项目https://github.com/flipboard/react-canvas,它使用画布在移动设备上呈现整个页面。结果令人惊讶并且表现非常好。顺便说一句,据我所知,搜索引擎看不到画布元素中的内容。索引此内容的正确方法是什么?

小智 8

传统上(对于 Flash/Silverlight 站点),它是通过向搜索引擎提供显示可索引文本的替代内容来完成的。我相信你可以对画布元素做同样的事情。最简单的方法是:

<canvas>This is what search engines actually see</canvas>
Run Code Online (Sandbox Code Playgroud)

  • 这个答案是正确的。尽管 Google 无法看到画布的内容,但它肯定会看到 &lt;canvas&gt;...&lt;/canvas&gt; 标记中的文本并为其编制索引。我已经在我自己的网站上尝试过这个,如果我在我的画布标签中搜索了一个独特的短语,那么该页面将出现在搜索结果的顶部,并且该搜索结果会显示来自画布标签的上下文文本,所以它绝对是索引。这个想法类似于使用图像替代文本为图像分配含义。因此,您肯定要考虑对放置在画布标签内的文本应用适当的 SEO。 (7认同)