H1 с двумя логотипами

У меня в шапке сайта два логотипа.

Мне нравится решение: Замена текста H1 изображением логотипа: лучший метод для SEO и доступности?:

Решение: Согласно Мэтту Катсу (и некоторым другим комментариям) лучшим решением является использование изображения с атрибутами alt и title. Атрибут alt предназначен для SEO, а атрибут title - для доступности. Использование изображения также имеет смысл для семантической разметки. Логотип компании на самом деле является важным элементом контента.

<h1>
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow" title="Click to return to Stack Overflow homepage" />
  </a>
</h1>

Как это сделать с двумя логотипами?

<h1>
   <a href="http://stackoverflow.com">
     <img src="logo1.png" title="Click to return to Stack Overflow homepage" alt="logo1 " />
  </a>
  <a href="http://stackoverflow.com">
    <img src="logo2.png" title="Click to return to Stack Overflow homepage" alt="logo2" />
  </a>
</h1>

тогда h1 будет: logo1 logo2?


html seo accessibility graphical-logo
person user2160744    schedule 12.03.2013    source источник
comment
Пожалуйста, покажите, где, по словам Мэтта, title хорош. Атрибут title не следует использовать, поскольку вспомогательные технологии обрабатывают его по-другому. У меня есть несколько ответов по этому поводу.   -  person Ryan B    schedule 12.03.2013
comment
У вас есть реальный пример использования? Что будут содержать эти два логотипа?   -  person unor    schedule 13.03.2013

Ответы (2)


arrow_upward
2
arrow_downward

Вы не должны использовать h1 в качестве логотипа, как объяснил Гарри Робертс (http://csswizardry.com/2013/01/your-logo-is-still-an-image-and-so-is-mine/).

Если вы хотите использовать два логотипа, просто используйте две ссылки.

person Jakob Plöns    schedule 12.03.2013
comment
Если логотип представляет заголовок сайта, вы должны использовать h1. В противном случае структура вашей страницы может быть неправильной. - person unor; 13.03.2013

arrow_upward
0
arrow_downward

В случае двух логотипов это зависит от контекста. Вы используете два изображения, потому что это две разные вещи, т. Е.

<h2>Our Sponsors</h2>
<a><img src="" alt="Google"/></a> <a><img src="" alt="MS"/></a>
<a><img src="" alt="Adobe"/></a>

Или что-то вроде:

<a><img src="" alt="Toyota"/><img src="" alt="Corolla"/></a>

Если это вторая секунда, вам следует сделать:

<a><img src="" alt="Toyota Corolla"/><img src="" alt=""/></a>

Что касается вспомогательных технологий, первый пример Toyota Corolla будет выглядеть так:

Изображение ссылки toyota image corolla

и второй способ:

Изображение ссылки Toyota Corolla.

Некоторые говорят, что использование null alts (alt="") плохо для доступности и / или SEO. Это неправда. Если изображение используется в декоративных целях, следует использовать нулевой атрибут alt, потому что все, что он делает, это добавляет ненужную болтовню. Когда-то поисковые системы обвинили людей в использовании null alt, но теперь их нет.

person Ryan B    schedule 12.03.2013
comment
Что касается второго примера: если пользователь программы чтения с экрана захочет загрузить изображение, он подумает, что первый img относится к Toyota Corolla, но вместо этого он касается только Toyota. То же самое для ботов (например, поисковых систем). - person unor; 13.03.2013