Михаил Юдин

CSS ищет баги в SEO: картинки без alt и внешние ссылки

CSS ищет баги в SEO: картинки без alt и внешние ссылки
Выключите пожалуйста блокировку рекламы для этого сайта чтобы поддержать проект

В 2015 году писал CSS стиль для stylish, для подсчёта изображений без атрибута alt, чтобы видеть где и сколько забыл проставить.

Да, считать средствами css уже давно можно

Посмотрев в доки на mozilla.org, увидим что в спецификации CSS 2.1, а это аж в середине 2011 года, появилась возможность использовать счётчики для их инкрементирования через свойства CSS. Кто не знает, как и что — привожу краткий пример для нумерации заголовков.

article {
  counter-reset: h;
}
article h2 {
  counter-increment: h;
}
article h2:before {
  content: counter(h) '. ';
}

В этом примере для каждого материала article сбрасывается счётчик h, который будет хранить количество заголовков второго уровня. Затем для каждого встречающегося тега h2 увеличиваем значение счётчика и потом приписываем в начало заголовков значение счётчика.

Что я сделал

Реализация старая, оставлю как есть.

body {
	counter-reset: noalt extLinks;
}

img:not([alt]) {
  counter-increment: noalt;
}

a[href ^= 'http'] {
	counter-increment: extLinks;
}

body:after {
  content: 'noalt: ' counter(noalt) ', external links: ' counter(extLinks);
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000000;
  padding: 2px 16px;
  background: rgba(0,0,0,0.75);
  color: #0f0;
  font-size: 11px;
  line-height: normal;
}

В коде выше помимо подсчёта изображений без атрибута alt ещё считал количество внешних ссылок. Критерием было наличие http в начале ссылки, что недостоверно, т.к. отслеживает только абсолютные ссылки. Доработайте сами. Тут показал только пример.


Поддержать




Выключите пожалуйста блокировку рекламы для этого сайта чтобы поддержать проект
Автор:

Я фронтенд веб-разработчик, веду блог о вёрстке сайтов, оптимизации веб-приложений. Улучшаю пользовательский опыт, собираю лучшие практики в области веб-разработки.


Чтобы не пропускать новости, можно подписаться на email рассылку.


Остались вопросы или есть пожелания, замечания — пишите в комментарии:

Ещё почитать

Чеклист оптимизации скорости загрузки веб-приложения

Чеклист оптимизации скорости загрузки веб-приложения

Переход с PHPStorm или Intellij IDEA на VIM

Переход с PHPStorm или Intellij IDEA на VIM

Подсветка активных ссылок на чистом JavaScript

Подсветка активных ссылок на чистом JavaScript

Рендер текстовых шаблонов по данным из массива PHP

Рендер текстовых шаблонов по данным из массива PHP

Битва титанов: normalize.css против reset.css

Битва титанов: normalize.css против reset.css

Системные шрифты для веб 2019

Системные шрифты для веб 2019