Лучшая практика для логотипа бренда на веб-сайтах

Мне нужно сделать микросайт, и я хочу узнать лучший способ использования логотипа в шаблоне 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:

Использует h1, h2 или h3 лучше для SEO, как я понимаю, что повторяющиеся h1's это плохая идея, и бренд компании НЕ является основной темой для каждой страницы на этом веб-сайте?

Обычно я использую вариант 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;}

Ответ 1

В HTML5 (если ваш заголовок содержит только ваш логотип и tagline/motto), выполните следующие действия:

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

Ответ 2

Обычно я использую третий вариант, но имеет один недостаток: если CSS не загружен, логотип компании также не отображается. Я думаю, что логотип является одним из изображений, которые должны присутствовать на веб-сайте в любое время, даже без CSS, потому что это очень важная часть бренда. Поэтому я считаю, что семантически наиболее правильно использовать <img> для логотипа. Это изображение важно в содержании страницы, а не только в стиле.

Мой любимый вариант (я должен использовать его больше) - это иметь изображение логотипа с текстовым символом отдельно от заголовка. В <h1> я снова помещаю имя бренда, или если это не главная страница, я помещу ее в обычный div и использую <h1> для фактического названия страницы. Обычно это не может помешать дизайну использовать логотип и имя в качестве названия.

О опции 4: это зависит от того, какую версию HTML вы используете, поскольку HTML5 допускает несколько h1. Я добавил вопрос к модераторам Google о проблемах SEO, которые я надеюсь, что Мэтт Каттс ответит в следующем раунде видео.

Ответ 3

Использование <h1> для логотипа обычно поощряется, поскольку ваша идентичность бренда - это, по существу, выражение, а не просто декоративная особенность. Однако не используйте теги <h*> для произвольных изображений на своем веб-сайте.

Я бы порекомендовал вам разместить свой логотип в тегах <img> и просто указать для него атрибут alt, не иметь его в качестве фонового изображения.

Ответ 4

Используйте h1 на главной странице. Имеет смысл первичный заголовок для домашней страницы, которую компания идентифицирует. Alt text должно быть название компании.

Используйте простой div на других страницах, где это не какой-либо заголовок. Страница будет иметь свой собственный основной заголовок.

Ответ 5

Мне нравится вариант 3, поскольку он позволяет вам добавить название компании в виде живого текста.

Но логотип компании не является тегом h1, тег h1 является главной целью содержимого страницы и должен быть заголовком содержимого. У меня не было бы логотипа компании в теге заголовка вообще, поскольку это не заголовок.