Заміна тексту 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, інший підхід із використанням тексту-відступу. Це підхід «Фарка» до заміни зображення.

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

title у 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 кожної сторінки вашого веб-сайту має містити заголовок. Основним основним заголовком вашої індексної сторінки може бути "Найкраще джерело для нечітких зелених віджетів у Нью-Йорку". Основним заголовком на іншій сторінці може бути "Деталі доставки для наших нечітких віджетів". На іншій сторінці це може бути "Про нечіткі віджети Берта". Ви отримуєте ідею.

Побічна примітка: Як би це не неймовірно звучало, не дивіться на джерела веб-властивостей, що належать 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 на кожній сторінці сайту.

Мені подобається використовувати az індекс, прихований 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. Створіть роздільник, що містить текст h1 та зображення.
2. Розташуйте два елементи в одній клітині та зробіть їх обома відносно розташованими.
3. Використовуйте стару техніку zeldman.com, щоб приховати текст за допомогою властивостей тексту-відступу, пробілів та переповнення.

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