AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку

Logo img или logo как фон?

Насколько актуальная эта статья? https://csswizardry.com/2010/10/your-logo-is-an-im...

Вопрос состоит в правильной семантики для поисковиков. Лого использовать как
<a href="#"><img src='logo.png"></a>
или
<a href="#" class="logo" title="logo">Название компании</a>

.logo {
        display: block;
        width: 187px;
        height: 62px;
        outline: none;
        text-indent: -9000px;
        background: url('../img/logo.png') no-repeat;
}
  • Вопрос задан
  • 538 просмотров
Решения вопроса 1
Ravell
@Ravell
Верстайло
Мне кажется что img лучше - если смотреть со стороны SEO.

Со стороны вёрстки, у каждого из вариантов есть небольшая особенность, коротая может стать решающей в своём конкретном случае.
(например фоновую картинку пользователь не сможет "Сохранить как..." через правый клик мыши... и т.п.)

Еще один довод в пользу img:
В популярных CMS (wordpress, joomla. opencart) по умолчанию логотип выводится тегом img. Думаю разработчики CMS что-то в этом понимают.

Лично я всегда использую img.
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
blood-moon
@blood-moon
Фрилансер
Не думаю что это вообще хоть на что-то влияет . Но вот так явно проще
<a href="#"><img src='logo.png'></a>
Так что делаю именно так .
Ответ написан
Комментировать
vicodin
@vicodin
Имею некоторый опыт
первый вариант
Ответ написан
Комментировать
Как удобно - так и делайте.
Ответ написан
ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer
зависит вообще от формата логотипа. Если svg - то инклудим его напрямую в разметку - никакого img. А по растре лучше picture с srcset юзать. Я читал что гуглец любит когда пикчи подгоняют под различные форматы экранов, типа если ретина десктоп - прогружать разрешение побольше - мобилки - поменьше. Ну это скорее общего плана оптимизация, не то чтоб сео.
Ответ написан
@palec2009
Для поисковиков однозначно такой формата лучше
a href="#" class="logo" title="logo">Название компании

Только в место #- сслылка на главную и закройте ее тегом rel="nofollow" чтобы робот по ней не ходил

Почему так лучше, потому что при такой записи можно для ссылки прописать теги Alt и titlte. в отличие прописывания картинки в css
Ответ написан
Комментировать
@Froggyweb
ШОба неправильны. Первый лучше но отсутствует alt где указывается название компании, а не logo какой-то. Тайтл я бы указывал нормальный типа главная страница.

Лого кстати гораздо важнее спионеренных клипартов которые вроде как иллюстрации.

Кстати хороший способ пропустить страницу через ридер. Если все понятно то значит страница хорошо. Если бот говорит как бот то все не очень.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы