Замена текста H1 логотипом: лучший способ для SEO и доступность?

240

Кажется, что есть несколько различных методов, поэтому я надеялся получить "окончательный" ответ на этот вопрос ...

На веб-сайте принято создавать логотип, который ссылается на домашнюю страницу. Я хочу сделать то же самое, но лучше оптимизировать для поисковых систем, программ чтения с экрана, IE 6+ и браузеров, которые отключили CSS и / или изображения.

Пример первый: не использует тег h1. Не так хорошо для SEO, верно?

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

Пример второй: нашел это где-то. CSS кажется немного хакерским.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>
/* css */
#logo {
    padding: 70px 0 0 0;
    overflow: hidden;
    background-image: url("logo.png");
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:70px;
}

Пример третий: тот же HTML, другой подход с использованием text-indent. Это «Phark» подход к замене изображения.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>
/* css */
#logo {
    background: transparent url("logo.png") no-repeat scroll 0% 0%;
    width: 250px;
    height: 70px;
    text-indent: -3333px;
    border: 0;
    margin: 0;
}

#logo a {
    display: block;
    width: 280px; /* larger than actual image? */
    height: 120px;
    text-decoration: none;
    border: 0;
}

Пример четвертый: метод Лихи-Лангриджа-Джеффриса . Отображается, когда изображения и / или CSS отключены.

<h1 id="logo" class="logo">
    <a href="">Stack Overflow</a>
</h1>
/* css */
h1.logo {
    margin-top: 15px; /* for this particular site, set this as you like */
    position: relative; /* allows child element to be placed positioned wrt this one */
    overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
    padding: 0; /* needed to counter the reset/default styles */
}

h1.logo a {
    position: absolute; /* defaults to top:0, left:0 and so these can be left out */
    height: 0; /* hiding text, prevent it peaking out */
    width: 100%; /* 686px; fill the parent element */
    background-position: left top;
    background-repeat: no-repeat;
}

h1#logo {
    height: 60px; /* height of replacement image */
}

h1#logo a {
    padding-top: 60px; /* height of the replacement image */
    background-image: url("logo.png"); /* the replacement image */
}

Какой метод лучше всего подходит для такого рода вещей? Пожалуйста, предоставьте HTML и CSS в своем ответе.

Андрей
источник
Вы должны проверить эту тему по
meo
15
Мэтт Каттс отвечает на этот вопрос. youtu.be/fBLvn_WkDJ4
troynt
2
Разве titleатрибут не должен быть в <a>?
бобо
23
Этот вопрос не должен быть помечен как не по теме. Это довольно четко определенный вопрос о CSS и поисковой оптимизации. То, что это не C #, не означает, что это не код.
MikeMurko
3
@troynt Я нахожу Мэтта Каттса, который иногда дает ложные советы. Как таковой, я склонен не смотреть на него.
TheBlackBenzKid

Ответы:

221

Вам не хватает опции:

<h1>
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

название в href и img в h1 очень, очень важно!

Рахул
источник
12
имеет ли обтекание h1 вокруг изображения с альтернативным текстом тот же вес (в разрезе), что и обычный текст, обернутый с h1?
Андрей
11
Кстати, это актуально, логотип является частью контента вашего сайта, он не используется для оформления, поэтому используйте <img> с атрибутом alt, а не CSS для вашего логотипа.
Борис Гери
14
Мэтт Каттс отвечает на этот вопрос. youtube.com/user/GoogleWebmasterHelp#p/search/0/fBLvn_WkDJ4
troynt
34
К сожалению, ссылка в комментарии, оставленная @troynt, теперь не работает. Вот новая постоянная ссылка на содержание: youtu.be/fBLvn_WkDJ4
ahsteele
10
Для всех, кто интересуется тем, что находится в связанном видео: в основном Мэтт Каттс говорит, что вы должны использовать атрибут alt тега img вместо того, чтобы скрывать текст с помощью css.
bjunix
17

Я делаю это в основном так, как описано выше, но по соображениям доступности мне нужно поддерживать возможность отключения изображений в браузере. Таким образом, вместо отступа текста от ссылки со страницы, я покрываю его, помещая <span>его на полную ширину и высоту <a>и используя его z-indexдля размещения над текстом ссылки в порядке расположения.

Цена одна пустая <span>, но я готов иметь ее там для чего-то столь же важного, как и <h1>.

<h1 id="logo">
  <a href="">Stack Overflow<span></span></a>
</h1>
#logo a {
   position:relative;
   display:block;
   width:[image width];
   height:[image height]; }

#logo a span {
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   background:#ffffff url(image.png) no-repeat left top;
   z-index:100; /* Places <span> on top of <a> text */  }
Роб Найт
источник
1
Что не так с отступом? Я предположил, что программы чтения с экрана и сканеры по-прежнему выбирают текст, несмотря на отступы.
Карбасс
2
Извините, что я так долго возвращался сюда. Единственная проблема с отступом - если изображения отключены в браузере пользователя, но включен CSS, ничего не отображается, текст или изображения. Это своего рода крайний случай, но для меня важно учесть работу на веб-сайте университета.
Роб Найт
хм ... я не мог заставить это работать. Якорный текст продолжал появляться в верхней части изображения.
Андрей
<nitpicker> вместо этого используйте #logo span, браузеру будет эффективнее визуализировать </ nitpicker>
Крис Миссал
1
В некоторых случаях вам нужен {top: 0}, чтобы #logo span.
Маркус
11

Если важны причины доступности, используйте первый вариант (когда клиент хочет видеть изображение без стилей)

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

Нет необходимости соответствовать мнимым требованиям SEO, потому что приведенный выше HTML-код имеет правильную структуру, и только вы должны решить, подходит ли это для ваших посетителей.

Также вы можете использовать вариант с меньшим количеством HTML кода

<h1 id="logo">
  <a href=""><span>Stack Overflow</span></a>
</h1>
/* position code, it may be absolute position or normal - depends on other parts of your site */
#logo {
  ...
}

#logo a {
   display:block;
   width: actual_image_width;
   height: actual_image_height;
   background: url(image.png) no-repeat left top;
}

/* for accessibility reasons - without styles variant*/
#logo a span {display: none}

Обратите внимание, что я удалил все другие стили и хаки CSS, потому что они не соответствовали задаче. Они могут быть полезны только в особых случаях.

se_pavel
источник
3
display:noneне доступен
KPM
Лучший способ - обернуть логотип в div из-за его доступности, юзабилити и оптимизации SEO, и в основном используется в крупных веб-организациях. Twitter, Amazon, Mozilla не используют <h1> для своих логотипов, но используют основные заголовки для лучшего восприятия значения страницы. bit.ly/1MR4fr5
Oriol
4

Звонит здесь немного поздно, но не удержался.

Ваш вопрос наполовину несовершенен. Позволь мне объяснить:

Первая половина вашего вопроса о замене изображений - это правильный вопрос, и я считаю, что для логотипа - простое изображение; атрибут alt; и CSS для его позиционирования достаточно.

Вторая половина вашего вопроса о «ценности SEO» H1 для логотипа - неправильный подход к решению, какие элементы использовать для разных типов контента.

Логотип не является основным заголовком или даже вообще заголовком, и использование элемента H1 для разметки логотипа на каждой странице вашего сайта принесет (немного) больше вреда, чем пользы для вашего рейтинга. Семантически заголовки (H1 - H6) подходят, ну, просто для этого: заголовки и подзаголовки для контента.

В HTML5 допускается более одного заголовка на страницу, но логотип не заслуживает одного из них. Ваш логотип, который может быть нечетким зеленым виджетом и некоторым текстом, находится на изображении сбоку от заголовка по причине - это своего рода «штамп», а не иерархический элемент для структурирования вашего контента. Первый (то, используете ли вы больше, зависит от вашей иерархии заголовков) H1 каждой страницы вашего сайта должен озаглавить его предмет. Основным основным заголовком вашей индексной страницы может быть «Лучший источник нечетких зеленых виджетов в Нью-Йорке». Основной заголовок на другой странице может быть «Сведения о доставке для наших нечетких виджетов». На другой странице это может быть «О компании Bert's Fuzzy Widgets Inc.». Вы поняли идею.

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

Чтобы получить наибольшую «ценность SEO» из HTML и его элементов, взгляните на спецификации HTML5 и примите решения о разметке, основанные на семантике (HTML) и ценности для пользователей, прежде чем поисковые системы, и вы добьетесь большего успеха с вашим SEO.

Mattypants
источник
1
Кроме того, все это правда, и логотип не должен быть h1 на любой другой странице, кроме главной страницы (и в идеале не на главной странице). Однако часто на главной странице наиболее подходящим местом для h1 будет логотип, поскольку содержание баннера героя может быть недостаточно конкретным для темы веб-сайта (т. Е. Оно может относиться к текущей услуге или продукту, который выдвигается, а не основная тема сайта). Если сайт имеет только одну область внимания (например, сайт для приложения), область героя может работать на h1. Когда это не работает, изображение с alt в h1 лучше, чем ничего.
Эльмарко
3

Я думаю, что вы были бы заинтересованы в дебатах H1 . Это спор о том, использовать ли элемент h1 для заголовка страницы или для логотипа.

Лично я бы пошел с вашим первым предложением, что-то вроде этого:

<div id="header">
    <a href="http://example.com/"><img src="images/logo.png" id="site-logo" alt="MyCorp" /></a>
</div>

<!-- or alternatively (with css in a stylesheet ofc-->
<div id="header">
    <div id="logo" style="background: url('logo.png'); display: block; 
        float: left; width: 100px; height: 50px;">
        <a href="#" style="display: block; height: 50px; width: 100px;">
            <span style="visibility: hidden;">Homepage</span>
        </a>
    </div>
    <!-- with css in a stylesheet: -->
    <div id="logo"><a href="#"><span>Homepage</span></a></div>
</div>


<div id="body">
    <h1>About Us</h1>
    <p>MyCorp has been dealing in narcotics for over nine-thousand years...</p>
</div>

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

Росс
источник
Я почти уверен, что IMG считаются контентом, а css фоновые изображения - нет. Вот почему я склоняюсь к фоновым изображениям для изображений всего сайта и тому подобным вещам, которые явно не относятся к содержимому этой страницы.
Джо Филлипс
@ d03boy: В таком случае вы можете создать встроенный div, который имеет правильный размер для размера логотипа, и задать фон. Пролёт внутри (который имеет видимость: hidden;) обеспечит замену «alt text».
Росс
6
Дебаты H1 - теперь мертвая ссылка
alex
3
<h1>
  <a href="http://stackoverflow.com">
  Stack Overflow<img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

Это был хороший вариант для SEO, потому что SEO придает тегу H1 высокий приоритет, внутри тега h1 должно быть имя вашего сайта. Используя этот метод, если вы будете искать имя сайта в SEO, он также покажет логотип вашего сайта.

Вы хотите скрыть имя сайта ИЛИ текст, пожалуйста, используйте текстовый отступ в отрицательном значении. бывший

h1 a {
 text-indent: -99999px;
}
Вишал Гупта
источник
2

Вы пропустили заголовок в <a>элементе.

<h1 id="logo">
  <a href="#" title="..."><span>Stack Overflow</span></a>
</h1>

Я предлагаю поместить заголовок в <a>элемент, потому что клиент хотел бы знать, что означает это изображение. Поскольку вы настроили text-indentтестирование <h1>таким образом, чтобы пользователь переднего плана мог получать информацию об основном логотипе, пока он зависает над логотипом.

30мл
источник
2

Как работает W3C?

Просто взгляните на https://www.w3.org/ . Изображение имеет z-index:1, текст здесь, но позади из-за z-index:0связанных сposition: absolute;

Оригинальный HTML:

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C">
    </a>
    <span class="alt-logo">W3C</span>
</h1>

Оригинальный CSS:

#w3c_mast h1 a {
    display: block;
    float: left;
    background: url(../images/logo-w3c-screen-lg) no-repeat top left;
    width: 100%;
    height: 107px;
    position: relative;
    z-index: 1;
}
.alt-logo {
    display: block;
    position: absolute;
    left: 20px;
    z-index: 0;
    background-color: #fff;
}
Себастьян Хорин
источник
1

Еще один момент, который никто не затронул, это тот факт, что атрибут h1 должен быть специфичным для каждой страницы, а использование логотипа сайта будет эффективно дублировать H1 на каждой странице сайта.

Мне нравится использовать индекс h скрытый h1 для каждой страницы, так как лучший SEO h1 часто не самый лучший для продаж или эстетической ценности.

DFA
источник
Вы всегда можете использовать H1 для логотипа только на главной странице.
Мариуш Джамро
0

Я не знаю, но этот формат использовал ...

<h1>
    <span id="site-logo" title="xxx" href="#" target="_self">
        <img src="http://www.xxx.com/images/xxx.png" alt="xxx" width="xxx" height="xxx" />
        <a style="display:none">
            <strong>xxx</strong>
        </a>
    </span>
</h1>

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

Taswiz
источник
0

По причине SEO:

<div itemscope itemtype="https://schema.org/Organization">
 <p id="logo"><a href="/"><span itemprop="Brand">Your business</span> <span class="icon fa-stg"></span> - <span itemprop="makesOffer">sell staff</span></a></p>
 </div>
   <h1>Your awesome title</h1>
Potky
источник
0

Прочитав вышеупомянутые решения, я использовал решение CSS Grid.

  1. Создайте div, содержащий текст h1 и изображение.
  2. Расположите два предмета в одной ячейке и сделайте их оба относительно расположенными.
  3. Используйте старую технику zeldman.com, чтобы скрыть текст, используя свойства text-indent, white-space и overflow.
<div class="title-stack">
    <h1 class="title-stack__title">StackOverflow</h1>
    <a href="#" class="title-stack__logo">
        <img src="/images/stack-overflow.png" alt="Stack Overflow">
    </a>
</div>
.title-stack {
    display: grid;
}
.title-stack__title, .title-stack__logo {
    grid-area: 1/1/1/1;
    position: relative;
}
.title-stack__title {
    z-index: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
Дани Амсалем
источник
-1
<h1><a href="/" title="Some title">Name</a></h1>
h1 a{
  width: {logo width};
  height: {logo height};
  display:block;
  text-indent:-9999px;
  background:url({ logo url});
}
Родриго Рейс
источник
Лучше не использовать такие большие текстовые отступы, как это, потому что это может привести к потенциально значительному снижению производительности. Подробное объяснение здесь .
Ник Ф
-1
<div class="logo">
    <h1><a href="index.html"><span>Insert Website Name</span></a></h1>
    <p>Insert Slogan Here</p>
</div>
#header .logo h1 {
    background: red; /* replace with image of logo */
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a {
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a span {
    display:none;
}
Даниэль Бунди
источник