Способы создания заголовков разных уровней

Задание 2:

1) Введите теги

в начале и в конце (желательно) каждого куплета стихотворения и автора.

2) Внутри куплетов перед каждой строчкой (кроме первых) введите тег
.

3) Результат просмотрите в браузере.

4) Вставьте дополнительные пробелы между словами в заголовках (в первом – по одному, во втором – по три) командой &nbsp(дополнительный пробел). Результат просмотрите в браузере.

Источник

Составляем правильные заголовки H1, H2… H6: структура, оформление, SEO-оптимизация

2021-01-29 • 10 мин читать

Заголовки H (от английского слова «header») помогают пользователю быстро понять, стоит ли читать текст. Попадая на страницу, юзер просматривает название и оглавление (которое состоит из тегов Н2, Н3 и так далее) или скролит статью, вычленяя подзаголовки. Если он не увидит в них ценной информации, то покинет сайт.

Яндекс и Google учитывает эти HTML-элементы страницы при ранжировании. Роботы поисковых систем сканируют теги для семантического анализа, чтобы определить релевантность текста запросу. И присвоить высокую или низкую позицию в выдаче.

Удачная структура сыграет в плюс при продвижении сайта. За переспам можно получить санкции.

Иерархия

В языке HTML для обозначения иерархии заголовков используют цифры от 1 до 6. Самый важный и значимый — Н1. Это название статьи. Наименее значимый уровень – шестой.

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

Чаще всего достаточно двух-трех уровней, более глубокая вложенность подходит для объемных сложных документов.

Пример правильной структуры на странице:

Управление персоналом организации: стратегии и методы

Общие принципы

Методы управления

Экономические методы

Уровень оплаты труда

Система поощрений и наказаний

Административные методы

Социально-психологические методы

Задачи

Формирование кадрового состава

Управление затратами на персонал

Анализ качества работы сотрудников

Роль тегов H1…H6 в SEO

Заголовочные теги относятся к внутренней оптимизации, это важный фактор ранжирования.

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

SEO-аналитики считают, что поисковики придают особое значение ключам в заголовках. Вес ключа зависит от уровня: в Н1 ключевая фраза «весит» больше, чем в Н2, и так далее. Прописывать ключевые слова в точном вхождении не запрещено, но это рискованно. Если использовать их в каждом подзаголовке, можно получить санкции за спам.

SEO-оптимизация заголовков – тонкая задача. Аналитики советуют проверить топ выдачи. Если у конкурентов ключи целиком вписаны в заголовок, то можно рискнуть. Если они используют только синонимы или свободную форму ключа, то предпочтительнее такой же «белый» способ.

В любом случае ключевые слова нужно использовать максимально естественно. Прописывать в неизменном виде фразы типа «поставить пластиковые окна недорого Киров» — провальная стратегия.

Использовать точные ключи сразу в нескольких подзаголовках не стоит. Лучше комбинировать. Где-то вписать точное вхождение, где-то «хвост» (часть ключа), где-то использовать разбавку или синоним, а где-то вообще обойтись без вхождения.

Базовые правила

• Проверьте HTML-код шаблона. Заголовки всех уровней должны быть тегами Н, без замен при верстке. Иногда заголовки выводится не через теги, а через стили CSS. Это нужно исправить.
• Эти теги могут быть только в контенте. Использование заголовков для сайта в служебных и оформительских элементах недопустимо. Если вы обнаружите их в HTML-верстке сайтбара, подвала или меню, шаблон нужно поменять.
• Заголовки должны визуально отличаться от основного текста размером шрифта.
• Они не комбинируются с другими тегами. Например, нельзя делать их ссылкой, выделять наклонным или полужирным шрифтом. Верстку можно проверить через HTML-код.
• Должны быть уникальными, лучше и в рамках страницы, и в рамках всего сайта.
• Подзаголовки проверяются на переоптимизацию, поэтому нельзя злоупотреблять вхождением ключей.
• Важна лаконичность. Один подзаголовок – одна мысль или тезис. Оптимальная длина – до 50 знаков (некоторые исследователи считают, что до 65).

Главный заголовок

Начинающие веб-мастера иногда путают заголовок Н1 и Title. Это разные теги сайта, хотя у них похожие задачи.

Тайтл работает на продвижение страницы в поиске и на кликабельность сниппета. Чаще всего он начинается с главного ключа в прямом вхождении.

Н1 обычно виден только на сайте, а не в поисковой выдаче. Он сообщает, о чем страница, его цель — заинтересовать и удержать пользователя.

Н1 и Title не должны дублировать друг друга. Поисковые системы могут воспринять дубль с вхождением ключевой фразы как переспам. И понизить документ в выдаче.

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

Основные требования

• Н1 всегда один. На странице (в тексте, в оформительских элементах и так далее) не должно быть второго такого тега. Проверьте HTML-код.
• Всегда стоит в начале текста.
• Не должен дублировать другие заголовки на этом сайте.
• Его пишут для людей, он должен соответствовать контенту, быть читабельным, информативным, интересным.
• Идеальная длина Н1 – до 50 символов, но это не жесткое правило.
• Точка в конце не нужна. Ее можно поставить в середине, если заголовок состоит из двух или трех предложений.
• Грамматические и орфографические ошибки недопустимы.
• Можно вписать ключевые слова, если они выглядят там естественно. «Белые» оптимизаторы используют не всю ключевую фразу, а только ее часть. «Разбавляют» ее другими словами или заменяют синонимами. Например, ключ – «купить кухню от производителя дешево Самара». Пример правильного заголовка: «Недорогие кухни от производителя в Самаре», «Готовые недорогие кухонные гарнитуры в Самаре»

Подзаголовок H2

Заголовки второго уровня делают статью удобной для чтения, превращают «простыню» текста в структурированный документ.

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

Прописывать ключевые слова в H2 не запрещено, если они раскрывают смысл главы. В подзаголовки иногда включают информационные вопросительные запросы. Примеры: «как долго служат пластиковые окна», «что такое армирование». Знак вопроса не ставится, ведь вы не спрашиваете об этом у читателя, а объясняете сами.

В тексте может быть много разных заголовков второго уровня, ограничений нет. Но SEO-аналитики считают, что не стоит дробить текст на маленькие кусочки. Оптимальная длина главы – 600-1000 знаков, но это не абсолютное правило.

Подзаголовки H3-H6

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

• Не забывайте про иерархию. В HTML-коде Н3 находятся строго после Н2, четвертый уровень после третьего и так далее.
• Чем больше цифра, тем меньше шрифт заголовка.
• Нельзя вписывать в подзаголовок другие теги, вставлять ссылки, картинки.
• Ключевые слова в точной или свободной форме не запрещены, если вхождение будет выглядеть естественно. Иногда рекомендуют использовать только часть ключа (хвост), чтобы избежать переспама. Например, в обзоре лосьонов один из ключей – «лосьон для зрелой кожи». Подзаголовок – «Для зрелой кожи». Такая фраза понятна пользователю, способствует SEO продвижению, а причин для санкций нет.

Читайте на askusers.ru

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

Мета-тег description поисковые системы могут использовать для формирования сниппетов, то есть тех фраз, которые пользователь видит в выдаче. Этот мета-тег часто выводится в анонс. Правильный description повысит кликабельность страницы.

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

Источник

Заголовки в дизайне (h1, h2, h3)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

При создании подзаголовков рекомендуется заключать их в теги H2 и H3. Тег H2 использовать для основного подзаголовка, а H3 использовать как заголовок в подзаголовке.

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

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

Основные рекомендации для третьего уровня:

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

Что еще почитать?

Начинающим дизайнерам рекомендую ознакомиться с заметкой О дизайне и о том как стать дизайнером. Тем кто хочет заниматься дизайном для iOS, определённо, следует почитать наш Справочник iOS дизайна .

Источник