Использование атрибута заголовка с элементами HTML

1. Что такое атрибут заголовка?
2. Где я могу использовать атрибут заголовка?
3. Полезные места для использования атрибута заголовка
5. ABBR
6. АКРОНИМ
7. ПЛОЩАДЬ
8. КНОПКА
9. КРТЗ
10. КОД
11. IMG
12. Поисковая оптимизация и атрибут заголовка
13. Это не означает, что ключевое слово наполняет атрибут заголовка.
14. Косвенное SEO преимущество титульного атрибута
15. Используйте атрибут заголовка, чтобы улучшить опыт посетителей
16. Что дальше?

Атрибут title, атрибут HTML, который иногда используется неправильно, а иногда - недостаточно. При правильном использовании атрибут заголовка может повысить доступность, удобство использования и преимущества поисковой оптимизации для ваших веб-страниц.

Что такое атрибут заголовка?

Атрибут title - это небольшая часть кода, добавляемая к HTML-элементам (тегам), которая предоставляет дополнительную информацию, относящуюся к элементу, когда пользователь наводит указатель мыши на элемент, или вспомогательная технология достигает его, когда он обрабатывает документ.

Где я могу использовать атрибут заголовка?

В спецификации HTML 4.01 атрибут заголовка не может использоваться для базовых, базовых шрифтов, заголовка, HTML, мета, параметров, скриптов и элементов заголовка / тегов. Это имеет смысл, эти элементы не видны визуальным пользователям.

На момент написания статьи на титульной странице w3schools указано:

В HTML5 атрибут title может использоваться для любого элемента HTML (он будет проверяться для любого элемента HTML. Однако это не обязательно полезно).

HTML title Атрибут

Примечание: HTML5 еще не является стандартом. Вещи могут измениться между сейчас и потом.

Полезные места для использования атрибута заголовка

А пока давайте сосредоточимся на тех местах, где вы можете использовать атрибут title, который увеличивает доступность (см. Цитату ниже), удобство использования и поисковую оптимизацию ваших веб-страниц.

Я использовал самый популярный коммерческий скринридер JAWS и самую популярную бесплатную альтернативу NVDA. Это был невероятно поучительный опыт, и я многому научился (вот список того, что я узнал). Одна из главных вещей, которые я заметил, это то, что атрибут title не читается вслух, ВСЕ.

В JAWS есть опция, позволяющая читать текст заголовка вместо обычного текста привязки, но по умолчанию она не включена. Единственное очень маленькое исключение, при котором атрибут заголовка будет прочитан, - это если абсолютно нет текста привязки ссылки, и это редко. Даже если ссылка переносит изображение, программа чтения с экрана выберет чтение альтернативного текста изображения вместо атрибута title.

Я думал, что текст заголовка улучшил доступность , Я был неправ.

Ниже приведены некоторые из наиболее распространенных HTML-элементов (тегов), используемых при повседневном создании веб-страниц и блогах:

• Элемент A - это тег, который вы используете для создания ссылки. Это также упоминается как тег привязки.

  <a href="http://www.domainname.com/page-name.htm" title="Info о том, куда они пойдут / смотрите, если они нажмут на эту ссылку"> Это ссылка </a>

• ABBR

  Элемент аббревиатуры, используемый вокруг аббревиатуры, которую вы используете на своей странице. Некоторые читатели могут не знать, что это означает. Вы можете сообщить им об этом, используя атрибут title.

  Inc. (наведите курсор мыши на аббревиатуру и посмотрите)

  <abbr title = "Incorporated"> Inc. </ abbr>

• АКРОНИМ

  Элемент аббревиатуры, используемый вокруг аббревиатуры, помогает тем, кто не знаком с аббревиатурой, понять, что это означает.

  SEO

  <acronym title = "Поисковая оптимизация"> SEO </ acronym>

  Примечание. В HTML5 элемент abbr будет представлять собой аббревиатуру или аббревиатуру.

• ПЛОЩАДЬ

  Элемент области используется в сочетании с элементом карты, когда используется карта изображения.

  <area href = "http://www.yourdomainname.com/page-name.htm" title = "Опишите, куда они пойдут, если щелкните область" alt = "описание области на карте изображения" shape = "rect "ordins = "184,0,276,28">

• КНОПКА

  Когда имя описывается, элемент button создает кнопку, при нажатии которой что-то происходит.

  <button name = "сброс" значение = "сброс" тип = "сброс" title = "сброс формы к исходным значениям"> сброс формы <img src = "/ icons / reset.gif" alt = "сброс"> </ button >

• КРТЗ

  Элемент cite используется с набором тегов blockquote для предоставления ссылки, из которой было взято предложение.

  <blockquote cite = "http://www.domainname.com/page-name.html" title = "Название страницы, где цитата была взята из">

  Примечание. В HTML5 цель тега cite изменится:

  Хотя в предыдущих версиях HTML подразумевалось, что элемент cite можно использовать для разметки имени человека, такое использование больше не считается соответствующим. Элемент cite теперь представляет только цитируемое название произведения; например, название книги, бумаги, эссе, стихотворения, партитуры, песни, сценария, фильма, телешоу, игры, скульптуры, живописи, театрального производства, пьесы, оперы, мюзикла, выставки, отчета о судебном процессе или других подобных Работа.

  Как вы можете видеть из приведенной выше цитаты из спецификаций HTML5, это не очень полезно, если вы хотите прочитать цитату самостоятельно. (наведите курсор на указанную выше цитату) Добавьте к удобству использования ваших цитат, включив ссылку на источник в набор тегов blockquote или чуть ниже blockquote. Та же цитата улучшена:

  Хотя в предыдущих версиях HTML подразумевалось, что элемент cite можно использовать для разметки имени человека, такое использование больше не считается соответствующим. Элемент cite теперь представляет только цитируемое название произведения; например, название книги, бумаги, эссе, стихотворения, партитуры, песни, сценария, фильма, телешоу, игры, скульптуры, живописи, театрального производства, пьесы, оперы, мюзикла, выставки, отчета о судебном процессе или других подобных Работа.

  Источник: HTML: язык разметки (ссылка на язык HTML) - Cite
  Рабочий проект W3C 11 октября 2012 г.

• КОД

  Мы использовали элемент кода для обозначения строк в этой статье в качестве примера кода для обсуждаемого элемента. Вы заметите, что мы также включили атрибут title в наши примеры для лучшего удобства использования и доступности. Ниже приведен пример кода, который мы использовали для примера кода выше:

  <code title = "Открытие тега blockquote с элементом cite и атрибутом title"> & lt; blockquote cite = & quot; http: //www.domainname.com/page-name.html&quot; title = & quot; заголовок страницы, где цитата была взята из & quot; & gt; </ code>

• IMG

  Тег img уже требует атрибут alt чтобы описать изображение, однако, если изображение кликабельно (вокруг него есть якорный набор тегов), то вы должны добавить атрибут title к ссылке.

  Пример кодирования изображения:

  <img src = "http://www.webpagemistakes.ca/images/image-alt-tag-example.png" alt = "Изображение alt tag - пример атрибута изображения alt" width = "225" height = "205" / >

  То же изображение сделано кликабельным:

  <a href="http://www.webpagemistakes.ca/image-alt-tags/" title="Image Alt Tag - Image Alt attribute"> <img src = "http://www.webpagemistakes.ca/images /image-alt-tag-example.png»
  alt = "Изображение alt tag - пример атрибута изображения alt" width = "225" height = "205" /> </a>

Поисковая оптимизация и атрибут заголовка

Это то, что Google говорит относительно атрибута title:

… Атрибут «title» немного отличается: он «предлагает консультативную информацию об элементе, для которого он установлен». Поскольку робот Google не видит изображения напрямую, мы обычно концентрируемся на информации, предоставленной в атрибуте «alt». Не стесняйтесь дополнять атрибут «alt» заголовком и другими атрибутами, если они обеспечивают ценность для ваших пользователей!…

Официальный блог Google для веб-мастеров: Интеллектуальное использование атрибутов ALT

Однако Bing советует вам использовать атрибут title в ваших внутренних ссылках:

… Чтобы еще больше повысить релевантность ключевых слов для этих страниц, добавьте атрибут title к своим тегам привязки….

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

Источник: Заставить ссылки работать на вас (SEM 101) Блог Центра веб-мастеров Bing (прокрутите вниз до пункта Использовать атрибут заголовка в тегах привязки для внутренних ссылок)

Это не означает, что ключевое слово наполняет атрибут заголовка.

Некоторые оптимизаторы используют атрибут title (как и атрибут alt) как место для заполнения ключевых слов. Помните, что цель атрибута title - предоставить больше информации.

Косвенное SEO преимущество титульного атрибута

Все поисковые системы говорят, что пишите для ваших читателей, а не для поисковых систем. Имея это в виду, если вы включите атрибут title в соответствующие места, это улучшит доступность и удобство использования вашего веб-сайта или блога, что может привести к косвенным улучшениям в поисковой оптимизации через органический входящие ссылки , то есть люди будут распространять информацию на сайтах социальных сетей и на своих сайтах о том, насколько хорош ваш сайт.

Используйте атрибут заголовка, чтобы улучшить опыт посетителей

Не беспокойтесь о том, есть ли прямая поисковая оптимизация от использования атрибута title. Используйте атрибут title, чтобы улучшить опыт вашего посетителя. Косвенная выгода от предоставления отличного опыта вашим посетителям может значительно снизить вес и хитрости для манипулирования результатами поиска.

Есть еще места, где можно улучшить доступность и удобство использования с помощью атрибута title? Дайте нам свои идеи в комментариях ниже.

Что дальше?

Следите за нашими новыми статьями через RSS , Подпишитесь на нас в щебет и отправьте на ваш любимый сайт социальной сети: