Личный кабинет        17.07.2019   

Что такое тег h1 пример. Заголовки h1-h6: детальный обзор, примеры

Многие новички и не только, не знают что такое теги 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-H6 для на сайте.

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

Цели и примеры использования

Основные 2 цель заголовков в тегах H1-H6 - оформление и структуризация контента на страницах ресурса с целью сделать его более читаемым и легко потребляемым посетителями сайта. Никаких других целей мы не должны преследовать от этих тегов.

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

Заголовки в данных тегах должны использоваться лишь для разбиения текста на логические части. Никаких выделений целых предложений и отдельных фраз.

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

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

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

Исходя из такого оформления, мы можем понять, что заголовки должны выдерживать свою иерархию при употреблении их в качестве элементом структуризации текста. Не может быть такого, что сначала идет первый заголовок H1, а затем сразу H5 или H6. После первого уровня логично и правильно будет использовать только заголовок в теге H2. Это важно, как с точки зрения самого оформления материала, так с точки зрения выдержки правильной структуры.

Поисковые системы сейчас обращают внимание на данные теги. Но не как на СЕО элементы, а как на элементы структурирования. Поэтому странно будет, если идет H1, а потом сразу H6.

При использовании данных тегов мы обязательно выдерживаем структуру. Если опускаемся на уровень вниз, то никаких прыжков через уровень. Структуру должна быть следующей: H1-H2-H3-H4-H5-H6.

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

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

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

Основы использования H1

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

  • H1 всегда один раз на каждой странице;
  • Побуждаем пользователя к прочтению материала, поэтому имеется смысл использовать цепкие слова (например, секреты, лучшие фишки и так далее);
  • Делаем отличным от тега title, который отображает название страницы в поисковой выдаче и побуждает переход на страницу сайта из поиска. Он должен быть немного отличным, но обязательно должен давать понимание того, что контекст материала на странице не изменился;
  • Употребляем ключевое слово статьи, но в разбавленной форме, а не в точном вхождении;
  • Не рекомендуется использовать знаки препинания.

Использование на практике

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

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

Если мы говорим об использовании остальных уровней заголовков H2-H6, то их уже стоит использовать в ручном режиме.

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

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

заголовок 2го уровня

заголовок 3го уровня

заголовок 4го уровня

заголовок 5го уровня
заголовок 6го уровня

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

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

Дизайн заголовков H1-H6

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

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

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

Приведу вам еще 2 примера оформленных заголовков в H1.

Как видим, это не просто жирный шрифт, а красивый фон с волнистой нижней поверхностью и подчеркнутой верхней.

Также интересное оформление можете сами посмотреть на этой странице .

Что касается заголовков H2-H6, то их не просто можно оформлять каким-то фоном, а делать им нумерацию (если используете содержание в начале страницы) в виде красивых картинок. Опять же, это не должны быть простые цифры. Вот хороший пример такой задумки.

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

Ошибки в употреблении

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

  • Больше одного H1 на странице. Это не правильно. Только один раз в каждом документе;
  • Использования тегов H1-H6 для оформление дополнительных элементов сайта. В самом начале я писал, что предназначение этих документов - оформление и структуризация контента. Поэтому, их стоит использовать только в контенте. Большинство шаблонов сайтов содержат данные теги в боковых колонках для придания стилей их названий и так далее. Ярко выражено это в шаблонах WordPress, когда название каждого виджета в сайдбаре заключено в H3 или в другие теги.Если такая ситуация имеется, то заменяете заголовочные теги в служебных элементах сайта на другие, например на тег "span";
  • Специально вписываем ключевые слова. Раньше бытовало мнение, что вписав ключевые слова в прямом вхождении в заголовки всех уровней, можно повысить их плотность и позиции такой страницы будет выше. Но сейчас это уже "карается законом" поисковых систем и накладываются санкции за спам в заголовках. Тем более, данные теги ранжируются по другим алгоритмам. Вывод: нет цели вписать ключевые слова;
  • Частое употребление точек и знаков препинания. Точки в заголовках вообще употреблять не стоит, так как это неправильно с точки зрения, как копирайтинга, так и общих правил оформления текстов. Количество знаков препинания также стараемся минимизировать, чтобы повысить читаемость заголовков. Сюда же можно отнести и большое количество слов - не делаем слишком длинные заголовки;
  • Не соблюдается выдержка структуры с точки зрения иерархии. Старайтесь соблюдать логическую цепочку в построении иерархии тегов H2-H6 на каждой странице;
  • Использование тегов H1-H6 для оформления других элементов текста, а не заголовка. Это то, о чем я говорил выше, когда некорректно настроены стили оформления каждого тега и вместо обычного выделения жирным можно использовать заголовок какого-нибудь уровня.
  • Заголовок не уместен или не несет контекст текста, который идет за ним. Чтобы научиться создавать логические заголовки, возьмите пару хорошо оформленных книг, которые вам было легко читать. Также ориентируйтесь на структуризацию контента на сайте Википедии;
  • Неиспользование заголовков H1-H6 вообще или же отсутствие на небольших текстах. Просто полное отсутствие и говорить не о чем, а вот про отсутствие на небольших страницах - момент сомнительный, так как любой текст (даже минимальные 1000 символов) имеют логическую структуру. Переход от одной темы к другой. Почему бы его не разбить на логические части подзаголовками различных уровней?

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

Кстати, сможете найти небольшой недочет по моим заголовкам на сайте? Если да, то пишите в комментарии. Данный момент не сильно заметен, но он имеется.

До встречи в следующих материалах. Все еще впереди.

С уважением, Константин Хмелев!

Здравствуйте, дорогие читатели. Сегодня хочу уделить особое внимание теме заголовков в тегах h1 h2 - h6, т.к. в ближайшее время планирую (как и обещала) несколько практических статей по редактированию заголовков в шаблонах. Но прежде, чем осваивать что-либо на практике, я считаю, нужно пусть не знать, но понимать теорию. Давайте с самого начала определимся с понятиями, с тем, что такое заголовок в HTML документах, заголовок на сайте, странице.

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

Как любая книга начинается с заголовка, так и любой документ в интернете имеет свой заголовок.

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

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

Любой документ включает в себя три основных HTML тега:



Здесь находится техническая информация о документе +
заголовок страницы в тегах
</b>Заголовок страницы<b>


Здесь находится основное содержимое сайта, статьи, которые имеют заголовки в тегах:

Заголовок сайта или статьи


Заголовок статьи


Подзаголовок статьи


Другие блоки с информацией


Другие блоки с информацией

Другие блоки с информацией


Итак, из кода выше, мы видим, что HTML документ имеет свой заголовок , в котором располагается техническая информация, здесь же находятся и мета-теги, и один из самых важных тегов в seo - , который содержит в себе <b>заголовок страницы </b>. Именно этот заголовок видит каждый пользователь на вкладке браузера. Этот заголовок не имеет прямого отношения к заголовкам, которые находятся в теле <body> документа, но между ними есть тесная .</p> <p>Второй по значимости тег в seo – и является тег заголовка <h>.</p> <p>Итак, любая поисковая система придает большое значение этому тегу. Как приводила пример с книгой, именно он (вместе с title) сообщает тему страницы, о чем она, обобщает смысл статьи. Именно этот заголовок сообщает вам, о чем будет моя статья, которую вы читаете. Мы с вами видим, что такие заголовки всегда отличаются <a href="/rates/besprovodnye-naushniki-jbl-e-naushniki-i-garnitury-jbl-vneshnii-vid-i/">внешним видом</a> от основного содержания страницы. Для этого и были придуманы <a href="/equipment/kak-dobavit-geotegi-k-fotografiyam-geolokaciya-na-android---kak-vklyuchit/">специальные теги</a>, которые отвечают за то, чтобы информация в них всегда была выделена.</p> <p>С одной стороны, тег, как бы один <h>, но с другой стороны, их шесть и все они пронумерованы в порядке своей значимости, и что очень важно, не просто значимость, а ещё и иерархия. Вот с этого момента начинается самое запутанное и непонятное – как определить значимость, что является более значимым, а что нет?</p> <p>Давайте просто рассуждать логически. Вот у нас главная страница на сайте. Как правило, главная страница отражает всю тематику сайта в целом. И в <a href="/issues-and-bugs/parametry-vybora-televizora-lazernye-tv-idealnyi-variant-pri/">идеальном варианте</a> – название сайта так же должно отражать всю тематику сайта. Значит, название сайта должно быть заголовком, причем, самым главным заголовком, т.е. в теге:</p> <blockquote><p><h1>Название сайта</h1>.</p> </blockquote> <p>Далее, не обязательно, но как правило, на <a href="/personal-account/kak-sdelat-yandeks-poiskovoi-stranicei-kak-sdelat-glavnuyu-stranicu/">главной странице</a> должно быть какое-то обращение к посетителю, и в идеальной ситуации, это обращение должно включать в себя заголовок, который в свою очередь должен содержать в себе тематику сайта (ключевое слово, отражающее тематику сайта). Значит, этот заголовок должен быть в теге:</p> <blockquote><p><h2>Заголовок статьи-обращения к посетителю</h2>.</p> </blockquote> <p>Далее, в этой статье-обращении может (а я настаиваю на том, что <b>должен </b> ) быть подзаголовок, которые ещё более раскрывает все аспекты тематики сайта. Так же включает в себя какие-то ключевые слова, которые могут быть или должны быть близки к названию сайта или заголовка статьи. Такой подзаголовок должен быть в теге:</p> <blockquote><p><h3>Подзаголовок статьи</h3>.</p> </blockquote> <p>Давайте представим такую страницу.</p> <p>Вот таким образом мы распределяем теги заголовков. Стоит заметить, что если вместо заголовка вы используете картинку-баннер, то оформлять его в тег заголовка не нужно.</p> <p>Остаются два немаловажных вопроса:</p> <p>Как использовать остальные теги – 4, 5, 6</p> <p>И нужно/можно ли использовать теги заголовков в меню/сайдбаре?</p> <p>На первый вопрос отвечаю, что использовать именно все теги заголовков не обязательно.</p> <p>На второй вопрос однозначного ответа нет. Но я имею такое мнение, что если в сайдбаре есть такой <a href="/issues-and-bugs/pochemu-ne-rabotaet-nomer-112-informacionnyi-blok/">информационный блок</a>, в котором находится информация о сайте, информация, отражающая тематику сайта, то необходимо такие блоки оформлять тегами заголовка.</p> <p>Например, это может быть блок: <i> </i>. В заголовке такого блока находится ключевое слово, которое отражает тематику всего проекта. Поэтому такой блок стоит оформить в заголовок <h4>.</p> <p>Тут может возникнуть такой вопрос: А почему его не оформить в более высокого ранга тег? Ответ так же можно попробовать получить логическим путем.</p> <p>Как правило (подчеркиваю, как правило ), современная верстка сайта имеет такую структуру:</p> <p>Заголовок сайта<br> ↓<br> Основное содержание страницы<br> ↓<br> Сайдбар<br> ↓<br> Футер/подвал страницы</p> <p>Т.е. именно в таком порядке поисковый робот видит всю информацию на странице.</p> <p><b>Второе </b>, что мы должны знать – все теги заголовков имеют свою иерархию (об этом писала выше), и не допустимо, чтобы тег третьего порядка был выше тега второго порядка.</p> <p>Казалось бы, на все вопросы ответили, и тема должна быть исчерпана, но не все так просто. Дело в том, что, как правило, внутренние страницы отличаются от главной, при этом, так же важно, чтобы они тоже были хорошо оптимизированы, чтобы мы получали с них трафик с поисковых систем. Поэтому, для них очень желательно применять свою иерархию заголовков.</p> <p>Из моей картинки в примере, если на сайте есть отдельные статьи о <i>Продвижении в поисковиках </i> и <i>Продвижении в социальных сетях </i>, то, для внутренней структура заголовков должна быть такой:</p> <p><img src='https://i0.wp.com/lh5.ggpht.com/_G92voTj-yF0/TS3-kbdapZI/AAAAAAAABEI/r7T-C94lU5I/s800/seo-zagolovka-statey%5B4%5D.gif' width="100%" loading=lazy></p> <p>Т.е. уже заголовок сайта не имеет такого важного значения, как заголовок статьи (может, мой пример, не самый наглядный, т.к. везде присутствует слово “продвижение”). Такая расстановка заголовков значительно улучшает ранжирование страниц в поисковых системах, тем самым увеличивая переходы пользователей с них.</p> <p>Выше я написала, что это <b>желательно </b>, но не надо биться головой о стенку, если это невозможно сделать. Платформы, шаблоны и знания у всех разные, и если не получается, то лучше сконцентрироваться на чем-то другом, направить свои действия на улучшение того, что лучше получается. Ведь успешное продвижение в поисковых системах зависит от совокупности целого ряда факторов. Чем больше мы уделяем внимание внутренней оптимизации, тем меньше нам требуется внешняя. Если внутренняя уже исчерпала себя, то надо переключаться на внешнюю оптимизацию.</p> <p>Данная статья направлена, в первую очередь, на понимание темы, теории. В век CMS правильно сделать заголовки не сложно, но к сожалению, для этого надо обладать более глубокими знаниями в сайтостроении и программировании. И если для основного большинства моих читателей данная статья больше для ознакомления, то для тех, кто когда-нибудь будет заказывать создание сайтов Чебоксары или в любом другом городе мира, составлять техническое задание для верстальщика, программиста, создавать свой сайт самостоятельно, сможет либо объяснить, либо применить эти знания на практике.</p><p>Например, я давно собираюсь поэкспериментировать с шаблоном, и сделать именно так, как описала в статье, потому что считаю это самым оптимальным вариантом. Но я пока не так сильна в XML (для Blogger) и в PHP (для WordPress), чтобы сходу сообразить, как для разных страниц сделать разные заголовки. Но зато, после этой статьи у меня будет больше стимула воплотить свои идеи на практике, и я обязательно расскажу вам, как это у меня получилось. Естественно, не только расскажу, но и поделюсь. </p><p><b>Статьи про то, и готовы. </b></p> <p>Если какие-то вопросы я раскрыла не достаточно полно, спрашивайте в комментариях, дополню. Пишу эти слова, т.к. чувствую, что в голове ещё что-то осталось недосказанное, но никак не могу вспомнить, что. Поэтому спрашивайте.</p> <p>Задумывались ли вы когда-нибудь о том, чтобы вести коллективный блог или хотя бы найти второго автора для своего блога. Если такие мысли вас посещают, то стоит обратить внимание на статью Недостатки нескольких авторов блога . Там же, на блоге, можете найти статью и о достоинствах.</p> <p>Желаю удачи в развитии ваших блогов.</p> <p>Добрый день, уважаемые посетители и постоянные читатели моего блога!</p><h3><span>Значение заголовка h1 для продвижения </span></h3><p>Поисковики применяют слова и фразы, используемые в этом заголовке для того, чтобы страниц конкретному ключевому запросу. Этот заголовок один из важнейших составляющих релевантности.</p><p>Однако в процессе осуществления оптимизации текста статьи поисковые системы воспринимают тег title важнее заголовка h1.</p><p><img src='https://i0.wp.com/saranchinsergey.ru/wp-content/uploads/2014/08/teg-h1-i-prodvizhenie-bloga.png' align="center" height="170" width="273" loading=lazy></p><p>Если говорить простым языком, то хочу заметить, что этот тег лучше всего стоит применять на сайтах и блогах для заголовков страниц и записей. В этих заголовках должны быть прописаны ключевые слова, которые будут способствовать продвижению в поисковиках по этим словам.</p><p>Релевантность страниц и хорошие показатели вашего веб-ресурса являются основой будущего доверия поисковиков к вашему ресурсу.</p><h2><span>Использование тега h1 в WordPress </span></h2><p>Это была чисто теоретическая часть. Теперь поговорим об основных моментах, в которых разберём использование тега h1 на веб-ресурсах под управлением системы WordPress.</p><p>Не секрет, что многие начинающие вебмастера применяют бесплатные . Но минус этих шаблонов заключается в том, что практически все они имеют ошибки и недоработки! Вот так…</p><p>Одна из таких недоработок заключается в том, что иногда для выделения заголовка страницы не используется тег h1, а прописывается другой тег, например, h2.</p><p>Как раз такую недоработку бесплатного шаблона, который называется Incredy, я и выявил на своем блоге.</p><blockquote><p>Как-то раз я решил просмотреть исходный своей статьи и совершенно случайно выявил, что все заголовки моих статей выводятся тегом h2.</p> </blockquote><p>Чтобы исправить этот недочет я занялся редактированием файла single.php. Этот файл одинаков для множества шаблонов системы WordPress.</p><p>Главной функцией single.php является вывод информации для каждой записи в блоге. Чтобы узнать о том, как я исправил этот недочет в своем шаблоне, читайте дальше.</p><p>Для устранения проблемы в содержимом файла single.php находим код, который выводит заголовок. В моем файле это отображалось вот так:</p><p><img src='https://i0.wp.com/saranchinsergey.ru/wp-content/uploads/2014/08/teg-h2-v-zagolovke-stati.png' align="center" height="78" width="327" loading=lazy></p><p>Нам нужно поменять теги h2 на нужные h1, а потом нажать кнопку «Обновить файл». Вот и все. Как видите сделать это проще простого. Вот как преобразился файл после необходимых изменений:</p><p><img src='https://i1.wp.com/saranchinsergey.ru/wp-content/uploads/2014/08/zamena-tega-na-h1.png' align="center" height="78" width="327" loading=lazy></p><p>В вашем файле этот код может выглядеть несколько иначе. Однако это не так важно, здесь главное понять основной смысл.</p><p>Похожее редактирование (замену h2 на h1) также необходимо сделать с ещё одним файлом шаблона блога, который называется page.php. Именно он выводит страницы блога.</p><p>Я думаю, вы знаете, что блог на системе WordPress включает в себя различные записи и страницы. Функции, которые осуществляют их создание и редактирование располагаются в отличных друг от друга файлах и выводят информацию с помощью разных программных модулей.</p><p>Но эта информация просто для вашего понимания.</p><p>Итак, продолжим. После изменений в файле page.php код, который отвечает за вывод заголовков страниц моего блога, стал таким:</p><p><img src='https://i1.wp.com/saranchinsergey.ru/wp-content/uploads/2014/08/zamena-h2-na-h1-v-stranitsah.png' align="center" height="62" width="338" loading=lazy></p><p>Однако и это ещё не все изменения, которые нужно было осуществить. Всё дело в том, что я выявил ещё один серьёзный недостаток.</p><p>Он заключался в том, что этот тег применялся для вывода заголовка всего блога, а это приводило к многочисленным с повторяющимся тегом h1. Поисковые системы подобную переоптимизацию не любят!</p><h3><span>Редактирование шаблона для тега h1 </span></h3><p>Для того, чтобы отредактировать шаблон WordPress и убрать вывод тега h1 из заголовка блога необходимо внести изменения в файлы: header.php (файл вывода заголовка веб-ресурса) и style.css (файл стилей веб-ресурса).</p><p>Необходимо изменить в файле header.php:</p><p><img src='https://i1.wp.com/saranchinsergey.ru/wp-content/uploads/2014/08/h1-v-zagolovke-bloga.png' align="center" height="81" width="291" loading=lazy></p><p>Найдите этот код в файле header.php, который осуществляет вывод заголовка вашего сайта или блога, а затем вместо тега h1 вставляем тег абзаца p.</p><p>После изменения наблюдаем вот такую картину:</p><p><img src='https://i0.wp.com/saranchinsergey.ru/wp-content/uploads/2014/08/zamena-h1-na-p-v-zagolovke-bloga.png' align="center" height="81" width="281" loading=lazy></p><p>Редактирование файла style.css</p><p>Чтобы размер и вид шрифта заголовка блога остался без изменений, нужно внести изменения в style.css. Открывайте этот файл и ищите стили для h1. У меня они выглядят вот так:</p><p><img src='https://i2.wp.com/saranchinsergey.ru/wp-content/uploads/2014/08/teg-h1-v-tablitse-stiley-bloga.png' align="center" height="170" width="273" loading=lazy></p><p>Затем замените тег h1 на тег p и отредактируйте размер шрифта:</p><p><img src='https://i2.wp.com/saranchinsergey.ru/wp-content/uploads/2014/08/zamena-tega-h1-na-p-v-tablitse-stiley-bloga.png' align="center" height="170" width="273" loading=lazy></p><h2><span>Html тег h1 для главной страницы блога </span></h2><p>На главной странице блога тег H1 должен быть прописан в заголовке или описании блога, а H2 в заголовках статей.</p><p>Но как это осуществить? У нас ведь в записях главный тег используется для заголовков статей.</p><p>Открывает файл index.php для редактирования и находим строчку вида:</p><p>У вас она может отображаться несколько иначе, но смысл один и тот же. Здесь важно проследить, чтобы в этой строке был прописан тег h2, как на скриншоте вверху.</p><p>Если выводится через другой тег, — пропишите h2 и обновите файл.</p><p>Теперь про H1</p><blockquote><p>Как я уже отметил, h1 должен быть прописан на главной странице в названии или описании блога. Он должен содержать ключевые слова, отражающие содержание всего веб-ресурса.</p> </blockquote><p>Но это не всё.</p><p>Если мы просто пропишем заголовок или описание блога через тег h1, то он будет отображаться на всех страницах многочисленных статей блога.</p><p>Это приведёт к дублированию тега h1, что не есть хорошо! Поисковики это не любят… Поэтому предлагаю своё решение.</p><p>Необходимо добавить условие в виде кода php, при котором этот тег будет прописываться в заголовке блога только на главной странице, а на других страницах в статьях будет отсутствовать.</p><p>А вот и само условие:</p> <span><?php if (is_home()) { ?><h1>ваш заголовок или описание блога</h1><? } else { ?>< >заголовок или описание блога</ ><? } ?> </span> <p>Итак, открываем файл блога header.php и прописываем это условие в шапке блога.</p><p>У меня это выглядит таким образом:</p><p><img src='https://i0.wp.com/saranchinsergey.ru/wp-content/uploads/2014/09/teg-h1-na-glavnoy-stranitse.png' align="center" width="100%" loading=lazy></p><p>Как вы можете заметить, для своего ресурса я заключил в тег h1 на главной странице описание блога «продвижение блога и заработок в интернете».</p><p>Вот в принципе и всё. Мы удачно произвели редактирование недоработок в бесплатном шаблоне.</p><p>Надеюсь, вы поняли, как нужно правильно использовать тег h1 на своём блоге, чтобы угодить поисковым системам.</p><p>В своих следующих уроках я расскажу о том, как правильно использовать теги h1, h2, h3 и h4 на своём веб-ресурсе. Так что подписывайтесь на обновления, чтобы не пропустить этот полезный материал.</p><p>До новых встреч. Пока!</p> 02.12.15 44.1K <p>Зачастую начинающих веб-мастеров мучает вопрос, почему одни сайты ранжируются выше и обходят конкурентов в поисковой выдаче. Причиной этого могут быть неправильно расставленные теги h1 , h2 …h6 . Если эти теги расставлены неверно, без учета специфики ресурса, то поисковикам сложнее получить точную информацию о статьях и содержащихся в ней ключевых словах.</p> <p>Теги h1 —h6 позволяют выделить заголовки различных уровней. Они дают понять, какие части текста более точно отражают тему статьи и обеспечивают преимущества в ранжировании.</p> <p>Грамотная расстановка тегов позволяет поисковым системам более точно отображать станицу по запросам в выдаче, что благоприятно сказывается на позиции ресурса:</p> <h2>Зачем нужны теги h1-h6?</h2> <p>В теги заключается название сайта, заголовки и подзаголовки текста:</p> <p><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/articles/201512/v-tegi-zakljuchaetsja-030724.png' width="100%" loading=lazy></p><br> В HTML теги заголовков обозначаются h от английского «header », что в переводе означает «<span>заголовок, шапка </span>». Вот пример того, как это выглядит: <p><h1> Заголовок</h1></p> <p>Расстановка тегов заголовков должна производиться на каждой странице ресурса. При этом важность заголовка будет зависть от его цифры, чем она меньше, тем заголовок важнее:</p> <p><h1></h1> - наиболее важные теги <h2></h2> - менее значимые теги... <h6></h6> - последние по важности теги</p> <p>Однако относиться к их расстановке следует с осторожностью. Неправильное использование может привести к тому, что ваш ресурс попадет под санкции поисковых систем.</p> <h3>Синтаксис тегов h1-h6</h3> <p><h1>Название текста</h1> <h2>Подзаголовок 1</h2> ... <h2>Подзаголовок 2</h2> <h3>Подзаголовок 3.1</h3> ... <h3>Подзаголовок 3_2</h3> <h2>Подзаголовок 3</h2></p> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201512/sintaksis-tegov-030725.png' width="100%" loading=lazy></p><br> Наибольшей популярностью пользуются теги h1 h2 h3 . <h3>Как правильно использовать тег h1?</h3> <p>Игнорируя тег h1 , веб-мастера, лишают себя такого важного преимущества, как оптимизация контента. На движках он часто прописывается автоматически, однако не всегда, и данный факт следует учитывать.</p> <p>HTML тег h1 – самый значимый в своем роде. В него заключают название сайта и заголовок статьи. Однако не стоит его путать с тегом <title> (<span>заголовком страницы </span>). Title отражается в браузере вверху экрана с левой стороны в тот момент, когда открыта страница ресурса. Title прописывается в шапке страницы между <head></head>, в то время, когда h1 —h6 указываются в самом «теле » страницы и заключаются в теги <body></body>.</p> <p>На странице может присутствовать только один h1 тег. Если указать несколько заголовков с тегом h1 , поисковики могут расценить это как переспам, что в свою очередь грозит баном:</p> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201512/kak-pravilno-ispolzovat-030726.jpg' width="100%" loading=lazy></p><br> Правила составления главного заголовка h1 : <ul><li>В теге должны использоваться ключевые слова, применяемые для продвижения страницы;</li> <li>Не стоит делать заголовок h1 слишком объемным, вполне достаточно нескольких слов;</li> <li>Текст заголовка должен быть читабельным;</li> <li>Мета тег h1 не должен содержать ничего кроме самого текста. Если желаете его выделить, поставьте коды за пределами тега;</li> <li>Перед тем, как вручную прописывать h1 , убедитесь, что движок не задает его автоматически;</li> <li>Содержание h1 должно соответствовать тематике, указанной в title страницы;</li> <li>При составлении h1 обязательно используйте ключевую фразу, по которой продвигается страница;</li> <li>Содержание заголовка должно быть уникальным, емким и тематичным. Не стоит делать h1 полной копией тега Title . Важно, чтобы на каждой странице ресурса были прописаны уникальные h1 —h6 , поэтому избегайте повторений;</li> <li>Нельзя перечислять в заголовке ключевые фразы через запятую. Содержание h1 должно быть понятно не только поисковикам, но и посетителям ресурса.</li> </ul><p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201512/pravila-sostavlenija-glav-030726.jpg' width="100%" loading=lazy></p> <h3>Как правильно использовать теги h2-h6?</h3> <p>Кроме h1 для расстановки заголовков, которые идентифицируются поисковыми системами, используются теги h2 , h3 , h4 , h5 , h6 и т.д.</p> <h4>Тег h2</h4> <p>Как правило, используется для заголовков постов в ленте, размещенной на главной странице или для подзаголовков в статье.</p> <h4>Теги h3, h4</h4> <p>Зачастую с их помощью выделяют названия подзаголовков, рубрик и виджетов в sidebar .</p> <h4>Теги h5, h6</h4> <p>Предназначены для еще более мелких элементов страниц, которые следует отделить от остального текста.</p> <p>Расстановка заголовков h1 — h6 в <a href="/rates/kak-nastroit-hamachi-v-raznyh-versiyah-windows-kak-nastroit/">разных версиях</a> движков может быть реализована по-разному.</p> <p>Правила расстановки h2 —h6 :</p> <ul><li>Структура заголовков. Должна быть соблюдена иерархия заголовков;</li> <li>Размер шрифта. Чем ниже уровень заголовка, тем <a href="/equipment/kak-na-kompyutere-klaviature-uvelichit-shrift-smena-razmera/">мельче шрифт</a>. Редактирование шрифтов производится в стилях. Но, как правило, шрифты имеют <a href="/rates/kakie-apple-watch-vybrat-vybiraem-pravilnyi-razmer-apple-watch19-03-2015/">правильные размеры</a> по умолчанию;</li> <li>Не допускается применение тегов заголовков вместе с другими тегами акцентирования. В заголовках рекомендуется использовать ключевые слова, по которым данная станица будет продвигаться в поиске;</li> <li>В отличие от h1 , теги h2 —h6 могут быть прописаны на странице несколько раз.</li> </ul><p><body> <h1>Я главный в иерархии заголовков</h1> <h2>Мои дети</h2> <h3>Мои внуки</h3> <h3>Мои внуки</h3> <h3>Мои внуки</h3> <h2>Мои дети</h2> <h3>Мои внуки</h3> <h3>Мои внуки</h3> <h3>Мои внуки</h3> <h4>Мои правнуки</h4> <h4>Мои правнуки</h4> <h4>Мои правнуки</h4> </body></p> <ul><li>Не должно быть никакого спама;</li> <li>Составление текста h1 — h6 должно производиться с использованием синонимов и учетом правил морфологии;</li> <li>Основные <a href="/rates/optimizaciya-pod-poiskovye-zaprosy-kak-optimizirovat-stranicu-pod/">ключевые запросы</a> лучше разместить ближе к началу заголовка;</li> <li>Ключевые фразы, прописанные в заголовках, должны встречаться в тексте страницы;</li> <li>Теги h1 — h6 должны быть краткими, емкими и информативными:</li> </ul> <br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> <div class="clear"></div> </div> <div class="tech-info"></div> <div class="clear"></div> <div class="share-post"> <script type="text/javascript" src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js" charset="utf-8"></script> <script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8"></script> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter,evernote,lj" data-counter=""></div> </div> <div class="post-navigation"> <div class="nav-box-previous"> <div class="img-wrap-nav"> <a href="/personal-account/ishchu-pati-v-danzh-ful-shmot-obzor-nastolnoi-igry-dungeon-raiders-rashititeli/"> <img src="/uploads/13e31dd9ba308a44a2efbbeafbf20e2d.jpg" alt="— обзор настольной игры Dungeon Raiders (Расхитители подземелий)" loading=lazy> </a> <span>« Предыдущая запись</span> <h2> <a href="/personal-account/ishchu-pati-v-danzh-ful-shmot-obzor-nastolnoi-igry-dungeon-raiders-rashititeli/">— обзор настольной игры Dungeon Raiders (Расхитители подземелий) </a></h2> </div> </div> <div class="nav-box-next"> <div class="img-wrap-nav"> <a href="/personal-account/oshibka-scenariya-kak-ubrat-osnovnye-metody-na-etoi-stranice-proizoshla/"> <img src="/uploads/37b30ff2edc7eada550928fe29b0d44e.jpg" alt="Ошибка сценария: как убрать?" loading=lazy> </a> <span>Следующая запись »</span> <h2> <a href="/personal-account/oshibka-scenariya-kak-ubrat-osnovnye-metody-na-etoi-stranice-proizoshla/">Ошибка сценария: как убрать? </a></h2> </div> </div> <div class="clear"></div> </div> <div class="related-posts"> <ul> <p>Что еще почитать?</p> <li class="related"> <a href="/issues-and-bugs/kak-oboiti-ogranichenie-vozrasta-na-yutube-video-s-ogranichennym/" title="Видео с ограниченным доступом – как смотреть на YouTube Как поставить возрастные ограничения на ютубе"><img src="/uploads/d1788fbbf5ff89d0353c059d10f470d2.jpg" alt="Видео с ограниченным доступом – как смотреть на YouTube Как поставить возрастные ограничения на ютубе" loading=lazy> <span class="rel-post-title">Видео с ограниченным доступом – как смотреть на YouTube Как поставить возрастные ограничения на ютубе</span> </a></li> <li class="related"> <a href="/payment/windows-8-obnovlenie-ne-primenimo-k-vashemu-kompyuteru-ustranyaem-oshibku/" title="Устраняем ошибку «Обновление не применимо к этому компьютеру"><img src="/uploads/3649eece74b866f473eaf8b4e0a48fdd.jpg" alt="Устраняем ошибку «Обновление не применимо к этому компьютеру" loading=lazy> <span class="rel-post-title">Устраняем ошибку «Обновление не применимо к этому компьютеру</span> </a></li> <li class="related"> <a href="/installation-and-configuration/2-elektronnye-tablicy-naznachenie-i-osnovnye-vozmozhnosti/" title="Назначение и основные функции табличных процессоров"><img src="/uploads/7b32f04de0118f46adcdacb0c37fc2a8.jpg" alt="Назначение и основные функции табличных процессоров" loading=lazy> <span class="rel-post-title">Назначение и основные функции табличных процессоров</span> </a></li> <li class="related"> <a href="/payment/world-of-tanks-vyletaet-pri-zapuske-ispravlyaem-oshibki-world-of-tanks-vyletaet/" title="World of Tanks вылетает при запуске При запуске wot зависает компьютер"><img src="/uploads/390178f09f4b9c6b3469dcedcd93d2ec.jpg" alt="World of Tanks вылетает при запуске При запуске wot зависает компьютер" loading=lazy> <span class="rel-post-title">World of Tanks вылетает при запуске При запуске wot зависает компьютер</span> </a></li> <li class="related"> <a href="/installation-and-configuration/aleksandr-litvin-o-puteshestviyah-v-skachat-video-i-vyrezat-mp3---u-nas-eto/" title="Скачать видео и вырезать мп3 - у нас это просто"><img src="/uploads/f002d2640e231bdef0268909e468ea76.jpg" alt="Скачать видео и вырезать мп3 - у нас это просто" loading=lazy> <span class="rel-post-title">Скачать видео и вырезать мп3 - у нас это просто</span> </a></li> <li class="related"> <a href="/installation-and-configuration/uznaem-dns-provaidera-dlya-chego-kakie-est-vozmozhnosti-chto-takoe/" title="Что такое MX-запись домена Узнать информацию о dns сервере"><img src="/uploads/3cca4a4f5946906373ee5fd404a60b54.jpg" alt="Что такое MX-запись домена Узнать информацию о dns сервере" loading=lazy> <span class="rel-post-title">Что такое MX-запись домена Узнать информацию о dns сервере</span> </a></li> <div class="clear"></div> </ul> </div> <div class="clear"></div> </div> </div> <div class="right-col"> <div class="widget_text side-blok"> <div class="textwidget custom-html-widget"> <div id="kekudi2" style="height:250px;width:250px;" align="center"></div> </div> </div> <div class="side-blok"> <div class="side-title"><span>Рубрики</span></div> <ul> <li class="cat-item cat-item-18"><a href="/category/personal-account/">Личный кабинет</a></li> <li class="cat-item cat-item-18"><a href="/category/equipment/">Оборудование</a></li> <li class="cat-item cat-item-18"><a href="/category/payment/">Оплата</a></li> <li class="cat-item cat-item-18"><a href="/category/rates/">Тарифы</a></li> <li class="cat-item cat-item-17"><a href="/category/issues-and-bugs/">Проблемы и ошибки</a> </li> <li class="cat-item cat-item-20"><a href="/category/personal-account/" title="Личный кабинет">Личный кабинет</a> </li> </ul> </div> <div class="widget_text side-blok"> <div class="textwidget custom-html-widget"> <div id="yandex_rtb_R-A-213002-4"></div> </div> </div> <div class="side-blok"> <div class="side-title"><span>Последние записи</span></div> <ul id="recentcomments"> <li class="recentcomments"><a href="/equipment/kody-i-chity-na-gta-v-dengi-oruzhie-bessmertie-chit-kody-gta-san-andreas-na/">Чит-коды GTA: San Andreas на PlayStation Коды для gta 5 на playstation 3</a></li> <li class="recentcomments"><a href="/installation-and-configuration/sposoby-udaleniya-svoih-i-chuzhih-kommentariev-v-odnoklassnikah-kak-udalit/">Как удалить комментарий в одноклассниках под фото и в обсуждениях Как удалить комментарий в обсуждениях</a></li> <li class="recentcomments"><a href="/personal-account/udalennoe-upravlenie-kompyuterom-hrom-udalennyi-rabochii-stol-chrome-podklyuchenie-fiksirovannogo-ip-/">Удаленный рабочий стол Chrome</a></li> <li class="recentcomments"><a href="/personal-account/kak-vklyuchit-xmp-profil-operativnoi-pamyati-kak-vklyuchit/">Как включить профиль XMP планки оперативной памяти?</a></li> <li class="recentcomments"><a href="/installation-and-configuration/ustroistvo-bloka-pitaniya-ustroistvo-bloka-pitaniya-blok-pitaniya-pk/">Устройство блока питания Блок питания пк принципиальная схема</a></li> <li class="recentcomments"><a href="/rates/funkciya-sql-s-vhodnymi-parametrami-osnovnye-komandy-sql-kotorye/">Основные команды SQL, которые должен знать каждый программист</a></li> <li class="recentcomments"><a href="/issues-and-bugs/kak-uznat-kakoi-brauzer-ustanovlen-na-noutbuke-kak-uznat-versiyu/">Как узнать версию браузера</a></li> <li class="recentcomments"><a href="/installation-and-configuration/12-dlya-chego-ispolzuyutsya-filtry-v-pochte-pomoshch-kak-nastroit-pravila/">12 для чего используются фильтры в почте</a></li> </ul> </div> <div class="side-blok"> <div class="side-title"><span>Страницы</span></div> <ul> <li class="page_item page-item"><a href="/feedback/">Контакты</a></li> <li class="page_item page-item"><a href="">О сайте</a></li> </ul> </div> <div class="ad300-side"> <div id="kekudi3" style="height:500px;width:300px;" align="center"></div> </div> </div> </div> <div class="clear"></div> </div> <div class="footer"> <div class="credits"> <p>© 2024 Триколор телевидение — trikolo.ru · <br></p> <div class="foot-counter"></div> </div> <a id="backtop" href="#top"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a></div> <script type="text/javascript"> function gotoal(link) { window.open(link.replace("_", "http://")); } </script> <div id="mobilemenu" class="mobilemenu"> <ul id="menu-rubriki-1" class="top-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/equipment/">Оборудование<span class="menu-item-description">Открытая платформа госуслуг</span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/payment/">Оплата<span class="menu-item-description">Открытая платформа госуслуг</span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/rates/">Тарифы<span class="menu-item-description">Открытая платформа госуслуг</span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/issues-and-bugs/">Проблемы и ошибки<span class="menu-item-description">Открытая платформа госуслуг</span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/personal-account/">Личный кабинет<span class="menu-item-description">Открытая платформа госуслуг</span></a></li> </ul> </div> <script type="text/javascript" defer src="https://trikolo.ru/wp-content/cache/autoptimize/js/autoptimize_9691aae6c4d2d788899fe5ded4da4d0e.js"></script> </body> </html>