2,132 просмотра

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

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

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

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

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

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

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

.logo {
    width:100px;
    height:30px;
    background:url(images/logo.jpg) no-repeat left top;
}

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

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

Логотип компании Google.

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

Логотип для оформления (ненавигационный).

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

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

<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;
}

Этот метод оформления логотипа уже лучше, но опять же отсутствуют ключевые слова в ссылке, обычно высокочастотные, по которым оптимизируется главная страница сайта. Ведь обычно, лого размещается в самом верху страницы, для SEO это важная часть. Поэтому, хорошим решением для навигационного логотипа будет следующее:

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

При этом, чтобы спрятать ключевые слова от глаз пользователя, достаточно в CSS использовать правило text-indent.

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

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

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

Внутренняя страница Google.

Внутренняя страница Google.

Википедия

Логотип Википедии.

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

Вид навигационного логотипа биржи ссылок Sape.ru

Выводы

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

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

  • 1 Нет
  • 9 Да
  • Мне понравилось!

Если вам понравилась статья, вы можете подписаться на RSS или E-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму (Доставка от FeedBurner):