Вернуться   SEO форум - оптимизация и продвижение сайтов > Поисковая оптимизация > Оптимизация страниц сайта

Важная информация
Оптимизация страниц сайта - Мета теги (description и т.д.), заголовок h1, title, alt. Микроразметка, структура контента, внутренняя перелинковка.

Ответ
 
Опции темы Рейтинг: Рейтинг темы: голосов - 2, средняя оценка - 3.00. Опции просмотра
Старый 11.03.2015, 16:12   #1
 
Аватар для Elven
 
Сообщений: 26
FR (активность): 441

Доп. информация
По умолчанию Автор темы Технические особенности оформления заголовков (h1-h3)

Знаю, о чем вы подумали: еще одна статья о том, что заголовки должны быть осмысленные, уникальные и прочее бла-бла-бла. Нет, сегодня я хочу рассказать вам о другой проблеме, которая лежит в смежной области 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;
}
Кроме того, тег strong придает "важность" тексту. Заголовок сам по себе важный, поэтому не стоит так делать, похоже на спам.

Или еще правильней – в CSS. Аналогично: не стоит заголовки заключать в дополнительные контейнеры типа div, span или абзац p.


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



Хочу обратить внимание, чтоб не было путаницы. Если у вас идет какой-то раздел, и к нему заголовок, то может быть:
<div>
<h3>Как можно делать заголовок</h3>
<p> Тут пошел наш текст.... </p>
</div>


Нельзя выделять сам заголовок ради выделения.


Еще одно интересный аспект. Вы хотите выделить заголовок разными цветами, или часть него сделать ссылкой (это надо делать умышленно, если вы осознаете, что передаете вес странице. Тогда можно так:
<h2>В нашем магазине более <span>3000 уникальных товаров!</span></h3>


В результате может быть типа:
В нашем магазине 3000 уникальных товаров!



Если решите использовать ссылки - подумайте, насколько они актуальны....


Чего не стоит добавлять в заголовок

Первое, на что хочу обратить внимание, – раньше в заголовок h1 верстальщики часто заключали логотип:

<h1><img scr="http://www.seocafe.info/images/logo.jpg" alt="Логотип компании"></h1>



Объяснение простое: логотип является важным элементом сайта, поэтому на нем мы и сосредотачиваем внимание. Сейчас такое встречается редко, но все еще встречается. Поэтому откройте код и посмотрите, как у вас оформлен логотип. Если так – исправьте, это неверно.


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

После прочтения ряда статей люди осознают, насколько их сайт несовершенен и начинают лепить заголовки, где ни попадя. В итоге получается что-то типа такого:

Не стоит так увлекаться. Используйте заголовки с умом и только там, где они действительно нужны. Что должно быть обязательно? Только h1, т.к. это название документа (типа названия сочинения). Остальные нужно уже смотреть применительно к каждому конкретному документу/странице. Если у вас статья всего-то из нескольких абзацев, достаточно только основного. Если же несколько страниц – логично разбить его на части с использованием разных типов заголовка.


На что еще важно обратить внимание – это последовательность. В самом начале документа должно идти h1. Затем h2, h3 и так далее. Нельзя начинать страницу с h2 или делать структуру такой: h1 – h3 – h2. Согласитесь, довольно сложно было бы читать книгу, если бы она начиналась с пятого раздела, а на 8 странице вы бы только узнали название самой книги. Ничего сложного, простая логика.
Насколько важен текст заголовков h3-h4

ОК – скажете вы. H1 понятно, с h2 можно поработать. Важны ли дальнейшие? Поисковики смотрят только на наличие и грамотность заголовков или же вникают в суть? Постараюсь разъяснить еще одним примером:



Оба примера верны с технической точки зрения. Более того, оба могут быть интересны, просто упор сделан на разные аспекты лета. Вполне очевидно, что Иванов пойдет куда-нибудь на геологический факультет, а Петров – на журналистику. Это не значит, что Яндекс или Google посчитает какой-то документ лучше. Он придаст им оттенок и будет показывать, исходя из ожиданий пользователя – их интересуют приключения (все равно когда) или их интересуют конкретные месяцы.


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


С другой стороны, при прочих равных условиях, конечно же, выиграет тот документ, у которого заголовки будут более привлекательными и грамотными!

Это моя статья, вызвавшая много споров в комментах
Источник: http://marketnotes.ru/internet-marketing/headers/
ostap4ik и PromoTools: сообщение полезно
Elven вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
psychomonkey (11.03.2015)
Старый 11.03.2015, 16:42   #2
 
Аватар для psychomonkey
 
Сообщений: 1,627
FR (активность): 40,550

Доп. информация
По умолчанию

Цитата:
Сообщение от Elven Посмотреть сообщение
На что еще важно обратить внимание – это последовательность. В самом начале документа должно идти h1. Затем h2, h3 и так далее. Нельзя начинать страницу с h2 или делать структуру такой: h1 – h3 – h2. Согласитесь, довольно сложно было бы читать книгу, если бы она начиналась с пятого раздела, а на 8 странице вы бы только узнали название самой книги. Ничего сложного, простая логика.
Насколько важен текст заголовков h3-h4
Оффтоп:
мир устроен так, что меняется. сейчас книги пишут так, что "название" уже начинается не с первой страницы и даже не с 10)

поправь пож
Цитата:
Сообщение от Elven Посмотреть сообщение
осознаете, что передаете весь странице. Тогда можно так:
<h2>В нашем магазине более <span>3000 уникальных товаров!</span></h3>
наверное тут ошибка
psychomonkey вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 11.03.2015, 17:48   #3
 
Аватар для Elven
 
Сообщений: 26
FR (активность): 441

Доп. информация
По умолчанию Автор темы

Да, поправил, Спасибо.
Вес, конечно, а не весь

Оффтоп:

Это не книги, скорее, а макулатура
Типа Донцовой, прочел и забыл...
Elven вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 11.03.2015, 18:53   #4
 
Аватар для cthulchu
 
Сообщений: 3,670
FR (активность): 107,432

Доп. информация
По умолчанию

спан в хедерах - абсолютно нормальная вещь. даже для html4. по документации. Сео правила, между тем, никогда не перечат документации html. зря народ пугате. Естественно, брать хедер полностью в хедер и спан может казаться глупым, но бывает и это нужно делать.

я подозреваю, что хедеры в разных дивах тоже нормально.

короткая очень статья. лучше бы погуглили перед тем, как писать.
cthulchu вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 11.03.2015, 19:40   #5
 
Аватар для Elven
 
Сообщений: 26
FR (активность): 441

Доп. информация
По умолчанию Автор темы

Если честно, не понял о чем вы.
1. Приведите пример, когда нужно заголовок во что-то заворачивать отдельно?
2. Заголовок в разных дивах - это как, уточните? Несколько h2 в разных дивах? Да, безусловно.
Или вы о чем?
Или один заголовок сразу в нескольких дивах? Вобщем, пример, не понял о чем?
3. Что искать в гугле? По запросам Как оформлять заголовок, нашел все то же самое: уникальные, осмысленные, поближе к началу, содержать ключевые слова...
Но статья не о том.
А короткая... ну самое главной, итак все жалуются что много никто не читает. Что бы вы, например, еще добавили? По пунктам.
Спасибо за критику люблю это дело
Elven вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 12.03.2015, 04:42   #6
 
Аватар для cthulchu
 
Сообщений: 3,670
FR (активность): 107,432

Доп. информация
По умолчанию

Цитата:
Сообщение от Elven Посмотреть сообщение
1. Приведите пример, когда нужно заголовок во что-то заворачивать отдельно?
когда я хочу изменить вид части заголовка, к примеру, все первые буквы сделать красными, или все последние буквы заголовка, кроме коротких слов.

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


Цитата:
Сообщение от Elven Посмотреть сообщение
Заголовок в разных дивах - это как, уточните? Несколько h2 в разных дивах? Да, безусловно.
Или вы о чем?
о двух h2 в разных дивах, да.

вобщем, я считаю, что вот это все:


правильно.
Цитата:
Сообщение от Elven Посмотреть сообщение
Что искать в гугле? По запросам Как оформлять заголовок, нашел все то же самое: уникальные, осмысленные, поближе к началу, содержать ключевые слова...
ага, видимо, копать надо глубже.

Цитата:
Сообщение от Elven Посмотреть сообщение
Что бы вы, например, еще добавили? По пунктам.
Спасибо за критику люблю это дело
* Эффект от ссылок в хедерах;
* Эффект от ссылки на себя в h1 для гугла и яши;
* Когда можно использовать множественные h1 и с какими тегами лучше его использовать в html5.

Ну и так далее. В общем, неочевидные вещи, чтобы сеошникам тоже интересно было почитать... наверное...

ЗЫ

мне, кстати, кажется, что отсутствие ключей в хедерах (h2,h3) - это большой плюс. я пока эту теорию тестирую на своих сайтах. Для клиентов пока по старинке делаю.
Юрист: сообщение полезно
cthulchu вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 12.03.2015, 15:45   #7
 
Аватар для Elven
 
Сообщений: 26
FR (активность): 441

Доп. информация
По умолчанию Автор темы

1. Вы видимо пропустили в статье пример:
<h2>В нашем магазине более <span>3000 уникальных товаров!</span></h3>
В результате может быть типа:
В нашем магазине более 3000 уникальных товаров!
Чем этот вариант вам не подходит?
Дополнительные классы и id создавать не надо, обращаемся напрямую
h2 span {}

А если надо использовать уже созданный класс или id никто ж не запрещает <h2 class="red">
Хотя мне кажется проще напрямую к h2 обратиться.

2. Скорее всего, у двух разных дивах разные названия, иди Id или тег. Можно тогда
aside h2
div h2
main h2
#news h2

можно тот же класс использовать
Ну и в крайнем случае - псевдокласс, child

3. Технически - правильно (кроме 3 варианта в хтмл5, стили в хтмл считается ошибкой, надо в цсс выносить).
А логически - нет. Зачем? Опять же. Ссылка на 1 и 2 пункт Без этого можно обойтись.

4. Возможно, вы работаете с сеошниками-технарями, которые такие нюансы знают. Я сталкивался только с теми, кто в 90% случаев ни спан ни див не знаю Поэтому, не думаю что так глубоко надо.
Хотя вы правы, нет предела совершенству, поднятые Вами вопросы интересны.

По опыту могу сказать, что чаще всего и Я и Г все равно, где ключи (н1-н3). Главное, чтоб они были и не переспамлены.
Но опять же, гугл вот заявил о переходе на базу знаний вместо ссылок. Как он эту базу читает? Может он ошибки валидатора будет учитывать как ошибки страницы? Каков вес будет у опечаток?
Много вопросов.. ждем-с...

А, кстати. Не знаю как яша и гугл, но с точки зрения юзабилити, ссылка на себя есть зло А тем более в заголовке. Ума не приложу, зачем это вообще может быть использовано
Elven вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 12.03.2015, 19:14   #8
 
Аватар для dimakpost
 
Сообщений: 2
FR (активность): 25

Доп. информация
По умолчанию

Читал, что для продвижения в Google желательно, чтобы текст в H1 соответствовал тексту в Title. Так ли это на самом деле или это мое заблуждение


dimakpost
dimakpost вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 12.03.2015, 20:26   #9
 
Аватар для AirPack
 
Сообщений: 168
FR (активность): 3,513

Доп. информация
По умолчанию

Цитата:
Сообщение от Elven Посмотреть сообщение
<h2>В нашем магазине более <span>3000 уникальных товаров!</span></h3>
У Вас здесь опечатка ( h2 , h3). И даете Вы два примера, в первом пишите, что в хедерах быть ничего не может и при этом чуть ниже пишите, что для стилизация можно использовать span между хэдерами. Тут либо неполноценные примеры, либо Вы не достаточно разжевали чем отличается пример <h3><span>Как есть рыбу руками</span></h3> от <h3>В нашем магазине более <span>3000 товаров</span></h3>.

Цитата:
Сообщение от cthulchu Посмотреть сообщение
Когда можно использовать множественные h1 и с какими тегами лучше его использовать в html5.
Вы на <section> намекаете?
AirPack вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 12.03.2015, 21:27   #10
 
Аватар для cthulchu
 
Сообщений: 3,670
FR (активность): 107,432

Доп. информация
По умолчанию

Цитата:
Сообщение от Elven Посмотреть сообщение
Вы видимо пропустили в статье пример:
не пропустил. у вас статья местами сама себе перечит, вот и все.
Цитата:
Сообщение от Elven Посмотреть сообщение
Технически - правильно (кроме 3 варианта в хтмл5, стили в хтмл считается ошибкой, надо в цсс выносить).
это кем считается? валидатором? так мы теперь все, что валидатор скажет бездумно выполняем? стили - ошибка по валидатору, но никакого. повторяю: никакого виляния на сео не оказывают.
Цитата:
Сообщение от Elven Посмотреть сообщение
Возможно, вы работаете с сеошниками-технарями, которые такие нюансы знают. Я сталкивался только с теми, кто в 90% случаев ни спан ни див не знаю Поэтому, не думаю что так глубоко надо.
те сеошники, что "не-технари" (не знают о дивах и спанах) - не сеошники и никогда не будут за свою работу получать больше килобакса в месяц. Да и на форуме таких не замечал. Что, есть у нас кто-то, кто не знает о спанах и дивах?


Цитата:
Сообщение от Elven Посмотреть сообщение
По опыту могу сказать, что чаще всего и Я и Г все равно, где ключи (н1-н3). Главное, чтоб они были и не переспамлены.
то бишь, я могу ставить h1 после h3 в тексте и ни на что это не повлияет?
Цитата:
Сообщение от dimakpost Посмотреть сообщение
Читал, что для продвижения в Google желательно, чтобы текст в H1 соответствовал тексту в Title. Так ли это на самом деле или это мое заблуждение
правда, конечно. у них слишком похожий функционал, чтобы не соответствовать.
Цитата:
Сообщение от AirPack Посмотреть сообщение
Вы на <section> намекаете?
или на article. я ни то ни то не юзаю пока, но его уже года два как можно юзать. в гугле, по крайней мере.
cthulchu вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 15.03.2015, 00:37   #11
 
Аватар для Elven
 
Сообщений: 26
FR (активность): 441

Доп. информация
По умолчанию Автор темы

По порядку.
Разница между
<span><h2>Bla-bla-bla</h2></span>
и
<h2>bla<span>bla-2</span></h2>
в сути.
В первом случае это просто бессмысленная обертка. Во втором - умышленное выделение.

Покажите на противоречие, плиз, обязательно уточню и исправлю.

Ну вообще-то в 90% случаев валидатор просто так не ругается. Разве что на ленивых верстальщиков И некоторые очень новые теги не всегда адекватно воспринимает, но с h точно работает верно.
И, ну боже ж мой, вы считаете себя профи, так выучите, наконец, чем СЕО отличается от SEO.

По поводу технарей не согласен категорически. Аналитики должны заниматься аналитикой. Версткой - верстальщики, дизайнеры - дизайном. И т.д. У нас все проблемы в том, что дизайнеры занимаются юзабилити, а программисты поисковой оптимизацией (а м..ки всякие политикой)
Не считаю, что оптимизаторы должны быть программистами или верстальщиками.

Ну и точно могу сказать, что есть оптимизаторы, зарабатывающие намного больше 10К, не разбираясь в верстке...

Вы как-то странно читаете.
Вчитайтесь:
Я и Г все равно, где ключи (н1-н3)
Где вы нашли:
я могу ставить h1 после h3 в тексте

Смысл вообще не тот

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

section что-то не прижился, вроде его немного для другого задумывали изначально.
А article отлично справляется и можно его использовать, как и main
Для группировки еще есть<hgroup>, но он вообще не прижился.
Elven вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 16.12.2016, 23:01   #12
 
Аватар для Юрист
 
Сообщений: 284
FR (активность): 4,418

Доп. информация
По умолчанию

Цитата:
Сообщение от cthulchu Посмотреть сообщение
я пока эту теорию тестирую на своих сайтах.
@cthulchu, а можешь поделиться результатами тестирования?
Юрист вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 16.12.2016, 23:20   #13
 
Аватар для cthulchu
 
Сообщений: 3,670
FR (активность): 107,432

Доп. информация
По умолчанию

Цитата:
Сообщение от Юрист Посмотреть сообщение
@cthulchu, а можешь поделиться результатами тестирования?
подтвердилось. ключи в h2-h4 почти не имеют смысла. Но я ж только под буржунет смотрю. Да и еще и только с большими сайтами. На мелочи протестить бы, но я ею не очень занимаюсь, как бы.
cthulchu вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
Юрист (17.12.2016)
Старый 17.12.2016, 01:41   #14
 
Аватар для Юрист
 
Сообщений: 284
FR (активность): 4,418

Доп. информация
По умолчанию

А h5-h6? Они сами не имеют смысла?
Юрист вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 17.12.2016, 02:05   #15
 
Аватар для cthulchu
 
Сообщений: 3,670
FR (активность): 107,432

Доп. информация
По умолчанию

не, не, то же самое про h5-6. Я их не упоминал потому, что они очень редко применимы, но конечно от ключей в них тоже гораздо легче получить вред, чем пользу. Так что если скиллы сеошника таковы что у него встает вопрос о том как юзать ключи в хэдерах, то самое лучшее будет не юзать их вообще.
Это простой ответ.
Простые ответы никогда не идеальны, так что, конечно, ключи в хэдерах могут приносить пользу, но чтобы обеспечить это, сеошник должен знать как это сделать, а не действовать от фонаря или на авось.

Лично я в большинстве случаев не юзаю ключи в хэдерах. Редко выпадает хорошая возможность получить пользу от ключей в них.
cthulchu вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
Юрист (18.12.2016)
Ответ

Метки
css, html, верстка, внутренняя оптимизация, заголовки

Быстрый ответ
Ваше имя пользователя: Регистрация. Для входа нажмите здесь
Случайный вопрос

Сообщение:
Опции


Опции темы
Опции просмотра Оценка этой теме
Оценка этой теме:

Ваши права в разделе
Вы не можете создавать новые темы
Вы можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Mega-x.bplaced.net. СДЛ, Оформления Windows. тИЦ - 0, PR - 0 Хороший Оценка стоимости сайта 0 16.05.2012 13:32
Технические дубли страниц md5u Индексация сайта 8 14.03.2012 11:07
Разкрутка группы [В]контакте, Оформления Limon4ik Объявления 1 15.02.2011 19:30

Текущее время: 01:27. Часовой пояс GMT +3.