Оформление заголовков на странице
Знаю, о чем вы подумали: еще одна статья о том, что заголовки должны быть осмысленные, уникальные и прочее бла-бла-бла. Нет, сегодня я хочу рассказать вам о другой проблеме, которая лежит в смежной области SEO и фронт-энда (проще – верстальщика). Дело в том, что о сути заголовков написано уже столько статей, что если все их собрать да распечатать, я бы до конца жизни не покупал туалетную бумагу. А вот о чисто техническом подходе (какой размер должен быть у заголовка, цвет, чем h2 отличается от h3, какие ошибки могут быть в сайтах, сверстанных давно, и прочее) – об этом написано намного меньше.
Итак, сперва следует понять главное – зачем нужны заголовки и почему вокруг них столько шума. Обратите внимание: мы говорим не о заголовке страницы (title, который прописывается в head), а о внутренних заголовках h1-h6.
Суть заголовков
Чтобы лучше понять суть заголовков, давайте вспомним начальную школу. Первые числа сентября, вам задают домашнее задание – написать сочинение на тему: «Как я провел лето». Учительница должна проверить 25 таких сочинений. Как вы считаете, какое больше привлечет ее внимание?
Очевидно, что работа Петрова привлечет внимание как «Марь Ивановны», так и Яндекса с Гуглом. Заголовки нужны для того, чтобы сформировать структуру материала, будь то статья, сочинение или карточка товара. Они по умолчанию выделяются (об этом поговорим позже), бросаются в глаза пользователю и обращают на себя внимание поисковых систем. Заголовок сообщает, о чем пойдет речь дальше, в этом конкретном кусочке документа.
Техническое оформление заголовка
В стандартах html уже заложено выделение тега заголовков. Обычно h1 — самый большой (18 шрифт по сравнению с обычным 12 + жирный), h2 — 16 и жирный, h3 – или просто жирный, или 14 и жирный. Начиная с h4 выделение обычно идет только болдом, и то не всегда.
Многие придают тексту дополнительное выделение, например, иногда встречаешь:
<h2><strong><center>Заголовок 2</center></strong>
Так делать неверно. Не то чтобы это была критическая ошибка, но все же выполнено не по стандарту, и валидатор может ругаться (а если у вас html5, то точно будет). По новым требованиям, все «украшательства» следует выносить в стили в head:
h2 {text-align:center;
font-weight:bold;
}
Или еще правильней — в CSS. Аналогично: не стоит заголовки заключать в дополнительные контейнеры типа div, span или абзац p.
Другими словами: заголовки не должны быть обрамлены никакими дополнительными тегами: ни абзацами, ни выравниваниями, ни увеличением шрифта и прочим. Только открыть заголовок, сам текст и закрыть заголовок:
Чего не стоит добавлять в заголовок
Первое, на что хочу обратить внимание, – раньше в заголовок h1 верстальщики часто заключали логотип:
<h1><img scr="images/logo.jpg" alt="Логотип компании"></h1>
Объяснение простое: логотип является важным элементом сайта, поэтому на нем мы и сосредотачиваем внимание. Сейчас такое встречается редко, но все еще встречается. Поэтому откройте код и посмотрите, как у вас оформлен логотип. Если так — исправьте, это неверно.
Еще одна фишка программистов – они используют заголовки для визуального выделения текста. Так, например, часто можно увидеть в заголовках слово «Поиск» или полностью все меню заключено в какой-то заголовок. Так делать категорически нельзя. Если пользователи и не заметят подвоха, то роботы сочтут это за спам.
Ссылки, в принципе, могут быть в заголовках, если вы действительно осознаете, что делаете, и умышленно придаете вес этой ссылке. А вот картинки все же не стоит заключать — пользователь разницы не увидит, а поисковик может обидеться.
Порядок и обязательность заголовков
После прочтения ряда статей люди осознают, насколько их сайт несовершенен и начинают лепить заголовки, где ни попадя. В итоге получается что-то типа такого:
Не стоит так увлекаться. Используйте заголовки с умом и только там, где они действительно нужны. Что должно быть обязательно? Только h1, т.к. это название документа (типа названия сочинения). Остальные нужно уже смотреть применительно к каждому конкретному документу/странице. Если у вас статья всего-то из нескольких абзацев, достаточно только основного. Если же несколько страниц – логично разбить его на части с использованием разных типов заголовка.
На что еще важно обратить внимание – это последовательность. В самом начале документа должно идти h1. Затем h2, h3 и так далее. Нельзя начинать страницу с h2 или делать структуру такой: h1 — h3 — h2. Согласитесь, довольно сложно было бы читать книгу, если бы она начиналась с пятого раздела, а на 8 странице вы бы только узнали название самой книги. Ничего сложного, простая логика.
Насколько важен текст заголовков h3-h4
ОК — скажете вы. H1 понятно, с h2 можно поработать. Важны ли дальнейшие? Поисковики смотрят только на наличие и грамотность заголовков или же вникают в суть? Постараюсь разъяснить еще одним примером:
Оба примера верны с технической точки зрения. Более того, оба могут быть интересны, просто упор сделан на разные аспекты лета. Вполне очевидно, что Иванов пойдет куда-нибудь на геологический факультет, а Петров — на журналистику. Это не значит, что Яндекс или Google посчитает какой-то документ лучше. Он придаст им оттенок и будет показывать, исходя из ожиданий пользователя — их интересуют приключения (все равно когда) или их интересуют конкретные месяцы.
Итак, заголовки являются важнейшей частью любого документа, как печатного, так и электронного. Важно понимать, где, когда и как их следует использовать. Но в первую очередь вы должны понимать, что как бы здорово вы ни назвали свое сочинение, если содержание ни о чем, оценка вас не порадует. Если вы скопировали статью с другого сайта, какой бы идеальной ни была структура – высоких позиций вам не получить. Ведь заголовок – это всего лишь один, из огромного количества, фактор, и только за счет него невозможно добиться успеха.
С другой стороны, при прочих равных условиях, конечно же, выиграет тот документ, у которого заголовки будут более привлекательными и грамотными!
С чего бы это http://marketnotes.ru/pics/headers2.png ? Ни по одному пункту не согласно, по вёрстке претензий нет, вот только стили лучше убрать в файл style
В смысле не согласно? Это к тому, что правильно чистый хтмл h3. Без дополнительных дивов, стилей и абзацев….
Не понял, к чему вопрос. В картинке показал, что неправильно стили ставить в хтмл, или обрамлять заголовок каким-то дополнительным контейнером. Это явно лишнее.
Почему нельзя обрамлять тег h тегом div???? Где это сказано? Или ссылку на эксперименты. Почему нельзя использовать универсальный (!) атрибут style в теге h?
Технически можно, ошибки нет. Вопрос — зачем?
Может быть стоит использовать style в теге h, чтобы по-особенному выделить заголовки на некоторых страницах? Ведь правило в стилях прописывается единое для всех h1 или нет?
Но, в целом со статьей согласна, тоже не понимаю, зачем выделять текстовыми заголовками не текстовые блоки и, особенно, меню, какая преследуется цель — усилить хочется?
Незачем по особенному выделять одни и те же заголовки на разных страницах, стили для заголовков задаются в стилях раз и все, см. типографика и гайдлайны в которые она входит 🙂
а если это, к примеру, страницы услуг и страницы статей?
Для таких «особенных» страниц можно:
a) подключить отдельные стили с !important;
б) задать id/class заголовку и через стили уже колдовать 🙂
Хотя
с точки зрения пользователя — одни и те же элементы на всем сайте
должны быть едиными.
(http://marketnotes.ru/about-usability/usability-principls/ 4 принцип) 😉
должна быть стилевая (и технически в css и осязаемо) гармония по всему сайту.
тег center не используется в html5, стронгом усиливать заголовок тоже не верно, а вот span может присутствовать, h1 — это текстовый тег, в него некорректно будет вписывать объект, например, картинку
«полностью все меню заключено в какой-то заголовок» — круто 🙂 Но заголовки в боковом меню могут присутствовать, см. Википедию или Яндекс.Вебмастер http://help.yandex.ru/webmaster/for-webmasters/contents.xml
Тегом p нельзя обрамлять блочный элемент.
У Петрова лучше, у него клечевики в заголовке
1. Да, спан можно использовать, как и другие контейнеры. Вопрос — зачем?
Единственный вариант, когда это имеет смысл, если у вас сложный заголовок с разными текстовыми выделениями. Например:
Н2 В нашем интернет-магазине более СПАН 1458 детских товаров /СПАН /Н2
И через стили придаем h2 span {color:red;}.
В другом случае не вижу смысла таких сложностей.
2. Никогда не стоит ссылаться на Яндекс, Гугл, Википедию или Ютуб. То, что позволено им, не позволено простым смертным. Например, на той же инструкции к вебмастеру Яндекс использует кадется 13 заголовков h1, хотя все знают, что должен быть только 1. Поэтому, без фанатизма. Меню, как и ссылки, можно заключать в заголовки. Но опять же, если вы делаете это умышленно. Хотя все равно, лучше заключить его просто в nav.
3. Не согласен, что у Петрова лучше 😉 Все зависит от того, по какому запросу вы раскручиваетесь. Если, например, по «июнь», то согласитесь, Иванов более релевантен 😉 Поэтому, надо учитывать, на кого Ваш текст рассчитан.
Спасибо за комментарии 🙂
Так, давайте по порядку:
1. Использовать можно и спан и див и что угодно. Вопрос — зачем лишний тег?
Единственное, что приходит в голову, это использование сложного заголовка. Например:
В нашем интернет-магазине более 55 тысяч детских игрушек.
И через CSS уже назначаем h2 span {color:red;}
Другой вариант придумать не могу 😉
2. Ссылаться на Яндекс, Гугл, Википедию и Ютуб бессмысленно. То, что позволено им, не позволено простым смертным. Например, в той же инструкции вебмастера Яндекс использует 10 заголовков h1 и 42 заголовка h2 и т.д. Насколько это актуально для обычного сайта 😉
В принципе, меню же это просто ссылки. А ссылки можно использовать в заголовках. Но только, если осмысленно, понимая зачем это делается.
Хотя проще его выделить через nav 🙂
3. На счет Петрова не согласен. А если вы раскручиваетесь по запросу «Июнь»? В этом случае Иванов даст фору Петрову в 100 очков! 😉
Не смотрите однобоко на подобные ситуации. Надо смотреть в комплексе.
Спасибо за комментарии.
1. Да, если нужно CSS оформить какую-то часть заголовка. Например, посетитель сразу видит первую часть, а вторая как бы допечатывается или выплывает, или что-то ещё.
2. Эх, http://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-aside-element
Последние сообщения
My last post
My first post
Яндексу, важен title и заголовки, но ему по барабану в каком теге этот заголовок стоит (вроде бы искл., h1, но я не уверена, не проверяла, нужен эксперимент, зато видела сайты в ТОП без h1), он считает заголовком всё, что выделено жирным шрифтом и является конечной фразой. Иначе бы он не менял title именно на эти фразы http://shpargalkablog.ru/2011/11/strong-b-h.html
А про Гугл можно и не говорить, во-первых, он видит страницу как пользователь через браузер, во-вторых, он западный, а там давно обширно используется html5
3. Эм, возможный запрос «как проводили лето школьники в июле 2014 года»? Очень длинно, скорее всего немного будет переходов
http://wordstat.yandex.ru/#!/?words=%D0%BF%D1%80%D0%BE%D0%B2%D0%B5%D1%81%D1%82%D0%B8%20%D0%BB%D0%B5%D1%82%D0%BE%202014
1. ОК
2. Ни о чем 😉
3. 100% знать, что важно яндексу, что гуглу — невозможно. Он и сам не знает точно. Но, безусловно, каждый конкретный случай надо изучать отдельно, в каждом правиле 10 исключений. Но по возможности, чем меньше лишних тегов, тем лучше. Бывают сайты и без Н в топе, бывают и ужасные. Но значит у них другие факторы сильные. А возможно не поменяли бы и правильные заголовки тоже.
4. Типичный подход SEOшника 😉 Смотрим частоту, и если низкая — выбираем другое слово. И ничего, что оно не тематическое. Так делать неверно (с точки зрения маркетинга).
Лучше 10 заинтересованных пользователей, чем 100 не по тем запросам.
2. Молодец. пишете о вёрстке, не читая стандарт, который поддерживается всеми браузерами.
Если смотреть с точки зрения поиска, то не все вебмастера думают о тегах, но тем не менее имеют полезное и вполне приятно выглядящее содержание. В основном это контентные проекты, например, блог какого-нибудь дачника. Поиск эти сайты должен показывать на заслуженном месте, поэтому ему в большинстве случаев всё равно в какой тег обёрнут заголовок, главное, что у него текст больше, цвет другой или жирный шрифт.
4. Подход здравого смысла. Именно в запросе «как я провёл лето» у Петрова больше шансов найти заинтересованных пользователей.
Не понимаю, к чему вы ведете. С чего вы взяли, что я не читаю стандарты? Например, на ваш сайт валидатор ругается и выдает 21 ошибку и 5 предупреждений, а на мою 0 ошибок. К чему это?
Завернуть можно во что угодно. Вопрос зачем все еще остается открытым.
Откуда здравый смысл? С чего вы взяли, что он раскручивается именно по этому запросу? Потому что он более частотный? В этом и проблема.
Сравнивать бесплатный Blogger с WP не очень умно.
С бесплатным WP, уточняйте 🙂
Сеошник из Вас так себе. Есть куча экспериментов и подтверждений что содержание H1 — важный момент и для яндекса и для гугла. А H2 и H3 дают статье четкую структуру. Что в конечном счете отражается на ранжировании. Вы видели сайты в топе без H1? А я вижу сейчас сетку из 20+ сайтов, которые приносят по 20к трафа/сутки с говнодизайном, но хорошей структурой заголовков.
Еще стоит знать что многие запросы вордстат просто не показывает и в частотности 100 вашего короткого запроса есть 80 хвостов и 20 основного запроса. в целом 80% трафа могут давать НЧ, которых в вордстате просто нет.
Юрий, Георгий, я не люблю голословных «куча экспериментов». Мне нужны ссылки на эти эксперименты, каким образом они проводились. Я провела пару экспериментов, внимательным образом изучила официальную информацию, плюс обратилась в службу поддержки Яндекса за разъяснениями http://shpargalkablog.ru/2015/02/h1-seo.html
Итого пришла к выводу, что для Яндекса лучше когда h1 один на странице и лучше когда внутри заголовка отсутствует изображение. Для Гугла по другому.
например http://www.pixelplus.ru/samostoyatelno/stati/vnutrennie-faktory/bazovye-seo-trebovaniya.html Дмитрий Севальнев пишет рекомендации. Кто он такой и на чем основаны его утверждения, многие знают. Эксперименты и доклады можно нагуглить. Кто Вы — непонятно.
Во-первых, вы до сих пор не предоставили ссылку на эксперимент, где показана причинно-следственная связь. Нагуглите, пожалуйста, и покажите именно ту ссылку, которой именно вы доверяете, а не слова третьих лиц (искл., если это не слова официальных лиц Яндекса или Гугл). Я же могу объяснить почему я сделала вывод, что для Яндекса предпочтительней один h1 и почему я сделала вывод, что сайт не будет наказан за несколько h1. Что я сделала, чтобы постараться отгородиться от других факторов ранжирования при проведении эксперимента.
Во-вторых, какая разница кто проводит эксперимент, если его может провести любой и прийти к тем же результатам. В данном случае не нужна большая статистическая выборка.
В-третьих, важна дата эксперимента. Ряд тех же экспериментов Деваки нужно перепроверять. Это легко сделать, так как он объяснил из чего делает тот или иной вывод.
Уже давно интересует вопрос, никак не уточню, как правильно использовать конструкцию тегов:
1. Строго по порядку, то есть h1, h2, h2, h2, h3, h4, h5…
2. C вложением: h1, h2-h3-h4, h2-h3-h3-h4-h3.
Поясню по второму варианту, если я пишу большую статью с множеством подтем, и в каждой теме есть свои подтемы, а у подтем свои подтемы. То можно ли использовать второй вариант приведенный мной выше или же эти теги используются строго по порядку?
Второй вариант, конечно, предпочтительнее. В первом смысла никакого нет =)
Верно, второй более логичный и правильный.