Атрибут title

7.1 Введение в структуру документа HTML

Документ в формате HTML 4.0 состоит из трех частей:

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

Перед каждым элементом или после каждого элемента может находиться пустое пространство (пробелы, переход на новую строку, табуляции и комментарии). Разделы 2 и 3 должны отделяться элементом .

Вот пример простого документа HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>Мой первый документ HTML</TITLE>
   </HEAD>
   <BODY>
      <P>Всем привет!
   </BODY>
</HTML>

§4. Технические мета-теги

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

content-type — тип документа и его кодировка. Этот мета-тег нужен для правильного отображения символов браузером.
Кодировок существует много. Большинство из них тебе даже никогда не встретится. Не говоря уже про то, что ты будешь их использовать сам. Современные браузеры определяют тип кодировки атоматически, но для большей уверенности можно указать его и самостоятельно. Если ты создаёшь html-документ в операционной системе Windows, языком которой является русский, то кодировка будет «windows-1251», а код для вставки мета-тега такой:

Содержимое мета-тега «title» Основное содержимое страницы
content-language — указание языка документа. Значение этого необязательного мета-тега используется как поисковыми роботами, так и web-серверами. Код для вставки:

Содержимое мета-тега «title» Основное содержимое страницы
refresh — время (в секундах), через которое произойдет автоматическая перезагрузка документа или переход на другую html-страницу с заданным адресом (url). Например, чтобы производить атоматическую перезагрузку документа каждые 30 секунд, нужно вставить этот мета-тег так:

Содержимое мета-тега «title» Основное содержимое страницы

А, чтобы, спустя 5 секунд, перейти на страницу по адресу https://www.seoded.ru/, нужно записать так:

Содержимое мета-тега «title» Основное содержимое страницы
robots — мета-тег, который отвечает за настройки индексирования страницы. У мета-тега «robots» могут быть следующие значения:
- index — страница индексируется;
- noindex — страница не индексируется;
- follow — гиперссылки на странице учитываются;
- nofollow — гиперссылки на странице не учитываются
- all — заменяет «index» и «follow», т.е. страница индексируется и гиперссылки на ней учитываются (действует по умолчанию);
- none — заменяет «noindex» и «nofollow», т.е. страница не индексируется и гиперссылки на ней не учитываются.
Код для вставки мета-тега «robots»:

Содержимое мета-тега «title» Основное содержимое страницы
author и copyright — мета-теги, которые позволяют указать авторство и владельца контента на странице. HTML-код для вставки:
Содержимое мета-тега «title» Основное содержимое страницы

The details

The is problematic. It is problematic because it is not well supported in some crucial respects, even though it has been with us for . With the rise of touch screen interfaces, the usefulness of this attribute has decreased. The accessibility of the attribute has fallen victim to a unfortunate combination of poor browser support, poor screen reader support and poor authoring practices.

Situations in which the the attribute is not useful due to lack of support:

Displaying information for web content viewed on mobile phone browsers. Typically in desktop browsers attribute content is displayed as a tooltip. From what I could find, tooltip display is not supported in any mobile browser and alternative visual methods of accessing attribute content are not supported.
Providing information for people who cannot use a mouse. Typically in desktop browsers, attribute content is displayed as a tooltip. Although the tooltip behavior has been supported for 20+ years, no current browser has an implemented practical method to display attribute content using the keyboard.
Using it on most to provide information for users of a variety of assistive technologies. Access to attribute information is not supported uniformly by screen readers

User groups not well served by use of the attribute

Mobile phone users.
Keyboard only users.
Screen magnifier users.
Screen reader users.
Users with fine motor skill impairments.
Users with cognitive impairments

Examples of attribute use that are USEFUL:

Labeling or elements:
Providing a programmatically associated label for a control in situations where a visible text label would be redundant:
- In 2010
- Now in 2020 a better method for doing this is using the attribute
- In 2010 labeling
- Now in 2020 a better method for doing this is using the attribute or the
  attribute.

Examples of attribute use that are NOT USEFUL or are of LIMITED USE:

For additional information not provided as text in a link or surrounding content:
- Instead include such information as part of the link text or next to the link.
Providing the same information provided as link text:
- Recommend not duplicating content of a link in the attribute. It does nothing and makes it less likely if people can access attribute content that they will do so.
For a caption on an image:
- Presumably caption information is important information that should be available to all users by default. If so present this content as text next to the image.
For a label on a control that has no visible text label:
- Screen readers users will have access to the control label, as the title attribute is mapped to the accessible name property in accessibility APIs (when a text label using the label element is not supplied ). Many other users will not. Recommend including a visible text label whenever possible.
Providing the same information as a visible explicitly associated text label for a control:
- Repeating the visible label text does nothing except possibly add cognitive noise for a range of users. Do not do it.
Providing additional instructions for a control:
- If the instructions are important for using the control correctly, then provide them in text near the control, so they can be read by everyone.
Expansion of an abbreviation:
- The on the element is well supported by screen reader software, but its use is still problematic, as other user groups cannot access the expansion. It is recommended that the expanded form of an abbreviation is provided in plain text when it is first used in a document, and/or a glossary of terms that provides the expanded form is provided. This is not to suggest that that the expansion cannot be provided using the attribute, only that due to its limitations, an expansion in plain text also be provided.

includes general advice on use of the attribute:

7.2 Информация о версии HTML

В документе HTML должна быть объявлена используемая в нем версия языка HTML. Объявление типа документа указывает определение типа документа (DTD), используемое в этом документе (см. ).

HTML 4.0 определяет три DTD, так что авторы должны включать в свои документы одно из следующих объявлений типов. Разница между DTD заключается в поддерживаемых ими элементах.

HTML 4.0 Strict DTD (строгое определение) включает все элементы и атрибуты, не являющиеся и не использующиеся в документах с кадрами. Для документов, использующих это DTD, используйте такое объявление типа документа:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html40/strict.dtd">
```
HTML 4.0 Transitional DTD (переходное определение) включает все, что включено в строгое DTD, а также нежелательные элементы и атрибуты (большинство из которых относится к визуальному представлению). Для документов, использующих это DTD, используйте такое объявление типа документа:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">
```
HTML 4.0 Frameset DTD (определение для кадров) включает все, что включено в переходное DTD, а также кадры. Для документов, использующих это DTD, используйте такое объявление типа:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
        "http://www.w3.org/TR/REC-html40/frameset.dtd">
```

URI в каждом объявлении типа документа позволяет агентам пользователей загрузить DTD и все необходимые . Следующие URI указывают на DTD и наборы комбинаций для HTML 4.0, поддерживаемого W3C:

«http://www.w3.org/TR/REC-html40/strict.dtd» — строгое DTD по умолчанию
«http://www.w3.org/TR/REC-html40/loose.dtd» — переходное DTD
«http://www.w3.org/TR/REC-html40/frameset.dtd» — DTD для документов, использующих кадры
«http://www.w3.org/TR/REC-html40/HTMLlat1.ent» — комбинации Latin-1
«http://www.w3.org/TR/REC-html40/HTMLsymbol.ent» — комбинации символов
«http://www.w3.org/TR/REC-html40/HTMLspecial.ent» — специальные комбинации

Связь между общими идентификаторами и файлами можно указать с использованием файла каталога, за которым следует формат, рекомендуемый Открытым консорциумом SGML (см. ). включен в начало раздела о справочной информации об SGML для HTML. Две последние буквы декларации указывают язык DTD. Для HTML это всегда английский («EN»).

Отличие атрибутов title и alt

Чем же отличаются атрибуты title и alt? На первый взгляд они несут похожую информативную нагрузку, тем не менее у них есть отличия и очень существенные.

Атрибут title (не стоит путать с тегом Title) описывает элемент в котором находиться, при наведении на элемент вы увидите описание скрытое в атрибуте. Основное предназначение атрибута — это предоставление дополнительной информации для посетителя сайта. Title должен раскрывать суть элемента, будь это картинка или ссылка.

Атрибут alt — является атрибутом тега img, предназначение которого отображение сути картинки в случае невозможности загрузки изображения или же когда прорисовка картинок отключена нарочно настройками браузера. Вторым свойством которым не стоит пренебрегать это факт чтения атрибута alt поисковыми роботами. Так как они не умеют на данный момент читать картинки, атрибут alt является для них информацией об изображении, которую они заносят к себе в базу.

Атрибуты alt и title для картинок.

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

Что писать в атрибутах title и alt?

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

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

Пример использования атрибутов title и alt при оптимизации картинок.

Давайте рассмотрим на примере использование атрибутов title и alt, и их оптимальное заполнение. Есть у нас вот такая картинка:

Тег img в данном случае имеет вот такой вид:

<img class=”aligncenter size-full wp-image-1314″ src=”//site,ru/content/alt-title-1.png” alt=”Использование alt и title в катринках” title=”Пример использования атрибутов title и alt при оптимизации картинок в записи” width=”466″ height=”345″ />.

С данного примера мы видим что используется значение alt в более строгой форме, оно будет отображено при отключении показа картинок или неполадок с загрузкой изображения. Почему именно в сжатой форме? Дело в том что если мы напишем большой текст и у нас не загрузиться картинка, тогда мы увидим скорее всего дублирование текста. Другими словами не стоит передавать в атрибут alt фрагмент с текста, требуется оптимально короткое его внесение.

Теперь рассмотрим атрибут title, он более обширно представлен, и более информативно для читателя, при наведении курсора на картинку мы увидим действие атрибута title.

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

Оптимизация внутренних ссылок с помощью атрибута title

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

Что писать в атрибуте ссылки title?

Описание в title ссылке должно нести информативный характер и быть релевантным к тексту как самой записи где размещена ссылка, так и к целевой странице перехода. Другими словами, ссылаться стоит только на схожие по тематике статьи.

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

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

Синтаксис ссылки должен быть следующим:

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

Если вы впервые перевариваете эту информацию, тогда у вас предстоит большая работа по оптимизации ваших ссылок и картинок, это долгий трудный путь, но он вам воздастся.

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

Будьте оптимизированными и да прибудет с вами ТОП 1)))

§5. Заключение

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

Заголовок страницы

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

На этом раздел моего сайта про основы HTML для начинающих окончательно закончен и дальше речь пойдёт о том, с чего начать раскрутку и продвижение своего сайта в Интернете. Там же парочка моих советов из личного опыта по оптимизации страниц сайта. Жми на «Дальше».