Проблемы с индексацией страницы

Question

я столкнулся с проблемой при индексации в поисковике Google. Есть страница https://frontext.ru/posts/2020-08-27-making-cross-browser-and-responsiveness-better, через несколько дней заметил, что она исключена из поисковика, стал разбираться и оказалось, что Lighthouse для смартфонов выдаёт такую ошибку в Accessibility:

Причём видно, что конкретные элементы не указаны. Пробежался по странице и ничего страшного в контрасте на заметил. Убирал элементы, заменял цвета, ничего не менялось. Остаётся только хайлайтер кода, который выглядит так:

<pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; color: rgb(51, 51, 51); background: rgb(248, 248, 248);"><span class="hljs-keyword" style="color: rgb(51, 51, 51); font-weight: 700;">if</span> (<span class="hljs-string" style="color: rgb(221, 17, 68);">"ontouchstart"</span> <span class="hljs-keyword" style="color: rgb(51, 51, 51); font-weight: 700;">in</span> <span class="hljs-built_in" style="color: rgb(0, 134, 179);">document</span>.documentElement) {
  <span class="hljs-comment" style="color: rgb(153, 153, 136); font-style: italic;">//if true</span>
}</pre>

Подскажите, что может быть такого криминального в нём, либо же проблема в другом? Другие страницы без проблем индексируются, там не вставлен этот хайлайтер. Сайт на Nuxt.js, если это имеет значение.

Answer 1

Указанная вами веб-страница имеет изображения в формате svg. Поэтому может быть полезным использовать рекомендации для доступности этого формата от paciellogroup, которая есть одна из ведущих групп разработчиков доступности в вебе:

<body>
...
<svg xmlns=http://www.w3.org/2000/svg role="img" aria-labelledby="title  desc">
   <title id="title">Circle</title>
   <desc id="desc">Large red circle with a black border</desc>
   <circle role="presentation" cy="60" r="55" stroke="black" stroke-width="2" 
   fill="red" />
</svg>
…
</body>

О доступности в веб вы можете смотреть ресурсы:

Answer 2

Вопрос закрыт, как и предполагалось проблема была в хайлайтере кода, а именно необходим был тег code внутри тега pre. По какой-то непонятной причине, при установке ширины тега pre или всей статьи гуглбот выдавал ошибку в accessibility, при наличии обёртки code такой проблемы не возникало. Установлен дефолтный nuxt/markdownit хайлайтер, всё в порядке, страница в индексе. Может, кто ещё столкнётся с такой проблемой и найдет ответ.

БЛОГ НА HUSL

Проблемы с индексацией страницы

Ответы (2 шт):