Теги в заголовке как сделать

Добавил пользователь Евгений Кузнецов
Обновлено: 04.10.2024

заголовок;
абзац;
жирный текст;
курсив;
список маркированный/немаркированный/

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

Теги для создания заголовков

Теги для создания заголовков представлены элементами h1-h6. Букву свою они получили от английского Header (заголовок). Чтобы задать необходимый вид заголовка и подчеркнуть его значимость для ПС используют следующий код:

На сайте это будет выглядеть следующим образом.

Заголовок h2

Заголовок h3

Заголовок h4

Заголовок h5

Заголовок h6

Наибольшую значимость – и видимость – имеет заголовок h1. Его используют в качестве названия поста, и употребляется он единожды. Для подзаголовков в тексте рекомендованы h2 и h3. Они помогают подчеркнуть значимость рассматриваемого материала и разделить статью на информационные уровни.

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

Для больших статей лучше всего использовать заголовки h1-h3, для маленьких – h1 и h2.

Списки: маркированные и немаркированные

Структурированный хороший текст всегда имеет один или даже несколько списков. По своему внешнему виду списки бывают:

маркированные – в них есть нумерация;
немаркированные – элементы выделены символами.

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

Тег немаркированный список так:

При этом каждый элемент списка имеет собственное хтмл-обрамление:

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

Для немаркированного списка аналогично:

Со списками разобрались. Можно двигаться дальше.

Теги акцентирования текст: жирный шрифт и курсив

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

Использование html-тегов дает возможность понравиться поисковикам и визуально выделить текст для пользователя. Что приоритетнее, решайте сами:

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

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

Ну и немного простенькой тематической инфографики в конце:

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

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

Если Вы не изучили первую статью, то найти ее можно здесь:

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

Что делать, если вам нужно больше знаний и хотите, возможно, даже работать в этой области? Лучше найти специализированные курсы. В рунете не так много хороших, где обучают Front-end разработчиков. Мне понравилась программа обучения, которая есть у Нетологии у курса «Front-end разработчик с нуля«. Также неплохая программа и у Skillbox у курс «Front-end разработчик«.

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

Теория и практика — Параграфы и заголовки HTML страницы

Сегодня мы поговорим о параграфах и заголовках. Начнем с простого — с параграфов и где они применяются.

Параграфы на странице

Я сейчас приведу пример кода, в котором будет присутствовать тег параграфа

Основную структуру Вы уже помните из первого урока. Там разбирали основы и смотрели, что же такое HTML. Поэтому сосредоточим свое внимание на том, что находится между тегами

Немного теории

Всего в HTML существует 6 тегов заголовков – от

. Цифра в теге показывает относительную важность раздела, идущего после заголовка:

– наименее. В соответствии с этим, по умолчанию HTML отображает заголовки разных уровней шрифтами разных размеров:

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

Как оптимизировать заголовки для SEO

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

Исходя из этого, мы в Arto Web Agency используем такой подход к составлению заголовков: употребляя ключевые слова, размещаем самые высокочастотные и важные ключи в , следующие по важности – в

Заголовки более низких уровней (

Кластер запросов, под которые нужно оптимизировать статью. Во втором столбце записана частота каждого запроса в месяц в поисковой системе Google Украина

Пример страницы из ТЗ для копирайтера со структурой заголовков статьи, составленной на основе поисковых запросов

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

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

Нужна помощь по SEO?

Мы в Arto готовы помочь! Наше агентство предоставляет улуги SEO-аудита, консультаций и продвижения сайтов как молодого бизнеса, так и крупных компаний. Наш подход – максимальная открытость и ответственность. Если у вас есть запрос на поисковую оптимизацию, свяжитесь с нами, нажав на кнопку ниже.

Запрос на SEO

Логическая последовательность заголовков

Размещая заголовки на странице, стоит следить за тем, чтобы они располагались в правильной иерархической последовательности. Согласно стандартам HTML4, заголовок первого уровня на странице должен быть только один (это правило может нарушаться в HTML5, о чем поговорим ниже). Внутри текста, обозначенного заголовком

; в свою очередь, каждый из них можно разбить на подразделы заголовками

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

А так – неправильная:

Заголовки третьего уровня встречаются реже, чем второго: для небольшой статьи объемом до 5000 символов обычно вполне можно обойтись тегами

. Заголовки четвертого и ниже уровней используются достаточно редко. Они могут иметь смысл для текстов большого объема и сложной структуры – например, юридической или технической документации, но такие документы зачастую будет удобнее загрузить на сайт в формате PDF, а не выделять для них отдельную HTML-страницу.

Аудит заголовков

Для быстрой проверки заголовков на всем сайте можно воспользоваться Screaming Frog SEO Spider или другим приложением для SEO-аудита. После проверки вы сможете увидеть страницы, где заголовки первого уровня отсутствуют или дублируются, слишком длинные заголовки и т.д.

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

Пример отображения структуры страницы в HeadingsMap

Кроме правильной последовательности тегов

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

Теги заголовков и HTML5

В Google также утверждают, что в использовании нескольких заголовков

Таким образом, подытоживая сказанное, можно выделить несколько главных советов.

title;
desсription;
keywords;
заголовок h1.

Зачем нужны метатеги

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

В выдаче метатеги подтягиваются в сниппет:

Благодаря этим описаниям пользователь определяет, стоит ли переходить по ссылке или продолжить поиск и выбрать более подходящую информацию. Поисковые системы обращают внимание на смысл описаний страниц, то есть содержание заголовков и мета-описаний — один из факторов формирования выдачи под конкретный запрос. Больше узнать о влиянии алгоритмов Google на сниппеты можно в исследовании от Serpsta t .

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

метатеги помогают сайту попадать в выдачу по релевантным запросам;
метатеги привлекают посетителей;
метатеги сообщают о содержимом страницы.

Что такое тег title

Title в коде оформляется как связное, осмысленное предложение, а в выдаче отображается как заголовок страницы:

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

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

Title должен быть уникальным в пределах сайта — это еще одна особенность данного метатега. Для проверки сайта на уникальность title существуют различные методы краулинга .

Читайте также: