Настройка подзаголовков с помощью CSS

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

Для начала сведем вместе несколько основных способов, которые можно скомбинировать и расширить:

задание размеров по типографской шкале

изменения стилей

подвесные подзаголовки

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

вставленные подзаголовки

неалфавитные символы

поперечные полоски

По мере рассмотрения каждого приема можно переходить на эту демо-страницу и смотреть эти—и дополнительные—варианты в действии.

Задание размеров по типографской шкале

При создании иерархии сети безопасным подходом является задание размеров подзаголовков при помощи типографской шкалы—пользовательской или общепринятой, такой как традиционная шкала (16, 18, 21, 24, 36, 48, 60, 72), разработанная типографами Ренессанса еще в 16-ом веке.

Начните с установки размера шрифта для body, а затем упорядочьте размеры подзаголовков от наименее значительных до самых важных. По моему опыту, заголовки h5 и h6 редко нужны в Сети, поэтому мы начнем с h5 и будем двигаться к h2, применяя типографскую шкалу по умолчанию (16, 18, 21, 24, 36, 48, 60, 72).[1]

p { font-size: 100%; } /* 16px */ h5 { font-size: 1.125em; } /* 18px */ h4 { font-size: 1.3125em; } /* 21px */ h3 { font-size: 1.5em; } /* 24px */

p { font-size: 100%; } /* 16px */ h5 { font-size: 1.125em; } /* 18px */ h4 { font-size: 1.3125em; } /* 21px */ h3 { font-size: 1.5em; } /* 24px */

Вы видите, что значения подзаголовков слишком близки друг другу, чтобы их можно было четко различить, особенно если страница просматривается быстро. Вот где может оказаться предпочтительной другая шакала, как та, которая основана на соотношении 2:3 (чистая квинта), которую можно использовать для увеличения размеров подзаголовков на 50% приращение.[2]

p { font-size: 100%; } /* 16px */ h5 { font-size: 1.5em; } /* 24px */ h4 { font-size: 2.25em; } /* 36px */ h3 { font-size: 3.375em; } /* 54px */

p { font-size: 100%; } /* 16px */ h5 { font-size: 1.5em; } /* 24px */ h4 { font-size: 2.25em; } /* 36px */ h3 { font-size: 3.375em; } /* 54px */

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

Разные стили при одном размере букв

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

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

Как во всем, связанном в веб-дизайне с CSS, есть несколько методов, которые можно применять для стилей с маленькими заглавными буквами. Одна из возможностей – применение правила свойства CSS3 OpenType.

h4 { font-family: proxima-nova, sans-serif; -moz-font-feature-settings: «smcp»; -ms-font-feature-settings: «smcp»; -webkit-font-feature-settings: «smcp»; -o-font-feature-settings: «smcp»; font-feature-settings: «smcp»; text-transform: lowercase; }

h4 {   font-family: proxima-nova, sans-serif;   -moz-font-feature-settings: «smcp»;   -ms-font-feature-settings: «smcp»;   -webkit-font-feature-settings: «smcp»;   -o-font-feature-settings: «smcp»;   font-feature-settings: «smcp»;   text-transform: lowercase; }

Еще одна опция– загрузка отдельного шрифта с маленькими заглавными буквами. У нее есть дополнительное преимущество – гарантия того, что маленькие заглавные буквы будут присутствовать даже в тех браузерах, которые не поддерживают свойства CSS OpenType посредством свойства font-feature-settings.

h4 { font-family: proxima-nova-sc-osf, sans-serif; text-transform: lowercase; }

h4 {   font-family: proxima-nova-sc-osf, sans-serif;   text-transform: lowercase; }

Подвесные подзаголовки

Чтобы расширить применение предыдущего метода, особенно когда требуется подчеркнуть структуру документа, можно использовать подвесные подзаголовки. Это не было биномом Ньютона, когда мы создавали дизайны с фиксированной разметкой, но с нашествием адаптивного веб-дизайна относительные единицы, такие как проценты, могут оказаться сложными в применении.[3]

Для подсчета ширины подвесного заголовка можно применить следующую формулу:

x = левый отступ статьи в %

ширина подзаголовка в % = (x / (100 – x)) * 100

article { padding-left: 33.33333333%; } h3 { float: left; margin-left: -50%; width: 50%; }

article {   padding-left: 33.33333333%; }   h3 {   float: left;   margin-left: -50%;   width: 50%; }

Для пущей важности можно сделать элегантную простую горизонтальную линию. Для прогрессивного улучшения общего дизайна идеальны псевдоэлементы :before и :after. Назначить им стили можно, применив рамки или фоны (или и то, и другое). Помните о том, что унаследованная ширина псевдоэлемента равна ширине подзаголовка. Чтобы растянуть псевдоэлемент на всю ширину статьи, нужно увеличить его размер. Просчитайте процентное отношение этого расширения, начав со значения отступа элемента статьи на основе процентов. (В виде формулы это выглядит так: (100 / отступ статьи в %) * 100 = ширина псевдоэлемента в %)

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

h3:before { content: » «; float: none; display: block; width: 300%; height: .7em; border-top: .0625em solid #ccc; }

h3:before {   content: » «;   float: none;   display: block;   width: 300%;   height: .7em;   border-top: .0625em solid #ccc; }

Или можно просто применить к абзацу рамку, которая следует за подзаголовком с помощью смежных селекторов CSS:

article { padding-left: 33.33333333%; } h3 { float: left; margin-left: -50%; margin-top: 1.5em; width: 50%; text-align: right; } h3 + p { border-top: .0625em solid #ccc; padding-top: 1.4375em; }

article {   padding-left: 33.33333333%; }   h3 {   float: left;   margin-left: -50%;   margin-top: 1.5em;   width: 50%;   text-align: right; }   h3 + p {   border-top: .0625em solid #ccc;   padding-top: 1.4375em; }

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

h3 { margin: 0; font-weight: bold; } h3:first-letter { float: left; width: 1em; margin-left: -1.1em; font-size: 3.4em; line-height: .9em; text-align: right; }

h3 {   margin: 0;   font-weight: bold; }   h3:first-letter {   float: left;   width: 1em;   margin-left: -1.1em;   font-size: 3.4em;   line-height: .9em;   text-align: right; }

Вставленные подзаголовки

Вставленные подзаголовки можно получить с помощью простых плавающих элементов. В этом приеме важно подобрать и сохранить x- и line-height как подзаголовка, так и прилегающего абзаца.

h3 { float: left; font-size: 1em; line-height: 1.5; padding-right: .5em; margin: 0; }

h3 {   float: left;   font-size: 1em;   line-height: 1.5;   padding-right: .5em;   margin: 0; }

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

Неалфавитные символы

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

h3:before { content: «{«; } h3:after { content: «}»; }

h3:before {   content: «{«; }   h3:after {   content: «}»; }

Кроме того, можно добавить под подзаголовок серию звездочек или обычный штрих. Просто установите правило display: block к псевдоэлементу :after и увеличьте размер его шрифта, таким образом выделив самые красивые детали. Даже самые простые глифы, которые есть почти в каждом шрифте, будучи увеличенными, смотрятся очень интересно.[4]

Код довольно прост:

h3:after { content: «—»; display: block; font-size: 2em; }

h3:after {   content: «—»;   display: block;   font-size: 2em; }

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

Поперечные полоски

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

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

h3 { display: table; width: auto; padding: 0 .5em 0 0; position: relative; } h3:after { content: » «; display: block; height: .5em; width: 9999%; overflow: hidden; position: absolute; top: .6em; background: #ccc; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

h3 {   display: table;   width: auto;   padding: 0 .5em 0 0;   position: relative; }   h3:after {   content: » «;   display: block;   height: .5em;   width: 9999%;   overflow: hidden;   position: absolute;   top: .6em;   background: #ccc; }

Вперед!

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

Примечания и ресурсы

1. Убедитесь, что сбросили в своем CSS все межстрочные интервалы по умолчанию, или рискуете получить неожиданный результат. Вот этот код творит чудеса:

* { margin: 0; padding: 0; font-weight: normal; } html { font-size: 100%; line-height: 1.5; }

* {   margin: 0;   padding: 0;   font-weight: normal; }   html {   font-size: 100%;   line-height: 1.5; }

2. Для пущего вдохновения и быстрого тестирования нескольких разных шкал, обратите внимание на калькулятор модульных шкал Тима Брауна (Tim Brown).

3. Поддержка гибких подвешенных подзаголовков довольно проста, и подробно описана в моей статье «Перемещение элемента HTML в гибком контейнере».

4. Если требуются идеи глифов, просто посмотрите таблицу знаков UTF.

Автор: Sally Kerrigan

Источник: http://blog.typekit.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Красивое оформление статьи на HTML

Вы здесь: Главная — HTML — HTML 5 — Красивое оформление статьи на HTML

Оформить красиво статью на HTML — это не значит, как-то ярко или по-особому. Вовсе нет, стиль оформления, не должен напрягать читателя и вызывать рефлекс — «закрыть бы побыстрее этот сайт».

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

Шрифты

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

Шрифт Roboto легко можно использовать на странице, в единственном экземпляре, за счет богатой его жирности и вариантов начертания. Для заголовков, параграфов и списков, можно применять от самого тонкого до самого толстого. На Google Fonts cтавите галочки у нужных вариантов.

и вставляете в HTML страницу.

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i&display=swap" rel="stylesheet">

Здесь используется только один Roboto, но остается впечатление, что это разные шрифты, но хорошо сочетающиеся.

Заголовки

Не делайте заголовки ЗАГЛАВНЫМИ БУКВАМИ, а делайте прописными. Заглавные буквы тяжело читаются и страшно раздражают. Для выделения заголовка, достаточно прибавить жирности и увеличить размер шрифта.

Цвет текста

На 100% работает правило: На белом/светлом фоне — серый/черный цвет шрифта, а на черном/темном фоне — белый/светлый.

Межстрочное расстояние

Не оставляйте межстрочное расстояние у текста (line-height) дефолтным, всегда увеличивайте. Такой текст становится легким, воздушным и очень легко читается.

Пример оформленной статьи на HTML

HTML+CSS код

Делим текст на параграфы по смыслу с максимум 10-ю строками.

<p>
   ..
<p>
    ..
</p>


Важную информацию оборачиваем тегом blockquote, вместо него можно использовать теги <p> или </div>.

<blockquote>
    ..
</blockquote>


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

blockquote {
    margin: 20px 0;
    padding-left: 20px;
    border-left: 5px solid #ee6e73;
    font-style: italic;
    line-height: 26px;
    font-weight: 400;
    font-size: 18px;
}


Изображение

В статье обязательно должно быть хотя бы одно изображение. Правый и левый край картинки, не должен вылезать за пределы общего контейнера.

img {
    width: 100%;
}


Отступы

Оставляйте достаточно пространства между элементами, задавая паддинги и маржины.

.section {
    padding: 2% 8%;
    ;margin: 0 auto;
}


Маркированные списки

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

ul>
    li> библиотека</li>
    li> вебинарами</li>
    li> лекция</li>
/ul>

li {
     font-style: italic;
     line-height: 20px;
     font-weight: 400;
     font-size: 18px;
     list-style: square;
}

Итоги

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

• Создано 19.06.2019 10:55:57
• Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Красивое оформление заголовка сообщения |шпаргалки блогерши

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

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



Вот такую красоту мы будем делать.

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

Ну и код

h4{
font-family: Times New Roman !important;
font-style:italic !important;
}
.post h4 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.post h4:hover {
color: #00BFFF;
border-left:10px solid#75A6CB ;
border-right:10px solid#75A6CB ;
box-shadow:0px 0px 13px#75A6CB;
-webkit-box-shadow:0px 0px 13px #75A6CB;
-moz-box-shadow:0px 0px 13px#75A6CB;
}
blockquote {
background: #FFFAFA url() no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em «comic sans ms», «GEORGIA», Times, serif;
border:1px solid #DCDCDC;
}
blockquote:hover {
background: #FFFAFA url() no-repeat right bottom ;
color:#FF0000;
}
blockquote p {
margin: 0;
padding-top:10px;
}

 То, что выделено синим цветом, а именно, значение #00BFFF- отвечает за цвет фона. Значение italic можно просто удалить. Тогда шрифт будет прямой, а не курсив, как у меня.

После всех изменений заходим во вкладку шаблон-изменить HTML. Находим нашу любимую строку 

 ]]></b:skin> и сразу над ней вставляем его. Проверьте шаблон. Если всё нормально, форматируем, сохраняем, возвращаемся и видим, что все заголовки постов в красивом оформлении.

Подобным образом можно оформить и участок текста в сообщении. Здесь более подробно об этом.

Всегда перед тем как что-то менять в шаблоне не забывайте делать резервное копирование!

У меня на сегодня всё. Буду признательна если поделитесь, кому это пригодилось.

оформите подписку на новые шпаргалки

Оптимизация заголовков TITLE и h2

Привет дорогие читатели! Уже прошли те времена, когда seo специалисты могли писать лишь одни полотна текста и выходить на первые места выдачи поисковых систем.

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

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

Как формируются заголовки <TITLE> и <h2>

Начнем с такого момента, как формирование заголовка для страницы. Не путайте заголовок статьи (h2), который выводится перед текстом поста и заголовок страницы (TITLE), который отображается в браузере и в выдаче Яндекс, Google, Mail и др.

На счет поисковиков нельзя утверждать на все 100%, что текст из Тайтл попадет в их выдачу, так как алгоритмы настроены в первую очередь на то, чтобы выдача была релевантной, но в большинстве случаев пользователям в поиске отображается то, что прописано в мета-теге title.

Создаете данный заголовок именно вы, когда заполняете метаданные статьи перед ее публикацией в редакторе WordPress.

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

Плагин All in One SEO Pack

Плагина SEO by Yoast

Плагин Platinum SEO Pack

После установки одного из плагинов в редакторе вордпресс появятся специальные поля, где и надо будет дать название посту, то есть прописать заголовок.

Ниже мой пример для плагина Platinum SEO Pack.

После публикации поста если посмотреть в исходный код страницы, то вы можете увидеть там созданный ранее TITLE.

Если навести курсор мыши на название вкладки любого из браузеров этой же странице, также отобразится заголовок.

Ну и не мог не привести пример отображения этого заголовка в выдаче Google

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

А так отображается сама статья.

Если у вас шаблон сайта правильно настроен, тогда данный заголовок будет выводиться с помощью тега <h2> в начале поста, который и будут видеть посетители.

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

Основные правила оформления заголовков

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

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

Уникальность. Все имеющиеся на сайте заголовки должны быть уникальными в своем роде. И еще считается, что заголовок страницы (TITLE), должен отличаться от заголовка поста (h2).

Хоть на этот счет и ходит много споров, но лично я у себя на блоге Тайтл делаю отличным от h2.

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

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

Если говорить про заголовок h2, то его видят пользователи в начале поста, поэтому здесь лучше использовать ключевое слово в естественном виде.

Остальные заголовки h3 — h6 уже не дают большого эффекта в плане продвижения, поэтому использование в них ключей может навредить, так как получится переспам.

Читабельность. Не забывайте, что пользователь приходи к вам на сайт, чтобы найти ответ на свой вопрос, который он задал в поисковой системе.

Если название заголовка не соответствует содержанию статьи, то пользователь в 90% закроет страницу, как результат ухудшение поведенческих факторов и прощай тогда ТОП.

Поисковики посчитают, что вы вводите пользователей в заблуждение, раз они быстро покидают найденную страницу и соответственно понизят страницу в выдаче.

Иерархия. Все заголовки сайта в структурном виде должны располагаться в четкой последовательности.

• Первый идет <title> — название страницы
• Второй <h2> — название статьи
• <h3> — заголовки разделов поста
• <h4> … <h6> — так выделяем подразделы

Ниже пример правильной иерархии сайта.

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

Длина заголовка. Количество отображаемых символов в выдаче поисковиков ограничено, для Яндекса — 70 знаков, для Google — 60. Все что длиннее будет обрезано.

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

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

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

Контролировать длину заголовков очень просто, так как для этого существует счетчик количества вводимых знаков прямо в редакторе мета-тегов.

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

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

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

Знаки препинания. Чтобы заголовки были естественными, и посетитель лучше понимал содержание поста, еще не осуществив перехода, можно использовать такие знаки препинания как: точка, запятая, тире, двоеточие.

Но здесь надо помнить следующее:

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

Единственное негативное воздействие от знаков препинания, что они распознаются поисковиками как ANSII символы и тем самым удлиняют заголовок.

Стоп-слова. В русском языке существуют «шумовыми» слова, те которые не несут никакой смысловой нагрузки.

Сюда относятся: местоимения, частицы, междометия, предлоги, союзы и другие, которые игнорируются поисковыми системами, но из-за которых страдает длина заголовка.

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

Посмотрите на картинку ниже и скажите, какой заголовок, по вашему мнению, более привлекательный?

Согласитесь, как два слова могут помочь удержать посетителя на сайте.

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

Если есть вопросы или замечания, задавайте их в комментариях. До скорой встречи!