html5: заголовки в элементах секционирования - структура документа и последствия для SEO

Question

Спецификация html5 говорит , что:

Схема для элемента контента секционирования или корневого элемента секционирования состоит из списка из одного или нескольких потенциально вложенных разделов.Раздел - это контейнер, который соответствует некоторым узлам в исходном дереве DOM.С каждым разделом может быть связан один заголовок, и он может содержать любое количество дополнительных вложенных разделов.Алгоритм для схемы также связывает каждый узел в дереве DOM с определенным разделом и, возможно, с заголовком.

, и те же рассуждения, по-видимому, применяются к алгоритму html5 документа .

Я проверял структуру моего сайта с помощью инструмента HTML5 outliner (h5o) [ link ], но мне трудно получить четкую схему, которая не перегружена бесполезными заголовками из-затот факт, что такие элементы, как <nav> или <footer> будут появляться в вашем наброске, но будут отображаться как «без названия», если вы не дадите им явный заголовок h1-h6.

Это кажется откровенным излишним для таких вещей, какНавигация или нижние колонтитулы.

Одно из решений заключается в замене этих элементов на div, но, похоже, это сводит на нет всю цель использования html5.

Другое, которое я предварительно попробовал на своем сайте [ ссылка ], задает заголовки для всех элементов секционирования, а затем использует CSS, чтобы скрыть заголовки для некоторых из них (опять же,y <nav> и <footer>, а также некоторые элементы <section>.Вот пример:

<nav id="content-nav">
    <h2 class="hidden">Post navigation</h2>
    <ul>
        <li class="alignleft"><?php next_post_link('&#8592; <strong>Next Post</strong><br />%link') ?></li>
        <li class="alignright"><?php previous_post_link('<strong>Previous Post</strong> &#8594;<br />%link') ?></li>
    </ul>
</nav>

Это приводит к хорошему воспроизведению сайта, но проблема, с которой я сталкиваюсь, - это рейтинг Google.В своем справочном инструменте для веб-мастеров [ ссылка ] по «скрытому тексту и ссылкам» Google четко заявляет, что:

Скрытие текста или ссылок в вашем контенте может привести к тому, что ваш сайт будетвоспринимается как ненадежный, поскольку он представляет информацию для поисковых систем иначе, чем для посетителей.Текст (например, избыточные ключевые слова) можно скрыть несколькими способами, в том числе: […] Использование CSS для скрытия текста…

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

Кто-нибудь может дать совет по этому вопросу?

Answer 1

Другой пример, который я предварительно попробовал на своем сайте, - установить заголовки для всех элементов секционирования, а затем использовать CSS, чтобы скрыть заголовки для некоторых тем (опять же, в основном <nav> и <footer>,а также некоторые элементы <section>.

Это именно то, как я бы это сделал, на самом деле мне еще не приходилось создавать сайт HTML5, но, как ни странно, Я посмотрел на этоНекоторое время назад .

"заголовки" или заголовки разделов отлично подходят для создания структуры или контура документа (как показано на схеме). Они также очень полезны для AssistedПользователи технологий, которые могут в основном найти свой сайт, «вкладывая» заголовки без необходимости «прислушиваться» ко всему и пытаться выяснить, где вы могли бы разместить, например, окно поиска.

То естьпричина, по которой я вижу, что заголовки / заголовки должны быть там, даже если они скрыты от визуального представления пользователей (и заполняют элементы SE;))

Не все методы сокрытия CSS являются эквалайзерамиual

ОК, поэтому я знаю, что мы не можем списывать SE, поэтому важно выбрать способ скрытия заголовков, поскольку вы хотите, чтобы они были доступны пользователям AT (вспомогательных технологий) .. display: none; не надежен (некоторые программы чтения с экрана их не читают), и вы не можете найти их с помощью «табуляции» - visibility: hidden; не удалит пробел, и вы все еще не сможете «найти» табуляцию

Так какой же способ сокрытия?

.. случается, это действительно крутой метод, открытый членами сообщества Drupal .. с помощью свойства clip: rect();, которое делает всех счастливыми

.my-hidden-element {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
  clip: rect(1px, 1px, 1px, 1px);
}

Что касается Google, то им не только будет трудно "скрыть бан / оштрафовать" на основе свойства clip, даже если вы начнете поднимать флаги, я думаю, что это все равно, если вы можете доказать законное использованиедля сокрытия элемента - не должно быть никаких проблем ... и фактически в этом случае дополнительные заголовки теоретически должны помочь их также "найти структуру" - так что я действительно чувствую, что это не самая большая проблема ..

My Thoughts

Я абсолютно уверен, что мы должны заголовки разделов в соответствии с рекомендациями HTML5, это более семантически, чем любой элемент кода или имя класса, но я также на 100% думаю, что мы должны быть в состоянии скрыть их от визуальных зрителей, как тамнет смысла показывать заголовок «Поиск на этом сайте», если ваши визуальные пользователи видят, что там есть окно поиска;) - этот заголовок полезен только для невизуальных пользователей и SE, чтобы помочь им найти области документа .. в теорииэто должно помочь SE / Google исключить эту область, например, им не нужно индексировать окно поиска ... поэтому им придется заняться работой над своим ИИ, не так ли?)

Я чувствую, что нужно пойти с этим и понять, почему вы это делаете, тогда, если ваш сайт случайно помечен (что, я думаю, будет крайне маловероятным и в любом случае будет ручным обзором), вы можете объяснить достаточно четкопочему вы это делаете .. Пока эти скрытые заголовки не являются "спамом", я думаю, что они попадут в ту же категорию, что и "замена изображений"

+ 1 Большой вопрос!

Answer 2

Мой предпочтительный способ борьбы с этим. Если стили отключены, вы видите заголовок, но это маленький заголовок, а не h1.

<nav>
<h6 class="hidden">Navigation</h6>
<ul>
<li><a href="www.ronpaul.com">Ron Paul 2012</a></li>

.hidden{
   position:absolute;
   left:-9999px;
}

OR

.hidden{
   text-indent:-9999px;
}