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

Question

我必须制作一个微型网站,我想知道在HTML模板中使用徽标的最佳方法.(忽略这是无效代码的事实,如果我使用alt ="",它只是任意的waffle.)

选项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:

使用h1,h2或h3对SEO更好,因为我知道重复的h1是一个坏主意,公司品牌不是它网站上每个页面的主要主题？

我通常使用的是选项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

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

我最喜欢的选项(我应该更多地使用它)是将徽标图像与标题分开的alt文本.在<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>