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

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

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

h1 a {
 text-indent: -99999px;
}

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

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

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

Update: похоже, я ошибся. Проверьте это статьи.

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

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