删除 h1 标签的第一个字母答案

【问题标题】：Remove first letter of a h1 tag删除 h1 标签的第一个字母
【发布时间】：2014-10-04 14:51:17
【问题描述】：

我遇到了一个棘手的问题。我有一个带有公司名称的 h1-Tag。就在代表该公司徽标的图片前面，看起来类似于组织名称的第一个字母。

<img src="logo.png" alt="O" /><h1>Organization</h1>

这里的 ALT 不是“O”——我只是用它来表示它看起来像一个“O”。

现在

img, h1 {float:left}

我让它们一起漂浮，问题就从这里开始了。我希望图像替换 h1-Tag 的第一个字母，但我仍希望将完整的组织名称保留在 h1-tag 中以进行有用的 SEO。

通过 CSS 替换第一个字母没有用处，因为我需要单独的 img-Tag 以便我可以将它用于新的 schema.org 标记。

【问题讨论】：

你能把span中的第一个字母包起来并隐藏起来吗？
我想我可以 - 问题是当我使用显示时爬虫会说什么：h1 标签内没有，SEO 效果比删除第一个字母更重要
您为什么需要img 元素才能“将其用于新的 schema.org 标记”？
我还能如何使用 itemprop="logo" ？
从你的标记中删除 0，当你实现 schema.org 时，只需使用这是使用元标记的完美案例，并且具有没有不良影响。或者在页面加载后用 jQuery 删除第一个字母。

【解决方案1】：

您可以使用 ::first-letter 和 ::after 伪类，它仍然对 SEO 友好

h1::first-letter {
  color: transparent;    
}

【讨论】：

【解决方案2】：

没有办法使用 CSS 删除字母。隐藏信件的技巧有很多种，但它们不可靠且很棘手。

使用 JavaScript，您可以轻松地从元素内容中删除第一个字母。

一个简单的纯 HTML 方法是

<h1><img src="logo.png" alt="O">rganization</h1>

但是搜索引擎很有可能会将“O”和“rganization”视为两个不同的字符串。

【讨论】：

【解决方案3】：

您可以在 h1 内的单独 span 中添加“O”，并将该跨度的 opacity 设为零（也是将其隐藏在图像后面的负边距）

我不知道它是否对 SEO 友好。

【讨论】：

嗯，是的，这会起作用 - 也被建议作为对我上面问题的评论。除此之外，我不确定 cralwer 是否喜欢这个想法，以及这里的一些 SEO 专家是否知道它是否可以……我可以 :)

【解决方案4】：

只需将公司名称放在 alt 标签中并删除 h1 中的字母。出于 SEO 的目的，我可能是错的，我很确定 alt 标记对蜘蛛来说比只有正文更有用。将它放在 alt 中应该意味着公司的名称仍然会被选中，并且您不必想出不必要的复杂解决方法。

【讨论】：

您是在谈论 img-tag 中的 alt-tag 对吗？像
Organization
... 对吧？或者您是在谈论 h1-tag 中的神秘 alt-tag，......这对我来说是新的
任何标签都可以有一个alt标签。老实说，如果是我，我会把整个东西包在一个 span 或 div 中，然后给那个 alt你目前所拥有的，我会说它在图像中效果最好，因为你的 h1 已经有文本，加倍下注将是多余的。
那么最好完全摆脱 h1-tag ...否则蜘蛛会爬行
rganization
- 我真的不想让机器人将“组织”视为我页面上的一种标题
确实如此。我相信你可以把它放在元数据中，尽管我承认我对它的了解并不多，因为它与蜘蛛和搜索引擎优化有关。就像我说的，如果是我，我很可能只是将它制作成一张有凝聚力的 .png 图像，而不是将图像和文本元素混合在一起，一旦它击中用户就会出错。
@ETStudios：只有a 和area 元素可以有alt 属性。