Question

我已经停止为页面的徽标插入“img”标签。因为它不是作为内容一部分的图像，它是一个设计元素，但它仍然是我想要控制的信息。所以我只是在一个“a”元素中将标题写为display：block，overflow：hidden，然后用一些填充推出文本。我认为这是SEO的一个很好的解决方案，因为你可以控制徽标在页面上的重要程度。

但现在我的困境正在开始。页面的标识有多重要？

“分开列表”将徽标放在h1元素中。但徽标真的那么重要吗？在文章页面上你有两个H1元素（徽标和文章的标题）大多数网站只使用img balbal / a，但我不喜欢这个解决方案。因为我只想将img用于作为内容一部分的图像......

它有点哲学问题，我希望你能给我一些意见或一些文章来阅读...

Answer 1

对于主页，徽标是一个非常重要的标题。

<h1><img src="/logo" alt="ACME inc."></h1>

...它是一个图像，是内容的一部分，它不是装饰性的或背景的一部分。

对于其他页面，它不是。

<div><a href="/"><img src="/logo" alt="ACME inc."></a></div>
<h1>Products</h1>

Answer 2

以这种方式思考：“如果残障人士访问该网站，那么文本到语言浏览器应如何翻译该页面？”。

您是否希望文本到语音将徽标作为图像提及？如果是：徽标应该是带有标题的img，提供文字说明。如果不是：使用任何替代品，不要将图像作为内容。

您是否想强调页面标题，文章时间和徽标的重要性？

我想我会

使用img作为徽标（这样也会打印出来，如果使用背景图片，情况并非总是如此）
提供描述徽标和公司的漂亮标题（带有“alt”属性）
页面标题为“company - page title”
主标题为h1。

我觉得它也应该提供合适的SEO结果。

Answer 3

您的徽标代表您的品牌标识。这是您希望访问者记住的 ONE （如果他们喜欢您的网站，那就是）。

我个人建议始终在<h1>标记中使用CSS图像替换技术来处理您的徽标，因为您希望搜索引擎将此识别为您的面包和黄油。您希望确保您的公司名称排在最前面。这将有助于你到那里。

h1#logo { height: LOGOHEIGHTpx; width: LOGOWIDTHpx; text-indent: -999em; overflow: hidden; background: transparent url('/path/to/logo.gif') 0 0 no-repeat; }

Answer 4

我更喜欢将徽标放在H1中并隐藏网站的名称。徽标是网站标识的重要组成部分，但它通常也是“主页”链接......所以它非常重要！

编辑：CODE SNIPPET TIME !!

<h1><a href="/" id="logoLink">my company</a></h1>

链接上有背景图像（以及设置宽度和高度等的显示块）。

Answer 5

问： - 页面上的websitelogo有多重要？答：非常重要！：）

Answer 6

作为一个老搜索引擎家伙，标识本身并不是页面的真正含义。我通常把它（img或文本）放在一个风格的div中。通常，您要在H1中包装页面的特定用途的标题。这通常与TITLE相同，但我通常在标题的“| SiteName.com”上添加，以便在结果列表中清楚地显示网站名称。

Answer 7

我总是这样做：

HTML：

<h1 id="logo"><a href="#">Company Name (with tagline, if any)</a></h1>

CSS：

#logo a {
  float:left;
  width: ...px;
  height: ...px;
  text-indent:-1000em;
  background: url(/path/to/image) no-repeat;
}

您可以在内页上用H2，H3等替换H1，但我更喜欢尽可能保持标题（和其他部分）一致。

Answer 8

我认为优良作法是让您的<h1>代码与页面的<title>匹配（或包含）相似的文字。出于这个原因，我认为以下模式是一个很好的模式：

<title>Your Site Name Here</title>

...

<h1 id="logo">Your Site Name Here</h1>

在其他页面上：

<title> Article Title Here  | Your Site Name Here</title>

...

<div id="logo"><a href="/">Your Site Name Here</a></div>

...

<h1>Article Title Here</h1>

在<a>中嵌套div#logo标记可让您拥有与徽标显示不同的点击区域。例如，如果您有一个广泛的阴影或其他无法点击的元素，a可能会小于div#logo并提供帮助。

Answer 9

10年前，当我第一次访问新的搜索引擎时，我只看到一个文本框和顶部的标识，上面写着'google'。网页普通没有任何大量的html元素，实际上只有一个文本框和一个徽标，但由于徽标和出色的搜索结果，我总是记得页面。标志是重要人物，非常重要

Answer 10

请查看此页面顶部。如果没有在角落里看到“堆栈溢出”标识，你就无法在这个网站上的任何地方进行大量工作。

我会说我定期访问的网站至少有90％（可能更多！）有一个反复出现的标识。营销是一种生病和扭曲的事情，但如果有这么多的网站正在做这件事，那可能不是太大的错误。

从视觉角度来看，徽标至关重要 - 它是页面标识的一部分，用户会将其与内容相关联。这几乎是一个难以察觉的事情，但我知道如果我没有在内容页面的顶部看到一个徽标，那几乎就是对我不专业的设计了！这是一件微妙的事情。确保用户知道他们在哪里以及他们在看什么;形成一种心理联想。

是的，搜索引擎结果很重要，但这并不意味着徽标是一次性的。

Answer 11

我曾经做同样的图像替换，但我终于意识到这是浪费时间。只要存在有意义的alt属性，您就应该拥有该图像。

至于适当的标记：在主页上，我将徽标设为h1，因为它是页面的标题。在其他网页上，我将其放在p中，页面的实际标题为h1。

例如，主页是：

<div id="header">
  <h1><img src="logo.jpg" alt="HyperGlobalMegaCorp"></h1>
</div>
<div id="content">
  <h2>Welcome to the HyperGlobalMegaCorp website</h2>
</div>

而联系页面是：

<div id="header">
  <p><img src="logo.jpg" alt="HyperGlobalMegaCorp"></p>
</div>
<div id="content">
  <h1>Contact HyperGlobalMegaCorp</h1>
</div>

...那是HTML，而不是XHTML，在一些狂热者开始关于关闭img元素之前; - ）

Answer 12

我使用徽标图片和文字来改善我网站上的搜索引擎优化

<h1 id="pageheading"><a href="http://mysite.com" title="site description">
<span>Site name</span><img src="mylogo.gif" alt="my brand" />
</a></h1>

然后我使用css进行格式显示，以便访问者只能看到我的徽标，但SE可以看到两种搜索结果都可以显示2种类型的搜索text和image。使用搜索的图像是您网站的品牌，当访问者看到您的徽标时，他们会考虑您的网站，您的产品，服务，如HP，IBM，DELL等....在其他情况下，您可以制作段落标记以获取更多有关您网站的说明，请关注您网站中的某些关键字。我的语言能力不好但是我还想和你分享一些知识，当我弄错语法时请不要笑我：）

Answer 13

感谢您的投入，这对我帮助很大。这是我对你所有答案和想法的总结：

在技术上如何实施徽标取决于您的编程风格和个人理念。有些人在H标签中使用IMG，有些人隐藏了他们使用的标签的内容，并将徽标作为背景图像。

但我想我得到了答案：

将网站视为书籍或杂志。在封面上你想要把这本书的标题作为最重要的元素，也许是一些头条新闻。但是在媒体内部，你要将你的书/杂志标题实现在标题中，也可能是页脚。

为了使文本导航器或搜索引擎可以理解这一点。我现在选择一个h1标签将我的徽标放在主/主页上。但在其他页面上有一个简单的IMG，A或任何标签，但H。

请分享您对我的结论的看法。

页面上的网站徽标有多重要？

13 个答案: