Теги для группы как сделать

  • Проверить h1 страницы
  • Разница в использовании h1, h2, h3, h4, h5, h6 в HTML5 и HTML4
  • Оптимизация структуры заголовков и подзаголовков веб-страницы
  • Можно ли внутри тега h использовать другие теги, например, img, a?
  • Должен ли title отличаться от h1?
  • Нужно ли заголовки боковых блоков брать в h?
  • Секреты написания привлекательного заголовка
  • Оптимизация заголовков блогов на Blogger

Первый заголовок, на который часто посетитель сайта не обращает внимание — тот, который показан на вкладке браузера (подробнее про тег title). Для поисковой системы он самый главный, так как именно его Яндекс, Google и др. чаще всего (см. исключения) используют в качестве заголовка сниппета.

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

Важные замечания:

  • заголовок доступно поясняет содержание страницы, раздела, подраздела. Это не инструмент оформления текста. Не нужно им выделять пункт меню, который ничего не содержит, кроме заголовка.
  • заголовок — это слово, фраза, предложение. Он не должен быть длинным.
  • заголовок — это всё предложение, а не его часть. Для оформления одного-нескольких слов существуют такие теги как strong, mark, em и др. (посмотреть весь список).
  • если статья строится в формате "вопрос-ответ" и ответ в большинстве случаев короткий (например, инструкция лекарственного препарата), то вместо тегов h правильней использовать тройку dl, dt, dd.

Проверить h1 страницы

Сейчас фразу в любом теге можно сделать заголовком с помощью стилей CSS: увеличить шрифт и/или размер текста. Для того, чтобы проверить количество тегов h1 и их содержимое, достаточно посмотреть код страницы сайта с помощью браузера, никаких дополнительных расширений не требуется. Такой инструмент, можно вывести, если нажать клавишу <F12>: Пример размещения тегов h на html-странице

Разница в использовании h1, h2, h3, h4, h5, h6 в HTML5 и HTML4

Перед дальнейшим чтением желательно ознакомиться с примерами, описанными в стандартах [w3.org] группы самостоятельно.

Один h1 на странице (версия HTML4)

  • Пошаговое решение судоку
    • Программа решения судоку с объяснениями (онлайн)
    • Правила игры
    • Алгоритм заполнения ячеек кроссворда
      • Способ 1. «Скрытые одиночки»
      • Способ 2. «Одиночки»
    • Методы решения судоку
      • Стратегия 1. Кандидат в двух-трёх клетках одного квадрата
      • Стратегия 2. Группы кандидатов

Иерархия на действительно существующей странице реализуется благодаря тегам h1-h6. h1 — самый главный, имеет самый крупный размер, можно использовать только один h1. h6 — самый незначительный из заголовков, имеет самый маленький размер и самый высокий уровень вложенности. Такой вариант наиболее распространён у SEO оптимизаторов:

<!DOCTYPE html> <div> <div>Название сайта</div> <ul> <li><a href="/1">Пункт1</a> <li><a href="/2">Пункт2</a> </ul> </div> <div> <h1>Пошаговое решение судоку</h1> <h2>Программа решения судоку с объяснениями (онлайн)</h2> <h2>Правила игры</h2> <h2>Алгоритм заполнения ячеек кроссворда</h2> <h3>Способ 1. «Скрытые одиночки»</h3> <h3>Способ 2. «Одиночки»</h3> <h2>Методы решения судоку</h2> <h3>Стратегия 1. Кандидат в двух-трёх клетках одного квадрата</h3> <h3>Стратегия 2. Группы кандидатов</h3> <b>Комментарии</b> </div> <div> <b>Последние сообщения</b> <ul> <li><a href="/1">Пункт1</a> <li><a href="/2">Пункт2</a> </ul> </div> <div>Футер</div>

Заголовки h1-h6 в HTML5

Каждый пункт дерева заголовков создаёт один из вариантов:

  • body, когда нет h1-h6 перед первыми дочерними тегами article, aside, nav, section.
  • структурные теги article, aside, nav, section. Дочерние h1-h6 будут вложены в предшествующий структурному тегу заголовок.
    Внимание: header, main и footer не являются структурными тегами.
  • h1-h6, которые не имеют родителя blockquote, details, fieldset, figure и td. Уровень вложенности пункта определяется рангом тега h.

Важные замечания:

  • Документ может содержать несколько заголовков верхнего уровня (в примере ниже пункты 1-3).
  • Документ или даже структурный тег могут содержать два и более тега h1 (в примере ниже пункты 2.1-2.3).
  • Последовательность h не важна, можно пропускать теги: h1 » h2 » h4. Если отсутствует h1, его место займёт h2 или даже h6.
  • Можно изменять порядок тегов: h3 » h4 » h1 (h1 будет иметь тот же уровень вложенности, что первый тег h, в нашем случае h3).
  • Так как код перестаёт быть интуитивно понятным, спецификация рекомендует (необязательно):
    • каждый структурный тег начинать с h1. Но на устройствах, не поддерживающих HTML5 или в крайнем случае CSS, будет ужасная картина.
    • теги h оборачивать в структурный тег. Но, объём HTML-кода влияет на скорость загрузки веб-страницы. Поэтому не особо хочется его увеличивать, если не требуется внешне (скажем, цветом фона) или семантически отделить границы разделов.
  • 1
    • 1.1
    • 1.2
      • 1.2.1
    • 1.3
    • 1.4
    • 1.5
      • 1.5.1
  • 2
    • 2.1
    • 2.2
    • 2.3
  • 3
<!DOCTYPE html> <h3>1</h3> <section> <h2>1.1</h2> <h2>1.2</h2> <h3>1.2.1</h3> <h1>1.3</h1> </section> <section> <h4>1.4</h4> </section> <h4>1.5</h4> <section> <h4>1.5.1</h4> </section> <h3>2</h3> <section> <h1>2.1</h1> <h1>2.2</h1> <h1>2.3</h1> </section> <h1>3</h1>

Важные замечания:

  • Если над или в article, aside, nav, section отсутствует тег h, пункт будет иметь заголовок untitled.
  • Теги article, aside, nav не обязательно должны иметь вложенный тег h.
  • untitled page
    • untitled article
      • untitled navigation
    • Заголовок внутри article
  • Заголовок верхнего уровня
<!DOCTYPE html> <section> <article> <nav> <ul> <li><a href="#1">Перейти к первой части статьи</a> <li><a href="#2">Перейти ко второй части статьи</a> </ul> </nav> <h1>Заголовок внутри article</h1> </article> </section> <h1>Заголовок верхнего уровня</h1>

Пример вёрстки HTML5

  • Название сайта
    • Navigation
    • Пошаговое решение судоку
      • Программа решения судоку с объяснениями (онлайн)
      • Правила игры
      • Алгоритм заполнения ячеек кроссворда
        • Способ 1. «Скрытые одиночки»
        • Способ 2. «Одиночки»
      • Методы решения судоку
        • Стратегия 1. Кандидат в двух-трёх клетках одного квадрата
        • Стратегия 2. Группы кандидатов
      • Комментарии
    • Последние сообщения
<!DOCTYPE html> <header> <h1>Название сайта</h1> <nav> <ul> <li><a href="/1">Пункт1</a> <li><a href="/2">Пункт2</a> </ul> </nav> </header> <main> <article> <h1>Пошаговое решение судоку</h1> <section> <h2>Программа решения судоку с объяснениями (онлайн)</h2> <h2>Правила игры</h2> <h2>Алгоритм заполнения ячеек кроссворда</h2> <h3>Способ 1. «Скрытые одиночки»</h3> <h3>Способ 2. «Одиночки»</h3> <h2>Методы решения судоку</h2> <h3>Стратегия 1. Кандидат в двух-трёх клетках одного квадрата</h3> <h3>Стратегия 2. Группы кандидатов</h3> </section> <section> <h4>Комментарии</h4> </section> </article> <aside> <h4>Последние сообщения</h4> <ul> <li><a href="/1">Пункт1</a> <li><a href="/2">Пункт2</a> </ul> </aside> </main> <footer></footer>

Оптимизация структуры заголовков и подзаголовков веб-страницы

Что думают поисковые системы? Они, с одной стороны, не должны наказывать за то, что вебмастер следует стандартам вёрстки, а, с другой стороны, должны ориентироваться на большинство. Реальность такова: с появлением HTML-редакторов, это самое большинство не будет разбираться с тонкостями разметки. Им затруднительно переключиться на вкладку «HTML» чтобы картинке прописать атрибут alt, а секции наверно вообще за гранью понимания (см. меню сайта «грамота.ру»).

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

Официальные сообщения Google:

  1. допускается наличие нескольких h1.
  2. довольно старое видео (от 2009 года) о последовательности тегов h.

Официальные сообщения Яндекса:

  1. Правильное оформление заголовков в тексте помогает... роботу Яндекса проще разобраться со структурой документа. Поэтому следует выделять этими тегами заголовки в соответствии с иерархией документа. [help.yandex.ru]

SEO заголовок по итогам эксперимента

Эксперимент 1: «Оптимальное количество h1»

Рассматриваются три страницы:

  1. h1 » h1 (5 лет)
  2. h1 » h2 (6 лет)
  3. h1, h1 » h2 (7 лет)

Изначально в статьях учитываются последовательность (чем ближе к началу, тем слово более значимо) и плотность [wikipedia.org] ключевого слова, в частности:

  1. ключевое слово употребляется только дважды, а именно в тегах h на одинаковом удалении от начала фразы,
  2. почти одинаковое количество текста,
  3. одинаковые по длине заголовки,
  4. первый h1 — это заголовок верхнего уровня (он не имеет родителя article, aside, nav, section). Это важно (см. HTML5)!

7-6-5 лет [google.ru]. Для Google более привлекателен вариант использования двух h1, где первый — имя сайта (Гугл старательно вычленяет название веб-проекта, даже если это ссылка на внутреннюю страницу стороннего блога [google.ru]), второй — название статьи.

6-5-7 лет [yandex.ru]. В Яндексе h1 должен быть единственным. То есть на Главной h1 — это название сайта, а на внутренних страницах — название внутренних страниц.

Примечание: в Гугле индексация молниеносна, поэтому тут было проверено и отсутствие влияния алгоритма "Google Fresh". Позиции сменились после того, как страницы были добавлены в Г+. То есть да, есть разница один h1 или несколько, но этому поисковики придают очень маленькое значение.

Эксперимент 2: «Есть ли толк от h3»

Яндекс и Google не вносят h3 в заголовок сниппета. На экспериментальной странице не были использованы title, h1, h2.

Исключение для Яндекса: когда выделенный абзац содержит от 20 до 200 символов. Здесь не важно в каком теге он будет находиться: хоть в h3, хоть в span.

SEO советы

Утверждение 1: заголовок верхнего уровня должен содержать ключевые фразы, но при этом не быть спамным, то есть слова внутри него должны склонятся согласно правилам русского языка. Плохой пример: «Одежда оптом от производителя недорого».

Утверждение 2: чтобы не писать несколько одинаковых по смыслу статей, в заголовки меньшего уровня желательно включить похожие запросы и синонимы. В большинстве случаев для их нахождения достаточно фантазии, wordstat.yandex.ru и поисковых подсказок. То, что менее востребовано и не помещается в заголовки, можно упоминуть в тексте.
Важно: нет необходимости впихнуть весь перечень wordstat. Текст должен быть интересным, читаемым и "без воды". пример того, как статистика слов Яндекса поможет сформировать структуру статьи

В примере с судоку люди ищут одно и тоже, но называют это по разному: "методы", "алгоритм", "способы", "правила", "методика", "приёмы", "секреты", "принципы", "примеры"...

Можно ли внутри тега h использовать другие теги, например, img, a?

Теги h могут содержать phrasing elements! Phrasing elements — это img, a, input и др.

Заблуждение 1: внутри тегов h1-h6 нельзя использовать другие теги.

<h2>Можно ли внутри тега <code>h</code> использовать другие теги, например, <code>img</code>, <code>a</code>?</h2>

Внимание: в ряде CMS (в т.ч. Blogger) есть поле с названием страницы сайта. Его содержимым автоматически заполняется h1 и большая часть title. Остальная часть title или отсутствует, или одинакова для нескольких страниц, например, ей может быть название сайта. Но в теге title может находиться только текст [w3.org]. Поэтому нельзя в поле названия страницы вносить какие-либо теги.

Использование тегов внутри тега h1

Заблуждение 2: в заголовке не должно быть картинки. Две записи равнозначны для w3.org, Google, но не для Яндекса (не индексирует атрибут alt):

<h1> <img src="logo.gif" alt="Название сайта"> </h1> <h1> Название сайта </h1>

Заблуждение 3: не стоит заключать заголовки в дополнительные контейнеры. Откуда ноги растут у этих утверждений? Нужно, например, выравнять заголовок по вертикали:

<div class="vyrovnyat"> <h1>Заголовок</h1> </div>

Утверждение 1: заголовок страницы или его часть не должны быть ссылкой (см. здравый смысл и справка Новости.Google). Отсюда следствие: название веб-проекта на Главной также не должно быть ссылкой. В целом не нужно чтобы страница ссылалась сама на себя (искл. ссылки к определённому участку страницы, так называемые хэш-ссылки). А вот так допустимо (на Авито на странице объявления каждой похожей записи дан h3):

<aside> <h1>Реклама</h1> <a href="http://ad.com/"> <section> <h1>Дешёвые кредиты</h1> <p>Вас удивят скорость выдачи, качество обслуживания и самое главное — цена вопроса!</p> <p>Процентные ставки от 1% до 5%</p> </section> </a> <a href="http://ad1.com/"> <section>... </section> </a> </aside>

Утверждение 2: есть небольшая разница в том как располагать ссылку: внутри тега h или тег h внутри ссылки. И она заключается в том, что в первом случае ссылкой является только текст, а во-втором — весь блок.

<h2> <a href="#"> только текст </a> </h2> <a href="#"> <h2> весь блок (прямоугольная область) </h2> </a>

Должен ли title отличаться от h1?

"Может ли title быть таким же как h1?" — да, может.

"Различный title и h1 полезны для SEO?" — да, полезны. В рассматриваемые теги можно добавить дополнительные ключевые слова, чтобы увеличить хвост запросов, по которым приходят на сайт. Или чтобы сделать более привлекательный сниппет, в title внести, скажем, название компании, коли фирма на слуху, или номер телефона (для такси, например).

Примечание: для того, чтобы страница могла присутствовать в Новостях Google [support.google.com] или быстрых ссылках Яндекса [help.yandex.ru], основная часть title и h1 должны совпадать. Это может быть вызвано тем, что посетители ожидают увидеть на странице сайта тот же заголовок, что в выдаче поисковиков. На данный момент стоит обратить внимание информационным сайтам.

Нужно ли заголовки боковых блоков брать в h?

Если заголовки индексируются (см. что сделать, чтобы поисковик не проиндексировал текст), то пусть лучше будут в теге h. Всё равно они употребляются на каждой странице сайта и вес этих слов ("Реклама", "Последние сообщения", "Подписка" и т.п.) завышен. Можно предположить, что родитель aside должен уменьшать их значение.

К тому же для слабовидящих будет понятно что к чему, а не сплошные untitled.


Закрыть ... [X]

Как сделать слайд шоу из фотографий с музыкой за 5 Игрушка чеширский кот своими руками

Теги для группы как сделать Теги для группы как сделать Теги для группы как сделать Теги для группы как сделать Теги для группы как сделать Теги для группы как сделать Теги для группы как сделать Теги для группы как сделать