Заголовки h1-h6: детальный обзор, примеры. Анатомия заголовков H1-H6 для оформления и структуризации контента
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
В виду последних событий в мире SEO, текстовые факторы стали иметь значительный вес в ранжировании. И если еще пару лет назад можно было махнуть рукой на оформление текста, то сейчас вы за это поплатитесь.
Итак, начнем с азов - .
Мета тег H1: пример оформления и основная информация
Предлагает 6 разноуровневых заголовков, которые обозначают то, насколько важен текстовый блок, идущий после заголовка.
Таким образом, тег
является самым важным заголовком первого уровня, а тег обозначает заголовки шестого уровня, наименее значительные.
По умолчанию,
тег заголовка h1
отображается самым крупным шрифтом и выделяется «жирненьким», заголовки, которые ниже рангом, соответственно, должны быть меньше.
Теги заголовков относят к блочным элементам: тег
всегда начинается с новой строки, а уже за ним на следующей строке идут другие элементы. Более того, чтобы ваш текст эстетично выглядел, перед и после заголовков рекомендую делать отступ.
Как вставить тег заголовка H1 в текст на сайте?
Заголовок первого уровня
Использование ключа в теге: оптимизация тега H1
Мета теги h1
-h6 обязательно следует использовать по назначению, неукоснительно соблюдая иерархию.
Дело в том, что поисковые роботы очень трепетно относятся к заголовкам и тому, что в них содержится. Важность и степень внимания поисковика определяются уровнем заголовка (понижается от h1 до h6). Поэтому мы настоятельно рекомендуем
использовать ключ в теге h1
и фразы в тексте заголовков.
Тег заголовка
(заголовок первого уровня) имеет самый большой вес, конечно же. Поэтому к его текстовому содержанию нужно отнестись с особой серьезностью.
- Вставить тег
можно только вверху страницы сайта, над заголовками других уровней. Также во многих админках есть специальное поле для заголовка h1.
- Следует избегать хаотичного использования заголовков разных уровней и размещать их «как повезет». Поисковику (да, и пользователям) это вряд ли понравится.
- Ни в коем случае не
используйте мета тег
более одного раза на странице.
- По-умолчанию в различных браузерах заголовки выглядят по-разному: отличаются размерами шрифта и отступами. Посему советуем вам отрегулировать эти параметры при помощи стилей. НО! Не перебодритесь с уменьшением шрифта, т.к. поисковые роботы обращают на это внимание. Также не рекомендуем делать размер шрифта заголовка меньше, чем основной текст.
- Делать больший размер шрифта заголовка низкого уровня также не советуем. Если ваш
будет больше, чем , то поисковой робот отнесется к этому негативно.
- И пожалуйста, перестаньте использовать теги выделения (strong, em, b, i) в оформлении ваших заголовков. Cодержание тегов заголовков имеет большее влияние на релевантность страницы по сравнению тегами выделения.
По мнению большинства сеошников (и мы к ним присоединяемся) содержание текста внутри тегов strong (жирненький текст) по степени значимости приблизительно соответствует содержанию заголовка уровня h5. А это так себе уровень.
- Использование ключа в теге h1
обязательно! Лучше всего, если это будет основная ключевая фраза (ключевики, которые входят вовсе другие ключевики в семантике на данную страницу).
- Текстовое содержание заголовка должно отличаться от тега title.
Как проверить тег h1 на странице
Чтобы проверить сколько у вас там получилось главных заголовков и исправить ситуацию, в которой их окажется больше одного, достаточно просто открыть код страницы.
Проверить количество тегов h1
можно как с помощью браузера, так и в админке. При этом никаких дополнительных расширений не требуется.
Ctrl + Shift + C или F12
Горячие клавиши, которые помогут вам открыть код страницы.
Можно ли не использовать тег h1 и другие подзаголовки?
Этот вопрос я несколько раз встречала в сети и хочу дать на него развернутый ответ. А поможет мне в этом крутой SEO специалист нашей студии Олег Васильев.
В сфере поисковой оптимизации очень сложно дать однозначные ответы на вопросы. Это далеко не связано с компетентностью специалиста, хотя доля правды в этом есть. Каждый вопрос, предположительно, должен преследовать достижение какой-либо цели. Исходя из этого ответы на вопросы уже могут разниться, и вы можете получить совсем другой результат.
Глобальная цель поисковых систем, таких как Google, Yandex, довольно проста - необходимо предоставить пользователю максимально полезную информацию относительно введенного запроса. Поисковики достигают ее, исследуя сайт по ряду факторов. Чтобы ваш сайт показали пользователю вы должны максимально соответствовать этим факторам, чтобы поисковая машина решила, что достигла своей глобальной цели.
Одним из критериев успешного ранжирования является соответствующая запросам пользователя, актуальная и правильно структурированная информация.
Что касается структуры, то именно она помогает пользователю быстро находить искомую информацию. Для этих целей информацию нужно разделять на небольшие абзацы, использовать списки (там, где это нужно), заголовки и подзаголовки.
Заголовок h1 помогает пользователю понять общий смысл содержания страницы. Как правило, текст на странице имеет вполне конкретную смысловую единицу, она одна, поэтому и главный заголовок должен быть один. Далее контент, если структура предполагает, можно разбить на небольшие смысловые блоки, и каждый блок будет иметь свой подзаголовок. Очень важно соблюдать вложенность, то есть после после H1 необходимо использовать H2, а после H2 используется H3. Все вполне логично.
Заголовки и подзаголовки должны нести смысловую нагрузку и не использоваться для других целей.
А теперь вернемся к вопросу:
Можно ли не использовать тег h1 и другие подзаголовки?
Ответ очевиден: Можно, если вам не особо важно продвижение вашего сайта в сети.
Здравствуйте, друзья! Рады приветствовать вас на блоге Андрея с Дашей – Thebizfromscratch. Что-то давно мы ничего не писали о SEO и в этой статье хотим наверстать упущенное, ведь тема на сегодня – Влияние заголовков H1, H2 – H6 на продвижение сайта. Мы расскажем, по каким правилам и принципам прописываем заголовки на своём блоге и надеемся, что наш опыт окажется для вас полезным.
Как правильно расставлять мета-теги H1, H2…H6
Итак, оформляя публикацию, мы прописываем мета-теги в следующем порядке:
Является наиболее значимым заголовком, поэтому в теги h1 принято заключать желательно разбавленный нейтральными словами основной поисковой ключ, т.е. разбавленный title.
Следующий по значимости заголовок, с помощью которого выделяют подобранный к основному запросу низкочастотный запрос.
- H3, H4,H5, H6
По сути, не имеют особого влияния на продвижение. Однако включение ключивиков в них может привести к переоптимизации, что вызовет лишь негативный отклик у поисковых ботов. Поэтому данные мета-теги мы используем только для красивого структурирования статьи. Чтобы посетителям было удобнее читать и сразу понимать, где заканчивается одна мысль и начинается другая. Тем более, не забывайте, что все посты пишутся исключительно для читателей и увлекаться частым повтором одних и тех же слов/фраз – не стоит.
А чтобы упомянутая выше информация правильно была понята, давайте рассмотрим пример! Пусть вы написали статью под поисковой запрос – «Как сделать сайт». Эту фразу нужно прописать в поле Title и повторить минимум 2 раза без изменений в самом тексте. Или как делают многие – повторяют поисковой запрос 1 раз на 1000 символов.
Если дальше вы нуждаетесь в выделении структуры, то смело используйте H2, содержащий низкочастотный запрос. Опять же в рамках примера – «Как качественно сделать сайт на движке WordPress». Остальные мета — теги пишите без ключей.
- Не проставляйте в заголовках ссылки на другие продвигаемые страницы. Код ссылки будет расцениваться поисковыми машинами, как ключевые слова, и только навредит ранжированию.
- Не располагайте заголовки низшего порядка над более значимыми. Первым должен следовать H1, затем H2 и далее по нарастающей. Должна вырисовываться древовидная структура.
- Рекомендуется использовать H1 единожды, H2 не более 3-х раз, а H3-H6 сколько угодно (только без ключей и только, если это необходимо).
Пожалуй, это были основные принципы и правила, которыми мы пользуемся при оформлении статей. Надеемся, что тема – влияние заголовков H1, H2 – H6 на продвижение сайта – раскрыта и вы нашли для себя полезную информацию. В случае вопросов – обязательно задавайте их в комментариях, постараемся помочь.
Здравствуйте, уважаемые читатели блога сайт. Сегодня мы начнем разговор про теги в языке Html, а именно про заголовки H1, H2, H3, H4, H5, H6, про абзацы P и переносы строки Br, а также про тэг горизонтальной линии Hr, на примере которого мы рассмотрим использование атрибутов и посмотрим, где можно будет узнать все возможные для каждого элемента атрибуты и подглядеть синтаксис значений для них.
Главное отличие строчных и блочных тегов состоит в том, что первые могут следовать друг за другом по ширине, пока не закончится доступное для этого место, а затем они будут перенесены на следующую строку.
Блочные же элементы, по умолчанию, пытаются занять все доступное место по ширине
и поэтому следующий блочный элемент будет обязательно располагаться на другой строке.
Давайте теперь начнем планомерное изучение всех возможных тегов в Html и при этом будем обращать особое внимание на то, к какому именно типу они относятся, чтобы четко представлять для себя возможности их правильного (валидного) использования. Упрощенная структура тэга выглядит так:
Для них предусмотрены также атрибуты (для каждого свой набор), которые позволяют добавить определенные свойства этому элементу, но об этом мы уже поговорим на конкретных примерах.
Давайте начнем рассмотрение с такого понятия, как заголовки, которые формируются с помощью парных тэгов H1, H2, H3, H4, H5, H6 (название происходит от первой буквы слова «Header», т.е. «заголовок»). Они призваны отделять друг от друга различные фрагменты текста и помечать их важность в зависимости от уровня. В современной версии языка Html все теги и все допустимые для них атрибуты заранее оговорены и описаны.
Вследствие этого, уровней у заголовков может быть только шесть и, кроме этого, элементы H1-H6 являются блочными
, т.е. стремятся занять все доступное место по ширине страницы. Но у них есть одна особенность — внутри тэгов заголовков могут находиться только строчные элементы, несмотря на то, что, например, все тот же Div позволяет включать внутри себя другие блочные тэги.
Т.о. браузер не даст вам, например, заключить внутрь заголовков одного уровня еще и заголовки другого уровня, ибо, повторюсь, они являются блочными элементами, но внутри них могут находиться только строчные
. О, как.
Заголовки разного уровня H1-H6 будут рисоваться в браузерах шрифтами разных размеров (хотя, используя CSS, вы можете задать им абсолютно любой размер, цвет и тип шрифта для отображения в браузере, но в чистом Html действуют именно такие правила):
Если рассматривать верстку сайта с точки зрения удобства его дальнейшего продвижения (), то стоит оговориться про то, что должен быть только один заголовок уровня H1 на странице
. Наверное, можно использовать и два H1, но большее их количество скорее всего вызовет негативную реакцию у поисковых систем, когда они будут вашего документа. Ваши действия могут быть расценены как спам или накрутка релевантности.
Также не рекомендуется пропускать уровни заголовков, т.е. после H1 следует использовать H2 для выделения менее важных кусков текста и т.д. Вряд ли это повлечет какие-либо серьезные санкции со стороны поисковиков, но все же лучше следовать логике в формирования уровней заголовков в Html коде.
Поисковые системы уделяют словам, заключенным в эти теги, бОльшее значение, чем словам, просто стоящим в тексте. Отсюда следует вывод, что при написании статей следует обязательно добавлять в используемые вами заголовки.
Ну, а само по себе использование заголовков в тексте статьи делает ее более наглядной и помогает читателям быстрее сориентироваться в наборе информации. Думаю, что на первое время информации будет достаточно и пора двигаться дальше.
Параграф, перенос строки и горизонтальная линия HR в Html коде
Тег P образуется от слова «paragraph», но чаще все же его называют абзацем. Они используются для смыслового выделения некоторого куска текста, включающего, как правило, несколько предложений. Между параграфами, образованными элементами P по вертикали, появляется пустое пространство, которое и позволяет отделить логические куски текста
визуально друг от друга.
Все дело в том, что человеку довольно сложно читать монолит текста, если он не разбит на отдельные небольшие фрагменты. Я так, например, вообще даже не начинаю чтение статей не разбитых в Html коде абзацами, ибо сильно напрягает.
Разбивая текст вы сильно снижаете порог утомляемости
посетителей вашего ресурса и улучшаете пользовательские факторы (время проведенное пользователем на вашем сайте и ), которые в свою очередь положительно влияют на продвижение.
Для этих же целей (удержания внимания пользователей и снижения его утомляемости при чтении статьи) в текст осуществляют , добавляют различные , а иногда, возможно, .
Кстати говоря, тег абзаца P, как вы уже, наверное, заметили, является парным, но по спецификации языка гипертекстовой разметки 4.01 закрывающий элемент для него вовсе не обязателен
. В этом случае браузер обязан будет сам сообразить, где его требуется проставить.
Так как P является блочным элементом и внутри него могут стоять только строчные. Следовательно, браузер, обнаружив открывающий тэг параграфа, разбирает код дальше и как только наткнется на следующий блочный элемент (скорее всего это будет следующий открывающий P), то тут же перед ним вставляет закрывающий тег абзаца. В стандарте Html 5 таких вольностей скорее всего уже не будет и нужно сразу привыкать закрывать все теги
и писать их только строчными буквами.
Параграф представляет из себя блочный элемент, поэтому текст внутри абзацев будет стремиться занять все доступное ему место по ширине. Т.е., если вы в коде Html документа написали четверостишие так, как это и полагается (каждая строчка отдельно), и заключили это четверостишие целиком в теги абзаца P, то в браузере вы увидите, что все ваши четыре строки сольются в одну и будут занимать по ширине все доступное для текста пространство.
Почему так происходит, мы уже довольно подробно обсудили в статье про . Благодаря этому свойству языка гипертекстовой разметки (что любое число пробельных символов в исходном коде при отображении в браузере будет заменяться на один единственный пробел) вы можете любым удобным способом форматировать ваш код, при этом не боясь нарушить его отображение на вебстранице.
Ну, а если вам нужно будет действительно написать четверостишие в общепринятом виде, то можете для этой цели использовать дополнительные Html
теги переноса строки под названием BR
(от слова «break»):
BR является строчным элементом и к тому же «пустым», т.е. одиночным (не имеет закрывавшего элемента). Вся функция BR заключается в том, что он вызывает перенос строки при отображении текста в браузере (аналогичен клавише Enter в любом текстовом редакторе).
Написание тегов BR (переноса строки) в коде никак не регламентируется. Можно написать весь текст слитно и поставить вместо пробелов в нужных местах BR, а можно сразу для наглядности в коде уже разбить текст на строки и поставить BR либо в конце строк, либо в их начале. Сути это не меняет.
HR
(аббревиатура от слов «horizontal rule», т.е. горизонтальная линия) — очень простой Html тег, который рисует горизонтальную линию (полоску) во всю ширину экрана и толщины, зависящей от того браузера, в котором она просматривается (по сути это визуальный маркер, который по аналогии с тэгами заголовков позволяет разбивать текст на логические куски для их более простого усвоения).
Он является «пустым» (одиночным), т.е. не имеет пары (закрывающего тэга). Кроме этого, HR является блочным элементом
, т.е. он занимает по умолчанию всю доступную ему ширину страницы.
Понятие атрибутов и правила их написания в Html тегах
Давайте на этом простом элементе рассмотрим такое понятие, как атрибут. Дело в том, что в теги мы можем добавлять допустимые и описанные в валидаторе WC3 для них атрибуты, тем самым придавая содержимому нужное нам свойство.
Например, если у вас идут подряд несколько параграфов (абзацев) заключенных в соответствующие теги P, то для изменения внешнего вида одного из них вам нужно всего лишь добавить в открывающий элемент P этого абзаца требуемые атрибуты. В случае одиночных (пустых) тэгов, вариантов куда добавить требуемый атрибут вообще не возникает.
Итак, первое правило — атрибуты ставятся только в открывающем теге
(закрывающий никогда ничего не содержит). В одном элементе может стоять несколько атрибутов, которые разделяются между собой и между названием тега пробелом (обязательное условие). Давайте я сразу приведу пример их использования для горизонтальной линии HR:
Итак, сначала давайте пробежимся по синтаксису атрибутов. Они вставляются в открывающий тэг, пишутся через пробел (в том числе пробел ставится и после имени элемента) и представляют из себя конструкцию, включающую название, знак «равно» и написанные в кавычках (обычно принято ставить парные двойные, но стандартом допускаются и парные одинарные кавычки) значения. Порядок следования атрибутов в Html коде тега не важен.
Там я приводил ссылку на список всех допустимых в Html тегов
. Если в этом списке щелкните по названию интересующего вас элемента (в нашем случае это HR), то попадете на страницу с подробной спецификацией именно по нему:
Все атрибуты любого тега можно разделить на три группы
:
- Общие — они могут стоять у подавляющего большинства элементов в языке Html. На приведенном чуть выше рисунке они находятся внизу и обведены красной рамочкой. Собственно, общих атрибутов немного (всего шесть), да и то, вряд ли вы будете использовать в своей практике все из них. Скорее всего только четыре — , title и style.
- Атрибуты событий — они нужны, чтобы вызвать какое-либо действие в ответ на действие пользователя или на системное событие. Они имеют большее отношение к ДжаваСкрит и на приведенном чуть выше рисунке находятся в самом низу (обведены в темную рамочку).
- Уникальные — у каждого тега, как правило, имеется свой собственный набор атрибутов, некоторые из которых могут вообще не встречаться у других элементов. Если рассматривать горизонтальную линию HR, то у нее есть только четыре уникальных атрибута (align, noshade, size и width). Все остальные, указанные в тэге HR (кроме описанных чуть выше двух групп), будут браузером проигнорированы.
Примеры атрибутов в теге горизонтальной линии HR
В качестве значений различных атрибутов могут выступать как произвольные числа ( и т.п.) так и значения из заранее оговоренного набора, например, как в случае align для HR — left|center|right (вы можете использовать один из трех вариантов выравнивания).
Вообще, информацию по ним в валидаторе WC3 можно получить не только в списке Html тегов, но и в списке атрибутов
, который вы найдете по приведенной ссылке.
В этом списке перечислены все возможные варианты для всех имеющихся в языке Html тегов. В колонке «Related Elements» напротив интересующего вас варианта будут приведены элементы, в которых данный атрибут может быть использован. В колонке «Type» указан тип данных, которые могут быть использованы в качестве его значения.
Например, в подчеркнутой на рисунке строке для атрибута align, для тега HR, допустимо использование только трех фиксированных значений, которые там и перечислены (left | center | right).
Еще одной очень важной колонкой является «Depr». Если напротив интересующего вас атрибута в этой колонке стоит буква D, то его использовать не рекомендуется
, а следует для его замены применять соответствующие CSS стили. При просмотре спецификации тэгов мы тоже видели, что рядом с названиями всех четырех атрибутов для HR написано слово «Deprecated» (не рекомендован к применению).
Давайте посмотрим, какие атрибуты используются с теми элементами, которые мы уже успели рассмотреть в этой статье (P, заголовки H1-H6 и HR). Для всех них можно использовать «align»
, т.к. все эти элементы являются блочными. Для строчных элементов атрибут выравнивания по ширине «align» теряет смысл.
Например, если вы добавите «align» в тег заголовка (например, H1), то сможете задать выравнивание текста заголовка. Т.е. блочный элемент будет занимать все доступное ему пространство по ширине, но содержимое этого заголовка (его текст) может быть выравнен либо по левому краю (left — используется по умолчанию), либо по правому краю (right), либо по центру (center), либо по ширине (justify — изменяется расстояние между словам, как в газетных колонках).
Тоже самое, кстати, будет справедливо и для Html тега абзаца P и для контейнера Div, если вы внимательно посмотрите на приведенный скриншот.
Для горизонтальной линии HR атрибут «align» будет означать выравнивание самой горизонтальной строки, образованной этим элементом. Но тег HR является блочным элементом и стремится занять по ширине все доступное пространство. Следовательно, имеет смысл использовать «align» в нем только в том случае, если вместе с ним вы задали значение для атрибута «width»
(ширина) меньшее ширины страницы.
В качестве значения для «width» можно использовать просто цифры (это будет задаваться ширина в пикселах), либо можно использовать проценты от общей доступной для горизонтальной линии HR ширины. Значение атрибута «size» для этого же тэга задается в цифрах, обозначающих высоту горизонтальной линии в пикселах. Давайте рассмотрим это на примере:
У тэга HR в стандарте Html 4.01 есть еще один атрибут, который называют одиночным
, т.к. он не может принимать никаких значений (он просто означает какое-то действие) — это «noshade», который запрещает горизонтальной линии отбрасывать тень:
Понятно, что все возможные атрибуты для всех возможных тегов в Html мне рассмотреть не удастся, да этого и не требуется, ибо все можно делать по аналогии — главное, понять синтаксис и саму идею. К тому же многие из них уже стали не рекомендованными к использованию, т.к. сейчас их функцию выполняют CSS стили
, о которых мы тоже очень скоро начнем подробно говорить.
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на
");">
Вам может быть интересно
Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания
Iframe и Frame - что это такое и как лучше использовать фреймы в Html
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Тег 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, как одном из элементов .
Замечу только, что все работы я проводил на тестовом поддомене
, чтобы посетители моего блога не испытывали затруднений при возникновении проблем, которые могут возникнуть при подобного рода манипуляциях. Да и с точки зрения безопасности и сохранности функционала сайта это будет правильным решением.
В заключение хочу Вам предложить посмотреть небольшое видео, оно, правда, озвучено на английском языке, но мне все было понятно, надеюсь и Вам будет несложно разобраться. Этот ролик неплохо дополняет текст статьи и для новичков или тех, кто не силен в программировании будет неплохим подспорьем. Приятного просмотра.
На этом позволю себе закончить, а Вам пожелать успехов.
» Использование заголовков H1-H6
Использование заголовков H1-H6
В данной статье мы постараемся объяснить что такое теги h1-h6 и как их правильно использовать с учётом продвижения сайта. Так как правильное использование заголовков поможет вам быстро и без особых усилий выйти на более высокие позиции в поисковых системах. Заголовки H1-H6 являются самыми важными тегами акцентирования и на ряду с мета-тегами title обладают огромным значением для правильной seo оптимизации сайта. Без этой важной связки вывести страницу в топ, в конкурентной тематике просто невозможно.
Приведем с начало некоторые правила составление заголовков в порядке их значимости:
- Используйте ключевые слова в заголовках
- Спам запрещён в заголовках любого уровня
- Тег H1 должен использоваться только один раз
- Ключи из заголовка должны реально присутствовать на странице
- Заголовок первого уровня должен быть как можно выше в коде страницы
- Указывайте важные ключевые фразы как можно ближе к началу заголовка
- Заголовки должны быть информативными и при этом не очень длинными
- Ключевые фразы в подзаголовках старайтесь составлять с учетом морфологии и синонимов
- В первом предложении после заголовка должен использоваться ключ из него
Ну давайте разберем подробнее как использовать эти теги и дадим вам несколько советов по их составлению.
Использование заголовков на странице
Теги H1-H6 предназначены для выделения заголовков страниц сайта и их можно сравнить с заголовкам книг.
Все теги заголовков парные, как в принципе практически все другие используемые в html и если вы захотите выделить ими какую то фразу, то она должна быть заключена между этими тегами. Например так:
ваша ключевая фраза между тегами
, данная конструкция предназначена для выделения главного заголовка на странице, все последующие должны использоваться аналогично с учётом убывания.
Наиболее значимым для seo является тег H1 и служит он для главного заголовка страницы. Это может быть название статьи, новости или имя товара, словом текст заключенный в H1 играет важнейшую роль и между этим тегом обязательно должна находится ключевая фраза, которая должна иметь наибольший вес на странице. Стоит заметить что заголовок H1 должен использоваться только один раз и содержать главные и самые значимые ключевые слова под которые вы и планируете продвигать эту страницу. Правила написания заголовков практически идентичны рекомендациям составления мета заголовка Title, советуем ознакомится с ними если это вы ещё не сделали.
Ещё одна важная рекомендация, мета тег title и заголовок первого уровня не должны быть идентичными и слишком длинными, не стоит перечислять там список нужных вам ключей, 3-5 слов будет вполне достаточно. В противном случае ключевые слова в заголовке получатся размыты и не будут иметь максимального веса, или еще хуже принятые поисковой системой за спам. Если поисковая система заподозрит что вы хотите её обмануть, то данная страница с высокой долей вероятности будет понижена в выдаче. Будьте предельно внимательны и не торопитесь при составлении заголовков, как говорилось выше они одни из важных факторов ранжирования.
В отличии от заголовка первого уровня другие (H2-H6) могут употребятся несколько раз на странице, но как вы уже догадались вес они имеют в порядке убывания. Эти теги используются для подзаголовков и в них также рекомендуется заключать значимые ключевые фразы в так сказать разбавленном или в уточняющем виде. Используйте в них синонимы вписывайте свой ключ с учётом морфологии, но не делайте их слишком похожими с заголовком H1. Используемые слова и фразы обязательно должны присутствовать на странице помимо заголовков и идти в логическом порядке, причем первое предложение после заголовка желательно должно максимально ему соответствовать.
Никогда не стоит делать заголовков такого плана: "Добро пожаловать на страничку..." и им подобных. Это не принесет странице ни чего хорошего и отнимет у нее львиную долю веса. Любой заголовок на вашей странице должен быть предназначен не только для посетителей сайта, но и для поисковых систем. Заголовки на странице должны быть не только информативными, но и не слишком длинными, при составлении заголовков необходимо найти золотую середину. Яндексу и Google необходимо понять о чем идет речь на странице, вставляйте в теги H1-H6 ключевые слова, но без фанатизма иначе можно сделать только хуже.
Стоит отметить что теги заголовков H1-H6 должны идти строго в порядке убывания на странице. Именно на странице а не в тексте, так как часто бывают случаи, когда например в бесплатных шаблонах это далеко не так и это также снижает вес желаемых ключевых слов. Бытует мнение что заголовки ниже H3 не имеют ни какого значения для поисковых систем и это конечно может оказаться правдой, но мы всё же рекомендуем использовать их для разметки текстового содержания, а не заголовков и блоков других элементов сайта. Для этого есть огромное количество других html-тегов.
Частые ошибки при использовании тегов заголовков
Некоторые CMS, а вернее бесплатные шаблоны для них, часто грешат тем что прописывают теги H1 не там где ему место быть с учетом правильной внутренней оптимизации. Или выделяют тегами H3 заголовки блоков и других элементов сайта, это в корне не правильно для этого в HTML существуют альтернативные теги.
Еще одна распространенная ошибка, которая присутствует в некоторых шаблонах, это ошибки верстки по отношению к seo и не следование стандарту W3C. Довольно часто можно встретить что на некоторых сайтах в теги H заключают ссылки, изображения, логотипы в шапке сайта и т.д. Что плохо отражается на всём сайте в целом.
Ну последняя наиболее часто встречающаяся ошибка это то что, при использовании визуальных редакторов в админке, владельцы сайтов частенько оставляют в тексте не желая того пустые заголовки, не закрывают эти теги, что может сбить с толку ботов поисковой системы и такие страницы обязательно будут понижены в выдаче.
Мы привели 3 наиболее частые ошибки при использовании заголовков, конечно есть и другие, но они встречаются не на столько часто и поэтому были пропущены. Обязательно проверьте свои страницы на сайте на наличие данных ошибок и обязательно устраните их и тем самым ваш сайт будет более привлекательным для поисковых систем.
Теги заголовков относят к блочным элементам: тег
всегда начинается с новой строки, а уже за ним на следующей строке идут другие элементы. Более того, чтобы ваш текст эстетично выглядел, перед и после заголовков рекомендую делать отступ.
Как вставить тег заголовка H1 в текст на сайте?
Заголовок первого уровня
Использование ключа в теге: оптимизация тега H1
Мета теги h1 -h6 обязательно следует использовать по назначению, неукоснительно соблюдая иерархию.
Дело в том, что поисковые роботы очень трепетно относятся к заголовкам и тому, что в них содержится. Важность и степень внимания поисковика определяются уровнем заголовка (понижается от h1 до h6). Поэтому мы настоятельно рекомендуем
использовать ключ в теге h1 и фразы в тексте заголовков.Тег заголовка
(заголовок первого уровня) имеет самый большой вес, конечно же. Поэтому к его текстовому содержанию нужно отнестись с особой серьезностью.
- Вставить тег
можно только вверху страницы сайта, над заголовками других уровней. Также во многих админках есть специальное поле для заголовка h1.
- Следует избегать хаотичного использования заголовков разных уровней и размещать их «как повезет». Поисковику (да, и пользователям) это вряд ли понравится.
- Ни в коем случае не
используйте мета тег
более одного раза на странице. - По-умолчанию в различных браузерах заголовки выглядят по-разному: отличаются размерами шрифта и отступами. Посему советуем вам отрегулировать эти параметры при помощи стилей. НО! Не перебодритесь с уменьшением шрифта, т.к. поисковые роботы обращают на это внимание. Также не рекомендуем делать размер шрифта заголовка меньше, чем основной текст.
- Делать больший размер шрифта заголовка низкого уровня также не советуем. Если ваш
будет больше, чем
, то поисковой робот отнесется к этому негативно.
- И пожалуйста, перестаньте использовать теги выделения (strong, em, b, i) в оформлении ваших заголовков. Cодержание тегов заголовков имеет большее влияние на релевантность страницы по сравнению тегами выделения.
По мнению большинства сеошников (и мы к ним присоединяемся) содержание текста внутри тегов strong (жирненький текст) по степени значимости приблизительно соответствует содержанию заголовка уровня h5. А это так себе уровень.
- Использование ключа в теге h1 обязательно! Лучше всего, если это будет основная ключевая фраза (ключевики, которые входят вовсе другие ключевики в семантике на данную страницу).
- Текстовое содержание заголовка должно отличаться от тега title.
Как проверить тег h1 на странице
Чтобы проверить сколько у вас там получилось главных заголовков и исправить ситуацию, в которой их окажется больше одного, достаточно просто открыть код страницы.
Проверить количество тегов h1
можно как с помощью браузера, так и в админке. При этом никаких дополнительных расширений не требуется.
Ctrl + Shift + C или F12
Горячие клавиши, которые помогут вам открыть код страницы.
Можно ли не использовать тег h1 и другие подзаголовки?
Этот вопрос я несколько раз встречала в сети и хочу дать на него развернутый ответ. А поможет мне в этом крутой SEO специалист нашей студии Олег Васильев.
В сфере поисковой оптимизации очень сложно дать однозначные ответы на вопросы. Это далеко не связано с компетентностью специалиста, хотя доля правды в этом есть. Каждый вопрос, предположительно, должен преследовать достижение какой-либо цели. Исходя из этого ответы на вопросы уже могут разниться, и вы можете получить совсем другой результат.
Глобальная цель поисковых систем, таких как Google, Yandex, довольно проста - необходимо предоставить пользователю максимально полезную информацию относительно введенного запроса. Поисковики достигают ее, исследуя сайт по ряду факторов. Чтобы ваш сайт показали пользователю вы должны максимально соответствовать этим факторам, чтобы поисковая машина решила, что достигла своей глобальной цели.
Одним из критериев успешного ранжирования является соответствующая запросам пользователя, актуальная и правильно структурированная информация.
Что касается структуры, то именно она помогает пользователю быстро находить искомую информацию. Для этих целей информацию нужно разделять на небольшие абзацы, использовать списки (там, где это нужно), заголовки и подзаголовки.
Заголовок h1 помогает пользователю понять общий смысл содержания страницы. Как правило, текст на странице имеет вполне конкретную смысловую единицу, она одна, поэтому и главный заголовок должен быть один. Далее контент, если структура предполагает, можно разбить на небольшие смысловые блоки, и каждый блок будет иметь свой подзаголовок. Очень важно соблюдать вложенность, то есть после после H1 необходимо использовать H2, а после H2 используется H3. Все вполне логично.
Заголовки и подзаголовки должны нести смысловую нагрузку и не использоваться для других целей.
А теперь вернемся к вопросу:
Можно ли не использовать тег h1 и другие подзаголовки?
Ответ очевиден: Можно, если вам не особо важно продвижение вашего сайта в сети.
Здравствуйте, друзья! Рады приветствовать вас на блоге Андрея с Дашей – Thebizfromscratch. Что-то давно мы ничего не писали о SEO и в этой статье хотим наверстать упущенное, ведь тема на сегодня – Влияние заголовков H1, H2 – H6 на продвижение сайта. Мы расскажем, по каким правилам и принципам прописываем заголовки на своём блоге и надеемся, что наш опыт окажется для вас полезным.
Как правильно расставлять мета-теги H1, H2…H6
Итак, оформляя публикацию, мы прописываем мета-теги в следующем порядке:
Является наиболее значимым заголовком, поэтому в теги h1 принято заключать желательно разбавленный нейтральными словами основной поисковой ключ, т.е. разбавленный title.
Следующий по значимости заголовок, с помощью которого выделяют подобранный к основному запросу низкочастотный запрос.
- H3, H4,H5, H6
По сути, не имеют особого влияния на продвижение. Однако включение ключивиков в них может привести к переоптимизации, что вызовет лишь негативный отклик у поисковых ботов. Поэтому данные мета-теги мы используем только для красивого структурирования статьи. Чтобы посетителям было удобнее читать и сразу понимать, где заканчивается одна мысль и начинается другая. Тем более, не забывайте, что все посты пишутся исключительно для читателей и увлекаться частым повтором одних и тех же слов/фраз – не стоит.
А чтобы упомянутая выше информация правильно была понята, давайте рассмотрим пример! Пусть вы написали статью под поисковой запрос – «Как сделать сайт». Эту фразу нужно прописать в поле Title и повторить минимум 2 раза без изменений в самом тексте. Или как делают многие – повторяют поисковой запрос 1 раз на 1000 символов.
Если дальше вы нуждаетесь в выделении структуры, то смело используйте H2, содержащий низкочастотный запрос. Опять же в рамках примера – «Как качественно сделать сайт на движке WordPress». Остальные мета — теги пишите без ключей.
- Не проставляйте в заголовках ссылки на другие продвигаемые страницы. Код ссылки будет расцениваться поисковыми машинами, как ключевые слова, и только навредит ранжированию.
- Не располагайте заголовки низшего порядка над более значимыми. Первым должен следовать H1, затем H2 и далее по нарастающей. Должна вырисовываться древовидная структура.
- Рекомендуется использовать H1 единожды, H2 не более 3-х раз, а H3-H6 сколько угодно (только без ключей и только, если это необходимо).
Пожалуй, это были основные принципы и правила, которыми мы пользуемся при оформлении статей. Надеемся, что тема – влияние заголовков H1, H2 – H6 на продвижение сайта – раскрыта и вы нашли для себя полезную информацию. В случае вопросов – обязательно задавайте их в комментариях, постараемся помочь.
Здравствуйте, уважаемые читатели блога сайт. Сегодня мы начнем разговор про теги в языке Html, а именно про заголовки H1, H2, H3, H4, H5, H6, про абзацы P и переносы строки Br, а также про тэг горизонтальной линии Hr, на примере которого мы рассмотрим использование атрибутов и посмотрим, где можно будет узнать все возможные для каждого элемента атрибуты и подглядеть синтаксис значений для них.
Главное отличие строчных и блочных тегов состоит в том, что первые могут следовать друг за другом по ширине, пока не закончится доступное для этого место, а затем они будут перенесены на следующую строку.
Блочные же элементы, по умолчанию, пытаются занять все доступное место по ширине и поэтому следующий блочный элемент будет обязательно располагаться на другой строке.
Давайте теперь начнем планомерное изучение всех возможных тегов в Html и при этом будем обращать особое внимание на то, к какому именно типу они относятся, чтобы четко представлять для себя возможности их правильного (валидного) использования. Упрощенная структура тэга выглядит так:
Для них предусмотрены также атрибуты (для каждого свой набор), которые позволяют добавить определенные свойства этому элементу, но об этом мы уже поговорим на конкретных примерах.
Давайте начнем рассмотрение с такого понятия, как заголовки, которые формируются с помощью парных тэгов H1, H2, H3, H4, H5, H6 (название происходит от первой буквы слова «Header», т.е. «заголовок»). Они призваны отделять друг от друга различные фрагменты текста и помечать их важность в зависимости от уровня. В современной версии языка Html все теги и все допустимые для них атрибуты заранее оговорены и описаны.
Вследствие этого, уровней у заголовков может быть только шесть и, кроме этого, элементы H1-H6 являются блочными , т.е. стремятся занять все доступное место по ширине страницы. Но у них есть одна особенность — внутри тэгов заголовков могут находиться только строчные элементы, несмотря на то, что, например, все тот же Div позволяет включать внутри себя другие блочные тэги.
Т.о. браузер не даст вам, например, заключить внутрь заголовков одного уровня еще и заголовки другого уровня, ибо, повторюсь, они являются блочными элементами, но внутри них могут находиться только строчные . О, как.
Заголовки разного уровня H1-H6 будут рисоваться в браузерах шрифтами разных размеров (хотя, используя CSS, вы можете задать им абсолютно любой размер, цвет и тип шрифта для отображения в браузере, но в чистом Html действуют именно такие правила):
Если рассматривать верстку сайта с точки зрения удобства его дальнейшего продвижения (), то стоит оговориться про то, что должен быть только один заголовок уровня H1 на странице . Наверное, можно использовать и два H1, но большее их количество скорее всего вызовет негативную реакцию у поисковых систем, когда они будут вашего документа. Ваши действия могут быть расценены как спам или накрутка релевантности.
Также не рекомендуется пропускать уровни заголовков, т.е. после H1 следует использовать H2 для выделения менее важных кусков текста и т.д. Вряд ли это повлечет какие-либо серьезные санкции со стороны поисковиков, но все же лучше следовать логике в формирования уровней заголовков в Html коде.
Поисковые системы уделяют словам, заключенным в эти теги, бОльшее значение, чем словам, просто стоящим в тексте. Отсюда следует вывод, что при написании статей следует обязательно добавлять в используемые вами заголовки.
Ну, а само по себе использование заголовков в тексте статьи делает ее более наглядной и помогает читателям быстрее сориентироваться в наборе информации. Думаю, что на первое время информации будет достаточно и пора двигаться дальше.
Параграф, перенос строки и горизонтальная линия HR в Html коде
Тег P образуется от слова «paragraph», но чаще все же его называют абзацем. Они используются для смыслового выделения некоторого куска текста, включающего, как правило, несколько предложений. Между параграфами, образованными элементами P по вертикали, появляется пустое пространство, которое и позволяет отделить логические куски текста визуально друг от друга.
Все дело в том, что человеку довольно сложно читать монолит текста, если он не разбит на отдельные небольшие фрагменты. Я так, например, вообще даже не начинаю чтение статей не разбитых в Html коде абзацами, ибо сильно напрягает.
Разбивая текст вы сильно снижаете порог утомляемости посетителей вашего ресурса и улучшаете пользовательские факторы (время проведенное пользователем на вашем сайте и ), которые в свою очередь положительно влияют на продвижение.
Для этих же целей (удержания внимания пользователей и снижения его утомляемости при чтении статьи) в текст осуществляют , добавляют различные , а иногда, возможно, .
Кстати говоря, тег абзаца P, как вы уже, наверное, заметили, является парным, но по спецификации языка гипертекстовой разметки 4.01 закрывающий элемент для него вовсе не обязателен . В этом случае браузер обязан будет сам сообразить, где его требуется проставить.
Так как P является блочным элементом и внутри него могут стоять только строчные. Следовательно, браузер, обнаружив открывающий тэг параграфа, разбирает код дальше и как только наткнется на следующий блочный элемент (скорее всего это будет следующий открывающий P), то тут же перед ним вставляет закрывающий тег абзаца. В стандарте Html 5 таких вольностей скорее всего уже не будет и нужно сразу привыкать закрывать все теги и писать их только строчными буквами.
Параграф представляет из себя блочный элемент, поэтому текст внутри абзацев будет стремиться занять все доступное ему место по ширине. Т.е., если вы в коде Html документа написали четверостишие так, как это и полагается (каждая строчка отдельно), и заключили это четверостишие целиком в теги абзаца P, то в браузере вы увидите, что все ваши четыре строки сольются в одну и будут занимать по ширине все доступное для текста пространство.
Почему так происходит, мы уже довольно подробно обсудили в статье про . Благодаря этому свойству языка гипертекстовой разметки (что любое число пробельных символов в исходном коде при отображении в браузере будет заменяться на один единственный пробел) вы можете любым удобным способом форматировать ваш код, при этом не боясь нарушить его отображение на вебстранице.
Ну, а если вам нужно будет действительно написать четверостишие в общепринятом виде, то можете для этой цели использовать дополнительные Html
теги переноса строки под названием BR
(от слова «break»):
BR является строчным элементом и к тому же «пустым», т.е. одиночным (не имеет закрывавшего элемента). Вся функция BR заключается в том, что он вызывает перенос строки при отображении текста в браузере (аналогичен клавише Enter в любом текстовом редакторе).
Написание тегов BR (переноса строки) в коде никак не регламентируется. Можно написать весь текст слитно и поставить вместо пробелов в нужных местах BR, а можно сразу для наглядности в коде уже разбить текст на строки и поставить BR либо в конце строк, либо в их начале. Сути это не меняет.
HR (аббревиатура от слов «horizontal rule», т.е. горизонтальная линия) — очень простой Html тег, который рисует горизонтальную линию (полоску) во всю ширину экрана и толщины, зависящей от того браузера, в котором она просматривается (по сути это визуальный маркер, который по аналогии с тэгами заголовков позволяет разбивать текст на логические куски для их более простого усвоения).
Он является «пустым» (одиночным), т.е. не имеет пары (закрывающего тэга). Кроме этого, HR является блочным элементом , т.е. он занимает по умолчанию всю доступную ему ширину страницы.
Понятие атрибутов и правила их написания в Html тегах
Давайте на этом простом элементе рассмотрим такое понятие, как атрибут. Дело в том, что в теги мы можем добавлять допустимые и описанные в валидаторе WC3 для них атрибуты, тем самым придавая содержимому нужное нам свойство.
Например, если у вас идут подряд несколько параграфов (абзацев) заключенных в соответствующие теги P, то для изменения внешнего вида одного из них вам нужно всего лишь добавить в открывающий элемент P этого абзаца требуемые атрибуты. В случае одиночных (пустых) тэгов, вариантов куда добавить требуемый атрибут вообще не возникает.
Итак, первое правило — атрибуты ставятся только в открывающем теге (закрывающий никогда ничего не содержит). В одном элементе может стоять несколько атрибутов, которые разделяются между собой и между названием тега пробелом (обязательное условие). Давайте я сразу приведу пример их использования для горизонтальной линии HR:
Итак, сначала давайте пробежимся по синтаксису атрибутов. Они вставляются в открывающий тэг, пишутся через пробел (в том числе пробел ставится и после имени элемента) и представляют из себя конструкцию, включающую название, знак «равно» и написанные в кавычках (обычно принято ставить парные двойные, но стандартом допускаются и парные одинарные кавычки) значения. Порядок следования атрибутов в Html коде тега не важен.
Там я приводил ссылку на список всех допустимых в Html тегов . Если в этом списке щелкните по названию интересующего вас элемента (в нашем случае это HR), то попадете на страницу с подробной спецификацией именно по нему:
Все атрибуты любого тега можно разделить на три группы :
- Общие — они могут стоять у подавляющего большинства элементов в языке Html. На приведенном чуть выше рисунке они находятся внизу и обведены красной рамочкой. Собственно, общих атрибутов немного (всего шесть), да и то, вряд ли вы будете использовать в своей практике все из них. Скорее всего только четыре — , title и style.
- Атрибуты событий — они нужны, чтобы вызвать какое-либо действие в ответ на действие пользователя или на системное событие. Они имеют большее отношение к ДжаваСкрит и на приведенном чуть выше рисунке находятся в самом низу (обведены в темную рамочку).
- Уникальные — у каждого тега, как правило, имеется свой собственный набор атрибутов, некоторые из которых могут вообще не встречаться у других элементов. Если рассматривать горизонтальную линию HR, то у нее есть только четыре уникальных атрибута (align, noshade, size и width). Все остальные, указанные в тэге HR (кроме описанных чуть выше двух групп), будут браузером проигнорированы.
Примеры атрибутов в теге горизонтальной линии HR
В качестве значений различных атрибутов могут выступать как произвольные числа ( и т.п.) так и значения из заранее оговоренного набора, например, как в случае align для HR — left|center|right (вы можете использовать один из трех вариантов выравнивания).
Вообще, информацию по ним в валидаторе WC3 можно получить не только в списке Html тегов, но и в списке атрибутов , который вы найдете по приведенной ссылке.
В этом списке перечислены все возможные варианты для всех имеющихся в языке Html тегов. В колонке «Related Elements» напротив интересующего вас варианта будут приведены элементы, в которых данный атрибут может быть использован. В колонке «Type» указан тип данных, которые могут быть использованы в качестве его значения.
Например, в подчеркнутой на рисунке строке для атрибута align, для тега HR, допустимо использование только трех фиксированных значений, которые там и перечислены (left | center | right).
Еще одной очень важной колонкой является «Depr». Если напротив интересующего вас атрибута в этой колонке стоит буква D, то его использовать не рекомендуется , а следует для его замены применять соответствующие CSS стили. При просмотре спецификации тэгов мы тоже видели, что рядом с названиями всех четырех атрибутов для HR написано слово «Deprecated» (не рекомендован к применению).
Давайте посмотрим, какие атрибуты используются с теми элементами, которые мы уже успели рассмотреть в этой статье (P, заголовки H1-H6 и HR). Для всех них можно использовать «align» , т.к. все эти элементы являются блочными. Для строчных элементов атрибут выравнивания по ширине «align» теряет смысл.
Например, если вы добавите «align» в тег заголовка (например, H1), то сможете задать выравнивание текста заголовка. Т.е. блочный элемент будет занимать все доступное ему пространство по ширине, но содержимое этого заголовка (его текст) может быть выравнен либо по левому краю (left — используется по умолчанию), либо по правому краю (right), либо по центру (center), либо по ширине (justify — изменяется расстояние между словам, как в газетных колонках).
Тоже самое, кстати, будет справедливо и для Html тега абзаца P и для контейнера Div, если вы внимательно посмотрите на приведенный скриншот.
Для горизонтальной линии HR атрибут «align» будет означать выравнивание самой горизонтальной строки, образованной этим элементом. Но тег HR является блочным элементом и стремится занять по ширине все доступное пространство. Следовательно, имеет смысл использовать «align» в нем только в том случае, если вместе с ним вы задали значение для атрибута «width» (ширина) меньшее ширины страницы.
В качестве значения для «width» можно использовать просто цифры (это будет задаваться ширина в пикселах), либо можно использовать проценты от общей доступной для горизонтальной линии HR ширины. Значение атрибута «size» для этого же тэга задается в цифрах, обозначающих высоту горизонтальной линии в пикселах. Давайте рассмотрим это на примере:
У тэга HR в стандарте Html 4.01 есть еще один атрибут, который называют одиночным , т.к. он не может принимать никаких значений (он просто означает какое-то действие) — это «noshade», который запрещает горизонтальной линии отбрасывать тень:
Понятно, что все возможные атрибуты для всех возможных тегов в Html мне рассмотреть не удастся, да этого и не требуется, ибо все можно делать по аналогии — главное, понять синтаксис и саму идею. К тому же многие из них уже стали не рекомендованными к использованию, т.к. сейчас их функцию выполняют CSS стили , о которых мы тоже очень скоро начнем подробно говорить.
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания
Iframe и Frame - что это такое и как лучше использовать фреймы в Html
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Тег 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, как одном из элементов .
Замечу только, что все работы я проводил на тестовом поддомене
, чтобы посетители моего блога не испытывали затруднений при возникновении проблем, которые могут возникнуть при подобного рода манипуляциях. Да и с точки зрения безопасности и сохранности функционала сайта это будет правильным решением.
В заключение хочу Вам предложить посмотреть небольшое видео, оно, правда, озвучено на английском языке, но мне все было понятно, надеюсь и Вам будет несложно разобраться. Этот ролик неплохо дополняет текст статьи и для новичков или тех, кто не силен в программировании будет неплохим подспорьем. Приятного просмотра.
На этом позволю себе закончить, а Вам пожелать успехов.
» Использование заголовков H1-H6
Использование заголовков H1-H6
В данной статье мы постараемся объяснить что такое теги h1-h6 и как их правильно использовать с учётом продвижения сайта. Так как правильное использование заголовков поможет вам быстро и без особых усилий выйти на более высокие позиции в поисковых системах. Заголовки H1-H6 являются самыми важными тегами акцентирования и на ряду с мета-тегами title обладают огромным значением для правильной seo оптимизации сайта. Без этой важной связки вывести страницу в топ, в конкурентной тематике просто невозможно.
Приведем с начало некоторые правила составление заголовков в порядке их значимости:
- Используйте ключевые слова в заголовках
- Спам запрещён в заголовках любого уровня
- Тег H1 должен использоваться только один раз
- Ключи из заголовка должны реально присутствовать на странице
- Заголовок первого уровня должен быть как можно выше в коде страницы
- Указывайте важные ключевые фразы как можно ближе к началу заголовка
- Заголовки должны быть информативными и при этом не очень длинными
- Ключевые фразы в подзаголовках старайтесь составлять с учетом морфологии и синонимов
- В первом предложении после заголовка должен использоваться ключ из него
Использование заголовков на странице
Теги H1-H6 предназначены для выделения заголовков страниц сайта и их можно сравнить с заголовкам книг. Все теги заголовков парные, как в принципе практически все другие используемые в html и если вы захотите выделить ими какую то фразу, то она должна быть заключена между этими тегами. Например так:
ваша ключевая фраза между тегами
, данная конструкция предназначена для выделения главного заголовка на странице, все последующие должны использоваться аналогично с учётом убывания.Наиболее значимым для seo является тег H1 и служит он для главного заголовка страницы. Это может быть название статьи, новости или имя товара, словом текст заключенный в H1 играет важнейшую роль и между этим тегом обязательно должна находится ключевая фраза, которая должна иметь наибольший вес на странице. Стоит заметить что заголовок H1 должен использоваться только один раз и содержать главные и самые значимые ключевые слова под которые вы и планируете продвигать эту страницу. Правила написания заголовков практически идентичны рекомендациям составления мета заголовка Title, советуем ознакомится с ними если это вы ещё не сделали.
Ещё одна важная рекомендация, мета тег title и заголовок первого уровня не должны быть идентичными и слишком длинными, не стоит перечислять там список нужных вам ключей, 3-5 слов будет вполне достаточно. В противном случае ключевые слова в заголовке получатся размыты и не будут иметь максимального веса, или еще хуже принятые поисковой системой за спам. Если поисковая система заподозрит что вы хотите её обмануть, то данная страница с высокой долей вероятности будет понижена в выдаче. Будьте предельно внимательны и не торопитесь при составлении заголовков, как говорилось выше они одни из важных факторов ранжирования.
В отличии от заголовка первого уровня другие (H2-H6) могут употребятся несколько раз на странице, но как вы уже догадались вес они имеют в порядке убывания. Эти теги используются для подзаголовков и в них также рекомендуется заключать значимые ключевые фразы в так сказать разбавленном или в уточняющем виде. Используйте в них синонимы вписывайте свой ключ с учётом морфологии, но не делайте их слишком похожими с заголовком H1. Используемые слова и фразы обязательно должны присутствовать на странице помимо заголовков и идти в логическом порядке, причем первое предложение после заголовка желательно должно максимально ему соответствовать.
Никогда не стоит делать заголовков такого плана: "Добро пожаловать на страничку..." и им подобных. Это не принесет странице ни чего хорошего и отнимет у нее львиную долю веса. Любой заголовок на вашей странице должен быть предназначен не только для посетителей сайта, но и для поисковых систем. Заголовки на странице должны быть не только информативными, но и не слишком длинными, при составлении заголовков необходимо найти золотую середину. Яндексу и Google необходимо понять о чем идет речь на странице, вставляйте в теги H1-H6 ключевые слова, но без фанатизма иначе можно сделать только хуже.
Стоит отметить что теги заголовков H1-H6 должны идти строго в порядке убывания на странице. Именно на странице а не в тексте, так как часто бывают случаи, когда например в бесплатных шаблонах это далеко не так и это также снижает вес желаемых ключевых слов. Бытует мнение что заголовки ниже H3 не имеют ни какого значения для поисковых систем и это конечно может оказаться правдой, но мы всё же рекомендуем использовать их для разметки текстового содержания, а не заголовков и блоков других элементов сайта. Для этого есть огромное количество других html-тегов.
Частые ошибки при использовании тегов заголовков
Некоторые CMS, а вернее бесплатные шаблоны для них, часто грешат тем что прописывают теги H1 не там где ему место быть с учетом правильной внутренней оптимизации. Или выделяют тегами H3 заголовки блоков и других элементов сайта, это в корне не правильно для этого в HTML существуют альтернативные теги.
Еще одна распространенная ошибка, которая присутствует в некоторых шаблонах, это ошибки верстки по отношению к seo и не следование стандарту W3C. Довольно часто можно встретить что на некоторых сайтах в теги H заключают ссылки, изображения, логотипы в шапке сайта и т.д. Что плохо отражается на всём сайте в целом.
Ну последняя наиболее часто встречающаяся ошибка это то что, при использовании визуальных редакторов в админке, владельцы сайтов частенько оставляют в тексте не желая того пустые заголовки, не закрывают эти теги, что может сбить с толку ботов поисковой системы и такие страницы обязательно будут понижены в выдаче.
Мы привели 3 наиболее частые ошибки при использовании заголовков, конечно есть и другие, но они встречаются не на столько часто и поэтому были пропущены. Обязательно проверьте свои страницы на сайте на наличие данных ошибок и обязательно устраните их и тем самым ваш сайт будет более привлекательным для поисковых систем.
