Блог

Главная - Вопросы по программированию - Next.js: пустой тег alt при использовании компонента изображения

Next.js: пустой тег alt при использовании компонента изображения

#image #next.js #seo #nextjs-image

Вопрос:

Я использую следующий код для отображения изображения:

 import Image from 'next/image'
...
<Image src={ausrufezeichen} alt="Ausrufezeichen"/>

Выводится следующий HTML-код:

 <div style="display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0">
    <div style="box-sizing:border-box;display:block;max-width:100%">
        <img style="max-width:100%;display:block;margin:0;border:none;padding:0" alt="" aria-hidden="true" role="presentation" src="data:image/svg xml;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIvPg=="/>
    </div>
    <noscript>
        <img alt="Ausrufezeichen" srcSet="/_next/image?url=/_next/static/image/public/img/pfeile_punkte/icon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.pngamp;amp;w=96amp;amp;q=75 1x, /_next/image?url=/_next/static/image/public/img/pfeile_punkte/icon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.pngamp;amp;w=256amp;amp;q=75 2x" src="/_next/image?url=/_next/static/image/public/img/pfeile_punkte/icon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.pngamp;amp;w=256amp;amp;q=75" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
    </noscript>
    <img alt="Ausrufezeichen" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
</div>

Когда я только что проверил свой SEO-статус с помощью «SEO-миньон», я заметил, что мне показывают много изображений без alt-тега.
Почему этот первый img отображается без тега alt? Могу ли я как-нибудь добавить его туда?

Комментарии:

1. Твой alt="Ausrufezeichen" там, о чем ты говоришь?

2. @RyanLe Он присутствует на двух <img>, но на первом есть пустой тег alt.

Ответ №1:

Есть несколько вещей, которые вам нужно понять в сгенерированном коде:

 <div style="display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0">
    <div style="box-sizing:border-box;display:block;max-width:100%">
        <img style="max-width:100%;display:block;margin:0;border:none;padding:0" alt="" aria-hidden="true" role="presentation" src="data:image/svg xml;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIvPg=="/>
    </div>
    <noscript>
        <img alt="Ausrufezeichen" srcSet="/_next/image?url=/_next/static/image/public/img/pfeile_punkte/icon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.pngamp;amp;w=96amp;amp;q=75 1x, /_next/image?url=/_next/static/image/public/img/pfeile_punkte/icon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.pngamp;amp;w=256amp;amp;q=75 2x" src="/_next/image?url=/_next/static/image/public/img/pfeile_punkte/icon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.pngamp;amp;w=256amp;amp;q=75" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
    </noscript>
    <img alt="Ausrufezeichen" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
</div>
  • Первое изображение: Это заполнитель, присутствующий там для предотвращения CLS. Он будет декодироваться в SVG-изображение с width таким height же изображением, как и у вашего изображения. Как только ваше изображение будет загружено, оно будет удалено из DOM.
  • Второе изображение: Это ваше изображение, но оно видно только в том случае, если пользователь/браузер отключил выполнение JavaScript для вашего сайта или не поддерживает его. Кроме того, у него есть совершенно прекрасная alt метка.
  • Третье изображение: Это будет ваше отрисованное изображение в браузере с включенной поддержкой JS. В настоящее время это GIF 1×1, но скрипты изменят его источник для загрузки (когда пользователь собирается его просмотреть, т. Е. изображение находится рядом с видимой страницей).

Почему вам не нужно добавлять (и не следует добавлять) alt атрибут, отличный от "" заполнителей:

  • Источник изображения встроен и почти гарантированно загружается правильно.
  • Программы чтения с экрана (или любая другая вспомогательная технология) не будут читать его , потому что у него есть alt="" , aria-hidden="true" и role="presentation" .
  • Непустое значение alt атрибута для этих типов изображений добавит звуковой беспорядок в вывод программы чтения с экрана и может отвлечь пользователей, если тема отличается от темы в соседнем тексте.

Рекомендации:

  1. https://www.w3.org/WAI/tutorials/images/decorative/

В этих случаях следует указать пустой (пустой) alt текст ( alt="" ), чтобы их можно было игнорировать вспомогательными технологиями, такими как программы чтения с экрана. Текстовые значения для этих типов изображений добавят звуковой шум в вывод программы чтения с экрана или могут отвлечь пользователей, если тема отличается от темы в соседнем тексте.

Программы чтения с экрана также позволяют использовать WAI-ARIA для скрытия элементов с помощью role="presentation" . Однако в настоящее время эта функция поддерживается не так широко, как использование alt атрибута null.

  1. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute

Добавление aria-hidden="true" к элементу удаляет этот элемент и все его дочерние элементы из дерева доступности. Это может улучшить работу пользователей вспомогательных технологий за счет скрытия:

  • чисто декоративный контент, такой как значки или изображения
  • дублированный контент, например повторяющийся текст
  • закадровый или свернутый контент, например меню
  • «Почему это сначала img отображается без alt атрибута?«

    Так оно и есть alt="" , и то, что я описал выше, — заполнитель.

  • «Могу я как-нибудь добавить туда еще одного?«

    Вы можете сделать практически все, что угодно, написав свой собственный сценарий(ы). Здесь вам нужно искать такие элементы и добавлять alt соответствующие тексты.

    Но Next.js не предоставляет ничего подобного по совершенно уважительным причинам. Кроме того, он не будет отображаться в источнике вашей страницы. Ваш SEO-профилировщик, вероятно, проверяет только источник страницы, так как после визуализации изображения заполнитель удаляется из DOM. Мой совет здесь-прекратите проверять свое веб-приложение на такие вещи (те, которые несовместимы с React).

    Каждая крупная поисковая система Google (по крайней мере) знает, как сделать так, чтобы ваша страница отображалась перед сканированием. Более того, изображение с пустым alt атрибутом-это не то же самое, что изображение без alt атрибута.

    Чтобы узнать о специальных возможностях, попробуйте проверить свою страницу в web.dev/measure, PageSpeed Insights или на локальном компьютере с помощью инспектора специальных возможностей Lighthouse или Firefox Dev Tools.

Комментарии:

1. А как насчет SEO? Я беспокоюсь об этом пустом alt=»», так как инструмент проверки URL-адресов Bing говорит, что у меня проблемы с SEO в отношении тега «alt» моего изображения. Я заполнил их все, но, как вы упомянули, у нас все еще есть пустое изображение с этим пустым альтом. Вы уверены, что это не влияет на поисковую оптимизацию? Потому что Бинг говорит, что это «проблема».

2. @Charlyberthet В нем также говорится, что он имеет низкую степень тяжести. Более того, если поисковая система не сможет обработать изображения, весьма вероятно, что они не смогут правильно интерпретировать ваш динамический контент. И, читая разные статьи в Интернете, я считаю, что Bing еще не полностью поддерживает приложения React и Angular. Также, как я писал, w3c говорит, что пустой alt атрибут-это способ отображения декоративных изображений. Я все еще не понимаю, почему Бинг жалуется на это. Не стесняйтесь обращаться в их службу поддержки по этому поводу, ссылаясь на соответствующие ссылки.

Ответ №2:

Почему этот первый img отображается без тега alt? Могу ли я как-нибудь добавить его туда?

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

Из документов видно, что изменить тег alt на заполнитель невозможно.

Метки: