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

Question

[Alibek Kulseitov]

Насколько актуальная эта статья? 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;
}

Comments

[Одиночка Айс]

Вы серьезно? Застряли на такой мелочи, да еще и со статьей 8-летней давности? Да Гугл 1000 раз уже переделал свои хотелки по сайтам.

[Alibek Kulseitov]

Я не застревал, всегда делал и делаю вторым методов но сейчас призадумался

[Dmitry Tallmange]

Алибек Кулсеитов, разумеется, если картинка в данном случае носит исключительно косметический смысл, то выносить в стили. Это же здравый смысл, для этого даже гайды читать не нужно.

[Alibek Kulseitov]

Dmitry Tallmange, у логотипа разве бывают разные цели)? Я думал у лого всегда одна цель

[Dmitry Tallmange]

Алибек Кулсеитов, как логотип влияет на ваш контент? Кому кроме вас он нужен?

[Alibek Kulseitov]

Dmitry Tallmange, Роботу поисковику)

[Dmitry Tallmange]

Алибек Кулсеитов, ах да, это же неотъемлемая часть вашего семантического ядра) Без него весь контент теряет смысл.

Answer 1

[#rybak]

Мне кажется что img лучше - если смотреть со стороны SEO.

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

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

Лично я всегда использую img.

Comments

[Alibek Kulseitov]

Самый достойный ответ )

[Константин Теплоухов]

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

Answer 2

[Константин Теплоухов]

Не думаю что это вообще хоть на что-то влияет . Но вот так явно проще
<a href="#"><img src='logo.png'></a>
Так что делаю именно так .

Answer 3

[Anton Filippov]

первый вариант

Answer 4

[Сергей Свиридонов]

Как удобно - так и делайте.

Comments

[Alibek Kulseitov]

Вопрос состоит в не удобстве, а в семантике)

[Сергей Свиридонов]

Алибек Кулсеитов, В семантике? На многих ваших сайтах два раза открывается . Я думаю лучше это исправить. На сегодняшний день, не имеет разницы фоном делать логотип или нет. 99%! Но яндекс к примеру это делает через фон. По этому и говорю, делайте как вам удобно.

[Сергей Свиридонов]

Задать логотип фоном, это что-то вроде "по феншую". Но на семантику не влияет. Как по мне, это защита лого от школьников. Что бы правая кнопка мыши + сохранить изображение не работало. Но есть же более умные "открыть фоновое изображение" :)

[Alibek Kulseitov]

Сергей Свиридонов, про школьников тоже мысль)))

Answer 5

[Никита Кит]

зависит вообще от формата логотипа. Если svg - то инклудим его напрямую в разметку - никакого img. А по растре лучше picture с srcset юзать. Я читал что гуглец любит когда пикчи подгоняют под различные форматы экранов, типа если ретина десктоп - прогружать разрешение побольше - мобилки - поменьше. Ну это скорее общего плана оптимизация, не то чтоб сео.

Comments

[Alibek Kulseitov]

А кто сказал что свг надо инклудить впям в разметку? спрайты никто не отменял

[Никита Кит]

Алибек Кулсеитов, ну спрайт ты тоже не инклудишь в разметку и линкуешь в специальную use ссылку, если хочешь получить доступ к вектору на уровне javascript и css

Answer 6

[palec2009]

Для поисковиков однозначно такой формата лучше
a href="#" class="logo" title="logo">Название компании

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

Почему так лучше, потому что при такой записи можно для ссылки прописать теги Alt и titlte. в отличие прописывания картинки в css

Answer 7

[Froggyweb]

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

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

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