Тег | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 1). Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.
Рис. 1. Вид заголовка в браузере Firefox
Синтаксис
<head> <title>Заголовок</title> </head>
Закрывающий тег
Обязателен.
Атрибуты
Нет.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <title>htmlbook. ru - Как правильно писать заголовок страницы</title> </head> <body> <p>...</p> </body> </html>
Примечание
Тег <title> выполняет множество задач, как прямо, так и косвенно. Ниже описано какую роль выполняет заголовок страницы.
- По тексту заголовка пользователь получает дополнительную информацию, что это за сайт, на котором он находится и как называется текущая страница. Не стоит думать, что достаточно в документе указать логотип сайта и проигнорировать заголовок, ведь посетитель может свернуть окно. В свернутом виде заголовок также отображается на кнопках панели задач, поэтому можно легко ориентироваться, с каким сайтом в данный момент работать, а не перелистывать их по очереди.
- Большинство браузеров поддерживают возможность сохранения веб-страницы на локальный компьютер. В этом случае имя сохраненного файла совпадает с названием заголовка документа. Если в тексте заголовка содержатся символы недопустимые в имени файла (\ / : * ? » < > |), они будут проигнорированы или автоматически заменены другими дозволенными символами.
- При сохранении в разделе браузера «Избранное», адрес текущей страницы с ее заголовком помещается в список предпочитаемых ссылок. Поскольку этот список, как правило, хранится в виде отдельных файлов, к их именам также прилагается уже вышеописанное правило.
- В результатах поиска по ключевым словам, поисковые системы используют заголовок страницы для указания ссылки на данный документ. Интересно написанный заголовок, содержащий ключевые слова, привлечет больше внимания посетителей и увеличит шансы на то, что сайт посетит больше людей.
Документ
- Введение в HTML
- Синтаксис HTML5
- Теги заголовка документа
- Элемент title
Тег Title (тайтл) — зачем он нужен и как правильно его прописывать на странице
Тег Title – служебный тег, который содержит текстовый заголовок сайта или страницы. Именно благодаря этому тегу поисковые системы и пользователи узнают, какая информация находится на странице.
Элемент Title не является частью содержимого страницы – т.е. пользователи не видят его в основном контенте. Чаще всего с информацией из тега Title пользователь сталкивается в браузере и поисковой выдаче:
Какие задачи выполняет тег Title
- Корректно заполненный тег Title является обязательным условием успешной поисковой оптимизации сайта, т.к. информацию из него поисковик берет при формировании сниппета сайта в результатах поиска. Часто пользователь выбирает сайт, ориентируясь именно на заголовок, который отображается в сниппете. Если пользователь видит информацию, которая соответствует его поисковому запросу, он с большей вероятностью перейдет на этот сайт.
- Информация в теге Title помогает пользователю ориентироваться в открытых вкладках браузера и быстро находить нужную страницу.
- При сохранении страницы сайта в закладки браузера, ей автоматом дается название, указанное в теге Title. При корректно указанном заголовке страницы пользователь впоследствии без труда найдет необходимый ему документ.
Как корректно заполнить тег Title
Правильно оформленный тег Title понравится и поисковым системам, и пользователям. Чтобы сделать все правильно, достаточно придерживаться следующих правил:
Прежде всего, заполненный тег Title является обязательным элементом веб-страницы. Оставлять его пустым нельзя ни в коем случае.
Тег Title используется на странице только один раз в блоке HEAD.
Содержание тега Title должно быть уникальным для каждой страницы сайта.
Рекомендуемая длина текста в теге Title – от 60 до 120 символов. Но стоит не забывать, что сниппет страницы в поисковой выдаче может отображать до 70 символов (включая пробелы), и лучше уложиться в эти рамки. В общем, чем короче и понятнее, тем лучше.
Текст тега Title должен кратко и максимально понятно описывать содержимое страницы. Также не стоит забывать о его релевантности основному тексту документа.
Ключевые слова стоит размещать в начале текста тега Title – это положительно сказывается на ранжировании страницы в поиске. Также пользователь скорее кликнет на текст, соответствующий его запросу.
В тексте тега Title нельзя просто перечислять одни и те же ключевые слова (даже в разных падежах), текст не должен быть бессмысленным.
Если в тексте тега используется несколько разных ключевых слов, их оптимальное расположение будет следующим: основная ключевая фраза/слово – второстепенная ключевая фраза /слово – название бренда.
Желательно использовать схожую структуру построения и стиль для тегов Title на страницах всего сайта.
Что касается использования названия бренда в тексте тега Title, то если компания известная, его можно ставить ближе к началу текста (чтобы пользователи скорее обратили на него внимание). В остальных случаях рекомендуется использовать имя бренда ближе к концу текста.
При составлении текста для тега Title стоит думать о пользователе и о том, какой заголовок может привлечь его и заставить кликнуть на ссылку. Например, интернет-магазин может добавить в текст конкурентные преимущества, условия доставки и покупки, регион пользователя и т.д.
Что касается сниппета, название страницы из тега Title должен сочетаться с информацией в описании страницы, выступая в роли вводного текста.
Не нужно включать в текст тега Title не несущие дополнительной информации слова вроде «Добро пожаловать» и т.д.
Стоит отнестись с осторожностью к дополнительным символам, например, «=», «/», «!», «?», «*» и т.д., и по возможности их не использовать в тексте тега. Также не стоит использовать символы для украшения заголовка – они визуально перегружают текст и затрудняют его восприятие.
Существует мнение, что лучше избегать использования в title стоп-слов (и, о, или, я, к, до, не и т.д.), так как поисковые системы их всё равно игнорируют.
В заголовках страниц не следует использовать устаревшие, нераспространенные слова, которые могут ввести пользователя в заблуждение и переключить его внимание на другие сайты. Это правило не касается сайтов со специфичной информацией, где использование терминологии, в том числе и в теге Title, обязательно.
Рекомендуется использовать схожие ключевые слова в тегах Title и h2.
Тег HTML 5
Тег HTML
используется для объявления заголовка или имени HTML-документа.
Заголовок обычно отображается в строке заголовка браузера (вверху). Также он отображается в закладках браузера и результатах поиска.
Тег title помещается между открывающим и закрывающим тегами
.
Демо
Атрибуты
Теги HTML могут содержать один или несколько атрибутов. Атрибуты добавляются к тегу, чтобы предоставить браузеру больше информации о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), при этом значение заключено в двойные кавычки. Вот например стиль="цвет:черный;"
.
Существует 3 типа атрибутов, которые вы можете добавить к своим HTML-тегам: специфичные для элемента, глобальные атрибуты и атрибуты содержимого обработчика событий.
Ниже перечислены атрибуты, которые можно добавить к этому тегу.
Специфичные для элемента атрибуты
В следующей таблице показаны атрибуты, характерные для этого тега/элемента.
Атрибут | Описание |
---|---|
Нет |
Глобальные атрибуты
Следующие атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут tabindex
не применяется к элементам диалога
).
-
ключ доступа
-
автокапитализация
-
класс
-
редактируемый контент
-
данные-*
-
директор
-
перетаскиваемый
-
скрытый
-
идентификатор
-
режим ввода
-
это
-
ид
-
элементпроп
-
Артикул
-
предметная область
-
тип изделия
-
язык
-
часть
-
слот
-
проверка правописания
-
стиль
-
tabindex
-
название
-
перевод
Полное объяснение этих атрибутов см. в разделе Глобальные атрибуты HTML 5.
Атрибуты содержимого обработчика событий
Атрибуты содержимого обработчика событий позволяют вам вызывать сценарий из вашего HTML. Скрипт вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с другим событием.
-
прерывание
-
onauxclick
-
размытие
-
при отмене
-
онканплей
-
oncanplaythrough
-
при обмене
-
по клику
-
при закрытии
-
в контекстном меню
онкопия
-
при обмене
-
врезной
-
ondblclick
-
ондраг
-
ондрагенд
-
Драгентер
-
выход
-
на накладке
-
ондраговер
-
ондрагстарт
-
впускной
-
ondurationchange
-
при опорожнении
-
одноконцевой
-
при ошибке
-
онфокус
-
данные формы
-
при вводе
-
недействительный
-
нажатие клавиши
-
нажатие клавиши
-
onkeyup
-
onlanguagechange
-
под нагрузкой
-
загруженные данные
-
загруженные метаданные
-
запуск при загрузке
-
при нажатии мыши
-
ввод с помощью мыши
-
для мышей
-
перемещение мыши
-
onmouseout
-
при наведении мыши
-
на мышке вверх
-
паста
-
при паузе
-
в игре
-
в игре
-
в процессе
-
при изменении скорости
-
при сбросе
-
изменение размера
-
при прокрутке
-
onsecuritypolicyviolation
-
запрос
-
поиск
-
по выбору
-
при смене слота
-
установлен
-
-
приостановить
-
своевременное обновление
-
нагрудник
-
при изменении объема
-
в ожидании
-
на колесе
Полный список обработчиков событий см. в разделе Атрибуты содержимого обработчиков событий HTML 5.
Разница между тегами title и тегами h2
SEO 7 минут чтения
- В чем разница?
- Преимущества SEO
- Преимущества для пользователей
- Подпишитесь на нашу рассылку новостей
- Примеры тегов заголовков и тегов h2
- Должны ли они отличаться?
- Пример 1: Amazon Books
- Пример 2: Apple iTunes
- Пример 3: Home Depot
- Ключевые выводы
- Внешние ресурсы
Одной из ценных особенностей инструмента Monsido SEO и веб-мастера является то, что он показывает места на вашем веб-сайте, где отсутствуют теги заголовков или h2. Теги (теги заголовков). Мы обнаружили, что многие наши пользователи ошибочно думают, что это одно и то же. Несмотря на то, что между тегом Title и тегом h2 есть много общего, есть некоторые важные различия, и, если вы не используете их должным образом, это может повредить вашему рейтингу.
Обо всем по порядку. Что такое h2? Что такое тег h2? Для чего предназначен h2? Что такое тег заголовка HTML? Чем тег h2 отличается от тега заголовка HTML? Что именно отличает их?
Давайте посмотрим.
Итак, что такое HTML-тег заголовка? Что такое HTML-тег h2? Как они связаны и чем отличаются? Ну, в зависимости от веб-страницы, вы найдете эффективные примеры тегов заголовков, которые сильно отличаются от соответствующих HTML-тегов h2, и примеры тегов заголовков, которые столь же эффективны, но совершенно идентичны.
В общих чертах, в то время как тег h2 и тег заголовка HTML могут быть определены как заголовки, ключевое различие между ними можно рассматривать как немного похожее на разницу между предоставлением заголовка веб-сайта и заголовка статьи. Хотя обе вещи тесно связаны между собой, они также служат своей собственной цели. При создании заголовка веб-сайта по сравнению с названием статьи необходимо оценить несколько основных вещей, чтобы определить, соответствует ли каждый из них своей цели. То же самое относится и к оценке необходимости отдельного тега h2 и тега заголовка HTML для любой данной веб-страницы.
В терминах HTML тег заголовка выражается как «заголовок», а тег HTML h2 выражается как «h2». Оба служат заголовками для описания того, о чем ваша веб-страница.
Поскольку и тег Title, и HTML-тег h2 имеют одну и ту же более широкую цель, легко понять, почему люди их путают. Это еще больше сбивает с толку тот факт, что многие системы управления контентом настроены на автоматическое сопоставление ваших тегов заголовков и тегов h2 (и URL тоже). Но имейте в виду, что системы управления контентом созданы для начинающих пользователей, а не для людей, которым нужно обращать внимание на более тонкие детали SEO, чтобы они могли занять место в конкурентных нишах.
Основное различие между тегами заголовков и тегами h2 заключается в том, что где они появляются :
- Теги заголовков: Это то, что отображается в поисковых системах. Это гиперссылка, по которой будут нажимать поисковики. Он также отображается в строке заголовка в верхней части веб-браузера и является заголовком по умолчанию, который используется, когда кто-то добавляет страницу в закладки. Теги заголовков НЕ появляются на реальной веб-странице!
- h2 Теги: Это то, что пользователи увидят на вашей веб-странице. Он имеет крупный текст и служит заголовком страницы. Теги h2 обычно НЕ появляются в поисковых системах!
Включение релевантных тегов Title и h2 с ключевыми словами невероятно важно для SEO, потому что это помогает Google понять, о чем ваш сайт. Это также помогает Google понять, что наиболее важно на этой странице.
Многие ошибаются, опуская теги заголовков на своих страницах или используя общие теги, которые на самом деле не описывают, о чем конкретная веб-страница. Например, вы можете увидеть страницы с такими примерами тегов заголовков:
Эта компания предлагает услуги по защите интеллектуальной собственности. Но они не удосужились указать это ни в одном теге заголовка, поэтому ботам Google будет сложно понять такие примеры тегов заголовков, как этот. Когда я проверил исходный код их веб-страницы, я обнаружил, что тег h2 был установлен как:
h2 Тег: «Там, где должен быть ваш бизнес»
Как Google должен выяснить, о чем веб-сайт, без соответствующей информации в заголовке или шапке страницы?
Когда мы говорим об оптимизации веб-сайта, мы обычно говорим о том, «что нравится Google». Но имейте в виду, что все алгоритмы поисковой системы Google были созданы с учетом пользовательского опыта. Если вы сосредоточитесь на обеспечении удобного взаимодействия с пользователем, вы можете поспорить, что ваш сайт будет оптимизирован.
В приведенном выше примере не только боты Google могут быть сбиты с толку страницей. Представьте, если бы вы наткнулись на это объявление в результатах поиска. Тег заголовка не дает вам абсолютно никакого представления о том, о чем веб-страница. Поисковики не любят тратить время впустую, поэтому они, вероятно, не будут нажимать на нее. Даже если они рискнут и нажмут на нее, на самой странице нет абсолютно ничего, что могло бы убедить пользователей в том, что они попали в нужное место. Вместо того, чтобы тратить много времени на клики по веб-странице, чтобы определить, о чем она, они, вероятно, просто вернутся к результатам поиска и выберут другую страницу, которая четко показывает, что она отвечает их потребностям.
Мы можем резюмировать роль тега заголовка и тега h2 для взаимодействия с пользователем следующим образом:
- Тег заголовка: гарантирует пользователям, что они нашли релевантную страницу, которая удовлетворит их потребности
- h2 Тег: Представляет содержание страницы и заверяет их, что оно удовлетворит их потребности.
Получайте последние новости от Monsido о поисковой оптимизации, веб-доступности, грядущем законодательстве и многом другом.
Эта компания отлично поработала над тегами своих веб-страниц. Тег заголовка сразу сообщает пользователям, что они могут найти на странице. Предполагая, что поисковик ищет паромы и мини-круизы, он нажмет на ссылку. Как только они попадают на страницу, тег h2 не только сообщает им, чего ожидать на странице, но и повышает доверие потребителей.
Если ваши теги h2 настолько хорошо написаны, что убеждают пользователя остаться на странице, тогда продолжительность сеанса увеличивается, а показатель отказов уменьшается — два важных показателя взаимодействия с пользователем, которые влияют на рейтинг в поисковых системах. В этом смысле теги h2 оказывают большое влияние на SEO.
Существует много споров о том, нужно ли писать уникальную информацию для тегов Title и h2. Тем не менее, общий консенсус среди экспертов (включая Рэнда Фишкина из Moz) заключается в том, что не опасно, чтобы ваш тег заголовка совпадал с вашим тегом h2.
Помните, что многие системы управления контентом по умолчанию устанавливают заголовок страницы как тег заголовка и тег h2. Если теги очень актуальны, то это, вероятно, не будет плохой вещью и может даже помочь создать непрерывность на протяжении всего пользовательского опыта.
Однако в определенных ситуациях может быть очень полезно использовать разные теги заголовков и теги h2. Не делайте этого только для того, чтобы получить больше ключевых слов или потому, что вы думаете, что это поможет SEO! Всегда пишите теги, чтобы убедить пользователя, что он нашел нужный контент!
Вот несколько примеров тегов заголовков с веб-страниц, которые имеют разные теги заголовков и теги h2. Подумайте о том, как это влияет на взаимодействие с пользователем и что оно сообщает поисковым системам.
h2 Тег: «Книги-бестселлеры»
h2 Тег: «iTunes».
Тег h2: «Садовые и ландшафтные инструменты»
Как вы думаете, почему эти компании решили установить свои теги Title и h2 таким образом? Как это влияет на клики в поисковой выдаче и пользовательский опыт? Это то, о чем стоит подумать в следующий раз, когда вы будете устанавливать свои собственные теги Title и h2!
Итак, что такое тег h2 и чем он отличается от тега Title? В конце концов, теги h2 и теги title существуют для удовлетворения потребностей отдельной веб-страницы.