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

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

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

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

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

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

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

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

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

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

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

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

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

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

чтобы получить наибольшее "SEO значение" из HTML и его элементов, взгляните на спецификации HTML5, и принимать решения по разметке на основе (HTML) семантики и значения для пользователей перед поисковыми системами, и вы будете иметь лучший успех с вашим ОПТИМИЗАЦИЯ ПОИСКОВЫХ СИСТЕМ.

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

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

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

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

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

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

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

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

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

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

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

для 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>