Использование H -метки, особенно использование H1, всегда было спорным вопросом, а также является вопросом, достойным нашего исследования. Основываясь на опыте моих предшественников, я написал эту статью на основе моего понимания тегов H, надеясь, что это будет полезно для всех. Что такое H тег?
W3C отмечает, что теги H1-H6 могут определять названия. H1 определяет самый большой заголовок. H6 определяет самый маленький заголовок.
H1, H2, H3, H4, H5, H6, как теги заголовка и уменьшаются в зависимости от важности. Я думаю, что необходимо следовать таким принципам, которые могут прояснить иерархические отношения страницы и позволить поисковым системам лучше ползать и проанализировать содержание темы на странице и т. Д. Для лучшего понимания см. В следующем коде:
<body> <h1> Название первого уровня </h1> <p> Параграф </p> <div> <h2> Название второго уровня </h2> <p> ... </p> <div> <h3> Название второго уровня </h3> <p> </p> <h4> Название второго уровня </h4> <p> ... </p> </d div> </d Div> </d Div> </d Div> </d Div> </p> </p> <h4> </h4> <p> <p> <p> </p> </p> <h4>.
Стиль браузера по умолчанию также уменьшается в зависимости от важности, а размер шрифта изменяется от больших на малый от H1 на H6. Есть некоторые различия в стилях в разных браузерах. Из -за этой разницы мы обычно используем CSS для объединения их в макете.
Как вы его используете?В настоящее время многие веб-сайты (включая известные веб-сайты, такие как Taobao, Sina, Sohu) любят использовать H1 на логотипе, как показано на картинке:
Это не без причины для всех, чтобы использовать это, но на самом деле есть довольно много преимуществ: он суммирует содержание всей страницы, а логотип очень близок к телу, что позволяет поисковым системам захватывать тему самым быстрым, и с точки зрения семантики, это также более точное.
Конечно, не все веб -сайты используют H1 на логотипе. Использование Netease является более особенным примером:
Netease устанавливает дисплей: ни один стиль, чтобы скрыть его, что не только решает противоречие, не зная, куда положить H1, но также играет роль оптимизации SEO, которая может сказать, что убивает двух птиц одним камнем.
А домашняя страница Tencent H1 является заголовком новостей, как показано на картинке:
Из приведенного выше примера мы видим, что использование H1 отличается для крупных сайтов. Куда поместить его на H1? Это всегда была спорная проблема, но я не думаю, что есть абсолютный ответ на то, куда его поместить. Я думаю, что это следует рассматривать на основе таких факторов, как позиционирование, тип и привычки поиска пользователей веб -страницы. Например, для новостных веб -сайтов вы можете поместить H1 в заголовки новостей; Для комплексных веб -сайтов портала вы можете поместить H1 на логотип; Если веб -сайт компании также может поместить H1 на логотип, потому что пользователи обычно любят искать имя компании; Если есть лозунги веб -сайта, вы также можете положить H1 на лозунг, что также является хорошим выбором. Короче говоря, выбор того, который подходит лучше всего, является лучшим.
Что касается H2, я обычно люблю использовать его на большой колонке домашней страницы, как показано на рисунке:
Для страницы контента я больше привык предоставлять H2 заголовок статьи, и заголовок столбца представлен H3, как показано на рисунке:
H3 в основном используется для заголовков столбцов, как показано на рисунке:
Tag H, используемый на домашней странице R & F продуктов, не только имеет четкие иерархические отношения, но и подчеркивает важность содержания продукта, что также очень полезно для поисковых систем.
Следующий пример также очень интересен, как показано на рисунке:
Название столбца использует H2, а заголовок новостей использует H1. Если их порядок обращается вспять в соответствии с иерархическими отношениями, это не неправильно. На самом деле используя H -теги, мы также можем определить его на основе важности контента. Следовательно, только путем гибкого применения основных теорий может быть максимизировано.
Из приведенных выше примеров нетрудно видеть, что использование H -метки очень гибко и не ограничивается этими использованием. В нашем приложении нам нужно только следовать принципу снижения важности и учиться на одном примере и применить его к другим аспектам. То же самое верно для H4-H6.
Суммировал некоторыеОсновываясь на понимании и применении H-тегов с помощью справочных материалов, экспертов по производству фронта, известных веб-сайтов и т. Д., Я суммировал следующие спецификации, надеясь принести вам некоторую справочную ценность.
H1 название первого уровня
Он представляет собой верхний приоритет, и его позиция так же важна, как и позиция ключевых слов на странице. Обычно он используется в заголовках или заголовках веб -сайтов, а некоторые большие сайты также используются в логотипах. Хотя коды H1 могут быть написаны многолетно, они на самом деле семантически уникальны. Лучше всего появиться только один раз или нет на странице.
H2 Level 2 заголовок 2
В основном он появляется в заголовке статьи и заголовке столбца основного содержания страницы. Структура с тремя столбцами обычно находится в середине, а структура с двумя колоннами обычно находится на важной стороне. Можно использовать с H3.
H3 Treat Tilt
Как правило, боковая панель главной страницы. H4 является его вспомогательным и кажется не очень часто.
Отношения на уровне страниц не могут быть слишком глубокими, поэтому H4, H5, H6 обычно появляются меньше.