Что означает h1-h6?
Начать в любом случае нужно с теории, потому что без этого невозможно двигаться дальше. Итак, это html-теги, в которые помещают текст, который должен стать заголовком. H1 – это главный заголовок страницы, он должен быть единственным, h2 – подзаголовок статьи или раздела главы (если речь идет о книге), h3 – заголовок в разделе и т.д.
В сайтостроении, как правило, чаще всего используются h1-h3, последние три тега используются крайне редко, так как нет необходимости в разбивке текста на такие мелкие части, если только речь не идет об огромной по объему текстовой публикации.
По умолчанию заголовки уже имеют некоторое стилевое оформление. Например, буквы в заголовках выделены жирным шрифтом, а их размер в 1,5 – 3 раза больше обыкновенного текста на странице.
Основные правила работы с заголовками
Сколько h1 может быть на сайте? Сколько угодно, ведь интернет-ресурс может состоять из множества страниц. Тут гораздо важнее придерживаться другого правила – на каждой отдельной странице вашего сайта должен быть ОДИН h1. Все потому, что это главный заголовок, а главным всегда должен быть один.
Но что будет, если проигнорировать это правило? Как показывает реальная практика, ничего катастрофического, вероятно, не случится. Я бы не писал об этом, но мне известно несколько случаев, когда у веб-мастеров было несколько h1 на странице, при этом все их статьи сохраняли свои позиции в поисковых системах.
Так-то оно может и так, только вот не нужно специально создавать несколько h1 на странице. Все равно это не правильно и вред от того все равно может быть. Например, в приведенных выше ситуациях у веб-мастеров были уже возрастные раскрученные сайты, поэтому несколько h1 на странице не ухудшили ситуацию.
Однако при раскрутке молодого сайта очень важно соблюдать разные тонкости, чтобы ресурс максимально быстро получил одобрение поисковиков и начал приносить трафик.
Очевидно, что h1 должен быть в самом начале статьи. Это не то же самое, что мета-тег title. Title виден при поисковой выдаче и в названии вкладки браузера, а h1 – непосредственно на странице. Остальных заголовков (h2-h6) может быть сколько угодно, в любом количестве.
Как проверить наличие h1 на странице?
Теперь мы переходим к самому главному. Как же определить, нормально ли у вас все на сайте с заголовком? Есть как минимум несколько вариантов, как вы это можете сделать.
Во-первых, открыть исходный код и произвести в нем поиск. Исходный код открывается с помощью комбинации клавиш Ctrl + U. Далее вам понадобится комбинация Ctrl + F, чтобы открыть поиск. Введите в нем название нужного тега, а именно – h1.
Правильно будет, если вам найдет два результата – открывающий и закрывающий тег соответственно. Если результатов больше, нужно вносить правки в код шаблона сайта. Если h1 вообще отсутствует, тоже нужно принимать меры, чтобы он появился.
Во-вторых, вы можете воспользоваться каким-нибудь сервисом, который анализирует сайт на показатели его поисковой оптимизации и выдает отчет. Таких сервисов очень много, я приведу лишь некоторые: pr-cy.ru, audit.megaindex.ru/
В сервисе “Мегаиндекс” есть возможность проверить релевантность страницы, то есть то, насколько она оптимизирована под определенную ключевую фразу. Введите адрес одной из страниц вашего сайта и основную ключевую фразу. В случае проверки лишь h1 эта ключевая фраза может быть любой.
Как видите, проверка показала, что на странице всего 1 h1 – это хорошо. Если бы было больше, проверка бы обязательно это определила. Как видите, это важный фактор, хотя и не критический. Его несоблюдение не приведет к чему-то катастрофическому, но при поисковой оптимизации подобные проблемы должны быть убраны в первую очередь.
Если проблема найдена, как ее решать?
Решать очень просто, нужно всего лишь немного подправить код вашего шаблона. В первую очередь тут нужно знать, на каком движке у вас сайт. Структура шаблонов у всех движков может быть немного разной, но все же много общего.
Например, в WordPress вам нужно будет редактировать файлы page.php (шаблон страницы) и single.php (шаблон записи). Также полезно будет просмотреть файлы index.php (главная страница) и archive.php (архивы по дате и автору), а иногда в темах есть еще category.php (записи отдельной рубрики).
Ну, допустим, нашли и открыли вы нужный файл, что делать дальше? Дальше воспользуйтесь все тем же поиском (Ctrl + F). Вновь введите туда название тега. Если кода в файле немного, то вы и сами можете просмотреть его и найти нужные строчки. Тут ваши действия зависят от того, что именно нужно исправить.
Например, в одном шаблоне название поста выводилось в h2. Возможно, его разработчик не разбирается в SEO, поэтому и допустил такую ошибку. Но это легко исправляется. Редактируем single.php и меняем в нем h2 на h1. Это можно сделать как вручную, так и с помощью функции автоматической замены.
Возможно, так же понадобится редактирование боковой колонки (sidebar.php). Собственно, лишние h1 могут быть где угодно: в заголовках виджетов, в меню и даже в футере (footer.php). Все это нужно найти и убрать.
Ну а что делать, если в самой статье несколько h1? Тогда проблема решается еще легче – редактированием самой статьи. Уберите все лишние h1, оставив только один главный верхний заголовок.
Как видите, справиться с этой проблемой можно самостоятельно абсолютно без проблем. Для этого вам не нужны даже знания в области сайтостроения, а просто элементарное умение находить и открывать файлы, пользоваться поиском и изменять немного нужные строчки. Да и к сео-специалисту нет нужды обращаться теперь, по крайней мере, по поводу рассмотренного нами сегодня вопроса.
Что ж, теперь вы знаете, как проверить заголовок h1 на странице и правильно настроить шаблон. Конечно, это всего лишь одна из множества настроек, которые помогут вам раскрутить и монетизировать сайт. Намного больше информации вы можете найти, если изучите и его выводе на доход от 20 тысяч рублей в месяц в самое кратчайшее время. Успехов вам во всем и хороших позиций в поиске!
02.12.15
44.1K
Зачастую начинающих веб-мастеров мучает вопрос, почему одни сайты ранжируются выше и обходят конкурентов в поисковой выдаче. Причиной этого могут быть неправильно расставленные теги h1
, h2
…h6
. Если эти теги расставлены неверно, без учета специфики ресурса, то поисковикам сложнее получить точную информацию о статьях и содержащихся в ней ключевых словах.
Теги h1
—h6
позволяют выделить заголовки различных уровней. Они дают понять, какие части текста более точно отражают тему статьи и обеспечивают преимущества в ранжировании.
Грамотная расстановка тегов позволяет поисковым системам более точно отображать станицу по запросам в выдаче, что благоприятно сказывается на позиции ресурса:
Зачем нужны теги h1-h6?
В теги заключается название сайта, заголовки и подзаголовки текста:
В HTML теги заголовков обозначаются h
от английского «header
», что в переводе означает «
заголовок, шапка
». Вот пример того, как это выглядит:
Заголовок
Расстановка тегов заголовков должна производиться на каждой странице ресурса. При этом важность заголовка будет зависть от его цифры, чем она меньше, тем заголовок важнее:
- наиболее важные теги
- менее значимые теги...
- последние по важности теги
Однако относиться к их расстановке следует с осторожностью. Неправильное использование может привести к тому, что ваш ресурс попадет под санкции поисковых систем.
Синтаксис тегов h1-h6
Название текста
Подзаголовок 1
...
Подзаголовок 2
Подзаголовок 3.1
...
Подзаголовок 3_2
Подзаголовок 3
Наибольшей популярностью пользуются теги h1
h2
h3
.
Как правильно использовать тег h1?
Игнорируя тег h1
, веб-мастера, лишают себя такого важного преимущества, как оптимизация контента. На движках он часто прописывается автоматически, однако не всегда, и данный факт следует учитывать.
HTML
тег h1
– самый значимый в своем роде. В него заключают название сайта и заголовок статьи. Однако не стоит его путать с тегом
(<span>заголовком страницы
</span>). Title
отражается в браузере вверху экрана с левой стороны в тот момент, когда открыта страница ресурса. Title
прописывается в шапке страницы между <head></head>, в то время, когда h1
—h6
указываются в самом «теле
» страницы и заключаются в теги <body></body>.</p>
<p>На странице может присутствовать только один h1
тег. Если указать несколько заголовков с тегом h1
, поисковики могут расценить это как переспам, что в свою очередь грозит баном:</p>
<p><img src='https://i1.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://i2.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
в разных версиях движков может быть реализована по-разному.</p>
<p>Правила расстановки h2
—h6
:</p>
<ul><li>Структура заголовков. Должна быть соблюдена иерархия заголовков;</li>
<li>Размер шрифта. Чем ниже уровень заголовка, тем мельче шрифт. Редактирование шрифтов производится в стилях. Но, как правило, шрифты имеют правильные размеры по умолчанию;</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>Основные ключевые запросы лучше разместить ближе к началу заголовка;</li>
<li>Ключевые фразы, прописанные в заголовках, должны встречаться в тексте страницы;</li>
<li>Теги h1
— h6
должны быть краткими, емкими и информативными:</li>
</ul>
<p><input type="checkbox" id="aside"><i>
</i></p>
<p>Первый заголовок, на который часто посетитель сайта не обращает внимание — тот, который показан на вкладке браузера (). Для поисковой системы он самый главный, так как именно его Яндекс, Google и др. <b>чаще всего
</b> () используют в качестве заголовка сниппета.</p><p>Второй заголовок находится в теге h1 . Далее подзаголовки меньших размеров. Если собрать их все, то должна быть чётко видна структура веб-документа подобно главам школьного учебника. Такая раздробленная на разделы и подразделы информация легко воспринимается, найти необходимый материал на странице не вызывает затруднений.</p><p>Важные замечания:</p><ul><li>заголовок доступно поясняет содержание страницы, раздела, подраздела. Это не инструмент оформления текста. Не нужно им выделять пункт меню, который ничего не содержит, кроме заголовка.</li><li>заголовок — это слово, фраза, предложение. Он не должен быть длинным.</li><li>заголовок — это всё предложение, а не его часть. Для оформления одного-нескольких слов существуют такие теги как strong , mark , em и др. ().</li><li>если статья строится в формате "вопрос-ответ" и ответ в большинстве случаев короткий (например, инструкция лекарственного препарата), то вместо тегов h правильней использовать тройку dl , dt , dd .</li>
</ul><h2>Проверить h1 страницы</h2>
<p>Сейчас фразу в любом теге можно сделать заголовком с помощью стилей CSS: увеличить шрифт и/или размер текста. Для того, чтобы проверить количество тегов h1 и их содержимое, достаточно , никаких дополнительных расширений не требуется. Такой инструмент, можно вывести, если нажать клавишу <F12> :
</p><h2>Разница в использовании h1 , h2 , h3 , h4 , h5 , h6 в HTML5 и HTML4</h2>
<p>Перед дальнейшим чтением желательно ознакомиться с примерами, описанными в стандартах самостоятельно.</p><h3>Один h1 на странице (версия HTML4)</h3>
<ul><li>Пошаговое решение судоку
<ul><li>Программа решения судоку с объяснениями (онлайн)</li><li>Правила игры</li><li>Алгоритм заполнения ячеек кроссворда
<ul><li>Способ 1. «Скрытые одиночки»</li><li>Способ 2. «Одиночки»</li>
</ul></li><li>Методы решения судоку
<ul><li>Стратегия 1. Кандидат в двух-трёх клетках одного квадрата</li><li>Стратегия 2. Группы кандидатов</li>
</ul></li>
</ul></li>
</ul> <h1>
<img src='https://i1.wp.com/logo.gif' loading=lazy>
</h1>
<h1>
Название сайта
</h1>
<div class="vyrovnyat">
<h1>Заголовок</h1>
</div>
<p><b>Утверждение 1:
</b> заголовок страницы или его часть не должны быть ссылкой (см. здравый смысл и справка Новости.Google). Отсюда следствие: название веб-проекта на Главной также не должно быть ссылкой. В целом не нужно чтобы страница ссылалась сама на себя (искл. ). А вот так допустимо (на Авито на странице объявления каждой похожей записи дан h3):</p>
<p>Процентные ставки от 1% до 5%</p>
</a>
<section>
...
</aside>
</p><p><b>Утверждение 2:
</b> есть небольшая разница в том как располагать ссылку: внутри тега h или тег h внутри ссылки. И она заключается в том, что в первом случае ссылкой является только текст, а во-втором — весь блок.</p><p> <h2>
<a href="#"> только текст </a>
</h2>
<a href="#">
<h2> весь блок (прямоугольная область) </h2>
</a>
</p><h2>Должен ли title отличаться от h1 ?</h2>
<p>"Может ли title быть таким же как h1 ?" — да, может.</p><p>"Различный title и h1 полезны для SEO?" — да, полезны. В рассматриваемые теги можно добавить дополнительные ключевые слова, чтобы увеличить хвост запросов, по которым приходят на сайт. Или чтобы сделать более привлекательный сниппет, в title внести, скажем, название компании, коли фирма на слуху, или номер телефона (для такси, например).</p><p><b>Примечание:
</b> для того, чтобы страница могла присутствовать в Новостях Google или быстрых ссылках Яндекса , основная часть title и h1 должны совпадать. Это может быть вызвано тем, что посетители ожидают увидеть на странице сайта тот же заголовок, что в выдаче поисковиков. На данный момент стоит обратить внимание информационным сайтам.</p><h2>Нужно ли заголовки боковых блоков брать в h ?</h2>
<p>Если заголовки индексируются (см. ), то пусть лучше будут в теге h . Всё равно они употребляются на каждой странице сайта и вес этих слов ("Реклама", "Последние сообщения", "Подписка" и т.п.) завышен. Можно предположить, что родитель aside должен уменьшать их значение.</p><p>К тому же для слабовидящих будет понятно что к чему, а не сплошные untitled .</p>
<p>В данной статье рассмотрим<b> особенности правильной расстановки тегов h1, h2…h6
</b> (h сокращение от англ. слова heading – заголовок) и их влияние на оптимизацию сайта в целом. Если теги расставлены неверно, поисковым системам трудно получать информацию о размещенных на вашем сайте статьях и ключевых словах, которые они содержат. Теги дают возможность выделить заголовки и сделать Вашу статью более удобной для прочтения. Кроме того они обеспечивают преимущества вашего сайта в системе ранжирования, упорядочивая html код страницы.
</p>
<p>Как определить, что Ваш сайт находится под фильтрами Google? Подробнее .</p>
<p><b>Заголовок Вашего сайта обозначает тег h1
</b>. Он дает возможность понять поисковой системе название онлайн-ресурса. Например, сайт об аренде серверов. В главном названии будет выводиться именно данное название при поиске в системе. Не стоит путать h1 с тегом <title> (заголовком страницы), ведь <title> пишется в шапке страницы между <head></head>, в то время, когда h1-h6 указывают в «теле» страницы и заключают между тегов <body></body>.
</p>
<p><b><i>Как правильно составить главный заголовок h1?
</i>
</b></p>
<ul><li><span>обязательное использование ключевых слов для продвижения;
</span></li>
<li><span>h1 используют один раз на одной странице, если размещать больше ПС может воспринять данный факт как переоптимизацию;
</span></li>
<li><span>будет достаточно нескольких слов, не нужно помещать в данный тег все ключевики страницы;
</span></li>
<li><span>заголовок должен быть читабельным;
</span></li>
<li><span>мета тег h1 должен содержать только текст;
</span></li>
<li><span>h1 должен отвечать тематике, которая указана в title данной страницы;
</span></li>
<li><span>не перечисляйте ключевые фразы через запятую, это усугубляет релевантность;
</span></li>
<li><span>делайте заголовок уникальным и тематическим, не делайте его копией Title;
</span></li>
<li><span>каждая страница должна содержать уникальные h1-h6, пытайтесь как можно качественней избегать любых повторений.
</span></li>
</ul><p>Для более качественного и профессионального продвижения вам понадобится аудит сайта. Как сделать самостоятельный аудит своего сайта? Об этом подробнее в .</p>
<p><b><i>Тег h2
</i>
</b><span>в зависимости от размера и содержимого страницы сайта можно использовать пару раз и он показывает подзаголовок h1. Значение данного тега несколько меньше чем h1, но его часто используют в качестве описания страницы. Тег h2 используют в качестве заголовка второго уровня, ним выделяют подзаголовки на страницы сайта. Но стоит отметить, что иногда специалисты по продвижению настоятельно рекомендуют использовать только один тег h2
</p>
<p><b><i>Тег h3
</i>
</b><span> также помогает сайту подняться по запросам в поисковой системе. В большинстве случаев его используют непосредственно в статье в качестве подзаголовков (3-5 штук в статье). Он придает значения ключевым словам.
</p>
<p><b><i>Теги h4, h5, h6
</i>
</b><span> не имеют весомого значения и влияния. На практике они вовсе редко используются. Текст, который оформлен данными тегами, будет ранжируваться где-то чуть ниже, чем текст, который выделен жирным шрифтом (тегом strong). Данные теги предназначены для мелких элементов на странице. Их обычно отделяют от остального текста. По сравнению с h1 их можно размещать на странице по несколько раз.
</p>
<p><b><i>Правила написания текста заголовков h1,h2,h3,…,h6
</i>
</b></p>
<p>Из чего должны состоять заголовки h1-h6:
</p>
<ol><li><span>прямое вхождение ключевого слова в заголовке, которое повысит релевантный запрос в поисковой выдачи;
</span></li>
<li><span>уникальный заголовок по отношению других страниц сайта, так как одинаковые заголовки могут не учитываться ПС;
</span></li>
<li><span>если заголовок находится близко к html-коду, то его значение относительно других элементов страницы значительно увеличивается;
</span></li>
<li><span>ключевое слово должно быть как можно ближе к началу заголовка;
</span></li>
<li><span>длина заголовка не должна превышать 60 символов, так как длинный заголовок не будет воспринят поисковиком;
</span></li>
<li><span>исключить из заголовка грамматические ошибки;
</span></li>
<li><span>заголовки проверяются на переоптимизацию, поэтому не стоит помещать как можно больше ключевых слов в один заголовок.
</span></li>
</ol><p><b><i>Что писать и как правильно заполнять. Практические советы.
</i>
</b></p>
<p>Успешность оптимизации сайта во многом зависит от того, как прописаны теги. Поэтому следует придерживаться следующих правил написания тегов:
</p>
<ul><li><span>соблюдать иерархию тегов, то есть h1 должен быть выше остальных, другие заголовки по порядку уровней;
</span></li>
<li><span>чем больше уровень тем должен быть больше шрифт заголовка, то есть придерживаться градации шрифтов;
</span></li>
<li><span>отказаться от всего лишнего и ненужного в заголовках – акцентирующих тегов и ссылок, только текст;
</span></li>
<li><span>не нужно злоупотреблять h1,h2,h3,…,h6. Огромное количество важных элементов на странице воспринимается поисковыми роботами как переспам.
</span></li>
<li><span>в качестве заголовка может быть даже картинка, например, с логотипом, которую соответствующим образом оптимизируют.
</span></li>
</ul><p>Важно отметить, что наличие на страницы сайта всех уровней заголовков не обязательное условие. В большинстве случаев вполне достаточно h1, h2, h3, а применение остальных может и навредить, если ними выделять и вовсе неважные элементы текста страницы.
</p>
<p>Надеемся наши советы помогли Вам разобраться с особенностями тегов h1, h2, h3,…, h6 и в их роли в правильном структурировании контента на сайте. Если возникнут дополнительные вопросы, обращайтесь! Также рекомендуем статью ““.
</p>
<p>Чтобы ваш сайт не выглядел спамным в глазах поисковой системы, придерживайтесь нескольких , которые касаются написания тегов и не только.
</p>
<p>СЕО не работает? В чем может скрываться причина. Об этом в следующей на нашем блоге.<br></p>
<p>Компания <b><i>Hyper
Host™
</i>
</b> – только и .
</p>
<p>22023 раз(а)
<span>5 Сегодня просмотрено раз(а)
</p>
<p><b>Тег H1 или заголовок H1
</b> — это заголовок первого уровня и он имеет наибольшее значение и важность среди всех заголовков. <b>Тег H1
</b> должен применяться на странице один раз, располагаться выше всех других заголовков и иметь самый большой размер шрифта.</p>
<p>Всего тегов заголовков существует шесть. Это h1, h2, h3, h4, h5 , h6. Эти теги применяются для форматирования текста на странице. H1 самый весомый среди них как для посетителе, так и для поисковиков.</p>
<p>Приветствую Вас на страницах . В этой статье поделюсь с Вами некоторыми моментами при использовании заголовка H1 на страницах блога под управлением CMS WordPress.</p>
<h2>Тег H1 — значение для продвижения</h2>
<p><img src='https://i1.wp.com/inetmkt.ru/wp-content/uploads/2012/03/tegi-h.jpg' align="left" height="150" width="150" loading=lazy>Поисковые системы используют слова и фразы, применяемые в этом теге, для определения релевантности страниц поисковому запросу. Этот тег является одним из наиболее значимых элементов релевантности. При оптимизации текста страницы важнее тега H1 поисковые системы ценят только тег TITLE.</p>
<p>И если быть более кратким и конкретным, то <b>тег H1 рекомендуется использовать для заголовков страниц наших сайтов
</b> и они должны содержать ключевую фразу, по которым эта страница продвигается.<br>
Релевантность страниц, наряду с , является одним из самых весомых показателей для завоеваний лояльности поисковых систем.</p>
<h2>Правила заполнения заголовка H1</h2>
<p>Для получения хорошего результата при продвижении страниц сайта следует выполнять следующие правила его заполнения:</p>
<ol><li>Каждая страница должна содержать ОДИН тег H1.</li>
<li>Тег должен содержать одно ключевое слово, по которому продвигается страница.</li>
<li>Содержимое заголовка H1 должно быть уникальным для каждой страницы.</li>
<li>Тег H1 не должен быть гиперссылкой.</li>
<li>Желательно, чтобы тег не содержал классов, идентификаторов и других CSS элементов, а был в «голом» виде.</li>
<li>Не рекомендуется использовать в содержимом знаков препинания, запятых, двоеточий и так далее.</li>
<li>Размер тега не должен быть более двух предложений, лучше одно.</li>
</ol><p>В html-коде заголовок страницы должен выглядеть таким образом:</p>
<blockquote><p><h1>Тег H1 это заголовок страницы</h1></p>
</blockquote>
<p>Наиболее типичные грубые ошибки – это отсутствие тега H1 на странице или присутствие более одного заголовка. Такие ошибки обычно характерны для страниц разделов, в которых перечислены статьи, входящие в эти разделы.</p>
<p>Контроль заполнения тега H1 по всему сайту проводится в рамках . Для проведения такого аудита есть немало достойных инструментов. Я же порекомендую Вам сервис от Мегаиндекса – <i>audit.megaindex.ru
</i>
.</p>
<h2>Тег H1, применение в WordPress</h2>
<p><img src='https://i2.wp.com/inetmkt.ru/wp-content/uploads/2012/03/h1-wordpress.jpg' height="150" width="148" loading=lazy>Теорию повторили и теперь остановимся на некоторых технических моментах, связанных и применением тега H1 на сайтах, использующих CMS WordPress. Поскольку большинство начинающих блоггеров используют бесплатные шаблоны, то в них могут содержаться некоторые недоработки.<br>
В частности, возможны варианты, когда заголовок страницы выделяется не тегом H1, а другим тегом, чаще всего это H2.</p>
<p>Эта же недоработка обнаружилась и на моем блоге, после того как я создал при помощи программы Artisteer. При просмотре HTML-кода было обнаружено, что все заголовки страниц выводятся с тегом H2.</p>
<p>Для устранения этого пришлось редактировать файл <i>single.php
</i>
, именно так в большинстве шаблонов называются файлы, которые выводят информацию по каждой отдельной записи. Как я это сделал сейчас продемонстрирую наглядно.<br>
В теле файла <i>single.php
</i>
ищем часть кода, которая выводит заголовок. В моем случае этот выглядело таким образом:</p>
<blockquote><p><h2
class=»art-PostHeaderIcon-wrapper»><br>
<span class=»art-PostHeader»><br>
<?php the_title(); ?><br>
</span><br>
</h2
></p>
</blockquote>
<p>Меняем выделенные красным цветом теги h2 на необходимые h1 и файл <i>single.php
</i>
исправлен и готов к использованию. Оказалось, что это довольно просто, поменял пару символов и готово. Теперь этот блок стал выглядеть так:</p>
<blockquote><p><h1
class=»art-PostHeaderIcon-wrapper»><br>
<span class=»art-PostHeader»><br>
<?php the_title(); ?><br>
</span><br>
</h1
></p>
</blockquote>
<p>В Вашем случае выражение может быть несколько другого вида, но смысл, я надеюсь, Вы поняли.</p>
<p>Аналогичные изменения мне пришлось проделать с еще одним файлом темы <i>page.php
</i>, который отвечает за вывод страниц блога. Как известно блог на CMS WordPress содержит записи и страницы.</p>
<p>Функции создания и изменения их находятся в разных разделах администрирования блога, они хранятся в разных местах и соответственно за их вывод отвечают и разные программные модули.</p>
<p>В итоге отрезок кода в файле <i>page.php
</i>, который выводит заголовок страницы стал выглядеть вот так:</p>
<blockquote><p><h1
class=»art-PostHeaderIcon-wrapper»><br>
<span class=»art-PostHeader»><a href=»<?php the_permalink() ?>» rel=»bookmark» title=»<?php printf(__(‘Permanent Link to %s’, ‘kubrick’), the_title_attribute(‘echo=0’)); ?>»><br>
<?php the_title(); ?><br>
</a></span><br>
</h1
></p>
</blockquote>
<p>Но это было еще не все, на моем шаблоне я обнаружил, что тег H1 используется при выводе заголовка самого блога. И мне пришлось решать, оставлять все как есть или добиваться вывода заголовков страниц с тегом H1.</p>
<p>Ведь использование двух и более заголовков этого типа на одной странице не рекомендуется. Поисковые системы могут это расценить как переоптимизацию и сделать соответствующие выводы.</p>
<h2>Тег H1, корректировка шаблона WordPress</h2>
<p>В конце концов решил подправить эту недоработку, тем более, что хлопот больших это не принесло. Сейчас я Вам обо всем подробно доложу.</p>
<p>Для этого надо было внести поправки всего в два файла.</p>
<p>Первый <i> header.php
</i>
— это файл вывода заголовка блога.</p>
<p>Второй <i>style.css
</i> — файл описания стилей блога.</p>
<h3>Изменения header.php</h3>
<blockquote><p><div class=»art-Logo»><br>
<h1
id=»name-text» class=»art-Logo-name»><br>
<a href=»<?php echo get_option(‘home’); ?>/»><?php bloginfo(‘name’); ?></a></h1
><br>
<div id=»slogan-text» class=»art-Logo-text»><br>
<?php bloginfo(‘description’); ?></div><br>
</div></p>
</blockquote>
<p>Находим в <i>header.php
</i> фрагмент, который выводит заголовок блога и меняем тег заголовка h1
(выделил красным цветом те символы, которые изменяю) на тег абзаца p
. В результате получили такой код.</p>
<blockquote><p><div class=»art-Logo»><br>
<p
id=»name-text» class=»art-Logo-name
«><br>
<a href=»<?php echo get_option(‘home’); ?>/»><?php bloginfo(‘name’); ?></a></p
><br>
<div id=»slogan-text» class=»art-Logo-text»><br>
<?php bloginfo(‘description’); ?></div><br>
</div></p>
</blockquote>
<h3>Изменения в файле style.css</h3>
<p>Синим цветом я выделил наименование класса css, который нам придется подправить в файле <i>style.css
</i>, чтобы шрифт и размер вывода заголовка блога остался прежним, таким же как и до изменений. Далее открываем файл стилей, ищем поиском необходимый класс «art-Logo-name», фрагмент ниже</p>
<blockquote><p>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<br>
{<br><br>
font-size: 29px;<br>
text-decoration: none;<br>
padding:0;<br>
margin:0;<br>
color: #E0EDF0 !important;<br>
}</p>
</blockquote>
<p>Все выделенные красным цветом h1
меняю на p
и получаю в результате</p>
<blockquote><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<br>
{<br>
font-family: Arial, Helvetica, Sans-Serif;<br>
font-size: 29px;<br>
text-decoration: none;<br>
padding:0;<br>
margin:0;<br>
color: #E0EDF0 !important;<br>
}</p>
</blockquote>
<p>Вот, собственно и все, что я хотел рассказать Вам о теге H1, как одном из элементов .<br>
Замечу только, что все работы я проводил на<b> тестовом поддомене
</b>, чтобы посетители моего блога не испытывали затруднений при возникновении проблем, которые могут возникнуть при подобного рода манипуляциях. Да и с точки зрения безопасности и сохранности функционала сайта это будет правильным решением.</p>
<p>В заключение хочу Вам предложить посмотреть небольшое видео, оно, правда, озвучено на английском языке, но мне все было понятно, надеюсь и Вам будет несложно разобраться. Этот ролик неплохо дополняет текст статьи и для новичков или тех, кто не силен в программировании будет неплохим подспорьем. Приятного просмотра.</p>
<p><span class="zgOuilSChgY"></span></p>
<p>На этом позволю себе закончить, а Вам пожелать успехов.</p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><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>
<div class="clear"></div>
</div>
</article>
<div class='yarpp-related'>
<section id="related_posts">
<div class="block-head"> <span>Больше информации по теме</span>
<div class="stripe-line"></div>
</div>
<div class="post-listing">
<div class="related-item">
<div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/2149de5b0a55068109f0b44c11d741b3.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Яндекс Пипл — поиск людей в соц" / loading=lazy></div> <a class="post_7839" href="/kak-naiti-cheloveka-v-internete-samye-prostye-metody-yandeks-pipl-poisk-lyudei-v/">Яндекс Пипл — поиск людей в соц</a></div>
<div class="related-item">
<div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/14804da2c8935d3aeddfb0e10957d20d.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Исправляем проблемы с загрузчиком используя командную строку" / loading=lazy></div> <a class="post_7839" href="/fixboot-smogla-naiti-sistemnyi-disk-ispravlyaem-problemy-s/">Исправляем проблемы с загрузчиком используя командную строку</a></div>
<div class="related-item">
<div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/d0db4e02378ad6b5b4953112dac80a72.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Украли телефон - что делать?" / loading=lazy></div> <a class="post_7839" href="/ukrali-telefon---chto-delat-kak-otsledit-telefon-kak-naiti/">Украли телефон - что делать?</a></div>
<div class="related-item">
<div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/b74e9d30305c73622b2ca923e829131f.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Bootstrap - Создание галереи изображений" / loading=lazy></div> <a class="post_7839" href="/menyayushchiesya-fotografii-v-setke-jquery-bootstrap---sozdanie-galerei-izobrazhenii/">Bootstrap - Создание галереи изображений</a></div>
<div class="related-item">
<div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/f53f780e3202488bef1a4da82abf5f64.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Как сделать автообновление страницы в яндекс браузере Автообновление в Opera" / loading=lazy></div> <a class="post_7839" href="/avtoobnovlenie-stranicy-v-brauzere-kak-sdelat-avtoobnovlenie-stranicy-v-yandeks/">Как сделать автообновление страницы в яндекс браузере Автообновление в Opera</a></div>
<div class="related-item">
<div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/5a2d59797697e8ee393a793dcd631195.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Как сделать приложение или игру для андроид Способы и стоимость создания приложения" / loading=lazy></div> <a class="post_7839" href="/razrabotka-android-prilozhenii-osnovnye-instrumenty-kak-sdelat/">Как сделать приложение или игру для андроид Способы и стоимость создания приложения</a></div>
</div>
</section>
</div>
<div id="comments">
<ol class="commentlist">
<div class='rreekk' rel='15'>
<div id="smartrotator_ad_4" onclick="yaCounter40492595.reachGoal ('tizercommentbefore1'); return true;"></div>
</div>
</ol>
<div class="clear"></div>
<div id="respond" class="comment-respond">
</div>
</div>
</div>
<aside id="sidebar">
<div class="theiaStickySidebar">
<div class="execphpwidget">
<div id="text-4" class="widget widget_text">
<div class="widget-top"> <span>Полезное</span>
<div class="stripe-line"></div>
</div>
<div class="widget-container">
<div class="textwidget">
<style>
.wpp-list li img {
-webkit-border-radius: 65px;
-moz-border-radius: 65px;
border-radius: 65px;
}
.wpp-list li .post-views {
display: block;
margin-left: 70px;
color: #828283;
font-size: 12px;
}
.wpp-list li .post-views i {
font-size: 13px;
}
.wpp-list li {
line-height: 22px !important;
}
.replacemy {
cursor: pointer;
}
}
</style>
<ul class="wpp-list">
<li>
<div class="replacemy"><img src="/uploads/94f5519ca237e87c01dbae1bd1314479.jpg" width="65" height="65" title="Что делать, если вместо текста иероглифы (в Word, браузере или текстовом документе) Непонятные иероглифы вместо букв" alt="Что делать, если вместо текста иероглифы (в Word, браузере или текстовом документе) Непонятные иероглифы вместо букв" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></div><a href="/v-dokumentah-vmesto-teksta-otobrazhayutsya-ieroglify-chto-delat-esli-vmesto/" class=""><br>Что делать, если вместо текста иероглифы (в Word, браузере или текстовом документе) Непонятные иероглифы вместо букв</a></li>
<li>
<div class="replacemy"><img src="/uploads/676f48b5f6d021bdc3d89bee705135d7.jpg" width="65" height="65" title="Часы пропеллер на pic16f628a своими руками" alt="Часы пропеллер на pic16f628a своими руками" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></div><a href="/chasy-propeller-na-pic16f628a-svoimi-rukami-chasy-boba-blika-chasy/" class=""><br>Часы пропеллер на pic16f628a своими руками</a></li>
<li>
<div class="replacemy"><img src="/uploads/3717c2a058018e21f48abfc24ef969e2.jpg" width="65" height="65" title="Почему Не работает вентилятор на ноутбуке!" alt="Почему Не работает вентилятор на ноутбуке!" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></div><a href="/kompyuter-ne-vklyuchaetsya-no-ventilyatory-sistemnogo-bloka-rabotayut-pochemu-ne/" class=""><br>Почему Не работает вентилятор на ноутбуке!</a></li>
<li>
<div class="replacemy"><img src="/uploads/9639f33d2a4dc30cfae59fe9bc04e261.jpg" width="65" height="65" title="Калорийность, химический состав и пищевая ценность" alt="Калорийность, химический состав и пищевая ценность" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></div><a href="/recept-morkov-po-koreiski-kaloriinost-himicheskii-sostav-i-pishchevaya/" class=""><br>Калорийность, химический состав и пищевая ценность</a></li>
<li>
<div class="replacemy"><img src="/uploads/e8d1bcbcf38a224a1ea68181a334123c.jpg" width="65" height="65" title="Почему картридж может течь после заправки Что делать если картридж подтекает" alt="Почему картридж может течь после заправки Что делать если картридж подтекает" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></div><a href="/vozmozhnye-neispravnosti-kartridzhei-struinyh-printerov-i/" class=""><br>Почему картридж может течь после заправки Что делать если картридж подтекает</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
</aside>
<div class="clear"></div>
</div>
<footer id="theme-footer"> <div id="footer-widget-area" class="wide-narrow-2c"><div id="footer-first" class="footer-widgets-box"><div id="text-2" class="footer-widget widget_text"><div class="footer-widget-top"></div><div class="footer-widget-container"><div class="textwidget">
<p>Все о современной технике. Ошибки. Игры. Поломки. Техника. Интернет
<p></p>
</div></div></div></div><div id="footer-second" class="footer-widgets-box"><div id="text-3" class="footer-widget widget_text">
<div class="footer-widget-top"></div>
<div class="footer-widget-container">
<div class="textwidget"><a href="/sitemap.xml">Карта сайта</a></div>
</div>
</div><div id="text-7" class="footer-widget widget_text"><div class="footer-widget-top"></div><div class="footer-widget-container"><div class="textwidget"><br> <a href="/feedback/">Обратная связь</a> </div></div></div></div></div><div class="clear"></div> </footer>
<div class="clear"></div>
<div class="footer-bottom">
<div class="container">
<div class="alignright"></div>
<div class="alignleft"> © Copyright 2024, https://qzoreteam.ru</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div id="topcontrol" class="fa fa-angle-up" title="Перейти к началу страницы"></div>
<div id="fb-root"></div>
<script type="text/javascript">
jQuery(function($) {
$(document).on("click", ".pseudo-link", function() {
window.open($(this).data("uri"));
});
});
</script>
<script type='text/javascript'>
/* */
var tocplus = {
"smooth_scroll": "1",
"visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c",
"visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c",
"width": "310px"
};
/* */
</script>
<script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/table-of-contents-plus/front.min.js'></script>
<script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/wp-polls/polls-js.js'></script>
<script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/wp-postratings/js/postratings-js.js'></script>
<script type='text/javascript'>
/* */
var tie = {
"mobile_menu_active": "true",
"mobile_menu_top": "",
"lightbox_all": "",
"lightbox_gallery": "",
"woocommerce_lightbox": "",
"lightbox_skin": "dark",
"lightbox_thumb": "vertical",
"lightbox_arrows": "true",
"sticky_sidebar": "",
"is_singular": "1",
"SmothScroll": "true",
"reading_indicator": "",
"lang_no_results": "\u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0448\u043b\u043e\u0441\u044c",
"lang_results_found": "\u041d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b"
};
/* */
</script>
<script type='text/javascript' src='https://qzoreteam.ru/wp-content/themes/pochk/js/tie-scripts.js'></script>
<script type='text/javascript' src='https://qzoreteam.ru/wp-content/themes/pochk/js/ilightbox.packed.js'></script>
<script type='text/javascript' src='/wp-includes/js/comment-reply.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js'></script>
<script type='text/javascript'>
/* */
var gglcptch_pre = {
"messages": {
"in_progress": "\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0434\u043e\u0436\u0434\u0438\u0442\u0435\u0441\u044c \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 Google reCAPTCHA.",
"timeout": "\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c Google reCAPTCHA. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0412\u0430\u0448\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0441\u0435\u0442\u0438 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443."
}
};
/* */
</script>
<script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/google-captcha/js/pre-api-script.js'></script>
<script type='text/javascript' data-cfasync="false" async="async" defer="defer" src='https://www.google.com/recaptcha/api.js?onload=gglcptch_onload_callback&render=explicit'></script>
<script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/google-captcha/js/script.js'></script>
<script type="text/javascript" src="https://qzoreteam.ru/wp-content/themes/pochk/my/my.js"></script>
<script type="text/javascript" src="https://qzoreteam.ru/wp-content/themes/pochk/my/etimer.js"></script>
</body>
</html> 