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

Уровни типографической иерархии

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

Можно выделить три основных уровня типографической иерархии:

  • Первый уровень – это непосредственно сам заголовок. Задача этого уровня привлечь читателя и провести его в направлении второго уровня.
  • Второй уровень – это подзаголовки, цитаты, описания и все остальное, что идёт отдельно от основного текста, но в его поддержку. Цель этого уровня повысить сканируемость текста и подтолкнуть читателя к дальнейшему чтению.
  • Третий уровень – это наш основной текст. Цель этого уровня – уйти с пути пользователя. Мы должны не мешать и не привлекать внимание к тому, что может отвлечь пользователя и увести с данной страницы. Пользователь решает, нужно ли ему переходить к этому уровню на основании двух предыдущих.

Первый уровень (заголовок)

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

В среднем 8 из 10 человек прочитают ваш заголовок, и только 2 из 10 прочитают остальной текст. Поэтому для заголовка важна максимальная информативность.

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

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

  • Контрастность – заголовок должен быть достаточно контрастным по отношению к остальным элементам.
  • Размер – увеличение размера текста для заголовка является самым простым способом выделить данный элемент.
  • Начертание – еще один способ выделить заголовок. Можно сделать текст заголовка в жирном начертании, супер жирном или курсивом. Это позволит тексту выделиться.
  • Пространство – для более четкой идентификации заголовка нужно добавить свободного пространства вокруг него. Чтобы пользователь четко знал, что это основной элемент на странице, и на нём нужно заострить своё внимание.

Второй уровень (подзаголовок)

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

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

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

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

Третий уровень

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

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

В данной статье рассмотрим особенности правильной расстановки тегов h1, h2…h6 (h сокращение от англ. слова heading – заголовок) и их влияние на оптимизацию сайта в целом. Если теги расставлены неверно, поисковым системам трудно получать информацию о размещенных на вашем сайте статьях и ключевых словах, которые они содержат. Теги дают возможность выделить заголовки и сделать Вашу статью более удобной для прочтения. Кроме того они обеспечивают преимущества вашего сайта в системе ранжирования, упорядочивая html код страницы.

Как определить, что Ваш сайт находится под фильтрами Google? Подробнее .

Заголовок Вашего сайта обозначает тег h1 . Он дает возможность понять поисковой системе название онлайн-ресурса. Например, сайт об аренде серверов. В главном названии будет выводиться именно данное название при поиске в системе. Не стоит путать h1 с тегом (заголовком страницы), ведь <title> пишется в шапке страницы между <head></head>, в то время, когда h1-h6 указывают в «теле» страницы и заключают между тегов <body></body>. </p> <p><b><i>Как правильно составить главный заголовок h1? </i> </b></p> <ul><li><span>обязательное использование ключевых слов для продвижения; </span></li> <li><span>h1 используют один раз на одной странице, если размещать больше ПС может воспринять <a href="/windows-10/kto-pervyi-v-instagramme-po-podpischikam-instagram-v-cifrah.html">данный факт</a> как переоптимизацию; </span></li> <li><span>будет достаточно нескольких слов, не нужно помещать в данный тег все ключевики страницы; </span></li> <li><span>заголовок должен быть читабельным; </span></li> <li><span>мета тег h1 должен содержать только текст; </span></li> <li><span>h1 должен отвечать тематике, которая указана в title данной страницы; </span></li> <li><span>не перечисляйте <a href="/computer-literacy/gde-luchshe-nachat-reklamu-odnostranichnika-kak-reklamirovat.html">ключевые фразы</a> через запятую, это усугубляет релевантность; </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><a href="/configuring-wi-fi/podbor-klyuchevyh-slov-statistika-klyuchevyh-slov-google-i.html">ключевое слово</a> должно быть как можно ближе к началу заголовка; </span></li> <li><span>длина заголовка не должна превышать 60 символов, так как длинный заголовок не будет воспринят поисковиком; </span></li> <li><span>исключить из заголовка грамматические ошибки; </span></li> <li><span>заголовки проверяются на переоптимизацию, поэтому не стоит помещать как можно больше ключевых слов в один заголовок. </span></li> </ol><p><b><i>Что писать и как правильно заполнять. Практические советы. </i> </b></p> <p>Успешность оптимизации сайта во многом зависит от того, как прописаны теги. Поэтому следует придерживаться <a href="/computer-literacy/kak-nazyvaetsya-provod-ot-telefona-k-fleshke-kak-uznat-podderzhivaet-li.html">следующих правил</a> написания тегов: </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>22022 раз(а) <span>4 Сегодня просмотрено раз(а) </p> <p>Возникает вопрос, как же одни сайты получают преимущество над другими, обходят их в выдаче? Ведь инструменты оптимизации используются одни и те же. Ответ, казалось бы, очевиден: за счёт внешней оптимизации, и её безграничного ресурса. Однако, дело не только в этом. </p><p>Существуют и более сложные этапы внутренней оптимизации, которые многие вебмастера игнорируют. Я говорю, прежде всего, о расстановке заголовков h1-h6. В большинстве своём, они расставлены неправильно, или же по одному образцу, без учёта специфики сайта. Только самостоятельная расстановка этих заголовков поможет добиться максимального эффекта. О том, что такое заголовки h1-h6, зачем они нужны и как лучше расставить их, я расскажу в этой статье.</p><p>Теги h1-h6 используются для выделения наиболее важных частей текста. Их так же называют тегами акцентирования. Они ориентированы, в основном, на поисковые системы, давая им понять, какие части текста содержат более точную информацию о теме статьи, её ключевых словах. Использование тегов h1-h6 даёт возможность получить преимущество при ранжировании поисковой системой сайтов. Однако для этого необходимо использовать их грамотно.</p><p>В теории всё достаточно просто: заголовок первого уровня (h1) используется для выделения названия сайта. Заголовок второго уровня (h2) акцентирует внимание поисковой системы на названии статьи. Заголовки третьего уровня (h3) выделяют подпункты статьи, заголовки h4, h5 и h6 могут использоваться по усмотрению, выделяя как <a href="/solving-problems/imho-chto-znachit-eto-slovo-pri-obshchenii-v-internete-i-rasshifrovka-abbreviatury.html">значимые слова</a> в тексте, так и заголовки сайт-бара и другие значимые элементы. На деле же всё немного сложнее: не всегда имеет смысл расставлять заголовки так, как это описано выше. Например, если вы продвигаете только <a href="/the-security-of-your-computer/kak-zablokirovat-otdelnuyu-stranicu-vkontakte-kak.html">отдельные страницы</a> сайта (как это делается в случае с блогами), то нет никакого смысла заключать название сайта в тег h1, этот тег лучше приберечь для названия статьи, так как именно оно несёт основную тематическую нагрузку. Теги h2 можно использовать для выделения подпунктов . Остальное по аналогии. Иными словами, схем расстановки тегов h много, вам необходимо проанализировать свой сайт, специфику его продвижения, и расставить заголовки в соответствии с вашими выводами.</p><p><b>Почему то, о чём я говорю так важно? </b> Сейчас многие пользуются бесплатными платформами для ведения сайтов, или же используют <a href="/the-security-of-your-computer/primer-napisaniya-nadstroiki-dlya-word-ne-volnuites-ya-seichas-vse-obyasnyu.html">стандартные шаблоны</a>. В них очень часто заголовки расставлены из рук вон плохо, это сильно ограничивает возможности внутренней оптимизации. Единожды разобравшись со всем сам и сделав всё правильно, получаешь большое преимущество на будущее.</p><p>Итак, существует несколько правил расстановки заголовков h1-h6. Представлю их ниже.</p><p>Картинка кликабельна </p><p><b>1. </b> Структура заголовков. Это самое важное из правил. Заголовки более <a href="/computer-literacy/chto-takoe-uroven-sar-v-sovremennom-telefone-ili-smartfone-uroven-sar.html">высокого уровня</a> (чем меньше цифра – тем выше уровень) должны находиться на странице выше. То есть, заголовок h1 всегда должен располагаться выше заголовка h2, а он, в свою очередь, выше заголовка h3. И так далее.<br><b>2. </b> Размер шрифта заголовков. Это тоже обязательное условие. Чем выше уровень заголовка – тем больше должен быть шрифт. Заголовок h1 будет иметь самый <a href="/configuring-wi-fi/kak-umenshit-shrift-na-kompyutere-s-pomoshchyu-klaviatury-o-tom-kak.html">большой шрифт</a>. Шрифты заголовков редактируются в стилях. Впрочем, они обычно по умолчанию имеют правильные размеры.<br><b>3. </b>Теги h не должны содержать в себе ничего, кроме текста. То есть, заключать в них картинки, ссылки и другие элементы контента категорически не рекомендуется.<br><b>4. </b> Не допускается использование тегов h вместе с другими тегами акцентирования.<br><b>5. </b> Так как теги h1-h6 акцентируют внимание поисковой системы на <a href="/the-security-of-your-computer/sistemnaya-shina-chto-eto-sistemnaya-shina---vazhneishii-element-kompyutera.html">важных элементах</a> страницы, такое акцентирование должно быть обоснованным. Выделенный участок текста должен содержать ключевые слова или фразы, иначе можно сбить с толку поисковую систему, тем самым только навредив.<br><b>6. </b>Тег h1 используется на одной странице только один раз. Иных вариантов не допускается.</p><p>Как видите, ничего сложного. Гораздо важнее описанные выше рекомендации по правильной расстановке акцентов. На каждой странице совсем не обязательно использовать все теги акцентирования, достаточно <a href="/solving-problems/s-kakih-cifr-nachinayutsya-nomera-bilain-bilain-pervye-tri-cifry-na.html">первых трёх</a> уровней. Стоит отметить, что для грамотной расстановки заголовков могут понадобиться некоторые знания в html. Первая заповедь вебмастера – не навреди. Поэтому если таких знаний нет, то лучше поручить это дело кому-то другому.</p><p><u>Основное сказал. </u> К сожалению, описать все возможные ситуации не могу. Чтобы обойти конкурентов, нужно не только качественно проводить каждый этап оптимизации, но и не упускать ни один из этапов. Только тогда вы и ваш сайт добьётесь успехов. На этом статью завершаю. Удачи! </p> <p>Заголовок в тексте - это инструмент, который делает информацию удобной для читателей и структурирует ее для поисковых систем. При правильном оформлении тегов H1–H6 страницу сайта будет проще вывести на лидирующие позиции в выдаче.</p> <p>Именно по <a href="/tips-for-beginners/zagolovki-tegi-h1-h2-h3-v-html5-i-seo-zabluzhdeniya-pravila.html">seo заголовкам</a> Google и Яндекс определяют, насколько тематика Вашей страницы совпадает с запросами, которые вводят пользователи. Иными словами, насколько релевантна <a href="/windows-10/chto-daet-udalenie-stranicy-v-vkontakte-kak-udalit-stranicu-v.html">данная страница</a>. Релевантность страниц – один из главных факторов seo продвижения.</p> <p>h1 — главный подзаголовок в статье, который обычно размещен над текстом.</p> <p>h2-h6 - маленькие подзаголовки, которые проставляются по принципу вложенности.</p> <h2><span>Главный заголовок h1 </span></h2> <p>Самый главный заголовок страницы размечается тегом h1. Это может быть название страницы, статьи или товара. Это обязательный заголовок и он должен присутствовать на всех страницах сайта без исключения. Очень часто встречаю, что тега h1 просто нет или их несколько. На месте заголовка страницы заместо h1, находится тег h2. Это еще в <a href="/the-security-of-your-computer/reiting-programm-defragmentacii-diska-obzor-defragmentatorov-i-ih-sravnenie.html">лучшем случае</a> — бывает что вообще нет заголовков типа H на странице. А то что выглядит типа заголовка, просто обычный div или span блок с прописанными заранее стилями подходящими на заголовок.</p> <p>Каждая страница вашего сайта несет в себе какую-то <a href="/configuring-windows/error-applying-security-in-windows-7-how-to-open-access-to-specific-information.html">конкретную информацию</a> (во всяком случае, должна нести). Основную суть информации вы и будете размещать в заголовке. Например, если вы продаете 3D-телевизоры, значит заголовок страницы должен выглядеть как основной запрос и выделяться в <a href="/internet-tips/vstavka-izobrazheniya-v-html-kod-stranicy-kak-vstavit-kartinku-v-html.html">html коде</a> страницы тегом h1.</p> <h3><span>Основные требования к h1 </span></h3> <ul><li>На странице должен присутствовать <b>только один </b> заголовок первого порядка (заголовок 1, h1). Это главный заголовок, <a href="/windows-10/vidit-li-polzovatel-feisbuka-gostei-kak-posmotret-gostei-v.html">видимый пользователю</a> и отражающий ключевую суть поста.</li> <li>Заголовок H1 всегда стоит в начале текста.</li> <li>Длина заголовка должна быть не более 65 символов.</li> <li>H1 должен быть уникальным в рамках вашего сайта.</li> <li>Тег H1 не должен быть ссылкой, картинкой и т.д. Заголовок должен быть заголовком.</li> <li>В H1 старайтесь заключать самое частотное ключевое слово.</li> </ul><h2>Заголовок h2 </h2> <p>Если h1 многие все же придерживаются правил и используют на страницах своего сайта, то тегом h2 многие пренебрегают, а зря! Этим тегом обычно размечаются подразделы статьи, страницы.</p> <p>Еще на этапе сбора <a href="/configuring-windows/kak-vybrat-semanticheskoe-yadro-kak-ispolzovat-gotovoe-semanticheskoe.html">семантического ядра</a> для сайта в целом или для отдельной статьи нужно примерно понимать из каких разделов будет состоять статья. Опишем ли мы подробно преимущества, стоимость или какие-либо другие подробности по теме статьи или по товару.</p> <p>Например, страницы товара в магазине телевизоров — если заголовок h1 страницы имеет вид «Телевизор Panasonic TX-75EXR780», то тегом h2 мы будем примерно разбивать на части (подразделы) описание самого товара на странице и иметь вид «Характеристики телевизора Panasonic TX-75EXR780» и «Преимущества телевизора Panasonic TX-75EXR780».</p> <p>Тем самым мы за счет заголовков типа h2 захватим <a href="/solving-problems/tarif-bilain-nol-somnenii-viii-opisanie-i-vazhnye-momenty-tarifnyi-plan-bilaina.html">важные моменты</a>, которые также могут интересовал посетителя сайта помимо самого названия. Теперь сайт будет конкурировать с остальными не только по запросу по основному «Panasonic TX-75EXR780», но и по <a href="/useful-programs/prosmotr-poiskovyh-zaprosov-yandeks-kak-ispolzovat-pravuyu-kolonku.html">дополнительным запросы</a> касаемо преимуществ и характеристик данной модели телевизора. А охват большего числа запросов в свою очередь — это рост трафика на сайт.</p> <p>Иногда заголовок типа h2 попадал в сниппет результатов поиска. Туда как правило попадает либо h1, либо title — они оба самые сильные по важности заголовки страницы и за ними преимущество, но не исключено и влияние h2 на сниппет.</p> <h3><span>Основные требования к h2 </span></h3> <ul><li>На странице желательно наличие 2-4 заголовков H2. Должны отражать суть дальнейшего текста.</li> <li>Наиболее частотный запрос - в заголовке H1, менее частотные - желательно в H2.</li> <li>Тег H2 не должны быть ссылкой, картинкой и т.д. Заголовок должен быть заголовком.</li> </ul><h2>Заголовки h3-h6 </h2> <p>Все заголовки начинаz с h3 и до h6 несут в себе уточняющую и дробящую страницу на подразделы роль, но это используется крайне редко. У вас должна быть просто очень огромная статья, чтобы можно было выстроить такую иерархию из подразделов страницы и задействовать все типы заголовков.</p> <h3><span>Основные требования к h3-h6 </span></h3> <ul><li>Нельзя, чтобы наименьший подзаголовок присутствовал без большего. То есть, если в тексте стоит метатег h4, то ему обязательно должны предшествовать h2 и h3.</li> <li>Чем выше заголовок по уровню, тем крупнее должен быть и шрифт. В WordPress обычно по умолчанию настройки выставлены таким образом, что теги автоматически форматируются в правильном виде.</li> <li>Все h-теги обязаны соответствовать содержанию контента, отображать суть информации.</li> <li>Недопустимо использовать h1-h6 в качестве анкоров или активных ссылок.</li> <li>Нельзя писать другие теги внутри тега h.</li> <li>В h-тегах допускается только текст и знаки препинания.</li> <li>В подзаголовках не должно быть переспама ключевых слов. Ключевики лучше всего задействовать в title, h1, h2, а в более мелких, таких как h3, h5, h6 делать упор на детальное раскрытие темы.</li> </ul><h2></h2> <p>Все заголовки должны идти в <a href="/configuring-windows/kak-vyzvat-komandnuyu-stroku-esli-zabyl-parol-chto-delat-esli-vy-zabyli.html">строгом порядке</a>. Первым на странице всегда идет заголовок типа h1.</p> <p>Если подразделы для каждого из заголовков h2 получились внушительных размеров и в них затронуты несколько еще более мелких подтем, то внутри каждого или одного отельного подраздела с тегом h2 вы делаете сложенные «мини» подразделы страницы и размечаете их h3.</p> <p>Не обязательно что все подразделы озаглавленные тегом h2 будут большими и их надо дробить еще на несколько подразделов.</p> <p>Вот пример хорошей иерархии заголовков из статьи по продвижению сайта на WordPress :</p> <h2><span>Как заполнять h-теги в WordPress </span></h2> <p>h1 по умолчанию заполняется в поле над статьей:</p> <p>Чтобы сделать подзаголовки h2-h6, надо выделить необходимый элемент или поставить курсор на нужную строку и, наведя курсор на вкладку «заголовки», выбрать нужный, кликнув по нему.</p> <p>Есть еще более простой способ – можно набрать текст в Ворде, используя нужные разметки и просто копипастом перенести статью в редактор вордпресса. Выделенные в <a href="/internet-tips/sozdanie-stilei-dlya-zagolovkov-i-mnogourovnevyh-spiskov-v-word.html">Word заголовки</a> автоматически отобразятся в <a href="/the-security-of-your-computer/chto-takoe-fail-podkachki-i-zachem-on-nuzhen-fail-podkachki-kakoi.html">нужных размерах</a>. При необходимости можно подправить их, используя инструменты редактора CMS WordPress.</p> <p>Правильная расстановка заголовков в тегах h1, h2, h3, h4, h5, h6 может дать <a href="/useful-programs/luchshaya-dmv-antenna-svoimi-rukami-antenna-iz-provoloki-s-usilitelem-proverka.html">отличный результат</a> для SEO сайта. По этому, не жалейте времени на настройку.</p> <p>h1-h6 заголовки имеют чрезвычайно важное значение. Не стоит ими пренебрегать, но и злоупотреблять тоже не стоит. Заголовки могут как поднять, так и опустить сайт.</p> <p>Здравствуйте, дорогие читатели. Сегодня хочу уделить <a href="/internet-tips/gde-mozhno-naiti-telefon-chto-delat-esli-ukrali-telefon-osobogo-vnimaniya.html">особое внимание</a> теме заголовков в тегах h1 h2 - h6, т.к. в ближайшее время планирую (как и обещала) несколько практических статей по редактированию заголовков в шаблонах. Но прежде, чем осваивать что-либо на практике, я считаю, нужно пусть не знать, но понимать теорию. Давайте с самого начала определимся с понятиями, с тем, что такое заголовок в <a href="/tips-for-beginners/kakaya-programma-otkryvaet-faily-s-rasshireniem-html-programmy-dlya.html">HTML документ</a>ах, заголовок на сайте, странице.</p> <p>Все мы с вами знаем русский язык, и что касается общепринятого понятия <b>заголовок </b> – вопросов быть не должно. Заголовок - это то слово или фраза, которая обобщает весь смысл какого-то текста, информации, которые идут после него.</p> <p>Как любая книга начинается с заголовка, так и любой документ в интернете имеет свой заголовок.</p> <p>Но если мы, открывая книгу, понимаем, что вот эта фраза является заголовком, потому что имеет более большой или <a href="/configuring-wi-fi/kak-sdelat-zhirnyi-shrift-v-bloknote-zhirnyi-tekst-s-pomoshchyu-html-i-css.html">жирный шрифт</a>, то на интернет страницах действуют немного свои правила. В интернете слово заголовок имеет несколько значений и применяется в разных целях. Поэтому, необходимо знать и понимать, о каком именно заголовке идет речь, и что именно вам нужно.</p> <p>Первое и самое главное, в чем мы должны разобраться, это в том, что в HTML документе есть три разных понятия заголовка.</p> <p>Любой документ включает в себя три основных HTML тега:</p> <p><b><html> </b><br><b><head> </b><br> Здесь находится <a href="/useful-programs/lenovo-s650---tehnicheskie-harakteristiki-lenovo-s650---tehnicheskie-harakteristiki.html">техническая информация</a> о документе +<br> заголовок страницы в тегах<br><b><title> </b>Заголовок страницы<b>


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

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


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


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


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


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

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


Итак, из кода выше, мы видим, что HTML документ имеет свой заголовок , в котором располагается техническая информация, здесь же находятся и мета-теги, и один из самых важных тегов в seo - , который содержит в себе <b>заголовок страницы </b>. Именно этот заголовок видит каждый пользователь на вкладке браузера. Этот заголовок не имеет прямого отношения к заголовкам, которые находятся в теле <body> документа, но между ними есть тесная .</p> <p>Второй по значимости тег в seo – и является тег заголовка <h>.</p> <p>Итак, любая поисковая система придает большое значение этому тегу. Как приводила пример с книгой, именно он (вместе с title) сообщает тему страницы, о чем она, обобщает смысл статьи. Именно этот заголовок сообщает вам, о чем будет моя статья, которую вы читаете. Мы с вами видим, что такие заголовки всегда отличаются <a href="/windows-10/kakoi-razem-dlya-naushnikov-na-lumia-735-vneshnii-vid-razmery.html">внешним видом</a> от основного содержания страницы. Для этого и были придуманы специальные теги, которые отвечают за то, чтобы информация в них всегда была выделена.</p> <p>С одной стороны, тег, как бы один <h>, но с другой стороны, их шесть и все они пронумерованы в порядке своей значимости, и что очень важно, не просто значимость, а ещё и иерархия. Вот с этого момента начинается самое запутанное и непонятное – как определить значимость, что является более значимым, а что нет?</p> <p>Давайте просто рассуждать логически. Вот у нас главная страница на сайте. Как правило, главная страница отражает всю тематику сайта в целом. И в идеальном варианте – название сайта так же должно отражать всю тематику сайта. Значит, название сайта должно быть заголовком, причем, самым главным заголовком, т.е. в теге:</p> <blockquote><p><h1>Название сайта</h1>.</p> </blockquote> <p>Далее, не обязательно, но как правило, на <a href="/useful-programs/yandeks-nachalnaya-stranica-ustanovit-kak-sdelat-glavnuyu-stranicu-yandeks.html">главной странице</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>На второй вопрос однозначного ответа нет. Но я имею такое мнение, что если в сайдбаре есть такой информационный блок, в котором находится информация о сайте, информация, отражающая тематику сайта, то необходимо такие блоки оформлять тегами заголовка.</p> <p>Например, это может быть блок: <i> </i>. В заголовке такого блока находится ключевое слово, которое отражает тематику всего проекта. Поэтому такой блок стоит оформить в заголовок <h4>.</p> <p>Тут может возникнуть такой вопрос: А почему его не оформить в более высокого ранга тег? Ответ так же можно попробовать получить логическим путем.</p> <p>Как правило (подчеркиваю, как правило ), современная верстка сайта имеет такую структуру:</p> <p>Заголовок сайта<br> ↓<br> Основное содержание страницы<br> ↓<br> Сайдбар<br> ↓<br> Футер/подвал страницы</p> <p>Т.е. именно в таком порядке <a href="/hardware-solutions/poiskovyi-robot-chto-eto-takoe-i-kak-on-rabotaet-poiskovye-roboty-google.html">поисковый робот</a> видит всю информацию на странице.</p> <p><b>Второе </b>, что мы должны знать – все теги заголовков имеют свою иерархию (об этом писала выше), и не допустимо, чтобы тег третьего порядка был выше тега второго порядка.</p> <p>Казалось бы, на все вопросы ответили, и тема должна быть исчерпана, но не все так просто. Дело в том, что, как правило, <a href="/computer-literacy/wiki-razmetka-vkontakte-kak-oformit-gruppu-vkontakte-s-pomoshchyu.html">внутренние страницы</a> отличаются от главной, при этом, так же важно, чтобы они тоже были хорошо оптимизированы, чтобы мы получали с них трафик с поисковых систем. Поэтому, для них очень желательно применять свою иерархию заголовков.</p> <p>Из моей картинки в примере, если на сайте есть отдельные статьи о <i>Продвижении в поисковиках </i> и <i>Продвижении в <a href="/the-security-of-your-computer/zhenskie-socialnye-seti-spisok-socialnye-seti---chto-eto-takoe-socialnye-seti.html">социальных сетях</a> </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>Т.е. уже заголовок сайта не имеет такого важного значения, как заголовок статьи (может, мой пример, не самый наглядный, т.к. везде присутствует слово “продвижение”). Такая расстановка заголовков значительно улучшает ранжирование страниц в <a href="/internet-tips/5-samyh-populyarnyh-poiskovyh-sistem-poiskovye-sistemy-rossii-i.html">поисковых системах</a>, тем самым увеличивая переходы пользователей с них.</p> <p>Выше я написала, что это <b>желательно </b>, но не надо биться головой о стенку, если это невозможно сделать. Платформы, шаблоны и знания у всех разные, и если не получается, то лучше сконцентрироваться на чем-то другом, направить свои действия на улучшение того, что лучше получается. Ведь успешное продвижение в поисковых системах зависит от совокупности целого ряда факторов. Чем больше мы уделяем внимание внутренней оптимизации, тем меньше нам требуется внешняя. Если внутренняя уже исчерпала себя, то надо переключаться на внешнюю оптимизацию.</p> <p>Данная статья направлена, в первую очередь, на понимание темы, теории. В век CMS правильно сделать заголовки не сложно, но к сожалению, для этого надо обладать более глубокими знаниями в сайтостроении и программировании. И если для основного большинства моих читателей данная статья больше для ознакомления, то для тех, кто когда-нибудь будет заказывать создание сайтов Чебоксары или в любом другом городе мира, составлять техническое задание для верстальщика, программиста, создавать свой сайт самостоятельно, сможет либо объяснить, либо применить эти знания на практике.</p><p>Например, я давно собираюсь поэкспериментировать с шаблоном, и сделать именно так, как описала в статье, потому что считаю это самым <a href="/configuring-wi-fi/internet-in-the-village-the-best-options-satellite-internet.html">оптимальным вариантом</a>. Но я пока не так сильна в XML (для Blogger) и в PHP (для WordPress), чтобы сходу сообразить, как для <a href="/the-security-of-your-computer/yandeks-glavnaya-stranica-izo-kak-yandeks-sdelat-startovoi.html">разных страниц</a> сделать разные заголовки. Но зато, после этой статьи у меня будет больше стимула воплотить свои идеи на практике, и я обязательно расскажу вам, как это у меня получилось. Естественно, не только расскажу, но и поделюсь. </p><p><b>Статьи про то, и готовы. </b></p> <p>Если какие-то вопросы я раскрыла не достаточно полно, спрашивайте в комментариях, дополню. Пишу эти слова, т.к. чувствую, что в голове ещё что-то осталось недосказанное, но никак не могу вспомнить, что. Поэтому спрашивайте.</p> <p>Задумывались ли вы когда-нибудь о том, чтобы вести коллективный блог или хотя бы найти второго автора для своего блога. Если такие мысли вас посещают, то стоит обратить внимание на статью Недостатки нескольких авторов блога . Там же, на блоге, можете найти статью и о достоинствах.</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> </article> <div class="center"><em>Эта статья также доступна на следующих языках: <a href="/th/ebay-100/">Тайский</a><br><br></em> </div> <div class="share42init" data-url="/luchshie-magazinyi-ebay-spisok-100/" data-title="Лучшие магазины eBay: список 100+"></div> <script type="text/javascript" src="/wp-includes/share42/share42.js"></script> <div id="disqus_thread"> <div id="dsq-content"> <ul id="dsq-comments"> <li class="comment even thread-even depth-1" id="dsq-comment-1071"> <div id="dsq-comment-header-1071" class="dsq-comment-header"> <cite id="dsq-cite-1071"> <span id="dsq-author-user-1071">Next</span> </cite> </div> <div id="dsq-comment-body-1071" class="dsq-comment-body"> <div id="dsq-comment-message-1071" class="dsq-comment-message"><p>Огромное Вам СПАСИБО за очень полезную информацию в статье. Очень понятно все изложено. Чувствуется, что проделана большая работа по анализу работы магазина eBay</p> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="dsq-comment-1072"> <div id="dsq-comment-header-1072" class="dsq-comment-header"> <cite id="dsq-cite-1072"> <a id="dsq-author-user-1072" href="/" target="_blank" >rootshell</a> </cite> </div> <div id="dsq-comment-body-1072" class="dsq-comment-body"> <div id="dsq-comment-message-1072" class="dsq-comment-message"><p>Спасибо вам и другим постоянным читателям моего блога. Без вас у меня не было бы достаточной мотивации, чтобы посвящать много времени ведению этого сайта. У меня мозги так устроены: люблю копнуть вглубь, систематизировать разрозненные данные, пробовать то, что раньше до меня никто не делал, либо не смотрел под таким углом зрения. Жаль, что только нашим соотечественникам из-за кризиса в России отнюдь не до шоппинга на eBay. Покупают на Алиэкспрессе из Китая, так как там в разы дешевле товары (часто в ущерб качеству). Но онлайн-аукционы eBay, Amazon, ETSY легко дадут китайцам фору по ассортименту брендовых вещей, винтажных вещей, ручной работы и разных этнических товаров.</p> </div> </div> <ul class="children"> <li class="comment even depth-3" id="dsq-comment-1073"> <div id="dsq-comment-header-1073" class="dsq-comment-header"> <cite id="dsq-cite-1073"> <span id="dsq-author-user-1073">Next</span> </cite> </div> <div id="dsq-comment-body-1073" class="dsq-comment-body"> <div id="dsq-comment-message-1073" class="dsq-comment-message"><p>В ваших статьях ценно именно ваше личное отношение и анализ темы. Вы этот блог не бросайте, я сюда часто заглядываю. Нас таких много должно быть. Мне на эл. почту пришло недавно предложение о том, что научат торговать на Амазоне и eBay. И я вспомнила про ваши подробные статьи об этих торг. площ. Перечитала все заново и сделала вывод, что курсы- это лохотрон. Сама на eBay еще ничего не покупала. Я не из России , а из Казахстана (г. Алматы). Но нам тоже лишних трат пока не надо. Желаю вам удачи и берегите себя в азиатских краях.</p> </div> </div> </li> </ul> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-1281"> <div id="dsq-comment-header-1281" class="dsq-comment-header"> <cite id="dsq-cite-1281"> <a id="dsq-author-user-1281" href="/" target="_blank" >rootshell</a> </cite> </div> <div id="dsq-comment-body-1281" class="dsq-comment-body"> <div id="dsq-comment-message-1281" class="dsq-comment-message"><p>Еще приятно, что попытки eBay по руссификации интерфейса для пользователей из России и стран СНГ, начали приносить плоды. Ведь подавляющая часть граждан стран бывшего СССР не сильна познаниями иностранных языков. Английский язык знают не более 5% населения. Среди молодежи — побольше. Поэтому хотя бы интерфейс на русском языке — это большая помощь для онлайн-шоппинга на этой торговой площадке. Ебей не пошел по пути китайского собрата Алиэкспресс, где совершается машинный (очень корявый и непонятный, местами вызывающий смех) перевод описания товаров. Надеюсь, что на более продвинутом этапе развития искусственного интеллекта станет реальностью качественный машинный перевод с любого языка на любой за считанные доли секунды. Пока имеем вот что (профиль одного из продавцов на ебей с русским интерфейсом, но англоязычным описанием):<br /> https://uploads.disquscdn.com/images/7a52c9a89108b922159a4fad35de0ab0bee0c8804b9731f56d8a1dc659655d60.png</p> </div> </div> </li> </ul> </div> </div> </div> <div id="sidebar-bottom"> <aside id="sidebar-1" class="sidebar"> <div id="categories-2" class="widget widget_categories"><h4 class="widgettitle">Разделы</h4> <ul> <li class="cat-item"><a href="/category/configuring-windows/">Настройка Windows</a> </li> <li class="cat-item"><a href="/category/hardware-solutions/">Аппаратные решения</a> </li> <li class="cat-item"><a href="/category/windows-10/">Windows 10</a> </li> <li class="cat-item"><a href="/category/internet-tips/">Интернет-подсказки</a> </li> <li class="cat-item"><a href="/category/useful-programs/">Полезные программы</a> </li> <li class="cat-item"><a href="/category/configuring-wi-fi/">Настройка Wi-Fi</a> </li> <li class="cat-item"><a href="/category/tips-for-beginners/">Советы начинающим</a> </li> <li class="cat-item"><a href="/category/solving-problems/">Решение проблем</a> </li> </ul> </div><div id="text_icl-3" class="widget widget_text_icl"> <div class="textwidget"><p><a href="" rel="alternate" type="application/rss+xml"><img src="//feedburner.google.com/fb/images/pub/feed-icon32x32.png" alt="" style="vertical-align:middle;border:0"/ loading=lazy></a> <a href="" rel="alternate" type="application/rss+xml">Подписаться на RSS</a></p></div> </div><div id="text_icl-7" class="widget widget_text_icl"> <div class="textwidget"><div class="center"></div></div> </div><div id="text_icl-8" class="widget widget_text_icl"> <div class="textwidget"></div> </div><div id="text_icl-13" class="widget widget_text_icl"> </div><div id="text_icl-14" class="widget widget_text_icl"> </div> </aside> <aside id="sidebar-2" class="sidebar"> </aside> </div> </section> <footer id="footer"> <div class="center">Разрешается копирование материалов сайта с обязательной ссылкой на <a href="/">makewap.ru</a>  </div> </footer> </div> <script type='text/javascript'> /* <![CDATA[ */ var scriptParams = { "google_search_engine_id":"007248068859778613277:ewdxetioq-u"} ; /* ]]> */ </script> <script type='text/javascript' src='https://makewap.ru/wp-content/plugins/wp-google-search/assets/js/google_cse_v2.js?ver=1'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9'></script> <script> window.__bp_session_timeout = '900'; window.__bp_session_freezing = 0; !function() { window.bizpanda || (window.bizpanda = { }), window.bizpanda.bp_can_store_localy = function() { return !1 } , window.bizpanda.bp_ut_get_cookie = function(e) { for( var n = e + "=", i = document.cookie.split(";"), o = 0; o < i.length; o++ ) { for( var t = i[o]; " " == t.charAt(0); ) { t = t.substring(1); } if( 0 == t.indexOf(n) ) { return decodeURIComponent(t.substring(n.length, t.length)) } } return !1 } , window.bizpanda.bp_ut_set_cookie = function(e, n, i) { var o = new Date; o.setTime(o.getTime() + 24 * i * 60 * 60 * 1e3); var t = "expires=" + o.toUTCString(); document.cookie = e + "=" + encodeURIComponent(n) + "; " + t + "; path=/" } , window.bizpanda.bp_ut_get_obj = function(e) { var n = null; return (n = window.bizpanda.bp_can_store_localy() ? window.localStorage.getItem("bp_ut_session") : window.bizpanda.bp_ut_get_cookie("bp_ut_session")) ? (n = JSON.parse(n), n.started + 1e3 * e < (new Date).getTime() && (n = null), n) : !1 } , window.bizpanda.bp_ut_set_obj = function(e) { e.started && window.__bp_session_freezing || (e.started = (new Date).getTime()); var e = JSON.stringify(e); window.bizpanda.bp_can_store_localy() ? window.localStorage.setItem("bp_ut_session", e) : window.bizpanda.bp_ut_set_cookie("bp_ut_session", e, 5e3) } , window.bizpanda.bp_ut_count_pageview = function() { var e = window.bizpanda.bp_ut_get_obj(window.__bp_session_timeout); e || (e = { }), e.pageviews || (e.pageviews = 0), 0 === e.pageviews && (e.referrer = document.referrer, e.landingPage = window.location.href, e.pageviews = 0), e.pageviews++, window.bizpanda.bp_ut_set_obj(e) } , window.bizpanda.bp_ut_count_locker_pageview = function() { var e = window.bizpanda.bp_ut_get_obj(window.__bp_timeout); e || (e = { }), e.lockerPageviews || (e.lockerPageviews = 0), e.lockerPageviews++, window.bizpanda.bp_ut_set_obj(e) } , window.bizpanda.bp_ut_count_pageview() } (); </script> </body> </html>