Каждый современный сайт имеет свой логотип. Функционально логотипы подразделяются "оформительские" и "навигационные". Совершенно не важно, какого типа вы используете логотипы (текстовые, геометрические, web2.0 и другие), но с точки зрения SEO, важно как он оформлен в HTML коде. Именно об оптимизации логотипов и хотелось бы поговорить.

Если говорить о логотипах первого типа, то в зависимости от объема страниц и информации их можно оформлять либо картинками (тег img), либо с помощью CSS стилей. При небольшом количестве контента и наличии всего одной или нескольких страниц на сайте, хорошим решением будет использовать для логотипа тег <img> с нужными ключевыми словами в аттрибуте alt, которые будут дополнять контент страницы.

Заметьте, что в аттрибуте alt нужно писать ключевые слова, по которым оптимизируется сайт, можно с названием сайта, создавая бренд, а не надписи вроде “Логотип компании“. При таком подходе ваш логoтип также будет выдаваться в результатах поиска изображений по выбранным вами ключам или бренду. Пример можно посмотреть на сайте seogen.net – seo генератор.

Если на сайте множество страниц с большим количеством контента, которые оптимизируются под низкочастотные запросы, тогда лучше оформить ненавигационный лoгoтип с помощью CSS стилей, чтобы оптимизировать код, загрузку страниц и не мешать высокочастотные запросы в ключах логотипа с низкочастотными в контенте.

Примеры логотипов первого типа (ненавигационных).

Главная страница Google. Посмотрите, как офорлен их логотип в HTML коде.

На данной странице сайта ресторана сложно выделить логотип, он наложен на верхнюю галерею.

Навигационные логотипы

Логотипы этого вида можно оформить разными способами, например, так:

<div class=“logo”><a href=”/”><img src=“images/logo.jpg” alt=“Ключевые слова” width=“100” height=“30” /></a></div>

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

<div class=“logo”>
    <a href=”/”></a>
</div>

.logo {padding-left:32px; padding-top:70px;}
.logo a {
    background:url(/images/logo.jpg) no-repeat left top;
    display:block;
    height:43px;
    width:133px;
}

<div class=“logo”><a href=”/”>Ключевые слова сайта</a></div>

использовать правило text-indent.

.logo a {text-indent:-1000em; outline:0;}

Опять же, следует заметить, что многие в логотипах в аттрибуте alt ставят ненужную никому информацию “Лого сайта”, “Домашняя страница” и т.д. (напр., www.photostart.info). Ставьте в alt нужные ключи, а если вы хотите уведомить пользователя при наведении мыши на логотип о том, что после клика он будет перенаправлен на главную страницу, используйте для этого аттрибут title для ссылки или изображения, который для этого и предназначен и не берется во внимание поисковиками.

Примеры навигационных логотипов:

Википедия

Биржа ссылок Сапа

Выводы

Логотипы необходимо оформлять в коде так, чтобы с одной стороны оптимизировать HTML код, с другой – использовать нужные ключи для передачи ссылочного веса на главную страницу и с третьей – использовать аттрибут title для юзабилити. Подводя итог, формула идеального логотипа будет выглядеть следующим образом:

<div class=“logo”>
    <a href=”/” title=“MySite.ru – Домашняя страница”>Ключевые слова сайта</a>
</div>