SEO Оптимизированный логотип
Всем известно о том, что почти каждый современный сайт наделен логотипом. Логотипы бывают разные - текстовые, геометрические, web2.0 и другие, однако, с точки зрения SEO, совершенно не важно, какого типа вы используете логотип, а важно то, как он оформлен в HTML коде. Именно об оптимизации логотипов и хотелось бы поговорить.
По назначению, логотипы можно подразделить на те, которые служат только для оформления страницы и не служат для навигации и те, которые являются частью навигации и должны вести на главную страницу сайта.
Если говорить о логотипах первого типа, то в зависимости от объема страниц и информации их можно оформлять либо картинками (тег img), либо с помощью CSS стилей. При небольшом количестве контента и наличии всего одной или нескольких страниц на сайте, хорошим решением будет использовать для логотипа тег
с нужными ключевыми словами в аттрибуте alt, которые будут дополнять контент страницы.
Заметьте, что в аттрибуте alt нужно писать ключевые слова, по которым оптимизируется сайт, можно с названием сайта, создавая бренд, а не надписи вроде “Логотип компании“. При таком подходе ваш логoтип также будет выдаваться в результатах поиска изображений по выбранным вами ключам или бренду. Пример можно посмотреть на сайте seogen.net - seo генератор.
Если на сайте множество страниц с большим количеством контента, которые оптимизируются под низкочастотные запросы, тогда лучше оформить ненавигационный лoгoтип с помощью CSS стилей, чтобы оптимизировать код, загрузку страниц и не мешать высокочастотные запросы в ключах логотипа с низкочастотными в контенте.
.logo {
width:100px;
height:30px;
background:url(images/logo.jpg) no-repeat left top;
}
Примеры логотипов первого типа (ненавигационных).
Главная страница Google. Посмотрите, как офорлен их логотип в HTML коде.
На данной странице сайта ресторана сложно выделить логотип, он наложен на верхнюю галерею.
Навигационные логотипы
Логотипы этого вида можно оформить разными способами, например, так:
Однако, в коде это выглядит слишком громоздко, увеличивая размер каждой страницы на несколько байт и при таком подходе вес на главную страницу будет передаваться без учета ключевых слов. Лучше использовать второй вариант, как на сайте хороших адвокатов.
.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 это важная часть. Поэтому, хорошим решением для навигационного логотипа будет следующее:
Ключевые слова сайта
При этом, чтобы спрятать ключевые слова от глаз пользователя, достаточно в CSS использовать правило text-indent.
.logo a {text-indent:-1000em; outline:0;}
Опять же, следует заметить, что многие в логотипах в аттрибуте alt ставят ненужную никому информацию “Лого сайта”, “Домашняя страница” и т.д. (напр., www.photostart.info). Ставьте в alt нужные ключи, а если вы хотите уведомить пользователя при наведении мыши на логотип о том, что после клика он будет перенаправлен на главную страницу, используйте для этого аттрибут title для ссылки или изображения, который для этого и предназначен и не берется во внимание поисковиками.
Примеры навигационных логотипов:
Внутренняя страница Google.
Википедия
Биржа ссылок Сапа
Выводы
Логотипы необходимо оформлять в коде так, чтобы с одной стороны оптимизировать HTML код, с другой - использовать нужные ключи для передачи ссылочного веса на главную страницу и с третьей - использовать аттрибут title для юзабилити. Подводя итог, формула идеального логотипа будет выглядеть следующим образом:
Ключевые слова сайта
Источник: SEO Оптимизированный логотип