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

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

На веб-сайте принято создавать логотип, который ссылается на домашнюю страницу. Я хочу сделать то же самое, но лучше оптимизировать для поисковых систем, программ чтения с экрана, 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 в своем ответе.

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

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

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

Я делаю это в основном так, как описано выше, но по соображениям доступности мне нужно поддерживать возможность отключения изображений в браузере. Таким образом, вместо отступа текста от ссылки со страницы, я покрываю его, помещая <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 */  }

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

<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, потому что они не соответствовали задаче. Они могут быть полезны только в особых случаях.

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

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

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

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

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

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

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

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

Я думаю, что вы были бы заинтересованы в дебатах 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>

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

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

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

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

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

Как работает 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;
}

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

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

Новый метод (Keller) должен улучшить скорость по сравнению с методом -9999px:

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

рекомендуется здесь: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

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

<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 это, но я не вижу, что это загружается быстрее.

По причине 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>

Прочитав вышеупомянутые решения, я использовал решение 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;
}

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

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