Как правильно использовать элементы html h1-h6
Содержание:
- Одинаковые H1 и Title: за и против
- HTML Reference
- HTML Tags
- Казнить нельзя, помиловать
- HTML Tags
- 8 ошибок при написании H1
- Мета тег H1: пример оформления и основная информация
- Метатег Title
- Частые ошибки
- …
- можно только вверху страницы сайта, над заголовками других уровней. Также во многих админках есть специальное поле для заголовка h1. Следует избегать хаотичного использования заголовков разных уровней и размещать их «как повезет». Поисковику (да, и пользователям) это вряд ли понравится. Ни в коем случае не используйте мета тег
- более одного раза на странице.
По-умолчанию в различных браузерах заголовки выглядят по-разному: отличаются размерами шрифта и отступами. Посему советуем вам отрегулировать эти параметры при помощи стилей. НО! Не перебодритесь с уменьшением шрифта, т.кпоисковые роботы обращают на это внимание. Также не рекомендуем делать размер шрифта заголовка меньше, чем основной текст.
Делать больший размер шрифта заголовка низкого уровня также не советуем
- , то поисковой робот отнесется к этому негативно. И пожалуйста, перестаньте использовать теги выделения (strong, em, b, i) в оформлении ваших заголовков. Cодержание тегов заголовков имеет большее влияние на релевантность страницы по сравнению тегами выделения. По мнению большинства сеошников (и мы к ним присоединяемся) содержание текста внутри тегов strong (жирненький текст) по степени значимости приблизительно соответствует содержанию заголовка уровня h5. А это так себе уровень. Использование ключа в теге h1 обязательно! Лучше всего, если это будет основная ключевая фраза (ключевики, которые входят вовсе другие ключевики в семантике на данную страницу). Текстовое содержание заголовка должно отличаться от тега title.
- The декларация
- Что такое H1 и Title
- Что писать в h1
- Примеры составления заголовков H2
- Пару слов о заголовке h3 и нужен ли о вообще
- Заголовки h1, h2,…h6 для WordPress
- в текст статьи не нужно, так как это приведет к дублированию тега. Что для SEO может иметь негативные последствия
Одинаковые H1 и Title: за и против
Приверженцы идентичных заголовков аргументируют свою позицию информацией из , мол, так робот скорее проанализирует документ. Однако этот совет дан в ключе выделения поиском быстрых ссылок: в таком случае желательно, чтобы Тайтл совпадал с H1 и с ключевиками ссылок. При этом SEO-специалисты подчёркивают то, что идентичность тегов не может считаться спамным приёмом. Переспам ассоциируется скорее с перенасыщенностью заголовков ключевиками, избыточной длиной H1.
Противники теории уверены, что из-за одинаковых заголовков мы упускаем возможность сообщить поисковику дополнительные данные о странице. Так мы повторяем себя и создаём дубли контента. К тому же Title и H1 изначально не должны совпадать, потому что рекомендуемая длина Тайтла в два–три раза больше оглавления текста: 40–80 символов против 20–50 знаков. Тег H1 должен пояснять суть документа без переспама, а Title – описывать суть страницы и быть максимально оптимизированным под запросы (с добавлением низкочастотников, хвостов, смежных слов). Грамотно заполненный Тайтл хорошо сказывается на CTR в серпе, а H1 – на конверсии, играя маркетинговую роль. Ещё один важный нюанс – Тайтл обязан мотивировать пользователей перейти на вашу страницу.
Примеры мета-тегов
1)
H1: «Пошаговый рецепт приготовления лазаньи». Title: «Пошаговый рецепт приготовления лазаньи».
2)
H1: «Купить напольную плитку в Екатеринбурге». Title: «Купить напольную плитку в Екатеринбурге».
Это не самый удачный вариант внутренней оптимизации. Заголовки Тайтл и H1 дублируют друг друга – нет дополнительной ценности.
HTML Reference
HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts
HTML Tags
<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
Казнить нельзя, помиловать
Аргументы «за» более весомы и множественны. Итак, использование H1 помогает:
- — Повысить релевантность текста,
- — Создать удобство для пользователя,
- — Продвинуть «хвосты» запроса.
По значимости H1 на втором месте после Title, поэтому игнорировать его в Seo нет смысла. Никакого спама заголовок не создаёт, но чётко указывает боту, о чём речь на странице. Грамотная связка Title – H1 способны творить чудеса, поднимая в топ даже СЧ СК без ссылок и без спама в тексте.
Во многих CMS, например в Joomla, Аш1 на автомате отображается на странице и виден визуально. Это удобно для пользователя, ведь Title он видит только в выдаче. С помощью заголовка напоминают юзеру куда он попал и что тут находится. Проблема в длине, но и она решаема.
Третий бонус правильного использования H1 – это возможность двинуть с его помощью хвосты основного запроса, хотя я лично этим не балуюсь. Если запрос 1-2-3 словный, а хвост однословный, то алгоритм понятен – дописываете в заголовок хвост и ждёте пряников.
HTML Tags
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
8 ошибок при написании H1
Мы систематизировали наиболее часто встречающиеся ошибки при составлении заголовков первого уровня. Проверьте, есть ли эти ошибки на вашем сайте:
- Посторонние элементы. В H1 кроме текста не должно быть ничего. Некоторые вебмастеры думают, что они усилят заголовок, обернув его также в тег strong или b, придав ему жирное начертание, итак заложенное в стилях. Это плохая практика, старайтесь ее избегать. Не рекомендуем также чрезмерно использовать пунктуацию (знаки препинания в заголовках). Старайтесь делать их простыми и лаконичными.
- Отсутствие или переизбыток ключевых слов. Из крайности в крайность. H1 — это квинтэссенция вашей семантики на странице. Ключевое слово должно присутствовать в заголовке. Отсутствие ключевых слов в главном заголовке страницы поставит под вопрос ее релевантность поисковым запросам.
- Дублирование. Ошибкой является как дублирование title в H1 и наоборот, так и дублирование H1 на разные страницы сайта. H1 должен быть уникальным для всего сайта. Из 2 страниц с одинаковым контентом в выдачу попадет наиболее релевантная.
- Длина. Старайтесь укладываться в 60 символов. Заголовки H1 по 300-400 символов можно увидеть на многих ресурсах, не следуйте дурному примеру. Также не стоит составлять базовый заголовок из одного слова, если это не головной раздел сайта или общая категория товаров.
- Грамматика. Грамматические ошибки сводят на нет всю семантическую значимость вашего заголовка. Старайтесь не допускать ошибки в тексте, а в заголовке — тем более!
- Больше одного H1. Этот вопрос мы подробнее расписали выше. С натяжкой отнесем данный пункт к ошибкам оптимизации.
- Отсутствие структуры. H1 должен располагаться в начале страницы. Другие заголовки до этого тега присутствовать не должны.
- Не заполнение H1. Кто-то опускает момент заполнения H1 вообще. Это грубая ошибка, которую нельзя допускать.
Мета тег H1: пример оформления и основная информация
HTML предлагает 6 разноуровневых заголовков, которые обозначают то, насколько важен текстовый блок, идущий после заголовка.
Таким образом, тег <h1> является самым важным заголовком первого уровня, а тег <h6> обозначает заголовки шестого уровня, наименее значительные. По умолчанию, тег заголовка h1 отображается самым крупным шрифтом и выделяется «жирненьким», заголовки, которые ниже рангом, соответственно, должны быть меньше.
Теги заголовков относят к блочным элементам: тег <h1> всегда начинается с новой строки, а уже за ним на следующей строке идут другие элементы. Более того, чтобы ваш текст эстетично выглядел, перед и после заголовков рекомендую делать отступ.
Метатег Title
Метатег Title – находится в верхней части браузера и чаще всего появляется в выдаче поисковой системы (в снипете).
При этом, если ключевое слово, которое набирает пользователь, содержится в Title странице, то оно подсвечивается соответствующим образом, тем самым, обеспечивая бОльшую кликабельность.
Но обычно статьи оптимизируются не только под 1 ключевое слово, их может быть 3, 5, 10, 15 и даже 50 и 100, но чем частотнее запрос (чем чаще его запрашивают в поисковой системе), тем он ценнее для сайта, а самое популярное ключевое слово является основным.
Крайне нежелательно, использование тавтологий внутри Title, приветствуется использование синонимов, для охвата большего количества поисковых запросов.
Рекомендую также поглядывать на успешных конкурентов, чтобы лучше понимать принципы составления тайтлов, но копировать их заголовки категорически нельзя, какими бы они кликабельными не казались, нужно отстроиться.
Выше была описана только 1 стратегия составления заголовков Title. Кроме этого там может содержаться вопрос и пояснение. Это в тех случаях, если в списке ключевых слов содержаться частотные запросы с вопросами.
Но не всегда так, нужно смотреть на выдачу, и если по запросу с вопросам на верхних строчках находятся сайты без содержания вопроса, то Title лучше составлять без вопроса.
Еще есть понятия прямого и разбавочного вхождения ключевого. Под прямым подразумевается включение в заголовок ключевого запроса в том виде, в каком его запрашивают в поисковой системе, а разбавлением называют разбиение ключевого словосочетания каким-либо дополнительным словом или хотя бы его склонение, изменение словоформы.
Обычно в Title включают прямое вхождение, но нужно смотреть выдачу поисковой системы и исходя из него корректировать стратегию. Также для большей привлекательности можно использовать знаки такие знаки препинания, как длинное тире (не используйте вместо этого короткое тире), двоеточие. Точку в конце предложения не ставим, другие знаки препинания в частности знак вопроса допускается.
Частые ошибки
За правильной разметкой нужно особенно следить при использовании бесплатных CMS и отдельных шаблонов – в некоторых случаях <h1> и подзаголовки других уровней могут стоять совсем не там, где они должны быть (например, <h3> выделяет заголовки блоков). Это встречается в WordPress, поэтому если вы видите, что виджеты в сайдбаре имеют теги заголовка, измените их на другие (например, на <span>).
Также иногда заголовки включают какие-то посторонние элементы вроде изображения или ссылки, и это негативно отражается на SEO.
Другая типичная ошибка – наличие на странице нескольких тегов <h1>. Этот тег должен быть один и только один.
Зачастую теги
…
могут быть неправильно оформлены в визуальном текстовом редакторе в панели администратора: их не закрывают, оставляют пустыми или включают туда очень много текстаВажно не только, что вы напишите в заголовках, но и то, как вы это сделаете – поэтому следите за оформлением
Если возвращаться к тексту, то ошибки стандарты: слишком много ключевых слов, знаки препинания и так далее (обо всем этом уже писалось выше)
Однако важно помнить и о содержании самого заголовка – он должен соотноситься с текстом. который идет далее
То есть заголовок должен выполнять свою функцию. Потому что когда он ее не выполняет, начинаются проблемы.
Бывают, кстати, ошибки наоборот – когда вместо того, чтобы поставить тег заголовка, ставят теги <p> и <span> с каким-нибудь стилем.
Еще бывает, что, прочитав все выше, человек решает отказаться от заголовков и не использовать их в маленьких текстах. И тут нужно понимать, что практически любой текст можно разбить на небольшие части, и соответственно озаглавить их.
Популярные статьи
- 30.2K
- 10 мин.
Что лучше: SEO-продвижение или контекстная реклама?
Не знаете, что лучше: SEO-продвижение или контекстная реклама? Все зависит от желаемого результата и ваших целей. Давайте разбираться, чтобы не потратить лишних денег и сделать правильные инвестиции.
- 22 сентября 2018
- Продвижение
- 19 января 2021
- Продвижение
- 20.2K
- 11 мин.
Будущее за мессенджерами: продвижение в WhatsApp, Viber и Telegram
Мессенджеры – одно из популярных современных средств связи. В статье мы расскажем, как можно использовать мессенджеры для продвижения бизнеса и как они могут помочь в общении с клиентами компании. Описание инструментов для продвижения в Viber, WhatsApp и Telegram.
- 8 мая 2019
- Продвижение
Описание CSS-свойств в style.css
background-color — цвет заднего фона. Весь элемент будет окрашен в указанный цвет. Некоторые значения цвета можно писать прямо словами (gray, white, black, red и т.д.), но обычно для этого используют HEX-формат. Если не знаете, что это то пока не задумывайтесь об этом.
font-size — размер шрифта. Здесь задан в пикселях (px) — основной единице измерения для числовых значений в CSS
color — цвет шрифта
text-align — расположение текста по горизонтале
margin — внешние отступы элемента. Каждые элемент имеет свои границы, как деталь страницы сайта. И элементу можно задать отступы от соседних элементов. Пока просто запомните это.
padding-top — внутренний отступ от верха элемента. Если внутри элемента находится другой элемент, то можно указать, что внутренний находится на некотором расстоянии от границы внешнего. Тоже пока просто запомните.
Это был достаточно объемный урок, в котором Вы узнали много новой полезной информации. Вы все ближе к тому, чтобы профессионально верстать качественные сайты!
HTML и CSS — тема легкая и интересная, а также достаточно широкая, поэтому поехали дальше!
Распространенные ошибки при написании h1
- Отсутствие h1.
- Больше одного h1 на странице.
- Ошибки с ключевыми словами. Вредно как их отсутствие, так и переспам.
- Полное совпадение с Title.
- Чрезмерно длинные или короткие наименования, если это не название раздела сайта или категории.
- Грамматические и пунктуационные ошибки.
- Точка в конце предложения. Вы видели название книг с точками в конце? Нет! Вот и в h1 точка совсем не нужна. Допустимо использование «?» или «!» (в редких случаях).
- Неправильная иерархия, когда перед h1 идут теги более низкого порядка.
А с какими сложностями вы сталкивались при создании h1? Делитесь в комментариях?
Важность иерархии ..
В html коде страницы первым должен быть тег <h1>. Нельзя сначала делать заголовок <h2>, потом <h1>. Аналогично и с другими номерами тегов. Вот правильное использование тегов:
Т.е. каждый более низкий тег всегда располагается во вложении более высокого. Это и есть правильная иерархия. При этом не допускаются резкие переходы с <h1> на <h4>, с <h2> на <h5> и т.п.
Помимо такой иерархии нужно еще соблюдать и иерархию в плане размеров шрифтов. Т.е. более важные заголовки должны иметь более большой шрифт. Хотя подтверждающих фактов тому, что поисковые системы анализируют стили, которые находятся в .css файлах пока никто не объявлял, но негласно есть такое правило среди вебмастеров и оптимизаторов.
Может ли заголовок <h1> и <title> совпадать?
На этот вопрос сейчас разгораются споры. С одной стороны логично, чтобы <title> и <h1> совпадали. Но с другой стороны это как бы дублирование название страницы. Вообще чаще всего заголовки будут разными, поскольку в <h1> вряд ли можно и имеет смысл писать слова «Купить, цена, фото», а в тайтле такие слова наоборот используются. Отвечая на вопрос — делайте так, чтобы было все понятно пользователю и смотрелось естественно.
Сколько может быть заголовков <h2>, <h3>?
Заголовочных тегов <h2>—<h6> может быть несколько на странице, все зависит от размера контента. Количество контента на один заголовок должно быть адекватным. Другими словами не должно быть так, что после заголовка <h2> идет 5 предложений, потом опять <h2> и опять маленький абзац. В таких случаях скорее всего лучше вообще не использовать заголовочные теги.
Не стоит путать заголовочные теги <head> и h1-h6. Одни нужны для поискового робота, другие для поискового робота и пользователей.
Как прописать заголовок h1 и title
В сфере SEO-оптимизации существуют четкие правила по написанию основных тегов, а именно:
- Читабельность. Нельзя просто взять и повпихивать ключевики в заголовок. Текст должен быть естественным и при этом легко читаться, в противном случае поисковики посчитают такую выходку за спам. При написании заголовка h1 и title постарайтесь располагать ключевые слова, как можно ближе к их началу. Другое дело заголовки h1, h2, h3… Их можно склонять и разбавлять определенными тематическими словами.
- Никаких дублей. Для того чтобы страницы сайта более высоко ранжировались в поисковой выдаче, в html коде не должно быть повторяющихся заголовков. Для проверки страниц, достаточно открыть сайт в браузере и нажать горячие клавиши Ctrl+U, а затем Ctrl+F. В окне поиска пропишите h1 и все присутствующие символы подсветятся желтым фоном.
- Длина. В теге title допускается использование 70 символов, так как большее количество просто напросто не поместится в сниппете.
- Уникальность. Каждый заголовок должен быть уникальным в пределах определенного интернет-проекта, таким образом, пользователям будет легче сориентироваться и найти именно то, что им нужно.
- Тег H1 не должен быть гиперссылкой.
- Разделительные знаки желательно не использовать.
Использование ключа в теге: оптимизация тега H1
Мета теги h1-h6 обязательно следует использовать по назначению, неукоснительно соблюдая иерархию.
Дело в том, что поисковые роботы очень трепетно относятся к заголовкам и тому, что в них содержится
Важность и степень внимания поисковика определяются уровнем заголовка (понижается от h1 до h6). Поэтому мы настоятельно рекомендуем использовать ключ в теге h1 и фразы в тексте заголовков
Тег заголовка <h1> (заголовок первого уровня) имеет самый большой вес, конечно же. Поэтому к его текстовому содержанию нужно отнестись с особой серьезностью.
Вставить тег
можно только вверху страницы сайта, над заголовками других уровней. Также во многих админках есть специальное поле для заголовка h1.
Следует избегать хаотичного использования заголовков разных уровней и размещать их «как повезет». Поисковику (да, и пользователям) это вряд ли понравится.
Ни в коем случае не используйте мета тег
более одного раза на странице.
По-умолчанию в различных браузерах заголовки выглядят по-разному: отличаются размерами шрифта и отступами. Посему советуем вам отрегулировать эти параметры при помощи стилей. НО! Не перебодритесь с уменьшением шрифта, т.кпоисковые роботы обращают на это внимание. Также не рекомендуем делать размер шрифта заголовка меньше, чем основной текст.
Делать больший размер шрифта заголовка низкого уровня также не советуем
Делать больший размер шрифта заголовка низкого уровня также не советуем
Если ваш
будет больше, чем
, то поисковой робот отнесется к этому негативно.
И пожалуйста, перестаньте использовать теги выделения (strong, em, b, i) в оформлении ваших заголовков. Cодержание тегов заголовков имеет большее влияние на релевантность страницы по сравнению тегами выделения.
По мнению большинства сеошников (и мы к ним присоединяемся) содержание текста внутри тегов strong (жирненький текст) по степени значимости приблизительно соответствует содержанию заголовка уровня h5. А это так себе уровень.
Использование ключа в теге h1 обязательно! Лучше всего, если это будет основная ключевая фраза (ключевики, которые входят вовсе другие ключевики в семантике на данную страницу).
Текстовое содержание заголовка должно отличаться от тега title.
The декларация
HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:
<!DOCTYPE html>
Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).
В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.
HTML 4.01 Strict
Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
В версии HTML5 есть только один doctype и определяется он следующим образом:
<!DOCTYPE html>
Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.
По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.
При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.
Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).
Что такое H1 и Title
Для тех, кто незнаком с матчастью, объясним на пальцах.
H1 – это основной заголовок первого уровня статьи. Он размещается над текстом и отображает его суть
Заголовок привлекает внимание читателей к тексту, улучшает юзабилити
Для SEO-продвижения большее значение имеет Title. Он отображается в браузере сверху, а также в сниппете в поисковой выдаче.
По факту тег является альтернативным, главным заголовком для HTML-страницы. При его отсутствии поисковики берут за основу H1
Уделив внимание Title, вы сможете только за счёт этого вывести страницу в ТОП по низкочастотным, неконкурентным запросам. С его помощью можно улучшить ранжирование, получить кликабельный сниппет
Как это сделать – вы узнаете из сегодняшней статьи.
Это интересно: Что такое метатеги и как их правильно заполнить
Что писать в h1
H1 — это заголовок для людей. Содержание должно отражать смысл и быть уникальным. Ключевыми словами лучше не злоупотреблять. Фраза должна быть составлена по правилам русского языка и быть читабельной.
Но самое главное в h1 — его привлекательность.
Он должен решать проблему пользователя
Вот пример неудачного заголовка:
«Можно ли избавиться от прыщей».
А вот удачный заголовок, который решает проблему пользователя:
«5 проверенных способов избавиться от прыщей. Мнения экспертов».
Он должен интриговать
Неудачный заголовок:
«Лучшее средство от прыщей».
Удачный:
«Раскрываем секрет самого эффективного средства от прыщей».
Он должен «бросать вызов»
Неудачный:
«Все ли вам известно об уходе за проблемной кожей лица».
Удачный:
«Вы уверены, что правильно ухаживаете за кожей, склонной к акне?».
Больше о маркетинговых уловках и цепляющих заголовках читайте здесь.
SEO оптимизация H1
- Постарайтесь использовать ключевое слово в H1. Лучше вписывайте ключ в разных склонениях, например, ключ, ключу, ключом. Или используйте разбавленные вхождения в h1 и прямые (точные) в title. Например: точное — Title, разбавочное вхождение — h1. Достаточно одного вхождения ключевого слова в H1.
- Так же и место расположения уже не так критично как в Title, ничего страшного если ключевое слово будет в самом конце.
- Не забывайте, в первую очередь он должен побуждать посетителя к чтению.
Примеры составления заголовков H2
Каким образом составляются заголовки H2? Их в тексте может быть несколько. Как правило, они конкретизируют заголовок H1 и структурируют весь текст. Вернемся к нашему примеру со страницей, на которой представлена женская обувь. Для данной страницы можно написать продающий текст, в котором будут описаны преимущества моделей, предлагаемых покупательницам, и представлена таблица размеров. Также на странице пользователь сможет найти каталог обуви с фото и ценами. При этом заголовки в тексте могут быть такими:
Если вы вспомните поисковые запросы, которые мы используем для продвижения нашей страницы в данном примере, то поймете, что в заголовки H2 мы включаем расширенные запросы, которые имеют более низкую частотность. Они могут быть представлены в непрямом вхождении (их можно склонять, «разбавлять» другими словами). А главное – они конкретизируют наш заголовок H1 и сигнализируют поисковой системе о том, что текст, идущий после них, действительно отвечают поисковым запросам, прописанным в заголовке страницы (Title).
Пару слов о заголовке h3 и нужен ли о вообще
Я в своих статьях очень редко использую заголовок с тегом h3. В случаях если статья набирает в себе 5000 символов и выше и то не всегда — можно обойтись и разбаить статью на подразделы и разметить их тегом h2.
Все заголовки начинаz с h3 и до h6 несут в себе ту же самую уточняющую и дробящую страницу на подразделы роль, но это используется крайне редко. У вас должна быть просто очень огромная статья, чтобы можно было выстроить такую иерархию из подразделов страницы и задействовать все типы заголовков.
Для примера вложенности подзаголовков я напишу про иерархию заголовков, и размечу заголовок этого раздела тегом h3.
Порядок и иерархия заголовков на странице сайта
Все заголовки должны идти в строгом порядке. Первым на странице всегда идет заголовок типа h1.
Далее за ним разбивая страницу на подразделы идет тег h2 и часто этого более чем достаточно.
Если подразделы для каждого из заголовков h2 получились внушительных размеров и в них затронуты несколько еще более мелких подтем, то внутри каждого или одного отельного подраздела с тегом h2 вы делаете сложенные «мини» подразделы страницы и размечаете их h3.
Не обязательно что все подразделы озаглавленные тегом h2 будут большими и их надо дробить еще на несколько подразделов. Ниже постараюсь наглядно показать как правильно делать вложенность по заголовкам на странице.
Заголовки h1, h2,…h6 для WordPress
В WordPress нет никаких сложностей с созданием заголовка первого уровня, так как на страницу он выводится автоматически. Достаточно добавить основное название статьи и оно сразу отобразится в тегах <h1></h1>. Пример заголовка представлен на рисунке ниже.
Обратите внимание, что добавлять
в текст статьи не нужно, так как это приведет к дублированию тега. Что для SEO может иметь негативные последствия
Символьного ограничения данное поле в WordPress не имеет, поэтому придерживайтесь основных требований написания.
Заголовки второго, третьего, четвертого, пятого и шестого уровня — h2, h3, h4, h5 и h6 прописываются в теле статьи напрямую в HTML разметке или при помощи визуального редактора.
Примеры: Хороший H1 vs Плохой H1
Давайте рассмотрим на паре живых примеров заголовок первого уровня H1
Пример #1
Хороший заголовок. Заголовок находится в начале страницы, не дублируется, его размер 59 символов. H1 отражает суть всей статьи, содержит высокочастотное ключевое слово в начале, вызывает интерес у читателя.
Плохой заголовок. Размер H1 явно превышает 60 символов, заголовок переоптимизирован, он не отражает смысловую суть документа целиком. Заголовок представляет из себя перечисление частей статьи, в нем содержится слишком большое количество ключевых слов.
Пример #2
Хороший заголовок. Лаконичный заголовок первого уровня, находится в начале страницы, характеризует категорию товаров с половой сегментацией, является ключевым словом. У H1 отсутствуют посторонние элементы в коде, грамматические ошибки, он не дублируется.
Заголовок h2
Если h1 многие все же придерживаются правил и используют на страницах своего сайта, то тегом h2 многие пренебрегают, а зря! Этим тегом обычно размечаются подразделы статьи, страницы.
Еще на этапе сбора семантического ядра для сайта в целом или для отдельной статьи нужно примерно понимать из каких разделов будет состоять статья. Опишем ли мы подробно преимущества, стоимость или какие-либо другие подробности по теме статьи или по товару.
Например, страницы товара в магазине телевизоров – если заголовок h1 страницы имеет вид «Телевизор Panasonic TX-75EXR780», то тегом h2 мы будем примерно разбивать на части (подразделы) описание самого товара на странице и иметь вид «Характеристики телевизора Panasonic TX-75EXR780» и «Преимущества телевизора Panasonic TX-75EXR780».
Тем самым мы за счет заголовков типа h2 захватим важные моменты, которые также могут интересовал посетителя сайта помимо самого названия. Теперь сайт будет конкурировать с остальными не только по запросу по основному “Panasonic TX-75EXR780”, но и по дополнительным запросы касаемо преимуществ и характеристик данной модели телевизора. А охват большего числа запросов в свою очередь – это рост трафика на сайт.
Иногда заголовок типа h2 попадал в сниппет результатов поиска
Туда как правило попадает либо h1, либо title – они оба самые сильные по важности заголовки страницы и за ними преимущество, но не исключено и влияние h2 на сниппет
Основные требования к h2
- На странице желательно наличие 2-4 заголовков H2. Должны отражать суть дальнейшего текста.
- Наиболее частотный запрос — в заголовке H1, менее частотные — желательно в H2.
- Тег H2 не должны быть ссылкой, картинкой и т.д. Заголовок должен быть заголовком.
Зачем нужны подзаголовки h2-h6
Теги от h2 до h6 располагаются уже в теле самой статьи, структурно разделяя ее на тематические абзацы, и в коде HTML-документа, выделяя его значимые элементы. Они также идентифицируются поисковыми роботами для семантического анализа страницы.
Нужны для того, чтобы иерархично обозначать все важное и стоящее внимания пользователя на странице. Такая структура помогает человеку быстрее сориентироваться в информации и оценить ее соответствие своим запросам
h2 – акцентирует внимание пользователей и поисковых систем на основном содержании статьи. Показывает самое значимое в тексте
h3 – является подпунктом для информации, идущей под H2, раскрывая ее еще глубже.
h4, h5, h6 – определяются, как вложенные подзаголовки (раскрывают детально суть H2 или H3) и используются в тексте, в качестве выделяющих мелкие пункты и значимые слова, а также в меню, сайдбаре и других составляющих веб-документа.
Длина всех h-тегов должна быть в пределах 50 символов.
Используйте только один тег H1
H1 — это самый важный тег на странице. Однако это не значит, что его можно использовать несколько раз. Если Н1 использовать более одного раза, это приведет к тому, что все будет выглядеть не по порядку, и самое главное — основной заголовок потеряет свою ценность.
Итак, вы хотите быть уверены, что на вашем сайте не содержится несколько H1 для одной страницы? Для проверки вы можете использовать, например Мегаиндекс. Чтобы проверить, отсутствуют ли на какой-либо из ваших страниц H1 или содержится несколько заголовков H1.
Не пропустите этот материал, новые креативные идеи непременно вас вдохновят: Лайфхаки SEO копирайтинга
Разбор файла style.css
body обращается к <body> в index.html, и задает ему серый задний фон (background-color: gray;). Здесь background-color называется CSS-свойством, а gray — это значение CSS-свойства.
Аналогично #header обращается к id=»header», а .h1 обращается к class=»h1″. То есть через # обращаемся к id, а через точку обращаемся к class.
Здесь body, #header и .h1 называются CSS-селекторами.
Вообще, в id и class можно задавать любые произвольные значения, хоть id=»abcdefg». Но желательно, чтобы их значения отображали целевое назначение html-элемента (тега).
Свойства CSS пишутся на английском: font-size — размер шрифта, color — цвет, text-align — выровнять текст и т.д.
Вместо вывода
Из вышесказанного можно подвести итог, что один H1 на странице не может считаться железным правилом, а несколько H1 на одной странице не всегда будет ошибкой. Примеров, где сайт более чем с одним H1 на странице находится в топе как Яндекса, так и Google, более чем достаточно, что может говорить о том, что поисковикам важна сама информация, а не оценка сайта по валидности html. Главное правило — использовать заголовки по их назначению, то есть для выделения заголовков страницы и разбивание текста на логические разделы. Это касается всех тегов заголовков, и H1 не исключение. Сколько раз будет повторятся тот или иной тэг заголовка в этом случае второстепенно.
Как говорил Мэтт Каттс о заголовках, что в сети очень много сайтов с «корявыми» страницами, с неправильной структурой заголовков, с невалидным Html, просто уродливыми страницами и.т.д, но это ведь совсем не значит что на таких сайтах не может быть полезного и интересного контента, поэтому мы стараемся не обращать внимания при ранжировании на такие ошибки. Подробнее об этом читайте в статье «Иерархия заголовков H1….H6 на странице».
Ошибкой будет считаться, если Вы будете выделять большие куски текста в заголовки, или пытаться например впихнуть между тегами <h></h> кучу ключевых слов которые плохо читаемым для человека. Такие приемы будут восприняты поисковиками негативно и скорее всего сайт таки получит санкции.
Если же у Вас например в заголовок H1 заключены название сайта или логотип + заголовок текущей страницы — то в этом случае ничего критического нету, и переживать по этому поводу не стоит, но в других случаях, я лично стараюсь использовать лишь один заголовок H1.
