Html 内联SVG-取代“SVG”的最佳选择；alt"；标签通常用于<；img>；搜索引擎优化？

假设我在主站点标题中交换了一个

，以使用SVG。通常我会依赖于

的alt标记

SVG

是否是此类转换中“alt”的最佳替代方法

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

[此处标题]
[此处有详细说明]
...

如果SEO是您主要关心的问题，为什么不从img元素的src属性中引用SVG？它肯定比内联SVG实现得更广泛，因此在这种情况下，它可能是更好的选择。

这行得通吗

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

  ...
</svg>

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

...

---

（或者，如果你发现你的

方法有效，你是否愿意发布一个答案？我现在正在黑暗中摸索着同样的问题）

我对这件事也很感兴趣。到目前为止，我的最佳猜测是在页面代码中使用带有alt标记的

，然后使用javascript将img替换为实际的svg内联代码。您可以检查是否有一个小脚本用svg内联内容替换img。

根据，例如盲人的屏幕阅读器必须支持

，但仍有一些变通方法已经在上讨论过。多年来，我已经研究了508。尽管为svg图像创建一个替代文本属性需要花费很少的开销，但不值得跳过它。请记住，所有屏幕阅读器都是不同的，他们的用户也是不同的。SVG有很多可以利用的功能，但我们还没有做到。是的，谷歌会为你的图片中的文本编制索引，但是如果你关心没有视力的用户能够全面访问你的内容，你应该添加一个alt标签。它实际上是辅助功能的最底层。让低垂的果实在藤蔓上腐烂是没有意义的。

最好从

中引入SVG，以获得SVG+简单SEO的所有好处。谷歌爬行器很可能知道SVG的标题应该是alt标记，但这并不能保证，而且我确信他们的爬行器中有很多是不知道的。

到底实现了什么？因为它只是标记，搜索引擎可以（我知道谷歌在某种程度上也可以）阅读SVG，从而获得与使用alt标签相同的SEO好处。我知道引擎读取SVG，所以我只想确保在SVG中使用标题（或描述）确实是一条可行之路。这是内联SVG的一个具体问题，因为我正在用CSS设计其中一条路径的“填充”样式。您仍然可以这样做，如果您从SVG IIRC中引用外部CSS文件，其目的是什么？@hRvoed您的有针对性的解决方案看起来确实更合适，并且正式推荐。我建议的权宜之计的目的是快速而肮脏地从内联svg中清理源代码，主要是为了保留seo和屏幕阅读器的

alt标记功能。这并不总是一个好处，因为它需要往返服务器获取图像。鉴于该图像是一个徽标，并且在站点上非常突出，您不想等待获取它。它可以与站点的其他部分进行内联，尤其是如果它是一个SPA，大多数时候甚至不会从页面上被破坏。