Теги в заголовке как сделать
- заголовок;
- абзац;
- жирный текст;
- курсив;
- список маркированный/немаркированный/
Это все придает ТЗ пикантности и стимулирует к освоению новых знаний. Ситуация усугубляется, когда ставится задача использовать тег жирного текста для повышения привлекательности ключа в ПС. Но все это решается очень просто, с чем сейчас и разберемся.
Теги для создания заголовков
Теги для создания заголовков представлены элементами 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 существуют различные методы краулинга .
Читайте также: