Составляем правильный h1 и структуру подзаголовков
Содержание:
- HTML Tags
- Основные свойства шрифтов в CSS
- Заголовок Н1 для интернет-магазинов
- Где работать с разметкой статьи (важно)
- Использование единиц vw
- Правильное использование тегов h2 – h6
- Html тег h1 для главной страницы блога
- Зачем нужны подзаголовки h2-h6
- Что нужно знать для грамотной расстановки заголовков H1 и H2?
- Частые ошибки
- …
- должен присутствовать в одном экземпляре на каждой странице сайта. Это правило должно не вызывать никаких вопросов, ведь у каждой страницы сайта должно быть только одно название. А если названия вообще нет, то тогда вообще зачем нужна такая страница? Заголовок
- должен быть где-то вверху html-кода страницы
- должен быть уникальным в пределах сайта, т.е. не должно быть так, что некоторые страницы называются одинаково Заголовок должен отражать суть статьи, не быть очень длинным Не должен содержать какие-то еще элементы кроме названия страницы (т.е. нельзя использовать внутри h1 ссылки, элементы span, font, картинки и т.п.) Плохо использовать заголовки не по назначению. Например, часто в шаблонах теги h3 используются для заголовков «Теги», «Комментарии» в сайдбарах. Это не правильноЗаголовочные теги должны использоваться в статье, чтобы правильно структурировать контент и помочь, как поисковым систем, так и обычным пользователям разобраться быстро в статье. Желательно использовать заголовки без параметров class и id Важно соблюдать иерархию заголовочных тегов. На этом моменте нужно остановиться более подробно.
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>
Основные свойства шрифтов в CSS
В CSS при описании шрифта используют следующие характеристики:
Стиль
Стиль шрифта определяет тип начертания для представления текста: наклонный, курсивный или обычный.
Атрибут font style может принимать такие значения как:
- normal (обычный);
- italic (курсив);
- oblique (наклонный).
При всей схожести, наклонный шрифт и курсив не являются одним и тем же. Наклонный образуется с помощью обыкновенного наклона символов вправо, а курсив является имитацией рукописного стиля начертания текста.
Вариант шрифта
Данная характеристика указывает использование строчными символами обычных глифов или глифов капители. Любой шрифт может включать в себя либо только глифы капители, либо только обычные глифы, либо оба варианта в совокупности.
Свойство font variant может иметь одно из двух возможных значений:
- normal (обыкновенный шрифт);
- small-caps (шрифт с малыми прописными буквами).
Вес шрифта
В CSS жирный шрифт или наоборот, более светлый, задаётся параметром font weight. Некоторыми браузерами поддерживаются числовые значения в описании веса.
Каждый шрифт может принимать следующие значения:
- normal (обычный);
- lighter (светлее);
- bold (жирный);
- bolder (ещё более жирный);
- 100-900 (числовое описание веса, в котором значение 100 соответствует самому тонкому начертанию, а 900 — самому толстому начертанию).
Например:
p {font-family: georgia, garamond serif;}
td {font-family: georgia, garamond serif; font-weight: bold;}
Размер шрифта
Размер шрифта — это расстояние от нижней кромки текста до границ кегельного пространства. Если в HTML данный параметр варьируется от 1 до 7 условных единиц, что не далеко не всегда является удобным, то в CSS с помощью свойства font size размер шрифта можно указать с точностью до пикселя.
Например, задание шрифта размером 20 пикселей выглядит таким образом:
p {font-size: 20px;}
Также, размер шрифта можно задать с помощью процентов от его базового размера.
Например, шрифт с параметрами:
p {font-size: 150%}
будет отображён на 50% больше стандартного размера. В том случае, если гарнитура и размер шрифта не указаны, браузером будет выводиться базовый шрифт Times New Roman со стандартным, на усмотрение браузера, размером.
Цвет шрифта
Возможности CSS позволяют задать цвет текста и его фона с помощью следующих свойств:
- color (цвет текста);
- background color (цвет фона текста).
Цветовые значения рекомендуется указывать в общепринятом шестнадцатеричном виде цветовой модели RGB.
Например, белый текст на чёрном фоне будет иметь такие значения:
- color: #ffffff;
- background-color: #000000.
Первая пара цифр отвечает за уровень красного цвета, вторая — за уровень зелёного цвета, а третья — за уровень синего.
Минимальное значение — 0, а максимальное — f. Этот принцип позволяет самостоятельно «придумать» значения некоторых цветов: например, если первой паре цифр присвоить максимальное значение, а второй и третьей — минимальные, получится насыщенный красный цвет #ff0000.
Смешивая цвета, можно получать дополнительные оттенки: совокупность красного и синего цветов, как известно, дадут красно-фиолетовый #ff00ff.
Однако, для того, чтобы не изобретать велосипед, можно воспользоваться специальными программами или онлайн-сервисами для подбора цветового шестнадцатеричного кода: например, если в поисковом сервисе Яндекс ввести слово «цвет», появится удобное для таких целей средство.
Таким образом, возможности CSS позволяют изменить шрифт всего веб-сайта и его свойства всего за несколько минут, что существенно облегчает разработчику жизнь и экономит время.
Надеемся, что данное руководство было для вас полезно. Желаем успехов!
АМАнтон Малаховавтор
Заголовок Н1 для интернет-магазинов
Нужно понимать, что заголовок h1 должен быть пишется по разному в разных нишах, а также он должен по разному заполняться для коммерческих сайтов и информационных.
Главная страница магазина
Всегда нужно указывать H1 заголовок, который будет отличаться от Title тем, что он не будет привязан к геолокации и иметь коммерческие фразы. Здесь нужно указать второе по значимости ключевое слово, первое мы уже должны были разместить в тайтл страницы. Слово должно полностью подчеркивать бренд или показать чем занимается магазин.
Т.е. формула заголовка:
Посадочные страницы магазина
Здесь идет почти все тоже самое, однако мы уже не берет слова бренда, а делаем синоним ключевых слов, которые мы будем продвигать.
Обычный пример
Где работать с разметкой статьи (важно)
Многие авторы используют для написания статей текстовые редакторы, аналогичные Word или непосредственно его.
В таких редакторах заниматься разметкой текста — нет смысла. Во-первых, эти программы сами по себе используют HTML для разметки документов. Во-вторых, даже если пытаться в них что-то сделать — редактор превратит это все, в итоге, в абракадабру, которая совершенно не подойдет для заказчика.
В техническом задании просят использовать разметку лишь для того, чтобы быстро вставить текст на сайт. А испорченный Вордом материал, редактировать никто не будет и гарантированно вернут на доработку.
Именно поэтому, для разметки следует использовать специализированные редакторы. Саму статью можно написать где угодно, но работать с тегами следует в правильном редакторе.
Я советую использовать Sublime Text. Удобный и бесплатный редактор, который заточен именно под работу с кодом.
Кстати, для разметки текста, который будет вставлен в визуальный редактор на сайте, можно использовать стандартные стили Word. Которые, в свою очередь, соответствуют HTML тегам.
Использование единиц vw
Размер текста задаётся с помощью свойства font-size, в качестве значения можно указывать разные единицы — пиксели, пункты, миллиметры и др. Единица vw (от англ. viewport width — ширина области просмотра) соответствует 1% от ширины окна браузера, таким образом, при изменении этой ширины будет меняться и размер текста (пример 1).
Пример 1. Использование vw
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Размер текста</title>
<style>
section h2 {
font-size: 3vw; /* Размер заголовка */
}
section div {
font-size: 2vw; /* Размер текста */
}
</style>
</head>
<body>
<section>
<h2>Для педагогов</h2>
<div>
Современная образовательная парадигма, ратифицируя приоритет
личностной ориентации педагогического процесса, в ходе которого
осуществляется развитие природных задатков, заложенных в каждом индивидууме,
требует переосмысления существующих традиционных форм и
методов общеобязательного образования.
</div>
</section>
</body>
</html>
Результат данного примера показан на рис. 1.
а
б
Рис. 1. а — текст на широком окне; б — текст на узком окне
У единицы vw есть несколько недостатков — главное, что текст уменьшается пропорционально вместе с окном и в какой-то момент становится нечитаемым. Это будет особенно заметно на смартфонах, где ширина экрана меньше ширины мониторов. Чтобы установить минимальный размер текста можно воспользоваться функцией calc(), как показано в примере 2.
Пример 2. Использование calc()
Здесь мы смешиваем разные единицы — для заголовка rem и vw, для основного текста пиксели и vw. Использование calc() гарантирует, что текст не станет меньше указанного значения (для заголовка, к примеру, это 1rem).
Правильное использование тегов h2 – h6
Заголовки h2 – h6 помогают сориентироваться в изложенном тексте, делая материал более привлекательным в глазах читателей и поисковых ботов. Поэтому существуют некоторые неукоснительные правила при их создании, а именно:
Структура заголовков должна располагаться таким способом, чтобы образовывалась последовательная иерархия. Давайте посмотрим на наглядном примере. Допустим, автор пишет статью на тему «Вольная борьбе». В таком случае подзаголовки будут выглядеть следующим образом:
<h2>Вольная борьба среди подростков</h2>
<h2>Вольная борьба среди юношей</h2>
<h2>Вольная борьба среди ветеранов</h2>
<h3> Как преуспеть в вольной борьбе</h3>
Допускаются склонения и разбавления h2 – h6 заголовков
Это очень важно, поскольку ключевые словосочетания прямого вхождения будут расценены поисковиками как спам
Пожалуй, это основные рекомендации, касающиеся тегов, придерживаясь которых, вам удастся успешно продвинуть свой сайт в поисковой выдаче.
Спасибо за внимание и до скорых встреч на страницах Stimylrosta.
Html тег h1 для главной страницы блога
На главной странице блога тег H1 должен быть прописан в заголовке или описании блога, а H2 в заголовках статей.
Но как это осуществить? У нас ведь в записях главный тег используется для заголовков статей.
Открывает файл index.php для редактирования и находим строчку вида:
У вас она может отображаться несколько иначе, но смысл один и тот же
Здесь важно проследить, чтобы в этой строке был прописан тег h2, как на скриншоте вверху
Если выводится через другой тег, — пропишите h2 и обновите файл.
Теперь про H1
Но это не всё.
Если мы просто пропишем заголовок или описание блога через тег h1, то он будет отображаться на всех страницах многочисленных статей блога.
Это приведёт к дублированию тега h1, что не есть хорошо! Поисковики это не любят… Поэтому предлагаю своё решение.
Необходимо добавить условие в виде кода php, при котором этот тег будет прописываться в заголовке блога только на главной странице, а на других страницах в статьях будет отсутствовать.
А вот и само условие:
<?php if (is_home() ) {
?><h1>ваш заголовок или описание блога</h1><?
} else {
?>< >заголовок или описание блога</ ><?
}
?>
Итак, открываем файл блога header.php и прописываем это условие в шапке блога.
У меня это выглядит таким образом:
Как вы можете заметить, для своего ресурса я заключил в тег h1 на главной странице описание блога «продвижение блога и заработок в интернете».
Вот в принципе и всё. Мы удачно произвели редактирование недоработок в бесплатном шаблоне.
Надеюсь, вы поняли, как нужно правильно использовать тег h1 на своём блоге, чтобы угодить поисковым системам.
В своих следующих уроках я расскажу о том, как правильно использовать теги h1, h2, h3 и h4 на своём веб-ресурсе. Так что подписывайтесь на обновления, чтобы не пропустить этот полезный материал.
До новых встреч. Пока!
Зачем нужны подзаголовки h2-h6
Теги от h2 до h6 располагаются уже в теле самой статьи, структурно разделяя ее на тематические абзацы, и в коде HTML-документа, выделяя его значимые элементы. Они также идентифицируются поисковыми роботами для семантического анализа страницы.
Нужны для того, чтобы иерархично обозначать все важное и стоящее внимания пользователя на странице. Такая структура помогает человеку быстрее сориентироваться в информации и оценить ее соответствие своим запросам
h2 – акцентирует внимание пользователей и поисковых систем на основном содержании статьи. Показывает самое значимое в тексте
h3 – является подпунктом для информации, идущей под H2, раскрывая ее еще глубже.
h4, h5, h6 – определяются, как вложенные подзаголовки (раскрывают детально суть H2 или H3) и используются в тексте, в качестве выделяющих мелкие пункты и значимые слова, а также в меню, сайдбаре и других составляющих веб-документа.
Длина всех h-тегов должна быть в пределах 50 символов.
Что нужно знать для грамотной расстановки заголовков H1 и H2?
Заголовок H1 играет важную роль не только при оптимизации текста, но и при оптимизации всей страницы. Именно он сообщает поисковой системе, насколько контент, представленный на странице, соответствует заголовку страницы (Title), а, следовательно, отвечает ожиданиям пользователей.
Вы придумали для текста креативный, необычный, привлекательный заголовок, основанный, например, на игре слов? Такой подход может быть хорош для печатной рекламы или газетной статьи, однако для поискового продвижения такой креатив может принести негативные последствия. Поисковые системы не обладают фантазией и образным мышлением, им важна конкретика. Ниже мы приведем важные рекомендации для составления заголовка H1.
Частые ошибки
За правильной разметкой нужно особенно следить при использовании бесплатных CMS и отдельных шаблонов – в некоторых случаях <h1> и подзаголовки других уровней могут стоять совсем не там, где они должны быть (например, <h3> выделяет заголовки блоков). Это встречается в WordPress, поэтому если вы видите, что виджеты в сайдбаре имеют теги заголовка, измените их на другие (например, на <span>).
Также иногда заголовки включают какие-то посторонние элементы вроде изображения или ссылки, и это негативно отражается на SEO.
Другая типичная ошибка – наличие на странице нескольких тегов <h1>. Этот тег должен быть один и только один.
Зачастую теги
…
могут быть неправильно оформлены в визуальном текстовом редакторе в панели администратора: их не закрывают, оставляют пустыми или включают туда очень много текстаВажно не только, что вы напишите в заголовках, но и то, как вы это сделаете – поэтому следите за оформлением
Если возвращаться к тексту, то ошибки стандарты: слишком много ключевых слов, знаки препинания и так далее (обо всем этом уже писалось выше)
Однако важно помнить и о содержании самого заголовка – он должен соотноситься с текстом. который идет далее
То есть заголовок должен выполнять свою функцию. Потому что когда он ее не выполняет, начинаются проблемы.
Бывают, кстати, ошибки наоборот – когда вместо того, чтобы поставить тег заголовка, ставят теги <p> и <span> с каким-нибудь стилем.
Еще бывает, что, прочитав все выше, человек решает отказаться от заголовков и не использовать их в маленьких текстах. И тут нужно понимать, что практически любой текст можно разбить на небольшие части, и соответственно озаглавить их.
Заголовки h1, h2,…h6 для Joomla!
Так же, как и в WordPress, в Joomla! заголовок выводится из названия статьи. Данное поле не имеет ограничений по количеству символов, поэтому ориентируйтесь на допустимые размеры заголовков.
Создавая первую статью, обязательно проверьте, корректно ли выводится заголовок и расположен ли он в тегах <h1></h1>. При определенных настройках заголовок может не отображаться.
Принцип создания вложенных заголовков при помощи тегов h2, h3, h4, h5 и h6 схож с . Их так же можно добавить через редактор HTML кода или с помощью визуального оформления.
(Вид редактора может отличаться в зависимости от версии Joomla! или установленных модулей и настроек.)
Как нужно заполнять h1 для информационных сайтов
Здесь сильные отличия, от коммерческой нише. Сюда уже нам нужно написать вопросы или обращения к нашему пользователю в которых мы будем использовать ключевые слова.
Давайте рассмотрим варианты формирования H1 для Главной и для статьи.
Главная
К примеру:
Но здесь можно указывать и ВЧ ключ, если вы вдруг будете его продвигать и затачивать под главную страницу сайта.
Статьи
В статьях лучше задавать вопросы юзеру напрямую, чтобы ваша статья раскрывала этот вопрос, часто используют вопросы в title, сейчас покажу пример.
Допустим у нас будет такой title:
Тогда h1 должен быть такой:
Если бы у нас не было вопроса в title, а мы его задавали бы в h1:
SEO заголовок страницы h1 и его значимость
Самый главный заголовок страницы размечается тегом h1. Это может быть название страницы, статьи или товара. Это обязательный заголовок и он должен присутствовать на всех страницах сайта без исключения.
Очень часто встречаю в самописных сайтах или просто в непрофессионально собранных шаблонах такой момент, что тега h1 просто нет. На месте заголовка страницы заместо h1, находится тег h2. Это еще в лучшем случае — бывает что вообще нет заголовков типа H на странице. А то что выглядит типа заголовка, просто обычный div или span блок с прописанными заранее стилями походящими на заголовок.
Обязательно проверяйте наличие тега h1 на странице в самом начале оптимизации или еще ранее — на этапе проведении seo аудита сайта. К тому же тег h1 должен быть всего 1 на странице.
Опять же частое явление, когда тегов h1 на странице несколько. Это свойственно опять же самописным сайтам или сделанных на конструкторе или с помощью разного рода софта вроде Adobe Muse, об ужасном коде которого я писал ранее.
Последний сайт что я взял на оптимизацию — это как раз таки одностраничный сайт собранный на Muse и когда я заглянул на код сайта обнаружил аж 7 заголовок размеченных тегом 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 и Title: за и против
Главный аргумент сторонников уникальных заголовков – нет угрозы попадания сайта под фильтр
Поисковики сейчас обращают внимание на качество контента, негативно воспринимая переспам и дубли
Аргумент против: хотя разные Title и H1 увеличивают охват запросов, но они ухудшают релевантность и ранжирование по ключам.
Желательно, чтобы ваши мета-теги были уникальными во всём интернете. Хотя 100% неповторимости да и ещё с использованием ключей добиться трудно, но уж дублировать друг друга Тайтл и H1 точно не должны. Каждая страница обязана иметь свой оригинальный Title. В противном случае с точки зрения поисковых роботов она не будет содержать оригинальной информации – сайт попадёт под пессимизацию за одинаковые сниппеты.
Теги обязаны быть не только уникальными, но и релевантными. По коммерческому запросу «купить платье мини» человек должен попадать на страницу с описанием, характеристикой конкретной модели, ценой и кнопкой для оформления заказа. А не получать текст об истории возникновения платьев и их видах.
Оптимальный Тайтл в таком случае:
«Купить платье мини с доставкой по России: цена, материал, размеры».
H1 может быть таким:
Платье мини с ценой и описанием
Статья в тему: Как составить уникальный Title
Примеры CSS H1, H2
Все примеры будут реализованы по принципу стилизации
заголовков моим методом (пример, сайт sitear.ru).
CSS стилизация H1 заголовка
В данном пункте остановимся на реальных примерах стилизации h1 заголовка. Примеры, громко
сказано, так как, у каждого сайта уникальный дизайн. Приведу один,
универсальный пример стилизации H1.
Мою идею стилизации заголовков вы уже поняли, хочу дополнить ее, используя в background-image прозрачность,
которую легко можно сделать в фотошопе. Пример смотрите ниже.
CSS код:
.heading { width:500px; background: #888;}
h1 {height:70px; background: url(left.png) left top no-repeat; color:#FFF; line-height: 50px;}
h1 strong {height:70px; display:block; margin-left:60px; padding: 6px 60px 0px 0px; background: url(right.png) right top no-repeat;}
Исходные картинки:
HTML код:
<div class="heading"> <h1><strong>Текст h1 заголовка</strong></h1> </div>
Как видите исходные картинки имеют полупрозрачность, а в
классе heading, меняя
значение background, можно
добиться следующих результатов:
CSS h1 + h2 (совместная стилизация)
Стилизировать h1 и h2 вместе,
уместно при наличии эпилога, или маленького вступления к статье на вашем сайте, которое можно поместить в тег h2.
Например:
H1 – Стилизация
h1, h2 заголовков;
H2 – Учимся оформлять h1, h2 заголовки на css.
Это мой пример, вероятней всего у вас своя идея, как оформлять страницы сайта.
Пример css h1 +
h2, схож с пред идущим,
рассмотрим css код.
.left{height:100px; background: url(left.png) left top no-repeat;}
.right{ width:500px; height:100px; display:block; margin-left:45px; padding: 0px 45px 0px 0px; background: url(right.png) right top no-repeat;}
h1 {color:#FFF; font-size:18px; padding:15px;}
h2 {color:#CCC; font-size:16px; padding:5px;}
Исходные картинки:
HTML код:
<div class="left"> <div class="right"> <h1>Текст H1 заголовка</h1> <h2>Маленькое вступление, или описание статьи, заключенное в H2 тег.</h2> </div> </div>
Отображение:
Суть совместной (h1 + h2) стилизации
заголовков, схожа с пред идущим примером, только в этом случае используются div блоки.
CSS стилизация H2 заголовка
Стилизация h2
заголовка дело не хитрое. Но, раз уж наша статья касается стилизации h1 и h2 заголовков, мы рассмотрим все до
конца.
Как правило, тег h2, используют для выделения подпунктов статьи или другого
материала на сайте. Например, как на сайте sitear.ru.
Я бы советовал создавать, скромные, неброские, но удобные h2 заголовки. Мне очень нравится идея,
как организовано на Википедии. Советую и вам создать подобно. Это просто и
удобно. Например:
<style>
h2 {font: bold 18px Arial; color:#595; border-bottom:#CCC solid 1px; margin-top:25px;}
</style>
<h2>Пример стилизации h2 заголовка</h2>
<p>Lorem ipsum dolor sit amet, <a href="http://sitear.ru">consectetuer adipiscing</a> elit. Ut pretium mauris nec arcu. Integer at leo vel ipsum elementum sodales. Nam est quam, posuere non, feugiat nec, consectetuer ac, lectus. Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h2>Еще подраздел вашей статьи</h2>
<p>Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilisis cursus mi ligula vitae nunc. Curabitur libero. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.</p>
Отображение:
Просто, удобно и кроссбраузерно.
Надеюсь, вам помогла моя статья. Если остались вопросы
или предложения по поводу css стилизации h1, h2 заголовков,
пишите в комментарии.
Дальше: Конвертация трафика сайта
Правила использования тега
Тег
должен присутствовать в одном экземпляре на каждой странице сайта. Это правило должно не вызывать никаких вопросов, ведь у каждой страницы сайта должно быть только одно название. А если названия вообще нет, то тогда вообще зачем нужна такая страница?
Заголовок
должен быть где-то вверху html-кода страницы
должен быть уникальным в пределах сайта, т.е. не должно быть так, что некоторые страницы называются одинаково
Заголовок должен отражать суть статьи, не быть очень длинным
Не должен содержать какие-то еще элементы кроме названия страницы (т.е. нельзя использовать внутри h1 ссылки, элементы span, font, картинки и т.п.)
Плохо использовать заголовки не по назначению. Например, часто в шаблонах теги h3 используются для заголовков «Теги», «Комментарии» в сайдбарах. Это не правильноЗаголовочные теги должны использоваться в статье, чтобы правильно структурировать контент и помочь, как поисковым систем, так и обычным пользователям разобраться быстро в статье.
Желательно использовать заголовки без параметров class и id
Важно соблюдать иерархию заголовочных тегов. На этом моменте нужно остановиться более подробно.
Примеры: Хороший H1 vs Плохой H1
Давайте рассмотрим на паре живых примеров заголовок первого уровня H1
Пример #1
Хороший заголовок. Заголовок находится в начале страницы, не дублируется, его размер 59 символов. H1 отражает суть всей статьи, содержит высокочастотное ключевое слово в начале, вызывает интерес у читателя.
Плохой заголовок. Размер H1 явно превышает 60 символов, заголовок переоптимизирован, он не отражает смысловую суть документа целиком. Заголовок представляет из себя перечисление частей статьи, в нем содержится слишком большое количество ключевых слов.
Пример #2
Хороший заголовок. Лаконичный заголовок первого уровня, находится в начале страницы, характеризует категорию товаров с половой сегментацией, является ключевым словом. У H1 отсутствуют посторонние элементы в коде, грамматические ошибки, он не дублируется.
Главный заголовок h1
Самый главный заголовок страницы размечается тегом h1. Это может быть название страницы, статьи или товара. Это обязательный заголовок и он должен присутствовать на всех страницах сайта без исключения. Очень часто встречаю, что тега h1 просто нет или их несколько. На месте заголовка страницы заместо h1, находится тег h2. Это еще в лучшем случае – бывает что вообще нет заголовков типа H на странице. А то что выглядит типа заголовка, просто обычный div или span блок с прописанными заранее стилями подходящими на заголовок.
Каждая страница вашего сайта несет в себе какую-то конкретную информацию (во всяком случае, должна нести). Основную суть информации вы и будете размещать в заголовке. Например, если вы продаете 3D-телевизоры, значит заголовок страницы должен выглядеть как основной запрос и выделяться в html коде страницы тегом h1.
Основные требования к h1
- На странице должен присутствовать только один заголовок первого порядка (заголовок 1, h1). Это главный заголовок, видимый пользователю и отражающий ключевую суть поста.
- Заголовок H1 всегда стоит в начале текста.
- Длина заголовка должна быть не более 65 символов.
- H1 должен быть уникальным в рамках вашего сайта.
- Тег H1 не должен быть ссылкой, картинкой и т.д. Заголовок должен быть заголовком.
- В H1 старайтесь заключать самое частотное ключевое слово.
Вместо вывода
Из вышесказанного можно подвести итог, что один H1 на странице не может считаться железным правилом, а несколько H1 на одной странице не всегда будет ошибкой. Примеров, где сайт более чем с одним H1 на странице находится в топе как Яндекса, так и Google, более чем достаточно, что может говорить о том, что поисковикам важна сама информация, а не оценка сайта по валидности html. Главное правило — использовать заголовки по их назначению, то есть для выделения заголовков страницы и разбивание текста на логические разделы. Это касается всех тегов заголовков, и H1 не исключение. Сколько раз будет повторятся тот или иной тэг заголовка в этом случае второстепенно.
Как говорил Мэтт Каттс о заголовках, что в сети очень много сайтов с «корявыми» страницами, с неправильной структурой заголовков, с невалидным Html, просто уродливыми страницами и.т.д, но это ведь совсем не значит что на таких сайтах не может быть полезного и интересного контента, поэтому мы стараемся не обращать внимания при ранжировании на такие ошибки. Подробнее об этом читайте в статье «Иерархия заголовков H1….H6 на странице».
Ошибкой будет считаться, если Вы будете выделять большие куски текста в заголовки, или пытаться например впихнуть между тегами <h></h> кучу ключевых слов которые плохо читаемым для человека. Такие приемы будут восприняты поисковиками негативно и скорее всего сайт таки получит санкции.
Если же у Вас например в заголовок H1 заключены название сайта или логотип + заголовок текущей страницы — то в этом случае ничего критического нету, и переживать по этому поводу не стоит, но в других случаях, я лично стараюсь использовать лишь один заголовок H1.
