Семантична структура сайту | Декілька H1 на одній сторінці

На HTML5 сьогодні верстають напевне вже всі. Хто не верстає – йому потрібно вже на пенсію =)

З розвитком html5 і виходом нових тегів, змінилася і політика використання заголовків, які служать сильним фактором при просуванні сайтів.

За вікном вже майже 2016 рік, а верстальщики ще і далі лінуються використовувати

<article>...</article>, <aside>...</aside>, <section>...</section>, <main>...</main> і інші...

Звісно не усі, але як показує практика оптимізатора, 1 з 10 сайтів використовує нові теги. При тому що більшість сайтів – нові і їм по декілька місяців – року. Як багато верстальщиків, так і багато SEO спеціалістів не знають, що завдяки новим тегам, оптимізувати сайт можна в рази якісніше.

Заголовки

Шапка нашої сторінки оформляється у тег <header>. В шапку як правило ми і вносимо заголовки сторінок, Це верхня частина сайту і вона одразу кидається в очі людині.

<!-- Шапка сторінки -->
<header>
    <h1>Тут був би заголовок</h1>
    <!-- Навігація (меню) -->
    <nav>
    <ul>
        <li><a href="#">Головна</a></li>
        <li><a href="#">Послуги</a></li>
        <li><a href="#">Портфоліо</a></li>
        <li><a href="#">Контакти</a></li>
    </ul>
    </nav>
</header>

А тепер щодо H1

В HTML5 теги <h1> використовуються для вказування заголовку не всієї сторінки, як це було на HTML4. Тепер цей тег вказує заголовок контейнера в який він внесений (мається на увазі теги header, section, article та інші).

До появи нових HTML5 тегів семантика була дещо іншою і відрізнялася. Так в HTML4 на сторінці міг бути тільки один заголовок H1. Як правило це був заголовок статті або заголовок сторінки. Якщо це була сторінка блогу, на якій розміщувався список статей, то їм вже задавали H2 теги в основному.

Контент сторінки

Контент сторінки варто розміщувати в тезі <main>. Це може бути одна стаття, новина чи карточка товару. А може бути сторінка із пре-в’ю новин, статей чи товарів. Але варто пам’ятати, що в тег <main> не можна поміщати такі теги як <header>, <nav>, <footer> та сайдбари із <aside>. Тобто в <main> ми вносимо лише основну інформацію, будь це карточка товару, новина, стаття і т.д.

<!-- Основний контент сторінки -->
<main>
    <h1>Тут був би заголовок</h1>
    <p>Текст статті/новини/карточки товару, або їх пре-в'ю</p>
</main>

Оформлення статті чи новини

Тег <article> служить такою собі обгорткою для статей та новин на сайті. Його можна використовувати як у <main> так і просто в <body>.

В <article> можна включити і <header> де буде заголовок статті чи новини та <footer>. Наприклад так:

<!-- Основний контент сторінки -->
<main>
    <!-- Стаття чи новина -->
    <article>
        <header>
            <h1>Тут був би заголовок</h1>
        </header>
            <h2>Тут був би підзаголовок</h2>
            <p>Текст статті/новини</p>
    </article>
</main>

Або так для сторінки із пре-в’ю:

<!-- Основний контент сторінки -->
<main>
    <!-- Пре-в'ю статті чи новини №1 -->
    <article>
        <header>
            <h1>Тут був би заголовок</h1>
        </header>
        <h2>Тут був би підзаголовок</h2>
        <p>Текст статті/новини</p>
        <footer>
            <a href="#">Детальніше</a>
            <a href="#">Коментарі (4)</a>
        </footer>
    </article>
    <!-- Пре-в'ю статті чи новини №2 -->
    <article>
        <header>
            <h1>Тут був би заголовок</h1>
        </header>
        <h2>Тут був би підзаголовок</h2>
        <p>Текст статті/новини</p>
        <footer>
            <a href="#">Детальніше</a>
            <a href="#">Коментарі (1)</a>
        </footer>
    </article>
</main>

Сайдбари та колонки з віджетами

Для кожного окремого віджета та елемента сайдбару ми можемо використати блоки <aside>. Його доцільно використовувати якщо Ви хочете виділити заголовки елементів сайдбару в <h1> (тобто коли заголовок не буде “категорії”, або “теги”, а буде “класи автомобілів” чи “види батарей” в яких вже буде навігація по цим категоріям). На прикладі це виглядає так:

<!-- Сайдбар -->
<div class="sidebar">
    <!-- Віджет сайдбару №1 -->
    <aside>
        <h1>Профілі пластикових вікон</h1>
        ...
    </aside>
    <!-- Віджет сайдбару №2 -->
    <aside>
        <h1>Склопакети пластикових вікон</h1>
        ...
    </aside>
</div>

А тепер ще декілька цікавих речей, які варто пам’ятати про H1.

  1. <header>, <main>, <footer> теги не являються структурованими тегами, тому тег H1 в них може бути тільки один на всю сторінку!Використання тегу <h1> у <header>, <main> та <footer> сторінки, буде рахуватися помилкою. Повторне використання <h1> дозволяється лише в структрованих тегах, таких як <article>, <aside>, <section>
  2. Не рекомендується вносити в теги <h1> в <section> декілька разів.
    • Яндекс враховує лише один h1 на сторінці. Тому якщо ви оптимізуєтесь під Яндекс, не варто використовувати більше одного H1, оскільки Яндекс обере лише один тег і це буде перший <h1> тег у коді
    • Google більше полюбить сторінки із 2 H1 тегами, якщо це сторінка статті, новини чи карточки товару, де один тег – назва сайту наприклад, а другий тег – назва статті, новини чи товару.
    • Google звертає увагу на верстку. Тому якщо Ви все зверстали правильно, то на сторінці блогу, де розміщені пре-в’юшки ваших статей гугл оцінить заголовки у h1 краще, ніж оцінив би їх у h2 тегах.
    • В тегах <h1>-<h6> можна використовувати інші теги
    • В h1 немає бути зображень! Але Google таки індексує alt тег картинки у h1 як заголовок.
    • Заголовки в title та h1 можуть співпадати так і відрізнятися один від одного. Різниці в цьому немає.

    Красивого і сучасного коду Вам на Ваші сайти. 

    Залишити коментар