Что такое заголовок страницы на сайте
Перейти к содержимому

Что такое заголовок страницы на сайте

  • автор:

Заголовок страницы title: для чего используется, как составить и изменить

Заголовок title, хоть и не отображается непосредственно на странице, имеет важное значение в продвижении сайта и используется в следующих целях:

1. Для информирования пользователей о содержании страницы. Title-заголовок отображается во вкладке браузера и несет информацию о содержимом страницы и сайта в целом.

Заголовок title отображается во вкладке браузера

Title помогает пользователям ориентироваться в свернутых вкладках. Невнятный заголовок или его отсутствие может негативно отразиться на желании просматривать страницу. Посмотрите на скриншоты ниже: скорее всего, пользователь закроет вкладки с такими заголовками, даже не взглянув на содержимое страниц.

Пример плохого, очень плохого titleЕще один пример плохого, очень плохого title

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

Заголовок title используется для названия ссылки в поисковой выдаче

3. При сохранении страницы в избранное. Когда вы добавляете страницу в закладки, браузер автоматически сохраняет ее под именем title-заголовка.

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

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

Заголовок title используется в качестве названия страницы при сохранении ее на ПК

Заголовок title используется в качестве названия страницы при сохранении ее на локальный компьютер

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

Как изменить title заголовок страницы

В системе «Нубекс» предусмотрено два способа указать заголовок страницы: автоматически и вручную.

Способ 1. Заполнение title заголовка вручную

Чтобы прописать заголовок title, войдите в режим редактирования нужной страницы и откройте вкладку «SEO». Введите текст заголовка в соответствующее поле и сохраните изменения.

Указать title заголовок страницы можно во вкладке SEO при редактировании страницы

Советы по заполнению заголовка:
  • Желательно, чтобы длина заголовка не превышала 60-100 символов: слишком длинное название отобразится не полностью, и заголовок может потерять информативность и привлекательность;
  • Размещайте ключевые слова ближе к началу заголовка;
  • Используйте меньше прямых перечислений ключевых слов и не злоупотребляйте их количеством: заголовок должен сохранить читаемый и осмысленный вид;
  • Исключайте, по возможности, лишние символы ( = / ! ? * » : < >| + _ ). В некоторых браузерах они могут отображаться некорректно;
  • Не вводите пользователей в заблуждение: заголовок должен соответствовать содержимому страницы. В противном случае посетитель, скорее всего, покинет страницу и вернется к поиску, а это негативно повлияет на позицию сайта в результатах выдачи;
  • Не используйте редкие, сложные или иносказательные фразы — заголовок должен быть простым и понятным.

Способ 2. Автоматическое построение заголовка страницы

Если у вашего сайта богатая структура, продумывать title-заголовок для каждой страницы может быть довольно долгим и мучительным занятием. Есть другой выход: настройте автоматическое построение, и система будет «подклеивать» название сайта к заголовку страницы h1, тем самым формируя title.

Поясним: создавая или редактируя страницы сайта, вы заполняли для каждой из них заголовок h1 (это тот заголовок, который отображается на сайте в начале страницы). В нашем примере h1 — это «Доставка в удаленные регионы».

Заголовок h1 заполняется при создании или редактировании страницы и отображается на сайте в начале страницы

Также у вашего сайта наверняка есть название: при необходимости вы можете его отредактировать в разделе «Настройки» -> «Название сайта». В нашем примере сайт называется «ООО «Рога и копыта».

Название сайта вы можете изменить в разделе настроек

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

Откройте раздел SEO в настройках сайта, чтобы настроить автоматическое построение title

Определите, как будет составляться title-заголовок для страниц:

  • Название сайта в начале заголовка. В нашем примере title будет выглядеть так: «ООО «Рога и копыта». Доставка в удаленные регионы»;
  • Название сайта в конце заголовка. В нашем примере title будет выглядеть так: «Доставка в удаленные регионы. «ООО «Рога и копыта»;
  • Без названия сайта. В этом случае title будет совпадать с заголовком h1. В нашем примере title будет выглядеть так: «Доставка в удаленные регионы».

Настройки автоматического построения заголовка страницы

Затем не забудьте сохранить изменения на странице.

Кстати, можно комбинировать автоматическое и ручное построение title. Например, для особенно важных страниц (для главной, каталога и пр.) продумывать заголовки самостоятельно, а для «технических» («Реквизиты», «Условия оплаты», «Контакты» и т.д.) оставить title, собранные системой. Если у страницы title указан индивидуально, автоматический заголовок не будет его «перебивать».

  • Как создать сайт самостоятельноКак создать сайт самостоятельно
  • Работа со страницамиРабота со страницами
  • Наполнение страницНаполнение страниц
  • Работа с изображениями и файламиРабота с изображениями и файлами
  • ФотогалереиФотогалереи
  • НовостиНовости
  • Каталог товаровКаталог товаров
  • Интернет-магазинИнтернет-магазин
  • Формы обратной связиФормы обратной связи
  • ВиджетыВиджеты
  • Функции продвиженияФункции продвижения
  • Доступ в систему управленияДоступ в систему управления
  • Внешние сервисыВнешние сервисы
  • ДизайнДизайн

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

Это задание архивной части. Перейдите по ссылке, чтобы пройти задание в актуальной части.

Заголовок страницы это тот текст, который отображается в левом верхнем углу браузера, а также во вкладках.

Чтобы задать заголовок страницы, нужно использовать тег внутри тега . Например, вот так:

 Тренажёры — HTML Academy 

Так выглядит заголовок страницы во вкладке браузера Mozilla Firefox.

Заголовок HTML-страницы в Mozilla Firefox

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 12 декабря 2023. Всего от 5 790 ₽ в месяц.

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим

Просто Кексик

Тег <title>

Этот тег обозначает заголовок страницы.

Он позволяет очень удобно ориентироваться между множеством открытых вкладок.

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


Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ

Спасибо! Мы скоро всё исправим)

Автозапуск

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

Увеличить 100% Уменьшить
Задачи Выполнено

  1. Измените заголовок страницы с Просто Кексик на Инструктор Кекс .

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

  • Наша группа в ВК
  • Наша страница в Twitter
  • Наш канал в Telegram

Практикум

  • Курсы для новичков
  • Подписка
  • Для команд и компаний
  • Учебник по PHP

Профессии

  • Фронтенд-разработчик
  • JavaScript-разработчик
  • Фулстек-разработчик
  • HTML и CSS.
    Профессиональная вёрстка сайтов
  • HTML и CSS.
    Адаптивная вёрстка и автоматизация
  • JavaScript.
    Профессиональная разработка веб-интерфейсов
  • JavaScript.
    Архитектура клиентских приложений
  • React.
    Разработка сложных клиентских приложений
  • Node.js.
    Профессиональная разработка REST API
  • Node.js и Nest.js.
    Микросервисная архитектура
  • TypeScript. Теория типов
  • Алгоритмы и структуры данных
  • Паттерны проектирования
  • Webpack
  • Vue.js 3. Разработка клиентских приложений
  • Git и GitHub
  • Анимация для фронтендеров
  • Учебник по Git
  • Справочник по HTML
  • Истории успеха

Информация

  • Об Академии
  • О центре карьеры

: элемент заголовка документа

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

Категории контента Метаданные.
Допустимое содержимое Текст, который не является межэлементным разделителем.
Пропуск тегов Открывающий и закрывающий теги обязательны. Обратите внимание, что отсутствие заставляет браузер игнорировать остальную часть страницы.
Допустимые родители Элемент , который не содержит других элементов .
Допустимые ARIA-роли Нет
DOM-интерфейс HTMLTitleElement (en-US)

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание

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

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

Содержимое заголовка страницы может иметь важное значение для поисковой оптимизации (SEO). Как правило, более длинный описательный заголовок будет лучше ранжироваться (Ranking), чем короткий или скучный. Не только содержимое заголовка является одним из компонентов, используемых алгоритмами для определения порядка, в котором перечисляются страницы в поисковой выдаче, но и сам заголовок является приёмом, которым вы привлекаете внимание читателей бегло просматривающих результаты поиска.

Несколько методических рекомендаций и советов для составления хороших заголовков:

  • избегайте заголовков состоящих из одного или двух слов. Используйте описательные фразы или сочетание термин-определение для страниц глоссария (словарь терминов) или справки;
  • поисковые системы, как правило, отображают примерно 55-60 первых символов заголовка страницы. Текст, превышающий это количество символов, может быть потерян, так что постарайтесь, чтобы заголовки не были длиннее. Если вам нужно использовать более длинный заголовок, убедитесь, что важные части появляются раньше и что нет ничего критического в части заголовка, которая может быть отброшена;
  • избегайте специальных символов, когда это возможно; не все браузеры будут отображать их одинаково. Например, »
  • не используйте ключевые слова («keyword blobs»). Если ваш заголовок состоит только из списка слов, то алгоритмы будут часто искусственно понижать позицию вашей страницы в поисковой выдаче;
  • убедитесь, что ваш заголовок является уникальным на вашем сайте, насколько это возможно. Повторяющиеся или частично повторяющиеся заголовки могут способствовать неточным результатам поиска.

Пример

title>Потрясающий заголовок страницыtitle> 

Этот пример устанавливает заголовок страницы (отображается в верхней части окна или вкладки браузера) как «Потрясающий заголовок страницы».

Проблемы доступности

Важно указать такое значение title , которое описывает назначение страницы.

Обычная техника навигации для пользователей вспомогательных технологий — прочитать заголовок страницы и определить какой контент она содержит. Это потому, что навигация по странице для определения её содержимого может занять время и, возможно, привести к путанице.

Пример

title> Меню - Китайская еда Синий дом - FoodYum: онлайн на вынос сегодня! title> 

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

Пример

title> 2 ошибки - ваш заказ - Китайская еда Синий дом - FoodYum: онлайн на вынос сегодня! title> 
  • MDN Understanding WCAG, Guideline 2.4 explanations (en-US)
  • Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0

Спецификации

Specification
HTML Standard
# the-title-element

Поддержка браузерами

BCD tables only load in the browser

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 4 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Как составить правильный заголовок и описание страницы сайта

Правильный заголовок и описание страницы

Привет! Ну что, продолжим тему продвижения?

Сегодня мы сделаем простой, но очень важный шаг — составим привлекательные и эффективные описания и заголовки страниц сайта.

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

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

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

1. Составляем заголовки страниц

Заголовок страницы — это текст, который заключается в тег и выводится в самом верху окна браузера, а также в заголовке сниппета в выдаче поисковой системы.

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

  • Заголовок, подходящий и для Яндекса, и для Гугла, должен состоять максимум из 12 слов объемом не более 70 символов с пробелами. Имейте в виду, при длине заголовка более 55 знаков с пробелами Гугл его обрежет.
  • В заголовке обязательно должно присутствовать одно прямое вхождение ключевой фразы, под которую оптимизируется страница.
  • Заголовок должен быть очень лаконичным, емким и привлекающим внимание целевой аудитории. Советую вам почитать о формулах создания заголовков — это очень увлекательное искусство.
  • Каждая страница сайта должна иметь свой уникальный заголовок.

Избегайте заголовков, состоящих из перечисления ключевых фраз, разделенных запятой, и прочих невнятных конструкций.

2. Составляем описания страниц сайта

Описание страницы — это текст, который заключается в мета-тег description:

Про мета-теги и их влияние на продвижение существует примерно столько же различных теорий, сколько про плотность ключевых слов. Глобально есть два лагеря: одни утверждают, что мета-теги не оказывают влияния на раскрутку, другие — что оказывает, и порой заметное.

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

Усильте эффект, следуя следующим правилам:

  • Описание, подходящее и для Яндекса, и для Гугла, должно состоять максимум из 25 слов объемом не более 150 символов с пробелами.
  • В тексте описания следует кратко, четко и осмысленно описать то, что, собственно, посетитель найдет на данной странице. Текст нужно сделать цепляющим, «продающим» или интригующим, чтобы возникало желание кликнуть именно по вашей ссылке.
  • В описании необходимо употребить вхождение (желательно прямое) ключевой фразы, под которую оптимизирована страница.
  • Каждая страница сайта должна иметь свое уникальное описание, не повторяющее заголовок.

Проделайте эту работу — она совсем не так сложна, как может показаться. Ваши шансы продвинуться по ключевым запросам многократно возрастут, поскольку далеко не все обращают внимание на эту «мелочь».

Закажите продвижение по НЧ запросам на «Фабрике веб-контента» — и вам БЕСПЛАТНО составят заголовки и описания для ваших страниц.

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

145 ОТБОРНЫХ СПОСОБОВ ПРИВЛЕЧЕНИЯ ПОСЕТИТЕЛЕЙ ПОКА ЕЩЕ ДОСТУПНЫ ЗДЕСЬ:

ЗАБИРАЙТЕ!

Еще посты по теме:

  • Что такое саморазвитие? Вопрос риторический. (27)
  • Непубличный бренд (0)
  • Спасательный круг для молодой мамы (0)
  • Диалог с экспертом. №1 (2)
  • Выход найден: нас спасет… Синий Конь! (1)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *