Игорь . Обновление:Октябрь 6, 2012 .
Здравствуйте, уважаемые читатели! Продолжаю публикации в разделе и сегодняшний пост будет посвящен формированию заголовков html (теги h1-h6), а также способам форматирования html текста путем выделения необходимых слов или фраз (теги strong, b; em, i) и фрагментов текста (теги blockquote, pre).
Надо сказать, что данные инструменты очень часто бывают востребованными в работе вебмастера, поэтому я счел нужным о них рассказать, тем более, что правильное применение вышеназванных тегов html способствует успешной раскрутке проекта. Вообще говоря, вся информация, которую я предлагаю, очень важна, ее объем продуман, поэтому старайтесь ознакомиться с ней как можно ближе, ничего лишнего я стараюсь не давать.
Это касается как настоящего раздела, посвященного основам html, так и других рубрик. В рамках данной рубрики мы уже рассмотрели понятие , а также определение . Напомню очень важное правило: блочные теги могут содержать другие блочные элементы, однако размещать блочные теги внутри строчных категорически не рекомендуется.
Теги заголовков h1-h6
Уверен, многие из вас уже неоднократно сталкивались с тегами заголовков h1-h6, однако, возможно, некоторые недооценивают их важность с точки зрения seo. Дело в том, что эти теги играют не последнюю роль в деле и я постараюсь коснуться этого аспекта тоже. Название элементы h1-h6 получили от заглавной буквы английского слова "Header" (заголовок). Синтаксис заголовков в html коде выглядит следующим образом:
Содержание заголовка h1
Содержание заголовка h2
Содержание заголовка h3
Содержание заголовка h4
Содержание заголовка h5
Содержание заголовка h6
Прописывая этот кусок html кода при отображении в браузере мы получаем:
Самый верхний уровень 1, самый низкий - 6. Таким образом любой текст можно классифицировать с точки зрения его важности. Теги h1-h6 являются блочными, поэтому заголовок, определяемый ними, занимает все возможное пространство по ширине. Однако, несмотря на то, что эти элементы являются блочными, они не должны содержать другие блочные теги, только строчные. Если касаться оптимизации статей и всего ресурса в целом, то можно выделить несколько рекомендаций:
- наиболее важны с точки зрения ранжирования поисковыми системами, соответственно они наиболее востребованы и часто используемые. Рекомендуется заголовок тега h1 использовать один раз на странице (обычно он располагается на странице со статьей в качестве названия поста, у меня пока на блоге немного не так, но я собираюсь исправить ситуацию). Заголовок h2 применяется для подзаголовков, если материал большой и его надо разделить на логические части, h3 - для подзаголовков логических фрагментов этих частей; кроме того, h2 и h3 допускается использовать на главной странице и страницах категорий.
- Теги h4, h5, h6 применяются редко, поскольку слабо учитываются при ранжировании. Однако, если статья большая и необходимо выделить какие-то фрагменты для удобства читателей, то приходят на помощь и они (например, в объемном мануале в каждой из частей, определяемой элементом h3, требуется выделить логические куски с подзаголовком h4). Кроме того, теги h4, h5, h6 могут быть использованы для названий каких-либо блоков в сайдбаре, футере (подвале) и т.д.
- Желательно использовать заголовки h1, h2, h3 в обязательном порядке. Конечно, я не проводил анализа строгости поисковиков при несоблюдении этого правила, однако логично предположить, что это учитывается при ранжировании.
- Необходимо добавить, что в содержание заголовков, особенно h1-h3, в обязательном порядке должны входить ключевые слова, определяемые при , поскольку поисковые системы именно ключевым словам и фразам придают большое значение.
Ну, и само собой, использование тегов html заголовков, и это главное, делает материал более удобным для восприятия пользователями. Что касается атрибута align тегов h1-h6, то сейчас я о нем говорить не буду, поскольку он не рекомендуется к применению по правилам спецификации html. Как разнообразить внешний вид подзаголовков с помощью приемлемых методов, которые не нарушат , мы поговорим, когда приступим к изучению .
Форматирование текста при помощи специальных HTML тегов
Форматирование текста - это выбор средств для его изменения, таких как редактирование шрифта или использование разнообразных эффектов. Во многих случаях правильное их использование вносит свою лепту в дело продвижения сайта.
Логическое и физическое форматирование - особенности использования каждого из них
Отмечу разницу между тегами логического и физического (визуального) форматирования. Физическое предназначено прежде всего пользователям, которое позволяет выделить для них важные участки текста. Логическое же делает акцент на выделенный текст поисковым машинам, которые учитывают этот участок при ранжировании.
Наиболее ярким примером служат strong и em, которые являются тегами логического форматирования, а соответственно b и i - физического форматирования. При отображении в браузере текста, обрамленного тегами strong и b (выделение жирным), em и i (выделение курсивом), визуальной разницы не ощущается:
Выделение текста жирным для поисковиков Выделение текста жирным для пользователей Выделение текста курсивом для поисковиков Выделение текста курсивом для пользователей
Поговаривают, что значение тегов strong и em за последнее время серьезно упало и поисковые машины сейчас мало внимания им уделяют. Однако, я все-таки не советовал бы увлекаться их применением, отмечая ими ключевые слова, тем более, что существует разумная альтернатива в лице элементов em и i.
Какие еще есть теги, позволяющие форматировать текстовое содержание
Теперь еще несколько слов о других тегах форматирования текста, которые применяются крайне редко, но все же нужны, раз они существуют. Возможно, кому-то эта информация окажется полезной. Отмечу по обыкновению лишь те теги, которые соответствуют спецификации html 5. Начнем с тегов физического (визуального) форматирования (теги b и i рассмотрены выше).
- Small - служит для уменьшения размера шрифта на единицу, если сравнивать с обычным текстом.
Безусловно, это только некоторые элементы физического форматирования, однако я выбрал только те, которые валидны по отношению к html 5, остальные рекомендуется заменять стилями css, с которыми вскоре я вас ознакомлю. Далее приведу примеры тегов логического форматирования.
- Abbr - указывает на то, что данная последовательность символов является аббревиатурой. Расшифровка сокращения осуществляется с помощью атрибута title и всплывает при подведении курсора к тексту.
Иногда шаг вперёд требует шага назад.
(function() {
var request, b = document.body, c = "className", cs = "customize-support",
rcs =new RegExp("(^|\\s+)(no-)?"+cs+"(\\s+|$)");
request = true;
b = b.replace(rcs, "");
b += (window.postMessage && request ? " " : " no-") + cs;
}());
Представленные выше теги логического и физического форматирования часто не встречаются при написании html кода, однако знание о них необходимо хотя бы для выяснения их роли в современном продвижении сайтов. Далее рассмотрим еще два тега форматирования текста html, которые играют не последнюю роль.
Как вставить цитату посредством blockquote и выделить текстовый фрагмент с помощью pre
Html тег blockquote служит для форматирования текста, выделяя цитаты внутри документа. Он достаточно распространен и часто используется при написании постов на сайтах и блогах определенной тематики. Вот пример:
Тег blockquote является парным и может включать в себя как блочные (например теги абзацев p), так и строчные элементы.
Абзац текста, заключенный в тег p
Абзац текста, заключенный в тег форматирования blockquote.
Он не имеет набора уникальных атрибутов, однако к нему могут быть применены . В каждой теме оформление цитаты в тексте может быть различным, это зависит от стиля и дизайна шаблона, который определяется стилями css, о которых я уже упоминал неоднократно и до которых обязательно доберемся в ближайшее время.
Ну, и напоследок еще об одном элементе форматирования, который достаточно часто бывает востребованным - теге pre . Этот элемент позволяет отобразить предварительно отформатированный непосредственно в коде html фрагмент текста. Особенность отображения в браузере по умолчанию заключается в том, что любое количество пробелов, которые идут последовательно, передается на вебстранице как один. Тег pre помогает обойти эту специфическую особенность. То есть то и как вы написали, точно будет воспроизведено на странице, если участок текста заключен между открывающим и закрывающим тегами pre.
HTML форматирование текста с помощью тега pre тег pre - парный и блочный элемент
Точно в таком же виде текст отобразится в браузере:
HTML форматирование текста с помощью тега pre тег pre - парный и блочный элемент
Ну, вот, пожалуй, это все, о чем я хотел сегодня рассказать применительно к тегам заголовков h1-h6, а также основным элементам форматирования html текста. Продолжение обязательно последует, поэтому обязательно подписывайтесь на обновления блога , чтобы не пропустить свежие материалы. Ну а в заключение после длинной трудной статьи улыбнитесь, наблюдая за братьями нашими меньшими:
Желаете получать своевременно свежие актуальные и полезные статьи? Тогда можете подписаться:
Еще статьи по данной теме:
34 отзыва
- Сергей
Спасибо за подробную статью на актуальную тему, но сразу же возникают вопросы.
Прежде всего, заголовки, точнее, их непосредственное использование. Я встречал два мнения.
1. в коде должно быть название сайта, - заголовок статьи, - подзаголовки. Тег на странице должен быть единственным.
2. - заголовок статьи и название сайта, - подзаголовки.Вы используете первый вариант, я - второй, но обосновать выбор самостоятельно не могу, поскольку так посоветовали.
Еще вопрос пот тегу strong - опять-таки, ходят слухи, что ПС начинают к нему относиться не просто индифферентно, но враждебно, точнее, к выделению им ключевого слова или фразы. В качестве альтернативы предлагается выделение предложения, содержащего ключ, полностью.
Я с некоторого момента вообще отказался от этого тега, но о результатах пока говорить рано.
- Сергей
прошу прощения, забыл, что движок вырезает теги:
1. в коде h1 должно быть название сайта, h2 - заголовок статьи, h3 - подзаголовки. Тег на странице должен быть единственным.
2. - h1 заголовок статьи и название сайта, h2 - подзаголовки. - Василий
Игорь, я никак не могу понять, где находиться тег H1. У вас и у меня в шапке стоит изображение. У вас там есть этот тег. При анализе моего сайта одним сервисом, мне в результате сказали, что у меня вообще на сайте нет тега H1. Как его вообще вставить в шапку сайта?
- Игорь
Сергей, многое из того, что касается seo, постигается на практике путем экспериментов. Я не могу однозначно ответить на данный момент, что лучше, да никто не сможет. Нет универсального решения, все зависит от темы ресурса и его раскрученности. Но я понимаю Ваше беспокойство и стремление постичь истину. Как только у меня будут определенные данные по каждому пункту, сразу выложу их в публикации. Что касается тега strong, то, на мой взгляд, выделение ключевых слов или фраз один раз в статье не должно принести никакого вреда, все это ненужный ажиотаж.
- Игорь
Точно так. 🙂
- Игорь
Василий, я прописывал заголовок в функциях темы прямо в админке. Внешний вид - Темы, для моей темы там есть множество опций, с помощью которых можно отредактировать ту или иную область моей темы, в том числе вписать заголовок. А Вы, как я понимаю поменяли исходную шапку своей темы, не так ли? Причем поменяли полностью изображение, а на изображении уже было название Вашего ресурса. Вы же не прописывали h1 в шапку, откуда ему взяться. Посмотрите внимательнее в функциях вашей темы, может там тоже есть похожая функция. Там, где «Управление темами» посмотрите, должны быть ссылки, что-то типа «Настроить», «Опции темы» и уже там уже поищите ссылку на подобии «Название и описание сайта». В моей теме, например, очень многое можно изменить, даже цвета сайта и шапку, загрузив новое изображение. Отпишитесь в комментариях, как получилось.
- Василий
Да я поменял изображение в шапке. На тестовом сайте вернул оригинальное изображение. Все равно H1 нигде не нашел. Поставил очень похожую тему-близнеца, там тоже нет этого тега, только H2. Могут быть темы без тега H1? Потом поставил стандартную тему, на главной странице не нашел этот тега, а на странице тег H1 есть в название статьи. А как его добавить в шапку сайта не знаю.
- Игорь
Василий, почитайте внимательнее мой предыдущий ответ и через админ панель попробуйте прописать название сайта. Должна быть функция управления темой, у вас в css прописаны стили для заголовка h1, я посмотрел.
- Василий
В стандартной теме все есть. В настройках самой темы таких опций нет. Через
Админ-панель -> Темы -> Настройка и описание сайта. Там я написал Название сайта и
Краткое описание. Но тега h1 все равно нет. На тестовом сайте поставил заново эту
тему, вот адрес http://komp.vellisa.ru/. Можно зайти через Яндекс, так как он закрыт
от индексации. Раньше когда писал в Админ-панели название сайта, то оно добавлялось в шапку, но выглядело не красиво. Сейчас надписи почему-то не добавляются. - Игорь
Василий, я исследовал Вашу проблему. Дело в том, что согласно стилям css Вашей темы, название, заключенное в теги h1, просто не помещается в шапку. Попробуйте сделать следующее. Если Вы работаете с браузером Chrome, подведите курсор к изображению в шапке и кликните правой кнопкой мыши, из контекстного меню выберите «Просмотр кода элемента». В нижней половине окна увидите код html именно этого изображения, это строчка будет выделена темно-синим цветом. Эта ссылка на изображение шапки Вашей темы. Справа будут представлены стили именно для этого элемента. Кликните правой кнопкой мыши по этой ссылке и из контекстного меню выберите «Delete node». Видите, элемент удалился? Надеюсь, Вы понимаете, что после перезагрузки браузера все станет на свои места, так что экспериментировать можно сколько угодно. Этот элемент у Вас заключен в контейнер <_div class="span-11">. После удаления ссылки на изображения останется ссылка на главную страницу. В качестве анкора этой ссылки пропишите любое слово, заключенное в теги h1, например, World. То есть выглядеть это будет примерно так: заключенная в контейнер span-11 ссылка на главную <_a_href vellisa.ru_=""><_h1>World<_><_>. И тут же увидите это слово на месте изображения (которое, кстати и не нужно, поскольку там название темы, как я понимаю. Попробуйте вместо этого изображения загрузить картинку меньшего размера и снова попробуйте через админку прописать название сайта. Если не получится, будем действовать более предметно.
- Василий
Игорь, спасибо большое за помощь. Удалил я элемент, дальше как вставить не очень понятно. Методом тыка вставлял это слово, не совсем получилось, но слово было. Изменения названия сайта не получается написать, изменяю, но в шапке ничего не отображается.
А вообще возможно сделать так, чтобы у меня на основном сайте осталась изображение какое там сейчас и как-то добавить теги h1? - Игорь
Василий, немного терпения, сейчас слишком занят, как только решу проблему, не обещаю, но попробую помочь, ответ выложу в комментариях.
- Василий
Спасибо Игорь. Конечно я подожду, это не срочное дело.
- Евгений
Согласен теги н необходимая вещь и игнорировать их себе дороже. Если H1 H2 практически автоматом появляются на странице (заголовок статьи и сайта) то H3 стоит самому ручками прописывать в теле статьи.
На счет атрибута align к этим тегам спорный вариант. влияние его на продвижение пока не заметил, скорее его нет. нарушений сос стороны валидности тоже нет. Так что полагаю это на усмотрение каждого. - Игорь
Евгений, влияния на продвижение атрибута align действительно пока нет, а вот что касается валидности, то Вы погорячились. Он не рекомендуется к использованию не только в соответствии со спецификацией html 5, но и даже в соответствии с html 4.01. Вместо этого атрибута рекомендуется использование аналогичного свойства text-align, которое прописывается в css.
- Игорь
Василий, извините, что долго пришлось ждать. Только-только немного разгрузился и вот решил Вашу проблему. Следуйте моим дальнейшим инструкциям, чтобы заголовок H1 появился в шапке. Для начала необходимо отредактировать Ваше изображение в шапке. Оно у Вас находится здесь: http://vellisa.ru/wp-content/themes/cooltext643525798.png , то есть в папке с текущей темой. Загрузите его на компьютер с помощью , например. Откройте его в любом графическом редакторе, даже простая программа paint подойдет. Там сотрите простым ластиком надпись "vellisa.ru". Если этого не сделать, то будет двойная надпись, либо надпись с h1 наложится на нее, будет выглядеть некрасиво. Затем откройте с помощью notepad++ файл header.php, который отвечает за шапку, найдите там строчку.
Всем-всем привет!
— это работа комплексная, требующая внимания к каждой мелочи. Даже неправильное использование заголовков (теги H1, H2, H3) на страницах сайта может мешать нормальному продвижению в поисковых системах. Сегодня мы как раз об этом и поговорим.
Все, что описано в вышеперечисленных уроках, пригодиться сегодня.
Правила использования заголовков
В мире SEO существуют некие правила использования тегов H1, H2, H3 и ниже, которые желательно бы соблюдать на всех страницах:
- На странице должен быть только один единственный заголовок первого уровня (H1);
- Заголовок H1 не должен совпадать с Title страницы;
- Заголовки H2, H3, H4 должны использоваться только в внутри статьи;
- В заголовках должны использоваться только фразы, приносящие пользу, то есть, в тегах H1…H6 не должно быть бессмысленных фраз, типа: отзывы, подписаться, комментарии и т.п.;
- Соблюдайте иерархию заголовков. Заголовок второго уровня должен быть ниже H1, заголовок третьего уровня должен быть ниже первого H2. Если будет иначе, то поисковый робот, который видит только HTML-код, не правильно воспримет страницу, чего мы не хотим.
Коротко об этих правилах я уже писал в уроке, посвященному . Обязательно прочитайте, там много полезного!
Как понять правильно ли использованы заголовки?
Вы знакомы с браузером Mozilla Firefox? Наверное, да. Так вот, этот браузер, благодаря одному плагину с хорошим функционалом, предоставляет шикарные возможности для анализа страниц. Название этому плагину — RDS bar. Скачать его можно по этой ссылке , но сделать это необходимо в Firefox, поэтому, если данный браузер у Вас не установлен, быстрее скачивайте его и устанавливайте.
RDS bar можно установить и на другие браузеры, но именно в Mozilla Firefox его функционал гораздо шире.
Прежде, чем мы перейдем к анализу страниц сайта, необходимо внести небольшие настройки в плагин:
Теперь мы сможем спокойно посмотреть сколько тегов H1, H2, H3 находиться на странице, увидим лишние заголовки и будем знать, что нужно править. Увидеть все это великолепие можно, нажав на кнопку SEO-теги в RDS bar, которую только что активировали:
Как только Вы нажмете на эту кнопку, перед Вашими глазами появится небольшое сообщение:
В этом сообщении представлены , заголовок H1 и другие. Как видите, на страницах моего блога с этим все в порядке, так как исправил этот косяк неделю назад, а вот на клиентском сайте с этим все гораздо хуже.
Перечислю ошибки:
- Дублирование между заголовками H2 и H5;
- Нет заголовков третьего уровня;
- В H4 находиться мусор.
Работы предстоит много, поэтому продемонстрирую исправление ошибок на каком-нибудь одном примере. Попробую-ка изменить теги H5 на H3, чтобы соблюдалась иерархия заголовков.
Как исправить ошибки?
Для этого мне понадобятся файлы сайта (), Notepad++ и Mozilla Firefox.
- Чтобы знать, где именно находится проблемный тег и его стилевой класс, нужно воспользоваться встроенным инструментом браузера «Исследовать элемент»:
Наведите курсор на определенный элемент, нажмите правой кнопкой мыши на него и выберите пункт «Исследовать элемент». В нижней части окна появится область, где можно увидеть и стилевой класс HTML-элемента и его стили CSS:
- Посмотрите стилевой класс нужного Вам элемента и скопируйте его, чтобы потом найти его в коде страницы. В моем случае класс заголовка H2 — page-box__title:Я хочу изменить уровень заголовка H5 на H3, так как в H5 перечисляются релевантные ключевые слова.
- Далее необходимо найти в папке сайта элемент с этим классом, для этого воспользуемся встроенными функциями , а именно поиском по файлам. Откройте Notepad++, в верхнем меню найдите пункт «Поиск» и в выпадающем меню выберите «Найти в файлах»:
- В поле «Найти» ввожу стилевой класс заголовка пятого уровня (page-box__title), а в поле «Папка» указываю путь до папки с сайтом:
После того, как я нажму на кнопку «Найти все», пойдет процесс поиска файла:
- В нижней части рабочего окна Notepad++ будут представлены результаты поиска, среди которых есть и тот самый заголовок пятого уровня (H5) с классом «page-box__title»:
Чтобы перейти непосредственно к файлу в котором содержится данный заголовок, достаточно сделать двойной щелчок по результату поиска; - Далее я просто меняю теги на теги :Обязательно сохраняю файл;
- Смотрим результат на сайте:
Смотрится не очень. - Чтобы заголовки выглядели нормально, необходимо внести в файл со стилям (style.css) изменения. Так как, приведенные в примере заголовки заключены в тег , то скорее всего правило в style.css будет выглядеть так: .page-box__title > a (дочерний селектор). Поиск в Notepad++ нашел и это:
В стилевое правило нужно добавить свойство font-size (размер шрифта) с нужным, на Ваш взгляд, значением. В моем случае, оптимальным размером шрифта будет 14 px:
- Смотрим результат:
Как видите, заголовки стали отображаться нормально.
Таким же образом работаем с другими заголовками. Как только закончите работу, не забудьте отправить изменения на сервер. Сделать это можно через FileZilla, о которой рассказывал
Многие новички и не только, не знают что такое теги h1, h2, h3
– h10, зачем и для чего они нужны
сайту, как и где их можно правильно и грамотно прописать в статье, чтобы поднять посещаемость сайта, популярность и доходы. Конечно, это не самый важный фактор и показатель для продвижения сайта в поисковых системах, но он нужен сайту также для красивого дизайна и привлекательности. Вы ведь создаете свой сайт не только для поисковиков, но и для посетителей, которые приходят на ваш сайт, чтобы найти нужную и полезную им информацию.
Поэтому сегодня в статье вы сможете узнать, что такое тег h1, h2, h3 , h4, h5, h6, h7, h8, h9, h10, как и где его прописать в статье , зачем и на что он влияет. На самом же деле все просто, достаточно 1-2 раза прочитать статью, чтобы разобраться в основах данных тегов в статье и на сайте чтобы увеличить посещаемость и красоту дизайна для посетителей сайта.
Тег H1 – это главный заголовок, часто на движке WordPress, он означает заголовок вашего сайта. Например: сайт о сайтостроении или другое название, которое вы сами придумали для своего сайта. Это название сайта, как правило, имеет тег h1 и дает поисковым машинам понять, что это главное название и они, будут в поиске вводить именно данное слово или словосочетание.
H2 – этот тег имеет меньшее значение для поисковиков, чем тег h1 , его часто используют как описание сайта и поисковики также используют описание в поисковой выдаче. H1 часто имеет больший размер слова по объему, чем h2 и другие теги, поэтому и посетители видят в первую очередь заголовок сайта, а потом описание.
Но для того, чтобы увеличить посещаемость сайта и поднять позиции сайта выше, многие грамотные вебмастера делают тег h1 заголовком сайта на главной станице, а в статье h1 у них выступает как заголовок статьи. Таким образом, поисковые роботы будут выводить в статье именно название статьи, а не название сайта, поэтому у вас будет больше шансов попасть в топ 10 поисковой выдаче, чем у тех, кто оставил заголовок сайта и на главной и в статье под тегом h1.
Но еще для продвижения у нас есть тег h3 , о котором часто забывают и не придают значение. Именно h3, позволяет сайту подняться и по другим запросам. У многих на сайте есть ошибка, так как тег h3 у них прописан как заголовки рубрик, комментариев, новых публикаций и так далее. Нужно зайти в редактор сайта и найти все файлы: (index.php, page.php, single.php) и отредактировать теги h1, h2, h3, так как вы хотите.
И так вы уже поняли, что такое теги h1, h2, h3 , h4, h5, h6, h7, h8, h9, h10, которые влияют на поисковую выдачу и на количество посетителей вашего сайта. Доказано что они нужны для продвижения сайта и определенных статей. Большинство используют только теги: h1, h2 и h3. Но, к примеру h4 и h5 можно использовать как подзаголовки в самой статье или в сайт баре названии рубрик, заголовков, комментариев и так далее.
Под каким заголовком находиться то или иное слово можно узнать, зайдя в исходный код сайта или страницы: Ctrl + U. Дальше нажмите Ctrl + F и введите в строке поиска нужный тег или слово, например: h1 и вы увидите какой заголовок находиться под данным тегом.
Если возникают дополнительные вопросы о том, как правильно прописать данные теги h1, h2 и h3 , чтобы увеличить посещаемость, пишите в комментариях ниже и чаще заходите на наш сайт: , где уже есть некоторые статьи с советами по продвижению. Так как прописывание тегов в статье и на сайте далеко не самый важный показатель.
Тег H1 или заголовок H1 — это заголовок первого уровня и он имеет наибольшее значение и важность среди всех заголовков. Тег H1 должен применяться на странице один раз, располагаться выше всех других заголовков и иметь самый большой размер шрифта.
Всего тегов заголовков существует шесть. Это h1, h2, h3, h4, h5 , h6. Эти теги применяются для форматирования текста на странице. H1 самый весомый среди них как для посетителе, так и для поисковиков.
Приветствую Вас на страницах . В этой статье поделюсь с Вами некоторыми моментами при использовании заголовка H1 на страницах блога под управлением CMS WordPress.
Тег H1 — значение для продвижения
Поисковые системы используют слова и фразы, применяемые в этом теге, для определения релевантности страниц поисковому запросу. Этот тег является одним из наиболее значимых элементов релевантности. При оптимизации текста страницы важнее тега H1 поисковые системы ценят только тег TITLE.
И если быть более кратким и конкретным, то тег H1 рекомендуется использовать для заголовков страниц наших сайтов
и они должны содержать ключевую фразу, по которым эта страница продвигается.
Релевантность страниц, наряду с , является одним из самых весомых показателей для завоеваний лояльности поисковых систем.
Правила заполнения заголовка H1
Для получения хорошего результата при продвижении страниц сайта следует выполнять следующие правила его заполнения:
- Каждая страница должна содержать ОДИН тег H1.
- Тег должен содержать одно ключевое слово, по которому продвигается страница.
- Содержимое заголовка H1 должно быть уникальным для каждой страницы.
- Тег H1 не должен быть гиперссылкой.
- Желательно, чтобы тег не содержал классов, идентификаторов и других CSS элементов, а был в «голом» виде.
- Не рекомендуется использовать в содержимом знаков препинания, запятых, двоеточий и так далее.
- Размер тега не должен быть более двух предложений, лучше одно.
В html-коде заголовок страницы должен выглядеть таким образом:
Тег H1 это заголовок страницы
Наиболее типичные грубые ошибки – это отсутствие тега H1 на странице или присутствие более одного заголовка. Такие ошибки обычно характерны для страниц разделов, в которых перечислены статьи, входящие в эти разделы.
Контроль заполнения тега H1 по всему сайту проводится в рамках . Для проведения такого аудита есть немало достойных инструментов. Я же порекомендую Вам сервис от Мегаиндекса – audit.megaindex.ru .
Тег H1, применение в WordPress
Теорию повторили и теперь остановимся на некоторых технических моментах, связанных и применением тега H1 на сайтах, использующих CMS WordPress. Поскольку большинство начинающих блоггеров используют бесплатные шаблоны, то в них могут содержаться некоторые недоработки.
В частности, возможны варианты, когда заголовок страницы выделяется не тегом H1, а другим тегом, чаще всего это H2.
Эта же недоработка обнаружилась и на моем блоге, после того как я создал при помощи программы Artisteer. При просмотре HTML-кода было обнаружено, что все заголовки страниц выводятся с тегом H2.
Для устранения этого пришлось редактировать файл single.php
, именно так в большинстве шаблонов называются файлы, которые выводят информацию по каждой отдельной записи. Как я это сделал сейчас продемонстрирую наглядно.
В теле файла single.php
ищем часть кода, которая выводит заголовок. В моем случае этот выглядело таким образом:
Меняем выделенные красным цветом теги h2 на необходимые h1 и файл single.php исправлен и готов к использованию. Оказалось, что это довольно просто, поменял пару символов и готово. Теперь этот блок стал выглядеть так:
В Вашем случае выражение может быть несколько другого вида, но смысл, я надеюсь, Вы поняли.
Аналогичные изменения мне пришлось проделать с еще одним файлом темы page.php , который отвечает за вывод страниц блога. Как известно блог на CMS WordPress содержит записи и страницы.
Функции создания и изменения их находятся в разных разделах администрирования блога, они хранятся в разных местах и соответственно за их вывод отвечают и разные программные модули.
В итоге отрезок кода в файле page.php , который выводит заголовок страницы стал выглядеть вот так:
» rel=»bookmark» title=»»>
Но это было еще не все, на моем шаблоне я обнаружил, что тег H1 используется при выводе заголовка самого блога. И мне пришлось решать, оставлять все как есть или добиваться вывода заголовков страниц с тегом H1.
Ведь использование двух и более заголовков этого типа на одной странице не рекомендуется. Поисковые системы могут это расценить как переоптимизацию и сделать соответствующие выводы.
Тег H1, корректировка шаблона WordPress
В конце концов решил подправить эту недоработку, тем более, что хлопот больших это не принесло. Сейчас я Вам обо всем подробно доложу.
Для этого надо было внести поправки всего в два файла.
Первый header.php — это файл вывода заголовка блога.
Второй style.css — файл описания стилей блога.
Изменения header.php
Находим в header.php фрагмент, который выводит заголовок блога и меняем тег заголовка h1 (выделил красным цветом те символы, которые изменяю) на тег абзаца p . В результате получили такой код.
Изменения в файле style.css
Синим цветом я выделил наименование класса css, который нам придется подправить в файле style.css , чтобы шрифт и размер вывода заголовка блога остался прежним, таким же как и до изменений. Далее открываем файл стилей, ищем поиском необходимый класс «art-Logo-name», фрагмент ниже
h1 .art-Logo-name, h1 .art-Logo-name a, h1 .art-Logo-name a:link, h1 .art-Logo-name a:visited, h1 .art-Logo-name a:hover
{
font-size: 29px;
text-decoration: none;
padding:0;
margin:0;
color: #E0EDF0 !important;
}
Все выделенные красным цветом h1 меняю на p и получаю в результате
p .art-Logo-name, p .art-Logo-name a, p .art-Logo-name a:link, p .art-Logo-name a:visited, p .art-Logo-name a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 29px;
text-decoration: none;
padding:0;
margin:0;
color: #E0EDF0 !important;
}
Вот, собственно и все, что я хотел рассказать Вам о теге H1, как одном из элементов .
Замечу только, что все работы я проводил на тестовом поддомене
, чтобы посетители моего блога не испытывали затруднений при возникновении проблем, которые могут возникнуть при подобного рода манипуляциях. Да и с точки зрения безопасности и сохранности функционала сайта это будет правильным решением.
В заключение хочу Вам предложить посмотреть небольшое видео, оно, правда, озвучено на английском языке, но мне все было понятно, надеюсь и Вам будет несложно разобраться. Этот ролик неплохо дополняет текст статьи и для новичков или тех, кто не силен в программировании будет неплохим подспорьем. Приятного просмотра.
На этом позволю себе закончить, а Вам пожелать успехов.
Заголовочные теги
...
должны быть на каждой странице сайта. Важность каждого заголовка зависит от цифры:
- самые важные заголовочные теги
- менее значимые чем первый
...
- последние по важности
- самые важные заголовочные теги - менее значимые чем первый ... - последние по важности
К этим тегам нужно относится с осторожностью, поскольку они оказывают больше влияние на ранжирование сайта . При грамотном использовании тегов
...
зачастую можно добиваться хороших позиций сайта по запросам только на внутренних факторах. И обратная ситуация: в случае неправильного использования можно попасть под санкции поисковых систем. В этой статье мы как раз и поговорим как правильно использовать эти теги.
Синтаксис тегов ..
Название статьи
Подзаголовок1
...Подзаголовок2
Подзаголовок3_1
...Подзаголовок3_N
Подзаголовок3
и т.д.
Каждый заголовок по умолчанию имеет разный размер. Например, код
Заголовок h1
Заголовок h2
Заголовок h3
Заголовок h4
Заголовок h5
Заголовок h6
На странице превращается в следующее:
Значимость тегов ..
По весу и значимости в продвижение сайтов заголовочные теги h1-h6 находятся на втором месте после тега