Как и зачем считать количество элементов на странице. Одна строка JS и немного семантики
Когда речь идёт о семантике, применительно к сайтам, то чаще всего в голову приходит магический сеошный термин «семантическое ядро», под которым подразумевают набор ключевых фраз, соответствующих поисковым запросам пользователей.
В этой заметке я говорю о семантике, как о подходе к вёрстке, в котором упор делается не только на внешний вид элементов, но и на смысловое предназначение каждого блока, логическую структуру документа.
Да-да, я про разные штуки вроде структурных тегов или описаний у ссылок и картинок.
Грешен, ещё совсем недавно я о таких вещах не задумывался. Сейчас же начал понемногу приводить в порядок свои проекты. Но как понять масштаб проблемы, например как посмотреть сколько картинок не имеют альтов?
Понадобятся инструменты разработчика в браузере, а именно консоль и одна строчка скрипта с разными вариантами селекторов.
Подопытным кроликом станет недавняя заметка «Краснодарские прогулки. Выпуск № 1. 14 — 20 мая»
1. Посчитаю количество заголовков первого уровня H1
Зачем. потому что такой заголовок на странице должен быть и должен быть один, в статье логичнее всего таковым сделать название поста.
Как. document.querySelectorAll(':-webkit-any(h1)').length
Результат. Всё в порядке заголовок первого уровня есть и он один.
2. Посчитаю количество структурных тегов
Зачем. Вокруг сонма структурных тегов, описанных в спецификации HTML5 ходит много споров: Что, как, где и зачем использовать. Однако ясно одно: хотя бы попытаться разметить страницу по смыслу стоит. Чтобы поисковым роботам и специальному софту было проще понимать структуру документа.
Как. document.querySelectorAll(':-webkit-any(header, nav, main, footer)').length
Результат. Всё в порядке, у меня и шапка с подвалом размечены, и навигация выделена.
3. Посчитаю количество картинок без альтов и ссылок без тайтлов
Зачем. если у картинки нет описания, люди, которые в силу технических или физиологических ограничений не могут увидеть изображения не узнают что там было изображено. Бонус: поисковикам альты тоже помогают понять что хотел изобразить автор.
Как. document.querySelectorAll('img:not([alt])').length
Результат. Плохой, ни одной фотки я не описал в альтах. Буду исправляться.
4. Посчитаю пустые ссылки
Зачем. никогда бы сам не задумался, но из одного хорошего видео по теме узнал что пустые ссылки, которые иногда используются для неочевидных целей могут озадачить незрячего пользователя, использующего скринридер.
Как. document.querySelectorAll('a:empty').length
Результат. Пустых ссылок нет.
Что там у других
Мой сайт маленький и простой, а что если проверить большой и сложный проект? Протестировал для примера сайт «Мвидео» (нравится он мне).
Заголовок первого уровня на месте, правда он выполняет чисто сеошную функцию: наполнен ключевыми словами и скрыт.
Прочими заголовками страница размечена щедро, а вот структурных элементов мало. Навигация и шапка не выделены, один подвал есть и всё. Также много картинок без альтов и пустых ссылок.
Привёл пример больших и известных ребят для того чтобы показать что косяки бывают у всех, это нормально. Главное знать их и стремиться делать свои проекты лучше.