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

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:

Является ли использование 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

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

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

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

Answer 2

В HTML5 (если ваш заголовок содержит только ваш логотип и слоган / девиз) id сделайте это:

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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