<title>: элемент заголовка документа
HTML-элемент заголовка ( <title> ) определяет заголовок документа, который отображается в заголовке окна браузера или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются.
| Категории контента | Метаданные. |
|---|---|
| Допустимое содержимое | Текст, который не является межэлементным разделителем. |
| Пропуск тегов | Открывающий и закрывающий теги обязательны. Обратите внимание, что отсутствие </title> заставляет браузер игнорировать остальную часть страницы. |
| Допустимые родители | Элемент <head> , который не содержит других элементов <title> . |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | HTMLTitleElement (en-US) |
Атрибуты
К этому элементу применимы только глобальные атрибуты.
Примечание
Элемент <title> всегда используется внутри блока <head> .
Заголовок страницы и SEO
Содержимое заголовка страницы может иметь важное значение для поисковой оптимизации (SEO). Как правило, более длинный описательный заголовок будет лучше ранжироваться (Ranking), чем короткий или скучный. Не только содержимое заголовка является одним из компонентов, используемых алгоритмами для определения порядка, в котором перечисляются страницы в поисковой выдаче, но и сам заголовок является приёмом, которым вы привлекаете внимание читателей бегло просматривающих результаты поиска.
Несколько методических рекомендаций и советов для составления хороших заголовков:
- избегайте заголовков состоящих из одного или двух слов. Используйте описательные фразы или сочетание термин-определение для страниц глоссария (словарь терминов) или справки;
- поисковые системы, как правило, отображают примерно 55-60 первых символов заголовка страницы. Текст, превышающий это количество символов, может быть потерян, так что постарайтесь, чтобы заголовки не были длиннее. Если вам нужно использовать более длинный заголовок, убедитесь, что важные части появляются раньше и что нет ничего критического в части заголовка, которая может быть отброшена;
- избегайте специальных символов, когда это возможно; не все браузеры будут отображать их одинаково. Например, «<» часто отображается в строке заголовка окна как «<» — символ-мнемоника «меньше» в HTML (entity);
- не используйте ключевые слова («keyword blobs»). Если ваш заголовок состоит только из списка слов, то алгоритмы будут часто искусственно понижать позицию вашей страницы в поисковой выдаче;
- убедитесь, что ваш заголовок является уникальным на вашем сайте, насколько это возможно. Повторяющиеся или частично повторяющиеся заголовки могут способствовать неточным результатам поиска.
Пример
Этот пример устанавливает заголовок страницы (отображается в верхней части окна или вкладки браузера) как «Потрясающий заголовок страницы».
Проблемы доступности
Важно указать такое значение title , которое описывает назначение страницы.
Обычная техника навигации для пользователей вспомогательных технологий — прочитать заголовок страницы и определить какой контент она содержит. Это потому, что навигация по странице для определения её содержимого может занять время и, возможно, привести к путанице.
Пример
Для того чтобы помочь пользователю, обновите значение title , чтобы отразить важные изменения состояния страницы (например, проблемы с проверкой формы).
Что такое тег title, и как его правильно составить
При поисковом продвижении важно, чтобы сниппет, который передаёт основную суть страницы, выделялся среди конкурентов. Title — главный элемент сниппета, зачастую благодаря ему пользователи принимают решение о переходе на страницу из поисковой выдачи. Также теги title способны передать содержимое страницы не только пользователям, но и поисковым системам.
Как создавать интересные и привлекательные title страниц, вы узнаете из этого поста.
1. Что такое title
Это тег, который размещается в блоке Head HTML-кода страницы и отображается в поисковой выдаче при введении пользователем определённого запроса.
Также title html виден на вкладке браузера при открытии страницы.
1.1. Как добавить title на страницу
Тег title можно добавить в код страницы вручную, либо вписать его в админке CMS. Например, в WordPress через плагин Yoast SEO.
У каждой страницы должно быть уникальное название, это важно для успешного ранжирования. Пример тега:
2. Роль title: чем он важен для SEO
Теги title, как уже было сказано, передают пользователям и поисковым роботам основную суть содержимого страницы. Поэтому важно, чтобы он соответствовал тематике, иначе посетители сочтут страницу нерелевантной, в результате чего она может утратить позиции. Среди частых ошибок при составлении title можно выделить:
- создание слишком короткого или длинного заголовка;
- дублирование title на разных страницах;
- копирование title с других сайтов.
Проверить наличие, содержание и длину тегов можно с помощью инструмента Page Speed. Для этого необходимо вставить URL страница и нажать на кнопку «Проверить».
Также получить информацию можно через расширение SEO & Website Analysis.
Для проверки title на всех страницах сайта сразу воспользуйтесь Netpeak Spider.
-
На вкладке «Параметры» в разделе «Head теги» отметьте пункты «Title» и «Длина Title».
Мы приготовили короткое и наглядное видео о том, как проверить теги title, description и h1 на сайте:
Также содержимое title страниц можно узнать в программе Netpeak Checker. Загрузите список страниц, которые требуется проверить, отметьте на боковой панели в разделе «On-Page» пункты «Title» и «Длина Title» и начните анализ.
3. Как правильно составить title: основные принципы
Чтобы составить правильный согласно SEO title, придерживайтесь основных правил, которые диктуют поисковые системы:
- Используйте в заголовке сначала важные, частотные ключи. Менее частотные лучше размещать в конце фразы. Чтобы заголовок не был переспамлен и нечитабельным, разбавляйте его другими словами.
- Оптимизируйте длину title. Она должна быть в пределах 40-80 символов. Короткие названия страниц поисковики не воспринимают и часто заменяют автоматически на заголовки Н1 либо фрагменты из текста. Длинные урезаются и выглядят непривлекательно.
Длина title для Яндекс примерно 30-80 символов, для Google — 30-70 символов.
3.1. Советы по составлению title
- Проанализируйте конкурентов. Составьте список удачных заголовков.
- На основе выбранных title определите точный список ключевых фраз, которые будут входить в заголовок.
- Составьте уникальный title для одной страницы. Добавьте бренд, цену, яркие символы, если нужно.
Подводим итоги
Теги title полезны посетителям сайта и помогают в продвижении страницы. С помощью заголовка страницы можно обозначить её тематику и привлечь внимание пользователя. Если тег будет удачно выделяться среди конкурентов — увеличится вероятность притока трафика на сайт. Использование частотных ключевых фраз в заголовке страницы положительно сказывается на показателе CTR. При составлении title важно соблюдать критерии: уникальность, компактность, смысловое значение.
А каких правил придерживаетесь вы при составлении тегов? Делитесь в комментариях 👇
HTML для JavaScript разработчика
HTML определяет содержимое каждой веб-страницы в Интернете. «Пометив» свое исходное содержимое тегами HTML, вы говорите веб-браузерам, как вы хотите отображать различные части вашего контента. Создание HTML-документа с правильно размеченным контентом — это первый шаг к созданию веб-страницы.
Hpertext Markup Language является языком, описывающим структуру и семантику содержимого веб-документа.
2. Директива <!DOCTYPE html>
Большинство современных html-документов начинается с строки <!DOCTYPE html>, это говорит браузеру, что документ надо интерпретировать в соответствии с современными стандартом HTML (HTML5.*).
Это просто специальная строка в начале html-документа и она всегда должна выглядеть точно так же:
3. Понятие тега
HTML теги — это имена элементов, заключенные в угловые скобки.
Весь текст, заключённый между начальным и конечным тегом, включая и сами эти теги, называется элементом. Сам же текст между тегами — содержанием элемента. Содержание элемента может включать в себя любой текст, в том числе и другие элементы.
У тегов может быть несколько форм. Элемент вроде тела, параграфа и ссылки начинается открывающим тегом <p> и заканчивается закрывающим </p>. Некоторые открывающие теги, типа ссылки <a>, содержат дополнительную информацию в виде имя=”значение”. Она называется «атрибутами».
Некоторые теги ничего не окружают, и их не надо закрывать. Пример – тег картинки
HTML разбирается парсером довольно либерально по отношению к возможным ошибкам. Если какие-то теги пропущены, браузер их воссоздаёт. Как именно это происходит, записано в стандартах, поэтому можно ожидать, что все современные браузеры будут делать это одинаково.
4. Структура HTML документа
Как уже говорилось ранее любая html5 страница начинается со строки <!DOCTYPE html>.
Затем вся наша веб-страница должна быть обернута в тег <html>. Все, что находится внутри тега, считается частью <html> элемента, который представляет собой саму веб-страницу.
Внутри элемента <html> у нас есть еще два элемента, называемые <head> и <body>. <head> веб-страницы содержит все ее метаданные, такие как заголовок страницы, любые таблицы стилей CSS и другие вещи, необходимые для отображения страницы. Основная же часть HTML-разметки будет находиться в элементе <body>, который представляет видимое содержимое страницы.
.png)
5. Cинтаксис HTML комментариев
Также обратите внимание на синтаксис комментариев HTML в приведенном ниже фрагменте. Все, что начинается с <!— и заканчивается —>, будет полностью игнорироваться браузером. Это полезно для документирования вашего кода и создания заметок самому себе.
6. Заголовок страницы
Одним из наиболее важных фрагментов метаданных является название вашей веб-страницы, определяемое тегом <title>. Браузеры отображают <title> на вкладке для вашей страницы, и Google отображает ее как результат поиска.
7. Paragraphs
Элемент <p> помечает весь текст внутри него как отдельный абзац.
.png)
8. Headings
Headings(заголовки) похожи на (title)заголовок, но на самом деле они отображаются на странице. HTML предоставляет шесть уровней заголовков, и соответствующие элементы: <h1>, <h2>, <h3>, . <h6>. Чем выше номер, тем менее заметен заголовок.
Первый заголовок страницы обычно должен быть <h1>.
.png)
Заголовки — это основной способ разметки различных разделов вашего контента. Они определяют схему вашей веб-страницы, которую видят как люди, так и поисковые системы.
9. Cписки
Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде.
В HTML5 существует 3 типа списков: unordered lists (маркированный список) — <ul>, ordered lists (нумерованный список) — <ol> и список определений(тройка элементов предназначена для создания определений) — <dd>, <dt>, <dl>.
9.1 Unordered lists
Оборачивание содержимого тегами <ul> сообщает браузеру, что все, что находится внутри, должно отображаться как неупорядоченный список. Чтобы обозначить отдельные элементы(пункты) в этом списке, Вам нужно обернуть их в теги <li> (list item) следующим образом:
9.2 Ordered lists
Если последовательность элементов списка имеет значение, вам следует использовать упорядоченный список. Чтобы создать упорядоченный список, просто измените родительский элемент <ul> на <ol>.
Различие между неупорядоченным списком и упорядоченным списком может показаться глупым, но оно действительно имеет значение для веб-браузеров, поисковых систем и восприятие контента людьми. Это, также, проще, чем нумерация каждого элемента списка вручную.
9.3 Definition list
10. Emphasis (italic) elements
Часть, упакованная в теги <em>, должна отображаться как курсив, как показано ниже. Обратите внимание, что затронута только часть строки.
.png)
11. Strong (bold) elements
Если вы хотите зделать контент более выразительным, чем в теге <em>, вы можете использовать <strong>.
.png)
12. Пустые элементы HTML
Теги HTML, с которым мы столкнулись до сих пор,имели текстовое содержимое (например, <p>) или другие элементы HTML (например, <ol>) внутри. Это не относится ко всем HTML-элементам. Некоторые из них могут быть пустыми или самозакрывающимися. Наиболее распространенными пустыми элементами являются разрывы строк <br> и горизонтальные линии <hr>.
12.1 Разрывы строк <br>
.png)
12.2 Горизонтальные линии <hr>
.png)
13. Links и images
.png)
14. Forms
Форма — гипертекстовый контейнер контейнер, позволяющий установить обратную связь между посетителем веб-страницы и веб-приложением. Получение данных от пользователя осуществляется через типовые элементы управления : текстовые поля, кнопки, чекбоксы и т.п., размещаемых в теге form.
.png)
Также форма — способ взаимодействия(интерфейс) пользователя с бизнес логикой и данными на сервере посредством HTTP запросов.
.png)
14.1 Radio buttons
.png)
14.2 Select elements
14.3 Textareas
14.4 checkboxes
14.5 submit buttons
.png)
15. Semantic html
*. Таблицы
*. HTML Media
16. Emmet
16.1 Syntax
16.1.1 Child
16.1.2 Sibling
16.1.3 Climb-up
16.1.4 Grouping
16.1.5 Multiplication
16.1.6 Item numbering
16.1.7 ID and CLASS attributes
16.1.8 Custom attributes
16.1.9 Text
16.1.10 Implicit tag names
16.2 HTML
16.3 CSS
16.4 Cheat Sheet
17. HTML и JavaScript
В контексте нашего курса самый главный тег HTML — <script>. Он позволяет включать в документ программу на JavaScript.
Такой скрипт запустится сразу, как только браузер встретит тег <script> при разборе HTML. На странице появится диалог-предупреждение.
Включать большие программы в HTML непрактично. У тега <script> есть атрибут src, чтобы запрашивать файл со скриптом (текст, содержащий программу на JavaScript) с адреса URL.
18. Совместимость и браузерные войны
На ранних стадиях развития Веба браузер по имени Mosaic занимал большую часть рынка. Через несколько лет баланс сместился в сторону Netscape, который затем был сильно потеснён браузером Internet Explorer от Microsoft. В любой момент превосходства одного из браузеров его разработчики позволяли себе в одностороннем порядке изобретать новые свойства веба. Так как большинство людей использовали один и тот же браузер, сайты просто начинали использовать эти свойства, не обращая внимания на остальные браузеры.
Это были тёмные века совместимости, которые иногда называли «войнами браузеров». Веб-разработчики сталкивались с двумя или тремя несовместимыми платформами. Кроме того, браузеры около 2003 года были полны ошибок, причём у каждого они были свои. Жизнь людей, создававших веб-страницы, была тяжёлой.
Mozilla Firefox, некоммерческое ответвление Netscape, бросил вызов гегемонии Internet Explorer в конце 2000-х. Так как Microsoft особо не стремилась к конкуренции, Firefox отобрал солидную часть рынка. Примерно в это время Google представил свой браузер Chrome, а Apple – Safari. Это привело к появлению четырёх основных игроков вместо одного.
У новых игроков были более серьёзные намерения по отношению к стандартам и больше инженерного опыта, что привело к лучшей совместимости и меньшему количеству багов. Microsoft, видя сжатие своей части рынка, приняла эти стандарты. Если вы начинаете изучать веб-разработку сегодня – вам повезло. Последние версии основных браузеров работают одинаково и в них мало ошибок.
Нельзя сказать, что ситуация уже идеальная. Некоторые люди в вебе по причинам инерционности или корпоративных правил используют очень старые браузеры. Пока они не отомрут совсем, написание веб-страниц для них потребует мистических знаний об их недостатках и причудах. Эта книга не про причуды – она представляет современный, разумный стиль веб-программирования.
Что такое title в html
Метатеги — это краткие структурированные данные, добавленные в HTML-код для предоставления поисковым системам обобщенной информации про веб-страницу. Title и H1 фактически являются заголовками, но имеют разное предназначение.
Title (тайтл) — это заголовок страницы, который кратко характеризует страницу и отображается в поисковой выдаче, вкладках либо закладках браузера. H1 — это главный заголовок, который отображается на веб-странице и характеризует только ее текстовую часть. Оба заголовка, если они правильно составлены, положительно влияют на конверсию конкретной страницы.
Метатеги в SEO играют важную роль, поскольку влияют на ранжирование и кликабельность сайта. Поисковикам они помогают четко определить тематику страницы, а пользователям — найти наиболее релевантный контент.
Введя запрос в поисковую строку браузера, вы получите список сайтов в выдаче. Первая строка в каждой позиции — это и есть заголовок Title страницы. Тег Title представляет собой краткую характеристику страницы, содержит ключевые слова и может использоваться в поисковой выдаче. Заголовок H1 отображается пользователю только после перехода на ресурс.
Пример страниц с заголовками Title в поисковой выдаче:
- Среднее количество символов — 60-70, но допускается и больше;
Заголовок H1 создается под текстовую часть страницы. Он дает пользователю представление о том, какая информация находится на странице. Цель заголовка: мотивация к прочтению текста, покупке товара или услуги, переход на другую страницу.
- Длина — обычно до 50 символов. Содержание может пересекаться с ключевыми фразами из Title;
- заголовок Н1 необходимо использовать на странице только один раз. Узнайте подробнее о том, как писать заголовки H1 — H6 и сколько их должно быть.
- тематика Н1 соответствует только тому, о чем идет речь в текстовой части страницы;
Рассмотрим примеры:
Title: Купить раскладное кресло с доставкой по Киеву
H1: Раскладные кресла отечественных производителей
В этом случае первый заголовок призывает зайти на сайт и купить кресла, а второй описывает информацию на странице.
Title: Развивающие игрушки в Москве
H1: Магазин развивающих игрушек
Здесь пересекается запрос «развивающие игрушки». В заголовке Title используется более частотный запрос, а Н1 содержит среднечастотный, описывающий контентную суть страницы.
Title: Торты из слоеного теста: рецепты с пошаговыми действиями, фото и видео
H1: Как испечь торт из слоеного теста. Популярные рецепты
Это пример для информационного сайта. В заголовке Title удачно использованы фразы «пошаговые действия», «фото» и «видео». Эти слова расширяют семантику и повышают вероятность клика.
Человеку станет ясно, что на странице находится, даже если он сам не вводил в поиск такой длинный запрос. Н1 уже непосредственно обобщает ту информацию, которая подана на странице в виде текстов, картинок, видео.