🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🤔 Как проверить правильную иерархию html заголовков?
Проверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы.
🚩Зачем нужна правильная иерархия заголовков?
🟠Логическая структура
Заголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги.
🟠Доступность
Люди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице.
🟠SEO
Поисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы.
🚩Что значит "правильная иерархия заголовков"?
🟠``
Заголовок страницы (должен быть уникальным и только один на странице).
🟠``
Подразделы .
🟠``
Подразделы , и так далее.
Главный заголовок страницы
Раздел 1
Подраздел 1.1
Подраздел 1.2
Раздел 2
Подраздел 2.1
Подраздел 2.1.1
🚩Как проверить иерархию заголовков?
🟠Ручная проверка HTML-кода
Вручную просмотрите HTML-код страницы и убедитесь, что заголовки идут в порядке. Например, → → и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от сразу к ).
🟠Использование браузерных DevTools
В браузере откройте DevTools (например, в Chrome нажмите F12 или Ctrl+Shift+I). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (, и так далее) и проверьте их последовательность.
🟠Инструменты для проверки доступности
Используйте расширения или инструменты для оценки доступности, такие как: Lighthouse (встроено в Chrome DevTools). Выполните аудит доступности и посмотрите рекомендации. WAVE (Web Accessibility Evaluation Tool) — онлайн-инструмент для анализа доступности. Эти инструменты покажут ошибки или пропуски в структуре заголовков.
🟠Скрипт для автоматической проверки
Если вы работаете над большим проектом, можно написать скрипт для проверки иерархии заголовков.
const headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
headings.forEach((heading, index) => {
console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`);
});
🟠Плагин для анализа заголовков
Для популярных CMS (например, WordPress) существуют плагины, которые проверяют структуру заголовков, например, Yoast SEO.
🚩Примеры ошибок в структуре и как их исправить
Ошибка: Пропуск уровней заголовков
Главный заголовок
Подраздел
Исправление
Главный заголовок
Подраздел
Ошибка: Несколько на одной странице
Главный заголовок
Еще один заголовок
Исправление
Главный заголовок
Еще один заголовок
Ставь 👍 и забирай 📚 Базу знаний