Содержание
Мы уже рассматривали, как преобразить стандартный нумерованный список. В данном уроке я расскажу про создание более глубокой иерархии списка, что поможет нам организовать на сайте информативное содержание статьи (HTML, CSS), а также дополнить переход к нужному якорю плавной прокруткой (JS). Следует помнить, что заниматься вставкой содержания придется вручную.
Влияние содержания статьи на SEO
Перед написанием материала я задал вопрос технической поддержке Яндекса:
Хотелось бы узнать, как Яндекс относится к вставке содержания в начале статьи, основанное на тегах заголовков? Повышает ли он такие страницы в выдаче?
Однако, как и следовало ожидать, конкретного ответа мне не дали:
Мы не комментируем влияние конкретных факторов на ранжирование сайта.
Рекомендую ознакомиться с обсуждением данного вопроса на форуме.
Блок “Содержание статьи”
Сверху, под названием статьи, можно увидеть, как выглядит такой блок. Достаточно компактный и в то же время привлекающий внимание пользователя. А нам как раз и нужно повысить поведенческий фактор, что благоприятно скажется на продвижении страницы в выдаче поисковых систем. К тому же, стоит отметить, что поисковая система Google отображает ссылки на содержимое страницы. Это видно на скриншоте ниже.
Правила для нумерованного списка (CSS)
ol {
margin-left: 63px;
list-style-type: none;
counter-reset: li;
}
ol li:before {
content: counter(li);
counter-increment: li 1;
padding: 0px 6px;
margin-left: -28px;
text-align: center;
color: white;
position: absolute;
background: #00bf80;
}
ol ol {
counter-reset: li_2;
}
ol ol li:before {
content: counter(li)"."counter(li_2);
counter-increment: li_2 1;
margin-left: -39px;
}
ol ol ol {
counter-reset: li_3;
}
ol ol ol li:before {
content: counter(li)"."counter(li_2)"."counter(li_3);
counter-increment: li_3 1;
margin-left: -51px;
}
На представленном примере уровень иерархии – 3, что означает вывод нумерованного списка в виде “дерева” с соответствующими значениями. Вы можете задать какую угодно вложенность структуры нумерованного списка.
Содержание статьи и якори (HTML)
Блок содержания материала:
<div id="content"> <b>Содержание</b> <ol> <li><a href="#1">Заголовок 1</a> <ol> <li><a href="#1-1">Заголовок 1.1</a></li> <li><a href="#1-2">Заголовок 1.2</a></li> </ol> </li> <li><a href="#2">Заголовок 2</a></li> </ol> </div>
Расставляем якори на заголовки:
<h2 id="1">Заголовок 1</h2> <h3 id="1-1">Заголовок 1.1</h3> <h3 id="1-2">Заголовок 1.2</h3> <h2 id="2">Заголовок 2</h2>
Оформление блока (CSS)
div#content {
margin: 17px 0 32px 0;
padding: 17px 24px;
background: #f2f3f5;
border: 1px solid #dfe0e2;
}
div#content ol {
margin: 16px 0 0 28px;
}
div#content ol ol {
margin: 7px 0 0 40px;
}
div#content ol ol ol {
margin: 7px 0 0 51px;
}
Отступы (margin и padding), цвет фона (background), граница (border).
Плавная прокрутка до якоря (JS)
<script type="text/javascript">
$("body").on('click', '[href*="#"]', function(e) {
var fixed_offset = 100;
$('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);
e.preventDefault();
});
</script>
Универсальная функция, которая автоматически задает плавную прокрутку, где в ссылках есть знак “#”.
Также в функции предусмотрено, что переход на нужный заголовок будет выполнен с учетом фиксированной шапки. Размер шапки задается в “fixed_offset”. Если вы не используете фиксированные элементы, поставьте значение 0.
4,066 total views, 2 views today
Загрузка...
