网站上品牌标志的最佳实践

Question

我必须制作一个微型网站，我想知道在 HTML 模板中使用徽标的最佳方法。 （忽略这是无效代码的事实，如果我使用 alt="" 为例，它只是任意的华夫饼。）

选项 1：

<a href="#">
   <img src="logo.gif" /> 
</a>

选项 2：

<h1>
   <a href="#">
      <img src="logo.gif" /> 
   </a>
</h1>

选项 3：

<h1>
   <a href="#">
   </a>
</h1>

h1{background: url(logo.gif);}
h1 a{height: #px; width: #px;}

选项 4：

在 SEO 中使用 h1、h2 或 h3 是否更好， 据我了解，重复的 h1 是个坏主意和公司品牌 不是每一页的主要主题 在它的网站上？

我一般用的是Option 3，像这样：

<h2>
   <span>Company name</span>
   <a href="#">
   </a>
</h2>

h2{height: #px; width: #px; background: url(logo.gif);}
h2 a{display: block; height: #px; width: #px;}
h2 a span{display: none;}

Answer 1

我通常使用选项三，但这有一个缺点：如果未加载 CSS，则公司徽标也不可见。我认为徽标是任何时候都应该出现在网站上的图像之一，即使没有 CSS，因为它是品牌非常重要的一部分。因此，我认为使用<img> 作为徽标在语义上是最正确的。它是页面内容中重要的图像，而不仅仅是样式的一部分。

我最喜欢的选项（我应该更多地使用它）是将带有替代文字的徽标图像与标题分开。在<h1> 中我再次输入品牌名称，或者如果它不是主页，我会将其放在常规 div 中并使用<h1> 作为实际页面标题。通常使用徽标和名称作为标题在设计方面不会受到伤害。

关于选项 4：这取决于您使用的 HTML 版本，因为 HTML5 允许多个h1。我已经在 Google 的版主问题中添加了一个关于这对 SEO 的影响的问题，我希望 Matt Cutts 将在他的下一轮视频中回答这个问题。

Answer 2

在 HTML5 中（如果您的标题仅包含您的徽标和标语/座右铭），请执行以下操作：

<header role="banner">
<a href="#"> 
   <img src="logo.gif" alt="Waffle Inc." />  
</a> 
</header>

Answer 3

通常鼓励使用<h1> 作为徽标，因为您的品牌标识本质上是一种声明，而不仅仅是一种装饰性特征。但是，不要对您网站上的任意图像使用<h*> 标签。

我建议您将您的徽标放在<img> 标签中，并为其指定一个alt 属性，不要将其作为背景图片。

Answer 4

在主页上使用 h1。将主页的主标题作为公司名称是有意义的。替代文本应该是公司名称。

在其他页面上使用普通的 div，它不是任何类型的标题。该页面将有自己的主标题。

Answer 5

我喜欢选项 3，因为它允许您将公司名称添加为实时文本。

但是不要将公司logo作为h1标签，h1标签是页面内容的主推，应该是内容标题。我根本不会在标题标签中使用公司徽标，因为它不是标题。