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

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

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

Ответ 4

Думаю, вас будет интересовать обсуждение 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>

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

Ответ 5

Перемещался немного позже, но не смог устоять.

Вы сомневаетесь, что это недооценено. Позвольте мне объяснить:

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

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

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

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

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

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

Я думаю, что пример один более чем достаточно, так как текст будет показан, если изображения отключены. Это также поможет поисковым системам узнать о вашем сайте.

Обновление: похоже, я ошибся. Проверьте статью.

Ответ 10

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

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

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

Ответ 11

Предполагается, что новый метод (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/

Ответ 12

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

Ответ 13

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

Ответ 14

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

Ответ 15

Для причины 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>