删除h1标签的第一个字母

Question

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

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

这里的ALT不是＆＃34; O＆＃34; - 我只是用它来表示它看起来像是＆＃34; O＆＃34;。

现在

img, h1 {float:left}

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

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

Answer 1

你可以使用:: first-letter和:: after伪类，它仍然是SEO友好的

Example using pseudo-classes

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

Answer 2

只需将公司名称放在alt标记中，然后删除h1中的字母即可。出于搜索引擎优化的目的，我可能错了，我非常确定alt标签对蜘蛛更有用，而不仅仅是正文。把它放在alt中应该意味着公司的名字仍然会被接收，你不会想出一个不必要的复杂的解决方法。

Answer 3

您可以尝试使用h1元素的左边距 - 隐藏图像下方的第一个字母。

Answer 4

你可以拥有＆＃39; O＆＃39;在span内的单独h1内，并将该范围的opacity设为零（也为负边距，以隐藏在图片后面）

我不知道它是否适合SEO。

Answer 5

无法删除带有CSS的字母。有各种各样的技巧可以隐藏一封信，但它们不可靠和棘手。

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

简单的纯HTML方法是

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

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