Как правильно использовать заголовки H1 и H2 при оптимизации текстов

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Сегодня рассмотрим, как правильно настроить заголовки H1 H2 H3 в WordPress (здесь об установке темы для Вордпресс детальный мануал) для достижения максимальной оптимизации и эффективности при продвижении ресурса.

Сколько заголовков с тегом Hможет быть на странице ВордПресс?

Шаблон страницы структурируется с применением заголовков от H1 до H6. По мере увеличения номера, размер шрифта обычно уменьшается, а заголовки «вкладываются» 1 в 1. У сайтов на WordPress заголовок H1, как правило, зарезервирован для названия страницы, H2 используется для оглавления важных элементов страницы. Более глубокие уровни – подзаголовки – встречаются в теле статей для формирования структуры текста и удобства чтения.

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

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

  • В окне редактирования записи или страницы имеется выделенное поле для написания названия (1). Именно здесь располагается заголовок верхнего уровня. Он будет помечен тегом H1 непосредственно на странице записи либо тегом H2, если на главной странице выводится несколько анонсов записей. В последнем случае такой заголовок представляет собой ссылку на страницу с полным содержимым записи.
  • Окно текстового редактора включает тело статьи (2), в котором допускается форматирование текста с помощью панели инструментов (3). Применение заголовка первого уровня здесь уже не требуется, используйте уровни H2–H6, чтобы структурировать статью и избежать заспамленности.

Устанавливаем правильные теги заголовка h1

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

Поэтому мы заменим код, отвечающий за вывод заголовков таким образом, чтобы на главной странице блога заголовок находился в теге <h1>Заголовок блога</h1>, а на всех остальных страницах в обычном теге для текста <p>Заголовок блога на внутренних страницах</p>.

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

У заголовка стиль присвоен тегу h1, но мы же собираемся на внутренних страницах блога этот тег заменить на другой <p>. Именно другому тегу необходимо установить такой же стиль, как и тегу h1. Для этого мы должны найти стили, которые прописаны для h1 и продублировать их для тега <p>.

Первое, на что обращаю ваше внимание. Тегу <p> мы присвоим индетификатор ID: <p id=»zagolovok»>, и именно для id=»zagolovok мы будем дублировать стили.

Второе — мне пришлось ещё некоторые стили дописывать, возможно, вам это тоже понадобиться. В общем, начнем, в процессе все должно стать более понятно.

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

То, что нас интересует, я выделила розовым.

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

#zagolovok { font: $(); color: $(); text-shadow: 0 0 $() #000000; margin:0; } #zagolovok a { color: $(); text-decoration:none; }

Что мы с вами сделали. Для нашего нового заголовка #zagolovok мы продублировали те стили, которые заданы для .Header h1, плюс обнулили поля: margin:0;. Может обнуление полей нужно не для всех шаблонов, но в моем случае, это было необходимо.

Так же мы продублировали для #zagolovok a стиль, который есть у .Header h1 a, и добавили к нему text-decoration:none;, чтобы, при наведении курсора мышки на заголовок, не показывалась линия.

Читайте также:  Панель инструментов сбоку как исправить?

Со стилями для заголовка разобрались.

Изменяем тег заголовка h1, если в шапке используется только текст!

Находим в шаблоне такой код:<!—No header image —> <div id=’header-inner’> <div class=’titlewrapper’> <h1 class=’title’> <b:include name=’title’/> </h1> </div>Этот код отвечает за вывод заголовка блога. Меняем этот код, на новый:<!—No header image —> <div id=’header-inner’> <div class=’titlewrapper’> <b:if cond=’data: == data:’> <h1 class=’title’> <b:include name=’title’/> </h1> <b:else/> <p class=’title’ id=’zagolovok’> <a href=’http://URL-главной страницы’>Заголовок блога, как он есть</a> </p> </b:if> </div>

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

Изменяем тег заголовка h1, если в шапке используется картинка и текст!

Находим код:<div class=’titlewrapper’ style=’background: transparent’> <h1 class=’title’ style=’background: transparent; border-width: 0px’> <b:include name=’title’/> </h1> </div>

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

Полностью меняем его на такой код:

<div class=’titlewrapper’ style=’background: transparent’> <b:if cond=’data: == data:’> <h1 class=’title’ style=’background: transparent; border-width: 0px’> <b:include name=’title’/> </h1> <b:else/> <p class=’title’ style=’background: transparent; border-width: 0px’> <b:include name=’title’/> </p> </b:if> </div>

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

  1. На главной странице заголовок в теге h1
  2. На главной странице заголвок НЕ является ссылкой, т.к. более опытными людьми доказано, что на сайте не должно быть страниц, которые ссылаются сами на себя, поэтому мы избавились от ссылки, которая ссылается сама на себя.
  3. На всех внутренних страницах заголовок блога стал в обычном текстовом теге.
  4. И на всех страницах заголовок является ссылкой на главную, т.к. это удобно для посетителей и маленький плюс к внутренней перелинковке.

Чтобы убедиться в том, что все сделано правильно, воспользуйтесь расширением для браузера FireBurg. Об этом расширении можно прочитать в статье Как удалить внешние ссылки из шаблона блоггер.

Но на этом наша оптимизация заголовков не закончилась.

Правильные заголовки WordPress для грамотной SEO оптимизации

Тег h1

Тег h1 обычно используют для задания заголовков. То есть в идеале, как я считаю, на странице поста тег h1 должен встречать только 1 раз. Скажу так: поисковики наибольший вес придают словам в теге h1, потом в теге h2, далее h3 и т.д. по убывающей. А так как мы задаем заголовок страницы, используя ключевые слова (я, надеюсь, прав? Вы же так делаете? ), то мы просто обязаны дать заголовку страницы или поста тег h1 (по крайней мере я так делаю).

Как узнать заголовок странице в теге h1 или нет?

Берем нами уже известный инструмент Firebug и наводим на заголовок какой-нибудь страницы:

Как видите, заголовок статьи у меня взят в тег h1 (там еще задан class=”title”, не обращайте на него внимания). Если у Вас здесь не стоит h1, рекомендую это поменять. Для этого:

  1. Откройте файл темы (потом еще в будущем, наверняка, Вам придется и “пошаманить” с ).
  2. Находите фразу

    &lt;?php the_title(); ?&gt;

  3. И проследите, чтобы эта фраза была взята в тег h1:

То есть просто нужно в начале прописать <h1>, а после </h1>.

Тег h2

Тег h2 я использую в статье обычно 1-2 раза. Почему? Потому что, чем больше выделений h2, к примеру, то тем меньше значимость этого тега для поисковиков. Именно поэтому не стоит злоупотреблять тегами.

Но заметьте, использование тегов не только полезно для SEO оптимизации, но и улучшает читабельность для ЖИВОГО читателя. Вы не только “втюхивайте” ключевые слова, а делайте это красиво . То есть, разбавляйте ключевые слова. Заметьте, например, в этом посте встречается h2 в этом месте:

Правильные заголовки WordPress для грамотной SEO оптимизации

Как видите в этот заголовок входит одно из ключевых слов урока “заголовки WordPress” (заметьте, я сюда тоже “впихнул” этот ключевик).

Тег h3

Тег h3 разумно использовать под тегом h2. Лучше не стоить брат текст в заголовок 3, если нет в посте тега h2. То есть, желательно соблюдать логическую цепочку. Например, в данном уроке слова “Тег h1”, “Тег h2” и “Тег h3” взяты в h3. Опять же, они являются ключевыми словами. Надеюсь, Вы принцип поняли…

Теги h4, h5, h6

Теги h4, h5, h6 очень редко используются, обычно я их вообще не использую. Ими можно задать какие-то специфические стилевые свойства. Например, тег h4 будет делать все буквы заглавными, тег h5 будет менять цвет текста, обводить ее рамкой и т.п.

Чтобы изменить эти свойства, достаточно открыть файл и, воспользовавшись поиском, найти там, к примеру, фразу “h1”:

И уже там меняете свойства, применив знания в языке CSS.

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

До скорой встречи!

Как сделать тег Hу заголовка сайта!

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

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

Проверяем заголовок шапки сайта («ctrl+u» и «ctrl+f») вводим в строку поиска H1 и жмем «Enter». Как видим шапка сайта имеет заголовок первой категории.

А теперь если перейти на любую статью или страницу, то увидим, что на всех страницах тегом H1 обозначен заголовок сайта. А нам нужно сделать, чтобы H1 был у статей и страниц, но тогда при открытии страницы у нас будет два тега H1 в исходном коде (заголовок шапки и заголовок статьи).

Делаем следующее.

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

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

Теперь нужно обернуть всю строку этим кодом:

<?php if (!is_single () && !is_page ()) :?> Здесь ваш код <?php endif; ?>

и должно получиться так:

<?php if (!is_single () && !is_page ()) :?><a href=»<?php echo home_url(); ?>/»><h1><?php bloginfo(‘name’); ?></h1></a> <?php endif; ?>

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

После этого кода ставим вот такой:

<?php if (is_single () || is_page ()) :?> Здесь ваш код <?php endif; ?>

и получается вот так:

<?php if (is_single () || is_page ()) :?><p><a href=»<?php echo home_url(); ?>/»><?php bloginfo(‘name’); ?></p></a> <?php endif; ?> Обратите внимание, что вместо H1 у меня стоит <p>

Этот код означает, что когда открыта статья или страница у заголовка сайта не будет тега, или можете поставить H2. Вместо тега H1 я сделал тег <p>, вы можете заключить в H2. К  новому тегу я сделал отдельные стили, но об этом дальше.

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

Исходный код заголовка сайта при открытой статьи или страницы:

Исходный код статьи:

Не переживайте если у Вас изменились стили заголовка (размер, цвет и т.д), все это можно сделать присвоив ему новые стили.

Советы для названия заголовков

Советы ниже актуальны для заголовков всех уровней, будь то первый уровень <h1> или какой-то из уровней ниже.

Заголовки должны:

  • выстраиваться в иерархическом порядке;
  • не оканчиваться точкой;
  • иметь смысл, передавать идею следующего за ним текста (а не просто для «пусть будет»);
  • быть даже в небольших статьях, которые можно разделить на несколько частей;
  • не иметь грамматических ошибок (наличие таковых может снизить релеватность заголовка).

Другие советы, которые можно дать при составлении заголовков:

  • не стоит злоупотреблять заголовками и делать на странице множество <h2>…<h6> — поисковые боты могут расценить это как переоптимизацию сайта либо спам;
  • в заголовках должны быть прямые вхождения ключевых слов, так как это повысит релевантность страницы в отношении этого запроса; однако слишком большая плотность ключевых слов не пойдет в плюс – поисковые боты будут игнорировать подробные заголовки из-за переоптимизации;
  • заголовки должны быть уникальными (повторяющиеся заголовки поисковые системы могут не учитывать);
  • заголовок должен быть близок к началу документа (то есть к началу HTML-кода): чем выше заголовок, тем более высокое значение он имеет (по сравнению с другими элементами страницы);
  • желательная длина заголовка – не более 60 символов; это связано с поисковыми системами, которые воспринимают определенное количество символов (и длинный заголовок могут обработать не полностью).

Отдельно можно сказать о дизайне заголовков – будет здорово, если все заголовки на странице будут отличаться от другого текста (даже если речь идет не о <h1>, а о <h5> или <h6>). Можно как-то стилистически выделять заголовки, например, ставить их на цветную плашку или выделять шрифтом.

А подзаголовки можно нумеровать, при этом ставить цифры в виде картинок. И удобно, и красиво.

Как вставить тег hв шаблон блога WordPress

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

Редактировать файлы шаблона можно непосредственно на сервере в каталоге WP, соединившись с ним по FTP. Или проще, войти в , далее Консоль → Внешний вид → Редактор. Справа в открывшемся окне, будут видны все файлы шаблона вашей темы WP.

Как вставить тег hв шаблон блога WordPress

Однако, правильно и безопасно редактировать файлы шаблона нужно в редакторе типа Notepad++. Копируете редактируемый файл, редактируете в редакторе и сохраняя новую копию, переносит её в шаблон.

В этой статье нас интересуют два файла для редактирования:

  1. Файл главной страницы. Возможно или
  2. Файл отдельно открытой статьи: Возможно или

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

Как вставить тег hв шаблон блога WordPress

Исправляем тег h1 в файле отдельного поста

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

Заходим в Консоль → Внешний вид → Редактор → Файл отдельно открытой статьи. Ищем код, который отвечает за вывод заголовка. Кусок шаблона:

/* Часть шаблона loop-single

Как вставить тег hв шаблон блога WordPress

И меняем в нем теги h2 на теги h1:

Остается чистый код заголовка обрамленного тегами h1.

Как вставить тег hв шаблон блога WordPress
  • Ищите: или site-name или site-title.
  • Если тег h1 находится внутри div, то его просто удаляем.
  • Если теги h1>

Вставляем тег h1 на главную страницу блога WP

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

  1. Для этого открываем в редакторе файл: или ;
  2. Ищем код выводящий название статей на главной странице;
  3. И меняем, тег h1 на тег h2. Не забываем сохраниться.
Как вставить тег hв шаблон блога WordPress

» rel=»bookmark»>

Наиболее распространенные ошибки использования заголовков Hи H2

При использовании заголовков для оптимизации текстов постарайтесь избежать следующих ошибок:

  • Использование тегов <h1> и <h2> для стилизации элементов страницы. Это частая ошибка, которая может возникнуть даже помимо вашей воли. Во многих готовых шаблонах сайтов (например, на Joomla или WordPress) в теги <h1> и <h2> заключены, например, названия блоков. Допустим, такие как «Популярные товары», «Последние новости», «Мы в социальных сетях» и проч. Такой прием вводит в заблуждение поисковые системы и не приносит ничего хорошего. Поэтому при проведении сео-аудита сайта специалист обязательно проверяет, «по назначению» ли используются заголовки. Запомните важное правило – H1 и H2 должны применяться лишь для структурирования текста!
  • Использование одинаковых заголовков для разных страниц. Это, конечно, нонсенс, однако и такое встречается. Как минимум заголовки H1должны быть уникальны для каждой страницы!
  • Помещение в заголовки гиперссылок.
  • Присутствие на странице двух и более заголовков H1. Мы помним, что это недопустимо! Наш девиз: «Одна страница – один заголовок H1»!

В заключение нашей статьи обратим ваше внимание на еще один важный момент. Речь снова пойдет о шаблонах сайтов. Известны случаи, когда в стандартных шаблонах страниц вовсе нет заголовков H1. Вместо них идут заголовки H2. Даже если в административной части сайта вам предлагается ввести текст в поле «Заголовок материала», на деле может оказаться, что он будет заключен в теги <h2></h2>.  Проверьте, нет ли такой недоработки на вашем сайте – изучите структуру документа, нажав клавишу F12. Ваш заголовок заключен в теги <h1></h1>? Значит, все отлично!

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

Больше интересных статей на