内联 SVG - 通常用于 < img > SEO 的“alt”标签的最佳替代品？ [复制]答案

【问题标题】：inline SVG - best alternative to "alt" tag normally used for < img > SEO? [duplicate]内联 SVG - 通常用于 < img > SEO 的“alt”标签的最佳替代品？ [复制]
【发布时间】：2012-11-02 11:22:15
【问题描述】：

假设我要在我的主站点标题中换出 <img> 以使用 SVG。通常我会依赖<img> 的alt 标签。

SVG <title> 是这种类型转换的“alt”的最佳替代方法吗？

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

【问题讨论】：

究竟要实现什么？因为它只是标记，搜索引擎可以（我知道谷歌在某种程度上）可以读取 SVG。
实现与使用 alt 标签相同的 SEO 优势。我知道引擎会读取 SVG，所以我只想确定在 SVG 中使用标题（或描述）确实是可行的方法。

标签： html optimization seo search-engine

【解决方案1】：

这些年来我研究了很多 508。对于极少的开销，您将花费您为 svg 图像创建替代文本属性，确实不值得跳过它。请记住，所有屏幕阅读器都是不同的，它们的用户也不同。 SVG 有很多可以利用的能力，但我们还没有。是的，Google 会为您图片中的文字编制索引，但如果您关心视力不佳的用户能够全面访问您的内容，您应该添加一个 alt 标签。它实际上是辅助功能的底层。让低垂的果实在藤上腐烂是没有意义的。

【讨论】：

【解决方案2】：

根据SVG Open，<title> 必须由例如盲人的屏幕阅读器支持，仍然有在StackOverflow 上讨论过的解决方法这是你的答案，这个主题可能是重复的？

【讨论】：

【解决方案3】：

我也对这件事很感兴趣。到目前为止，我最好的猜测是在您的页面代码中使用带有 alt 标记的<img>，然后使用 javascript 将 img 替换为内联的实际 svg 代码。您可以查看this answer 以获取将 img 替换为 svg 内联内容的小脚本。

【讨论】：

这样做的目的是什么？
@hRvoed 您的针对性解决方案看起来确实更合适，并且被官方推荐。我建议的权宜之计的目的是一种从内联 svg 中清理源代码的快速而肮脏的方法，主要是为 seo 和屏幕阅读器保留 <img> alt 标签功能。

【解决方案4】：

绝对最好从<img src="" alt=""> 中提取 SVG，以获得 SVG + 简单 SEO 的所有好处。谷歌蜘蛛很可能知道 SVG 的标题应该是 alt 标签，但不能保证，我敢肯定他们有很多爬虫不知道。

【讨论】：

这并不总是有好处，因为它需要往返于服务器以获取图像。鉴于图像是一个徽标，并且在网站上非常突出，您不想等待获取它。它可以与网站的其他部分内联，特别是如果它是一个 SPA，在大多数情况下它甚至不会从页面中销毁。

【解决方案5】：

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

【讨论】：

这是内联 SVG 的一个特别关注点，因为我正在使用 CSS 设置其中一个路径的“填充”样式。
如果您从 SVG IIRC 中引用外部 CSS 文件，您仍然可以这样做。

【解决方案6】：

这行得通吗？

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

  ...
</svg>

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

（或者，如果您发现您的 <title> 方法有效，那么您是否可以很好地发布作为答案？我现在有点在黑暗中摸索同样的问题）

【讨论】：