Almost Over

Исправляем заголовки H1 на H2 у записей в темах Hexo

Исправляем заголовки H1 на H2 у записей в темах Hexo

Правильная структура H1-H6 заголовков как имеет положительное влияние на SEO-оптимизацию, так и придаёт удобный структурированный вид записям, что несомненно привлекает внимание читателя и заметно облегчает работу писателя. В текущем руководстве приведены решения по исправлению заголовков в теме «Next» движка «Hexo».

Анализируем заголовки

При анализе сайта на «Hexo» выявился некий недочёт в структуре заголовков: все статьи имеют тег <h1>, коих может быть на главной странице 10 штук и более. С точки зрения поисковых систем это не правильно, потому как тег <h1> не должен повторяться больше чем один раз на страницу. Возможно, в Вашей теме структура заголовков имеет правильную иерархию, но конкретно в этой теме «Next» (и даже в теме «Landscape» (тема Hexo по-умолчанию)) каждый пост имеет тег <h1>.

H1 заголовок для записи в теме «Landscape»

И действительно, проанализировав некоторые топ-сайты везде наблюдаются <h2> заголовки у постов. Заголовок <h1> же имеет место быть у названия или описания сайта, который максимально доходчиво должен объяснить в нескольких словах посетителю, о чём Ваш сайт. Проверить свой сайт можно осмотром исходного кода заголовка (ПКМ -> Посмотреть код), либо воспользовавшись онлайн сервисом pr-cy.ru (Оптимизация -> Контент -> Заголовки).

Заголовки H1 и H2 до оптимизации Заголовки H1 и H2 после оптимизации

Итак, что нужно сделать для правильной и чёткой структуризации заголовков?

  1. Установить <h1> на описание сайта главной страницы. И желательно, чтобы это описание выводилось на каждой странице нашего сайта. Для этого как никогда кстати подойдёт мета-тег description.
  2. Установить <h2> на заголовки постов и, возможно, на заголовки страниц.
  3. Выставить чёткую иерархию на подзаголовки во всех записях. Если раньше подзаголовок был <h2>, то теперь он должен быть <h3>.

Меняем заголовки в постах

$ nano themes/next/layout/_macro/post.swig
$ nano themes/next/layout/_macro/post-collapse.swig

Находим в этих файлах h1 и заменяем на h2.

Назначаем H1 на description

Помимо назначения H1 на описание сайта, добавим немного косметики: при клике на короткое описание сайта нам будет показано длинное описание (description) сайта.

$ nano themes/next/layout/_partials/header.swig
1
2
3
- <p class="site-subtitle">{{ config.subtitle }}</p>
+ <div class="site-subtitle-toggle">{{ config.subtitle }}</div>
+ <h1 class="site-subtitle" itemprop="description" style="display: none">{{ config.description }}</h1>
$ nano themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
+// for spoiler site description && sticky sidebar
+.site-subtitle-toggle {
+ //margin: 10px 10px 0;
+ font-family: monospace;
+ color: $site-description-color;
+ cursor: pointer;

+ // for animate underline
+ display: inline-block;
+ position: relative;

+ &::before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ background-color: #fff;
+ visibility: hidden;
+ transform: scaleX(0);
+ the-transition();
+ }

+ &:hover::before {
+ visibility: visible;
+ transform: scaleX(1);
+ }
+}

+.site-subtitle {
+ margin: 10px 10px 0;
+ font-family: monospace;
+}

+ .sidebar {
+ display: initial;
+ margin-top: 378px;

+ //for animate sidebar alignment
+ -webkit-transition: all .2s ease;
+ -moz-transition: all .2s ease
+}

Убираем инициализацию показа сайдбара через js (т.к. в предыдущем custom стиле мы задали display: initial и margin-top) и добавляем выравнивание сайдбара каждый раз при изменении размера окна браузера.

$ nano themes/next/source/js/src/schemes/pisces.js
1
2
3
4
5
6
7
8
9
10
$(document).ready(function () {
var sidebarTop = $('.header-inner').height() + 12;

$('#sidebar').css({ 'margin-top': sidebarTop }).show();
});

+$(window).resize(function() {
+ var sidebarTop = $('.header-inner').height() + 12;
+ $('#sidebar').css({ 'margin-top': sidebarTop }).show();
+});
$ nano themes/next/source/js/src/bootstrap.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    $siteNav.stop()[animateAction]('fast', function () {
$siteNav[animateCallback](ON_CLASS_NAME);
});
});

+ // site description toggle
+ $('.site-subtitle-toggle').on('click', function () {

+ var $siteNav = $('.site-subtitle');
+ var ON_CLASS_NAME = 'site-subtitle-on';
+ var isSiteNavOn = $siteNav.hasClass(ON_CLASS_NAME);
+ var animateAction = isSiteNavOn ? 'slideUp' : 'slideDown';
+ var animateCallback = isSiteNavOn ? 'removeClass' : 'addClass';

+ $siteNav.stop()[animateAction]('fast', function () {
+ $siteNav[animateCallback](ON_CLASS_NAME);

+ var $sidebarTop = $('.header-inner').height() + 12;
+ $('#sidebar').css({ 'margin-top': $sidebarTop });

+ });
+ });

CONFIG.fancybox && NexT.utils.wrapImageWithFancyBox();
NexT.utils.embeddedVideoTransformer();
NexT.utils.addActiveClassToMenuItem();

Правим все посты

После чего правим все посты, сдвигая иерархию подзаголовков на уровень ниже.
И полностью регенерируем Hexo.

$ hexo clean && hexo g

Какая иерархия в результате должна получиться?

Изначально было так:
1
2
3
4
5
6
<a>Заголовок сайта</a>
<p>Описание сайта</p>
<h1>Заголовок статьи</h1>
<h2>## Подзаголовок 2 в теле/сайдбаре статьи</h2>
<h3>### Подзаголовок 3 в теле/сайдбаре статьи</h3>
<h4>#### Подзаголовок 4 в теле/сайдбаре статьи</h3>
Теперь стало так:
1
2
3
4
5
6
<a>Заголовок сайта</a>
<h1>Описание сайта</h1>
<h2>Заголовок статьи</h2>
<h3>### Подзаголовок 3 в теле/сайдбаре статьи</h3>
<h4>#### Подзаголовок 4 в теле/сайдбаре статьи</h4>
<h5>##### Подзаголовок 5 в теле/сайдбаре статьи</h5>

P.S. Данное руководство подходит ко всем типам сайтов, а не только для сайтов на Hexo. Достаточно найти в исходных кодах вывод заголовков <h1> и по той же схеме исправить их на <h2>. wink