Заголовки в Blogger

Как сделать заголовок поста в Blogger тегом H1 для SEO

В стандартных шаблонах Blogger заголовок поста часто оформлен тегом <h3> или <h2>. С точки зрения SEO это не идеально, ведь главный заголовок статьи должен быть <h1>, а уже внутри текста можно использовать <h2>, <h3> и другие уровни.

В этой статье покажу, как изменить шаблон Blogger тема Contempo так, чтобы:

• На странице поста заголовок был <h1>.
• На главной и страницах списка постов - <h2>.

Почему важно использовать <h1> только на странице поста

• SEO: <h1> сигнализирует поисковым системам, что это главный заголовок страницы и определяет её основную тему.
• Удобство для читателей: экранные дикторы и другие вспомогательные технологии используют иерархию заголовков для навигации, что особенно важно для слабовидящих пользователей.
• Снижение путаницы: несколько <h1> с разными темами на одной странице могут размыть смысл и мешают поисковикам определить, что именно продвигать в выдаче.
• Гибкость шаблона: когда <h1> стоит только на страницах постов, можно легко менять оформление заголовков в списках статей, не затрагивая SEO.

Перед изменениями в шаблоне, не забываем сделать резервную копию

Как изменить заголовок поста в Blogger

1. Перейдите в панель Blogger:

   Тема → Изменить HTML

2. Найдите включаемый блок с заголовком поста. Чаще всего это:

   <b:includable id='postTitle' var='post'>


3. Замените содержимое на этот код:

<b:includable id='postTitle' var='post'>
  <a expr:name='data:post.id'/>
  <b:if cond='data:post.title != ""'>    
    <b:if cond='data:blog.pageType != "index"'>
      <h1 class='post-title entry-title'>
        <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
          <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
      </h1>
    </b:if>
    <b:if cond='data:blog.pageType == "index"'>
      <h2 class='post-title entry-title'>
        <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
          <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
      </h2>
    </b:if>
  </b:if>
</b:includable>

Должно получиться как на скриншоте ниже:

Как работает этот код

• data:blog.pageType != "index" - условие для страницы отдельного поста, здесь заголовок делаем <h1>.
• data:blog.pageType == "index" - условие для главной страницы и страниц со списком постов, здесь заголовок <h2>.
• data:post.title - подставляет название поста.
• Ссылки выводятся только там, где это необходимо (на главной или в списках).

Проверка результата

После сохранения шаблона:

• Зайдите на отдельный пост - заголовок должен быть <h1>.
• На главной странице и в списках постов - <h2>.
• Проверить можно с помощью инспектора кода браузера (Ctrl+Shift+I) или онлайн-инструментов анализа HTML.

Правильная иерархия заголовков - это основа грамотной SEO-оптимизации. Изменив шаблон Blogger так, чтобы заголовок поста на странице записи был <h1>, вы помогаете поисковым системам лучше понимать структуру контента и повышаете шансы на более высокие позиции в выдаче.