Заголовки страниц h1 — основной элемент верстки веб-страницы, h1 используется для обозначения главного заголовка на странице. С h1 практически всегда начинается текст материала, он выделяется самым крупных шрифтом. Это то, на что в первую очередь обращает внимание посетитель страницы. По основному заголовку он делает вывод о том соответствует ли материал его запросу и стоит ли уделять ему внимание.
Также данные тэги являются одним из важных факторов оптимизации для поисковых систем, наряду с тэгом title они сообщают о тематике и типе материала, основываясь на этой информации системы, такие как google и Яндекс, формируют поисковую выдачу.
Главная задача заголовков h1 — описать содержимое страницы и привлечь внимание целевых посетителей, то есть именно тех, для кого создана страница. Это первое, что видит пользователь при открытии страницы, и влияет на его первое впечатление о сайте. Поэтому, текст заголовка h1 должен быть кратким, ясным и информативными. Хорошо написанный заголовок поможет пользователям сразу понять, о чем будет вестись речь на странице и какой характер имеет материал (продающий, информационный).
Оптимизация заголовков h1 важна для улучшения ранжирования страницы в поисковой выдаче. Поисковые системы обращают внимание на заголовок h1 при определении содержания страницы, другие заголовки (h2, h3, h4, h5, h6) тоже учитываются, но имеют меньшее значение.
h1 должен содержать ключевые слова и фразы, связанные с тематикой страницы. Но не стоит злоупотреблять ключевыми словами, иначе это может быть расценено как спам и негативно сказаться на позиции сайта в выдаче.
Текст заголовков страниц h1: рекомендации
Общепринятые рекомендации по использованию заголовков страниц h1:
- Используйте только один заголовок h1 на странице.
- Добавляйте ключевые слова и фразы в заголовок h1, связанные с содержанием материала
В заголовке необходимо передать основную идею страницы, а также привлечь внимание пользователя. Например, если ваша веб-страница посвящена продаже модной одежды, хороший текст заголовка h1 может быть “Новая коллекция стильной одежды для современных девушек”. Этот заголовок ясно указывает на основную тему страницы и приводит внимание пользователя на основную цель — продажу одежды.
Для информационных материалов в заголовке можно использовать открытый вопрос, тот который посетители могут использовать для поиска информации в Яндекс или google.
Текст, который добавляется в заголовки страниц h1 должны перекликаться содержимым тэгов title. Они могут полностью совпадать или немного отличаться, но должны передавать одну и ту же информацию. Тэги title используются в основном поисковыми системами, заголовки h1 дают представление о содержимом страницы посетителям. Когда они используются согласованно, страница займет свою позицию в выдаче поисковой системы.
Ориентируясь на title поисковая система сможет правильно ранжировать страницу, переходя на неё из результатов поиска посетитель будет видеть соответствующий его запросу заголовок, и будет изучать информацию на странице. Согласованность заголовков в результате даст хорошие показатели пользовательского поведения, что является самым важным при SEO продвижении.
Несогласованные title и h1, дадут обратный эффект. Даже если поисковая система предложит страницу пользователю, перейдя на неё он увидит несоответствующий запросу заголовок и закроет страницу.
Необходимо учесть ключевые слова и фразы, которые могут использовать пользователи при поиске информации, связанной с вашей страницей.
Оформление заголовков h1 — размер и цвет текста
Тег заголовка h1 по умолчанию является самым большим относительно текста и других элементов. При этом размер заголовка h1 и цвет текста можно менять. Для этого добавляются стили CSS, в отдельные документы со стилями или непосредственно в html код.
Размер заголовка h1 с помощью CSS стилей можно сделать чуть больше основного текста (или даже таким же или меньше). Заголовки в этом случае не будут бросаться в глаза, но сохранят свою важность с точки зрения структурирования страницы. Можно менять цвет заголовка h1, оформление (например, добавить курсив).
Уменьшенный вдвое от изначального размера заголовок в html коде может выглядеть так:
< h1 style="font-size:50%"> Heading
Другие заголовки
Помимо заголовка h1, существуют и другие уровни заголовков (h2, h3, h4 и так далее), которые используются для структурирования содержимого страницы на более мелкие блоки. Важно придерживаться иерархии заголовков и использовать их согласно их значимости.
Обычно стоит использовать самый крупный заголовок h1 сверху страницы, затем h2 и так далее по мере уменьшения значимости содержимого материала. Все заголовки кроме h1 могут использоваться более одного раза, но страница в целом выигрывает когда применяются разные заголовки.
Заголовки h3-h6 можно желательно, не обязательно использовать на странице строго по порядку. h1 и h2 же должны быть всегда на первой и второй позициях соответственно. Главным заголовком страницы всегда должен оставаться h1.
Размеры h2, h3, h4, h5, h6 также можно менять средствами CSS добиваясь того внешнего вида страницы, который нужно получить в соответствии с макетом или представлением её создателя.
Читайте про добавление изображений на страницу и атрибуты тэга img