Разница между alt и названием img - какой использовать - и влиянием

10

В течение многих лет я писал свой HTML для таких изображений:

<img src="picture.jpg" alt="my picture" >

Но недавно я провел аудит моего сайта с использованием инструментов Raven SEO, и он сообщил о множестве ошибок, которые меня очень удивили.

Когда я просматривал отчет, 99% этих ошибок были связаны с отсутствием текста заголовка изображения.

Я знаю, что текст заголовка для изображения может немного всплывать, когда вы наводите курсор на изображение, но помимо этого, какова цель и влияет ли это на SEO?

Также, если бы вы реализовали это, что бы вы там поместили? Вы бы просто поместили ту же информацию, что и в altатрибуте? т.е.alt="my picture" title="my picture"

Сэм
источник
«Какой из них использовать» - я не думаю, что есть какой-либо вопрос о том, следует ли использовать altатрибут - это обязательно, и ваши страницы не пройдут проверку без него (разве что в некоторых крайних случаях с HTML5?).
MrWhite
1
"Raven SEO" сообщает о явной "ошибке" или предупреждении / уведомлении?
MrWhite
@ w3d сообщает о предупреждении / уведомлении
Сэм

Ответы:

12

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

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

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

Ярким примером этого является то, что часто говорят, что кто-то хочет присвоить ключевое слово «Борнмут», в заголовке у него будет Борнмут, в мета-описании H1 затем создадим изображение с альтернативным тегом «Борнмут», хотя это будет работать для SEO это ослабляет пользовательский опыт и пропускает весь смысл тэга alt. Тег alt предназначен для людей, у которых проблемы со зрением или все изображения отключены. Таким образом, тег ALT был разработан, чтобы информировать пользователя о том, что изображение.

Хороший пример этого можно увидеть ниже

<img src="i.jpg" alt="Bournemouth" />

против

<img src="i.jpg" alt="Birdseye view of Bournemouth" />

Приведенный выше пример по-прежнему содержит ваше ключевое слово, в то время как Google и ваша аудитория объясняют, о чем идет речь.

Так что насчет заголовка?

Тег заголовка был разработан, чтобы дать больше информации, когда вы наводите курсор на элемент, он не очень полезен для IMG, потому что, если вы собираетесь использовать одну и ту же информацию для ALT и TITLE, вы можете использовать скрипт для чтения тега alt и собственные зависания, используя JS. Я бы порекомендовал тег title только в том случае, если вы собираетесь предоставить больше информации, чем тег ALT, например, более подробное описание - нет необходимости предоставлять точную информацию в обоих элементах, поскольку это просто раздувает код.

Тег заголовка очень удобен для ссылок, так как при наведении на него может дать вашей аудитории больше информации о ссылке, которую они собираются щелкнуть. Это будет стоить вам, чтобы узнать больше о заголовке тега здесь .

Саймон Хейтер
источник
1
«если заголовок не найден, то он будет читать тег alt как указатель мыши» - altатрибут не используется в качестве «указателя мыши» в любом современном браузере. Только IE7 и более ранние версии отображали альтернативный текст как всплывающую подсказку (когда titleатрибут пропущен).
MrWhite
Извините, это не то, что я хотел сказать. Я имею в виду для текста вы получаете тэг alt. Для наведения курсора вы просто используете jquery, чтобы прочитать тег alt и сделать заголовок. Не нужно писать как alt, так и title, если они одинаковые, они просто раздувают ваш код.
Саймон Хейтер
1
@ w3d отредактировал ответ;)
Саймон Хейтер
1
Но поскольку заголовок с точки зрения SEO-заголовка мало что дает рейтингу, Мэтт Каттс немного говорит о заголовке в этом видео googlewebmastercentral.blogspot.co.uk/2007/12/…, но больше внимания уделяет тегу ALT. Лично я уверен, что это может способствовать удобству работы пользователей, но не так сильно, как можно было бы надеяться, миллионы топ-сайтов имеют рейтинг без каких-либо заголовков на изображениях.
Саймон Хейтер
Просто подумал, что стоит уточнить ... сами атрибуты altand titleникогда не должны быть «одинаковыми», так как это может сбить с толку людей, которые используют altтекст для доступности. Решение jQuery создает событие наведения мыши, а не просто копирует altтекст в titleатрибут.
MrWhite
3

altдает альтернативное описание изображения. Этот атрибут необходим для img.

titleдает дополнительную информацию об изображении. Этот атрибут не является обязательным для img.

Никогда не полагайтесь на информацию в title. Если информация действительно важна, включите ее в свой элемент.

Эти два атрибута не должны иметь одинаковое содержание.

ОООНР
источник
0

Ваша путаница нормальна, и да, каждый тег (Title, ALT) представляет свой собственный потенциал, который помогает поисковой системе и пользователю узнать, о чем изображение.

Некоторое время текста ALT недостаточно для описания изображения, поэтому лучше назначать как можно больше информации, используйте вариацию в назначении слов, что также более эффективно с точки зрения SEO.

Раджеш Магар
источник