Как лучше всего кодировать логотип с надписью в заголовке?

Question

Какой метод лучше?

<div id="header">
 <a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
    <h1>slogan of company</h1>
</div>

<div id="header">
 <a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
    <p>slogan of company</p>
</div>

<div id="header">
 <a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
    <span>slogan of company</span>
</div>

<div id="header">
   <div id="logo">
     <a href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
        slogan of company
   </div>
</div>

Answer 1

Я думаю, что лучшим подходом было бы иметь слоган в виде промежутка. Слоган не является действительно первым заголовком вашего документа. Подумайте, если бы это было оглавление, вы бы увидели лозунг в качестве первой записи?

Answer 2

Нет, что-то вроде следующего будет лучше:

<div id="header">
    <h1><a href="#" title="Company">Company</a></h1>
    <h2>Slogan</h2>
</div>

h1 { text-indent: -90000px; background: transparent url(/img/logo.png) no-repeat left top;  width: 172px; height: 80px; }
h1 a { display: block; width: 172px; height: 80px; }

h1 используется только один раз, для самой компании. Затем вы заменяете текст логотипа изображением с помощью CSS. Таким образом вы сохраните разметку в своем CSS.

Answer 3

Наверное, нет; Лучше сделать это так:

<h1 onclick="document.location='/';"><span>CompanyName</span></h1>
<h2>Slogan here</h2>

Поскольку ваш логотип является частью макета, а не изображения в контексте (например, изображение продукта), вы должны поместить его на фон h1.

Сделайте свой CSS следующим образом:

h1 {
 background-image: url(logo.png);
 width: 200px;
 height: 80px;
 cursor: pointer;
}

h1 span {
  display: none;
}

Таким образом, он доступен как для пользователя, так и для пользователя, а также для поисковой системы.

Answer 4

В общем, я думаю, что вы увидите лозунг каждого как изображение, а не текст (с текстом как атрибут alt). И href = "#" означает "перейти наверх этой страницы". Вероятно, это должна быть ссылка на домашнюю страницу. ... Пока вы используете alt, поисковые системы будут правильно его индексировать. Если это домашняя страница, это может оправдать использование имени и слогана в элементах h1 и h2, но в других местах это, вероятно, не требуется. Вероятно, лучше привлекать трафик на основе фактического содержания страницы, а не пытаться сделать каждую страницу одинаковой в глазах поисковых роботов. Название компании, вероятно, уже в URL, что достаточно.

Answer 5

Выглядит хорошо, за исключением того факта, что лозунг на самом деле не является заголовком, следовательно, вместо <h1>

следует использовать <span> или что-то без смыслового значения

Answer 6

Слоган, вероятно, подчиняется некоторым правилам дизайна (например, позиция относительно логотипа). Так как слоган, вероятно, в любом случае не имеет большого смысла в контенте / SEO, и более важно, что он выглядит правильно, я бы рекомендовал поместить слоган в изображение.