Структура заголовков блога

Опубликовано ,

Вольный перевод-заметка статьи от создателя всем известного СЕО плагина Yoast — Joost de Valk — с моими дополнениями.

Статья Йоста тут

Структура заголовков является одним из самых важных СЕО-аспектов. Она определяет, какие части содержания документа важны, и как они связаны между собой.

Вот, что говорит по поводу заголовков Яндекс:

Правильное оформление заголовков в тексте помогает пользователю быстрее сориентироваться на странице, а значит, экономит его время. Кроме того, и роботу Яндекса будет проще разобраться со структурой документа. Поэтому следует выделять этими тегами заголовки в соответствии с иерархией документа.

Содержание

  1. 5 принципов HTML заголовков
  2. Заголовки для главной страницы
  3. Заголовки для страниц и записей
  4. Заголовки для страниц архивов
  5. Как не рекомендуется работать с заголовками
  6. Техническая информация

5 основных принципов HTML заголовков

  1. H1 — наиболее важный заголовок на странице;
  2. Существует правило — только один H1 на странице, и он находится выше всех других. Запомните, это самое важное;
  3. Должны присутствовать подзаголовки H2-…;
  4. Каждый заголовок должен содержать ключевые слова;
  5. Заголовок должен отражать суть интересующей читателя части документа

W3c валидатор — самый простой способ проверить правильность расположения заголовков.

Заголовки для главной страницы

Домашняя страница чаще всего имеет следующую структуру:

  • H1 — название блога
  • H2 — описание блога. Если оно не содержит важные ключевые слова, то все последующие заголовки (статей) также должны быть заключены в H2
  • H3 — лента сообщений блога (если не H2). Также этот тег может использоваться для старых сообщений
  • H4 — заголовки виджетов в сайдбаре, связанные с тематикой блога
  • H5 — «неродственные» виджеты, например, блок рекламы или спонсоров

Заголовки для страниц и записей

Это довольно просто

  • H1 — заголовок записи
  • H2, H3 — подзаголовки
  • H4 — имя блога и, возможно, связанные виджеты
  • H5 — тоже самое, что и в прошлом случае — виджеты боковой колонки и тп

При этом, конечно не запрещается в теле записи использовать и заголовки H4-…

Заголовки для страниц архивов: категорий, тегов, таксономий

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

  • H1 — название категории или тега
  • H2 — заголовки записей
  • H3 — название блога и связанные виджеты
  • H4 — все остальное (сайдбар и тп)

Выше мы разобрались, что стоит включать в заголовки статьи. Теперь давайте рассмотрим, что туда добавлять не стоит.

Как не рекомендуется работать с заголовками статьи

  1. Размещать текст, не несущий навигационной важности
  2. Ставить теги заголовков там, где больше подошли бы теги <em>, <strong>
  3. Беспорядочно переключаться между размерами заголовков
  4. Засорять страницу лишними заголовками
  5. Помещать весь текст в тег заголовка
  6. Использовать заголовок для стилизации текста

Немного полезной технической информации

Как вывести название блога в теге H1 только на главной странице

На остальных страницах заголовок заключим в тег <span> или блок <div>  — как душе угодно =) В этом случае нам необходимо прописать простое условие:

<?php if (is_home()) { ?>  //если домашняя страница
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2> 
<?php } else {?> //во всех остальных случаях
<span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo('name'); ?></a></span>
<span><?php bloginfo('description'); ?></span> 
<?php } ?>

Находим в файле header.php строчку с выводом названия и описания блога. Она обычно включает в себя:

<?php bloginfo('name'); ?>
<?php bloginfo('description'); ?>

И заменяем эти строчки на вышенаписанный код

В зависимости от того, где вы хотите использовать H1, вы можете прописать следующие условия:

is_home() — тег проверяет, выводится ли страница с последними сообщениями (обычно это главная)

is_front_page() — проверяет, выводится ли главная страница — статическая или с последними статьями

is_archive() — выводится ли страница архивов

9 комментариев

  1. Егор

    Привет. Это условие ставить в page и single? Я ставлю, оно выводится визуально как дополнение, рядом с заголовком.
    Я у себя посмотрел, тема выводит и название с описанием в записях H1 H2 и меню в H3 завернули разрабы. И к тому еще название самой записи H1
    Куда это условие ставить?

    Ответить
    1. Анастасия

      Я в этой теме ничего не меняла, она для портфолио, мне тут особо не важно
      Условие ставить вместо вывода названия в header.php

      Ответить
  2. Егор

    Знаешь я еще что подумал, можно пост разделять в html 5 на H1 — Заголовок записи и далее уже ручками

    H2
    H2
    H2

    По ключевым словам, ну и по смысловому содержанию

    Ответить
    1. Анастасия

      Да в общем-то при написании статьи и надо выделять подзаголовки вручную. Это и написано в пункте про заголовки для статьи

      Ответить
  3. Егор

    Я там ставил в теги pre lang=html , но WP их не обработал и они стерлись, я имел ввиду что в html — 5 можно заключать разделы в теги sectiоn , а заголовки к разделам H2, если к ним еще пару-тройку H3 , Это помоему в Гугле рекомендуют. Но только если правильно прописывать. Хотя я не парюсь сильно по этому поводу. Для людей, кот. заказывают проставляю такую семантику, у меня есть примерный шаблон структуры заголовков и тегов. И как их правильно применять. Ну там article , hgroup и тому подобное.

    Ответить
  4. Егор

    <a href="» rel=»home»>

    <a href="» rel=»home»>

    Ответить
  5. Егор

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

    Ответить
    1. Анастасия

      Вот теперь в

      <pre data-language="html" > и <code>

      должно нормально выводить
      Дополню в поле для комментариев тегами для вывода кода

      Ответить
  6. Егор

    Я без code ставил. Cмотрел исходный код элемента. Потом статью интересную напишешь, проверю 🙂

    Ответить

А что вы думаете по этому поводу?

Ваш e-mail не будет опубликован.

Добавить в комментарий код: CSSHTMLPHP