Как сделать тег h1
HTML теги h1, h2, h3, h4, h5, h6 — это шесть заголовков показывающих относительную важность блока после заголовка в зависимости от уровня заголовка h1, h2, h3 и т.д. Тег h1 — заголовок первого уровня, тег h2 — второго, тег h3 — третьего, тег h6 — наименее значимый заголовок из всех. Заголовок h1 — второй по важности для SEO сайта элемент на странице после тега title (заголовка страницы) и самый важный тег из всех тегов H.
Использование html тега заголовка h1 на странице допускается не более одиного раза и по умолчанию, заголовок первого уровня H1 отображается самым крупным (среди прочих тегов H) шрифтом жирного начертания. Остальные теги заголовков H имеют шрифт меньшего размера в зависимости от уровня.
Пример использования заголовка h1
Заголовки h1, h2, h3,…, h6 — html теги имеющие обязательный закрывающий тег. Они относятся к блочным элементам и всегда отображаются с новой строки. Элементы следующие после заголовка H также начинаются с новой строки без использования
. Так же, до и после заголовка h1-h6 добавляется отступ. При использовании тега h1 и других тегов заголовков допускается использование атрибута align, который определяет выравнивание заголовка. По умолчанию, все html-теги h1-h6 выравниваются по левому краю (h1 align left), при помощи атрибута align можно выровнять тег h1 по центру (h1 align center) или по правому краю (h1 align right).
Так же, нежелательно использование тегов внутри H1, H2, H3,…,H6. Особенно совместное использование заголовков H с html-тегами: STRONG, B, EM и A.
Теги h1,h2,h3 пример:
Поскольку теги h1,…,h6 призваны акцентировать внимание поисковых систем на определённых участках текста, их используют при SEO верстки сайта, например для отображения h1 заголовка текста или иного контента. Однако использование заголовков h2-h6 зачастую не ограничивается СЕО копирайтингом и выходит за рамки текста. В результате заголовки и их свойства используются для оформления меню категорий и даже элементов сайдбара или футера. В подобных случаях может быть нарушен не только порядок размещения заголовков H на странице по уровню, но и крайне важный принцип оригинальности заголовков h1,h2,h3,h4,h5,h6 в рамках всех страниц сайта. Об этом ниже.
HTML тег h1 что писать и как заполнять
От того как прописать тег h1 и остальные теги H, во многом зависит успешность оптимизации и SEO продвижения сайта по запросам в поиске. Перед тем как сделать заголовок h1 стоит учитывать несколько простых правил. Используя подобные правила, вы можете произвести собственный SEO-аудит сайта самостоятельно. Они касаются того каким будет текст заголовка h1 и где будут размещены заголовки.
Как использовать заголовки h1-h6:
Текст заголовка h1,h2,h3,…,h6
Теги h1-h6 должны содержать коротокое описание соответствующей секции текста с харатерными ключевыми словами. Не стоит включать в содержимое заголовка ничего лишнего. При заполнении h1,h2,h3,h4,h5,h6 заголовков, а так же заголовка страницы title и прочих атрибутов, желательно придерживаться следующих правил при оценке значимости заголовка.
Содержание заголовков H1-H6:
- Прямое вхождение ключевого слова в заголовке. Точное соответствие ключевого слова в заголовке повышает релевантность страницы по соответствующему запросу.
- Уникальность заголовка относительно других страниц сайта. Повторяющиеся заголовки на разных страницах сайта могут не учитыватся поисковыми системами.
- Близость заголовка к началу документа. Чем ближе к началу html-кода находится заголовок, тем больше его значение относительно других элементов страницы и тем более значимым является содержимое заголовка.
- Близость ключевого слова к началу заголовка. В идеале, заголовок должен начинаться с ключевого слова.
- Длина заголовка h1,h2,h3,…,h6. Длина заголовка не должна превышать 60 символов. Поисковые системы обрабатывают ограниченое количество знаков, длинные заголовки не будут восприняты полностью.
- Грамотность заголовков. Грамматические ошибки в заголовке снижают релевантность заголовка.
- Плотность ключевых слов в заголовке. Все заголовки оцениваются на переоптимизацию. По этому, не стоит впихивать в заголовок все больше ключевых слов, заголовок может быть проигнорирован.
Тег h1 joomla, wordpress — заголовки в CMS
Многие CMS поддерживают использование заголовков h1,…,h6. Иногда заголовки расставляются автоматически. Однако не всегда с учетом специфики сайта. Правильная расстановка заголовков в тегах h1,2,3,4,5,6 на joomla, wordpress и сайтах других современных CMS может дать потрясающий результат для СЕО сайта. По этому, не жалейте времени на настройку движка сайта. Поверьте, окупится.
H1-H6 заголовки имеют чрезвычайно важное значение. Не стоит ими пренебрегать, но и злоупотреблять тоже не стоит. Заголовки могут как поднять, так и опустить сайт.
Пишите в комментариях, как вы используете H-заголовки.
Добавляйте статью в избранное, делитесь с друзьями.
Подписывайтесь на СЕО-блог.
Если бы Вы хотели создать h1 в HTML, он бы выглядел примерно вот так:
Для примера. Откройте любую веб-страницу и выполните следующие шаги.
1. Убедитесь в том, что Вы находитесь на веб-странице.
Рис. 2. Пример веб-страницы
2. Посмотрите на источник кода.
Рис. 3. Как просмотреть источник кода на веб-странице
Вот что Вы увидите, просматривая источник кода:
Рис. 4. Пример источника кода
3. Найдите тег h1.
Нажмите CTRL + F и откройте строку поиска в своем браузере. После нажатия CTRL + F, появляется маленькое окошко поиска в верхнем правом углу окна браузера.
Рис. 5. Тег h1 на странице исходного кода
Почему тег h1 так важен?
Тег h1 всегда был очень важным фактором ранжирования.
Было немало трендов в сфере SEO, которые становились популярными, а затем исчезали, но теги h1 всегда имели большое значение.
h1 – это, как правило, визуально самый заметный контент на странице.
Это, возможно, самая важная SEO-функция тега h1. Хотя поначалу, Вы можете не осознавать всю значимость тегов h1.
Почему нет? Потому, что они скорее ориентированы на пользователя, чем на техническую оптимизацию страницы, да?
Да! Именно в этом направлении движется SEO-оптимизация в последние годы. В наши дни SEO в большей степени ориентируется на пользовательскую оптимизацию, чем на оптимизацию в поисковой системе.
Не забывайте о том, что пользователи должны замечать H1. Этот тег имеет значение!
Тег H1 является одной из наиболее мощных стратегий SEO и ключевым пользовательским элементом в Вашем арсенале.
Теперь давайте обсудим, как это работает.
Как создать убийственный тег h1?
Тег h1 – это не какая-то секретная стратегия. На самом деле, практически все знают что-то о SEO-оптимизации или HTML и используют теги h1.
80 % сайтов в топе результатов Google используют тег h1.
Рис. 6. 80 % сайтов в топе результатов Googleиспользуют тег h1
Вот правила создания тегов h1. Следуйте моим советам, и у вас будут идеальные теги h1.
1. Используйте только один тег h1.
На каждой странице должен быть только один тег H1. Нет причин для использования более одного тега H1.
Почему так? Если один тег так хорош, почему бы не использовать два или даже шестнадцать?
Это неправильный ход мысли.
Поисковые системы будут сканировать множественные теги H1 на странице, но намного логичней сосредоточить все свои усилия в сфере SEO на одной ключевой фразе или предложении, а не на многих.
Наличие более одного тега H1 не обязательно собьет поисковую систему с толку, но может рассеять ту силу SEO, которая концентрируется вокруг одного H1.
2. Ваш тег h1 должен описывать тему вашей страницы.
На самом базовом уровне, тег h1 должен описывать ваш контент.
- Часто тег h1 похож на тег оглавления.
- Обычно тег h1 является заголовком статьи в Вашем блоге.
- Как правило, тег h1 дает читателю представление о том, что он будет читать.
3. Длина тега h1 должна составлять 20-70 символов.
Не зацикливайтесь на длине тега h1. Она не играет такой роли, как раньше.
Единственная причина, по которой я об этом говорю – это желание Вас предостеречь. Если тег слишком короткий, Вы теряете ценное пространство. Но если он слишком длинный, мощность тега рассеивается.
Оптимальная средняя длина тега – 20-70 символов.
4. Ваш тег h1 должен выделяться.
Тег h1 должен быть самым важным визуальным элементом на странице.
- Он должен быть большим.
- Он должен быть заметным.
- Нужно использовать такие визуальные элементы, форматирование и стиль, которые заставят Ваш тег выделяться.
Почему это важно?
Как я уже говорил ранее в статье, пользовательский опыт – это самое важное.
Блог SmartPassiveIncome – это отличный пример правильного форматирования. Теги h1 Пэта Флинна очень мощные.
Я взглянул на исходный код и вот, что я увидел:
Вот еще один пример из блога Рамита Сетхи.
Можете угадать, где его тег h1?
То, что я пытаюсь вам сказать, связано с пользовательским опытом. Я остановлюсь на этом подробнее в следующем разделе.
5. Создавайте такие теги h1, которые обеспечивают хороший пользовательский опыт.
За последние несколько лет SEO-оптимизация сильно изменилась. Главное изменение связано с огромным влиянием пользовательского опыта на SEO.
Чтобы лучше понимать соотношение SEO и пользовательского опыта, давайте рассмотрим диаграмму Венна.
Эта диаграмма была опубликована в 2012 году.
В 2017 году SEO, вероятно, займет еще меньший круг в сравнении с дизайном и юзабилити.
Дело в том, что поисковые системы развиваются настолько быстро, что они предсказывают, чего именно хотят пользователи, когда они ищут или просматривают что-то.
Имейте в виду, что благодаря машинному обучению поисковые системы постоянно меняются. Изменения алгоритма предотвращают массовые сбои в работе поисковых систем и в результатах поиска.
Поисковые системы постоянно вносят изменения в алгоритм построения факторов ранжирования, основываясь на привычках миллионов пользователей.
Другими словами, то, как пользователи взаимодействуют с Вашей страницей, непосредственно влияет на то, как будет оцениваться Ваша страница.
Тег H1 является одним из самых важных элементов на Вашей странице. Он влияет на взаимодействие с пользователем.
Тег H1 должен напрямую общаться с пользователем!
Вот самое важное предложение из их исследования:
Это увлекательная часть познаний о теге H1. Имеет значение не просто само наличие тега H1 на странице – это отправная точка.
Самое главное – это способ форматирования и размещения тега H1!
6. Тег h1 должен соответствовать пользовательскому намерению.
Ваш тег H1 должен удовлетворить это намерение.
Если бы я писал статью на эту тему (ой, подождите, я же уже ее написал!), я попытался бы ответить на вопросы пользователей с помощью своего тега h1.
Вот как работает пользовательское намерение.
Во-первых, пользователь понимает, о чем статья. Именно ради этого они используют Google.
И вот многообещающие результаты.
Рис. 8. Результаты поискового запроса
Пользователи щелкают на одну из ссылок! А вот и статья из моего блога на эту тему.
Рис. 9. Статья о рискованных тактиках в сфере SEO
Моя цель состоит в том, чтобы мой тег h1 дал пользователю именно то, что ему нужно, – они ведь пришли за простыми, но рискованными тактиками в сфере SEO и хотят увеличить свой трафик.
Задача тега h1 – удовлетворять пользовательское намерение.
Позвольте мне кратко изложить основные правила создания потрясающих тегов H1.
- Используйте только один тег h1.
- Тег h1 должен описывать тему страницы.
- Тег h1 должен выделяться.
- Тег h1 должен обеспечивать хороший пользовательский опыт.
- Используйте ключевые слова в теге h
- Соответствуйте пользовательскому намерению в своем h
Как быстро определить и изменить теги h1 на сайте?
Проведите аудит тегов h1. Вот в чем сила тега h1 – это быстро и это просто. И это дает невероятные результаты в рекордные сроки.
Если у Вас небольшой сайт или блог, выполните следующие шаги.
Загрузите приложение ScreamingFrog
Приобретать лицензию на использование программного обеспечения не обязательно. Однако если Ваш веб-сайт содержит более 500 страниц, то рекомендуется все таки приобрести лицензию.
Откройте приложение ScreamingFrog.
После того, как Вы успешно загрузили Screaming Frog, откройте его.
Введите свой URL-адрес.
В зависимости от размера Вашего сайта, на это уйдет от нескольких минут до нескольких часов.
У приложения Screaming Frog уходит примерно меньше минуты, чтобы отсканировать 500 страниц.
Щелкните на тег h1 в панели меню.
Таким образом, вы увидите весь список тегов h1 на вашем сайте.
Проверьте, не отсутствуют ли какие-либо теги h1.
Проверьте меню фильтра.
Вы увидите все страницы на сайте, которым не хватает тега h1.
Ваша первая задача – создать тег h1 для каждой из этих страниц.
У Вас может быть причина не создавать тег h1 для каждой страницы. Моя страница в блоге является страницей меню со списком статей. Я их регулярно добавляю и обновляю, поэтому я решил не включать тег h1.
Создайте список отсутствующих тегов h1.
Найдите хорошее место для сохранения файла.
Это файл CSV, поэтому его можно открыть через Excel.
Отфильтруйте те теги h1, которые дублируются.
Сохраните эту информацию в файле CSV, чтобы использовать ее в будущем.
На данном этапе у Вас должно быть три файла CSV (отсутствуют, дублируются, все).
Создайте новый тег h1.
Ваша задача – создать новый тег h1 для каждой категории. Начните с отсутствующих тегов, затем перейдите к дублированным тегам и, наконец, пересмотрите все h1.
Если Ваш сайт содержит десятки тысяч страниц, начните работу с важнейшими тегами h1, а именно – с отсутствующими.
Но если у Вас есть время, обновите все свои теги h1 в соответствии с приведенными выше рекомендациями.
Вы почувствуете большую разницу в росте трафика, рейтинга и общей производительности сайта.
Вывод
Если Вы прочитали эту статью до конца, то Вы уже знаете о тегах h1 больше, чем большинство людей на планете.
Но что еще более важно – Вы точно знаете, как использовать тег H1 для максимального воздействия в сфере SEO.
Имейте в виду, что тег h1 по-прежнему очень важен для SEO-оптимизации. Это очень мощный инструмент – Ваш сайт может взлететь, Ваш контент может взлететь, а также Ваш трафик и Ваши рейтинги.
Надеюсь, что Вы сделаете то, что сделал я – я открыл для себя потенциал тегов h1. Обновите их на своем сайте – всплеск трафика гарантирован.
Эксперт в области SEO-продвижения и интернет-маркетинга. Опыт работы более 10 лет. Более 45 000 часов активных тренингов и практик.
более раза на страницу. Смотрите Defining sections вСледующий код показывает несколько заголовков с некоторым содержанием под ними .
Проблемы доступности
Навигация
Обычный метод навигации для пользователей программ чтения с экрана - это переход от заголовка к заголовку для быстрого определения содержимого страницы. Из-за этого важно не пропускать один или несколько уровней заголовка. Это может создать путаницу, так как человеку, который движется по этому пути, может быть интересно узнать, где находится отсутствующий заголовок.
Не делай
Делай
Расположение
Заголовки могут быть вложены в подразделы, чтобы отразить организацию содержимого страницы. Большинство программ чтения с экрана также могут создавать упорядоченный список всех заголовков на странице, что может помочь человеку быстро определить иерархию содержимого:
- h1 Жуки
- h2 Этимология
- h2 Распределение и разнообразие
- h2 Эволюция
- h3 Поздний полиозой
- h3 Юрский период
- h3 Меловойский период
- h3 К айнозойский период
- h3 Голова
- h4 Рот
- h4 Передгрудь
- h4 Пиероторакс
Содержание раздела маркировки
Другим распространённым методом навигации для пользователей программ чтения с экрана является создание списка содержимого секций и использование его для определения макета страницы.
Содержимое секционирования можно пометить, используя комбинацию aria-labelledby и id атрибута, с ярлыком, кратко описывающим назначение раздела. Этот метод полезен в ситуациях, когда на одной странице имеется более одного элемента секционирования.
Пример
Начать в любом случае нужно с теории, потому что без этого невозможно двигаться дальше. Итак, это html-теги, в которые помещают текст, который должен стать заголовком. H1 – это главный заголовок страницы, он должен быть единственным, h2 – подзаголовок статьи или раздела главы (если речь идет о книге), h3 – заголовок в разделе и т.д.
В сайтостроении, как правило, чаще всего используются h1-h3, последние три тега используются крайне редко, так как нет необходимости в разбивке текста на такие мелкие части, если только речь не идет об огромной по объему текстовой публикации.
По умолчанию заголовки уже имеют некоторое стилевое оформление. Например, буквы в заголовках выделены жирным шрифтом, а их размер в 1,5 – 3 раза больше обыкновенного текста на странице.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Основные правила работы с заголовками
Сколько h1 может быть на сайте? Сколько угодно, ведь интернет-ресурс может состоять из множества страниц. Тут гораздо важнее придерживаться другого правила – на каждой отдельной странице вашего сайта должен быть ОДИН h1. Все потому, что это главный заголовок, а главным всегда должен быть один.
Но что будет, если проигнорировать это правило? Как показывает реальная практика, ничего катастрофического, вероятно, не случится. Я бы не писал об этом, но мне известно несколько случаев, когда у веб-мастеров было несколько h1 на странице, при этом все их статьи сохраняли свои позиции в поисковых системах.
Так-то оно может и так, только вот не нужно специально создавать несколько h1 на странице. Все равно это не правильно и вред от того все равно может быть. Например, в приведенных выше ситуациях у веб-мастеров были уже возрастные раскрученные сайты, поэтому несколько h1 на странице не ухудшили ситуацию.
Однако при раскрутке молодого сайта очень важно соблюдать разные тонкости, чтобы ресурс максимально быстро получил одобрение поисковиков и начал приносить трафик.
Очевидно, что h1 должен быть в самом начале статьи. Это не то же самое, что мета-тег title. Title виден при поисковой выдаче и в названии вкладки браузера, а h1 – непосредственно на странице. Остальных заголовков (h2-h6) может быть сколько угодно, в любом количестве.
Как проверить наличие h1 на странице?
Теперь мы переходим к самому главному. Как же определить, нормально ли у вас все на сайте с заголовком? Есть как минимум несколько вариантов, как вы это можете сделать.
Во-первых, открыть исходный код и произвести в нем поиск. Исходный код открывается с помощью комбинации клавиш Ctrl + U. Далее вам понадобится комбинация Ctrl + F, чтобы открыть поиск. Введите в нем название нужного тега, а именно – h1.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Правильно будет, если вам найдет два результата – открывающий и закрывающий тег соответственно. Если результатов больше, нужно вносить правки в код шаблона сайта. Если h1 вообще отсутствует, тоже нужно принимать меры, чтобы он появился.
В сервисе “Мегаиндекс” есть возможность проверить релевантность страницы, то есть то, насколько она оптимизирована под определенную ключевую фразу. Введите адрес одной из страниц вашего сайта и основную ключевую фразу. В случае проверки лишь h1 эта ключевая фраза может быть любой.
Как видите, проверка показала, что на странице всего 1 h1 – это хорошо. Если бы было больше, проверка бы обязательно это определила. Как видите, это важный фактор, хотя и не критический. Его несоблюдение не приведет к чему-то катастрофическому, но при поисковой оптимизации подобные проблемы должны быть убраны в первую очередь.
Если проблема найдена, как ее решать?
Например, в WordPress вам нужно будет редактировать файлы page.php (шаблон страницы) и single.php (шаблон записи). Также полезно будет просмотреть файлы index.php (главная страница) и archive.php (архивы по дате и автору), а иногда в темах есть еще category.php (записи отдельной рубрики).
Например, в одном шаблоне название поста выводилось в h2. Возможно, его разработчик не разбирается в SEO, поэтому и допустил такую ошибку. Но это легко исправляется. Редактируем single.php и меняем в нем h2 на h1. Это можно сделать как вручную, так и с помощью функции автоматической замены.
Возможно, так же понадобится редактирование боковой колонки (sidebar.php). Собственно, лишние h1 могут быть где угодно: в заголовках виджетов, в меню и даже в футере (footer.php). Все это нужно найти и убрать.
Ну а что делать, если в самой статье несколько h1? Тогда проблема решается еще легче – редактированием самой статьи. Уберите все лишние h1, оставив только один главный верхний заголовок.
Что ж, теперь вы знаете, как проверить заголовок h1 на странице и правильно настроить шаблон. Конечно, это всего лишь одна из множества настроек, которые помогут вам раскрутить и монетизировать сайт. Намного больше информации вы можете найти, если изучите курс по раскрутке личного блога и его выводе на доход от 20 тысяч рублей в месяц в самое кратчайшее время. Успехов вам во всем и хороших позиций в поиске!
Читайте также: