Чи слід використовувати тег H1 для логотипу мого веб-сайту?

1. Чи слід використовувати тег H1 для логотипу мого веб-сайту?
2. Правила
3. Які сайти не використовують тег H1 як свій логотип?
4. Які сайти використовують тег H1 як свій логотип?
5. Так хто ж має рацію?

Тег h1 є частиною заголовків HTML на веб-сторінці. Вони коливаються від h1 до h6, при цьому h1 вважається найважливішим, а h6 - найменшим. Теги заголовків використовуються для короткого опису теми розділу, який читає користувач, так само, як і газета. Крім того, пошукові системи використовують цю інформацію для індексування різних розділів веб-сторінки.

Багато веб-сайтів почали використовувати тег h1 у логотипі заголовка. На цій посаді я збираюся вивчити причини і проти цієї структури.

Чи слід використовувати тег H1 для логотипу мого веб-сайту?

Це питання було задано кожного разу, коли я створюю новий веб-сайт. Чи потрібно використовувати тег h1 для логотипу свого веб-сайту? Ви можете знайти безліч дебатів на багатьох інтернет-форумах.

Я бачив багато веб-сайтів, які використовують наступну структуру HTML для свого логотипу:

<h1 class = ”site-logo”> <img class = ”site-logo__graphic” alt = ”Логотип мого веб-сайту” src = ”images / logo.png” /> </h1>

Але чи потрібний тег h1? Пошукові системи побачать логотип як перший заголовок. Але, мабуть, це перешкода для фактичного змісту веб-сторінки, наприклад, заголовок допису на блозі.

Альтернативні структури логотипу можуть виглядати так:

<div class = ”site-logo”> <img class = ”site-logo__graphic” alt = ”Логотип мого веб-сайту” src = ”images / logo.png” /> </div>

Ця структура логотипу показує зображення HTML, загорнуте в простий тег div. Клас "логотип сайту" дозволяє читати, але деякі стверджують, що тег h1 надає більше значення.

Правила

Так що ж w3 школи говорять про h1 специфікації?

• Використовуйте заголовки HTML лише для заголовків. Не використовуйте заголовки, щоб зробити текст BIG або напівжирним.
• Пошукові системи використовують ваші заголовки для індексування структури та вмісту ваших веб-сторінок.
• h1 заголовки повинні бути головними заголовками, а потім заголовками h2, потім менш важливими h3 і так далі.

Перший пункт "Не використовуйте заголовки, щоб зробити текст BIG або bold" застосовується до НЕ використовуючи тег h1 як частину вашого логотипу. Це пов'язано з тегом H1, який містить CSS або стиль браузера за замовчуванням, який може вплинути на ваш логотип. Тим не менш, 2-й пункт "використовувати ваші заголовки для індексування структури і змісту" можна застосувати, якщо логотип веб-сайту вимагає високого пріоритету.

Які сайти не використовують тег H1 як свій логотип?

BBC

<div class = "orb-nav-section orb-nav-blocks"> <a href="/"> <img src = "http://static.bbci.co.uk/frameworks/barlesque/3.7.3/ orb / 4 / img / bbc-blocks-dark.png "width =" 84 "height =" 24 "alt =" BBC "> </a> </div>

Сайт BBC не використовує теги h1 у своєму логотипі

Amazon

<div id = "nav-logo">
<! - тег прив'язки ->
</div>

Вікіпедія

<div id = "p-logo" role = "banner">
<a class="mw-wiki-logo" href="/wiki/Main_Page" title="Відвідуйте головну сторінку"> </a>
</div>

Які сайти використовують тег H1 як свій логотип?

W3

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

Facebook

<h1> <a href="https://www.facebook.com/" title="Go to Facebook Home"> <i class = "fb_logo img sp_7XMX65Pq0E7 sx_ccd1d2"> <u> Логотип Facebook </u> </ i> </a> </h1>

Sonos

<h1> <a href="/en-gb"> Sonos <span> Система інтелектуальних динаміків </span> </a> </h1>

Так хто ж має рацію?

Коротка відповідь: ніхто.

Що стосується індексування, Google не дає чіткої відповіді на це запитання. W3C також не визначає це правило «заголовки для розділів, з якими вони пов'язані», що є досить широким висловом.

Mozilla каже: "Елементи заголовка реалізують шість рівнів заголовків документів, <h1> є найважливішим і <h6> є найменшим".

Коли мова йде про невеликі веб-сайти (4 - 6 сторінок), тег h1 / logo стає більш доречним. Відсутність вмісту, швидше за все, зменшить кількість ключових слів, пов'язаних з брендом веб-сайту. У той час як великі веб-сайти (10 + сторінок) можуть забезпечити більший обсяг ключових слів, в яких використання тегу h1 стає менш застосовним до логотипу.

Тут, в Zeal, ми створили веб-сайти як з тегом h1, так і без нього як логотип. Ми розглядаємо кожний веб-сайт на індивідуальній основі і досліджуємо, чи повинен логотип бути тегом h1 чи ні. Ми дивимося на кожен веб-сайт, який ми будуємо з точки зору маркетингового контенту, для того, щоб визначити структурні позначки сайту. Якщо ви хочете дізнатися більше про структурування тегів назв веб-сайту або поспілкуватися з нами про новий веб-сайт, не соромтеся налагодити зв'язок .