Тег <title> прописывается внутри <head> и делает сразу две вещи: его текст показывается на вкладке браузера, и он же становится кликабельным заголовком сниппета в результатах поиска. На странице title должен быть ровно один, и, пожалуй, это самый заметный посетителю тег из всего head - несмотря на то, что сам он на странице не отображается.
В этой статье
<title>Название страницы - Название сайта</title>Жёсткого лимита длины нет
У title нет официального ограничения по числу символов - и Google, и браузер обрезают заголовок по ширине в пикселях, а не по счётчику. На практике это обычно около 50-60 символов кириллицей, но это ориентир сообщества, а не правило поисковика. Куда важнее другое: если Google решит, что title неточный, наполовину пустой, обрезанный или не соответствует содержимому страницы, - он может показать в выдаче свой собственный, переписанный заголовок вместо вашего.
Пример: как title обрезается в выдаче
Наберите свой заголовок - счётчик и превью сниппета обновляются на лету:
www.htmlicss.com
Обрезка в превью здесь сделана через CSS (overflow: hidden + text-overflow: ellipsis) по ширине блока - это тот же принцип, каким браузер и поиск обрезают заголовок на самом деле, только у них ширина зависит от экрана и шрифта, а не фиксирована, как в этом примере.
Тег title и атрибут title - разные вещи
Название одно, а смысл совсем разный. Тег <title> - единственный, находится только внутри <head> и управляет вкладкой браузера и сниппетом в поиске. Атрибут title="" - совсем другое: его можно прописать почти любому элементу (<a>, <img>, <abbr>, <input> и другим), и он просто показывает всплывающую подсказку при наведении курсора. На поиск и на вкладку браузера этот атрибут никак не влияет.
<a href="/kontakty" title="Открыть страницу контактов">Контакты</a>
<abbr title="HyperText Markup Language">HTML</abbr>В обоих примерах выше подсказка появится только при наведении курсора мыши - и не имеет никакого отношения к тегу <title> в <head>, кроме совпадения в названии.
title и h1: в чём разница
Оба часто содержат похожий текст, поэтому их путают. Но у них разная аудитория и разное место. <title> нигде не отображается на самой странице - его видят только во вкладке браузера и в результатах поиска, то есть до того, как человек зашёл на страницу. <h1>, наоборот, - обычный видимый заголовок внутри <body>, первое, что читает посетитель уже на самой странице.
Делать их дословно одинаковыми не обязательно, а часто даже хуже для SEO: в title удобно добавить название сайта или уточнить запрос, под который заточена страница, а h1 можно оставить короче и естественнее - для живого человека, а не для поисковой выдачи. Но оба нужны на каждой странице: ровно один <title> в <head> и, как правило, ровно один <h1> в <body>.
Ошибки при работе с тегом title
С <title> редко путают синтаксис - чаще неверно понимают, что именно поисковик сделает с его содержимым:
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Тега <title> нет вообще | Google сам подбирает заголовок для сниппета - обычно из текста страницы, непредсказуемо | Добавить осмысленный <title> на каждую страницу |
| Один и тот же title на всех страницах сайта | Посетитель не может отличить вкладки друг от друга, поиск видит дублирующийся контент | Уникальный title под содержание каждой конкретной страницы |
| Title забит ключевыми словами через запятую | Выглядит как спам, Google с высокой вероятностью перепишет его сам | Обычное читаемое предложение, а не список ключевиков |
Частые вопросы
Title - это один из мета-тегов?
Нет, <title> - самостоятельный тег, а не разновидность <meta>. Но по смыслу они работают вместе и лежат рядом в head: title - кликабельный заголовок сниппета в поиске, а meta name="description" - текст-описание под ним.
Чем атрибут title отличается от alt у картинки?
Это разные вещи даже на одном теге <img>. alt - текстовое описание изображения для поисковика и для тех, кто не видит картинку (например, экранный диктор) - у img он обязателен. title - необязательная всплывающая подсказка при наведении курсора, к поиску отношения не имеет.
