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

В html5 spec говорится, что:

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

и те же рассуждения применимы к алгоритму html5.

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

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

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

Другой, который я предварительно пробовал на своем сайте [ссылка], заключается в том, чтобы устанавливать заголовки для всех элементов секционирования, а затем использовать CSS для спрячьте заголовки для некоторых из них (опять же, в основном <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, и я бы предпочел не быть оштрафован в результате выбора этой установки.

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

Ответы

Ответ 1

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

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

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

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

Не все методы скрытия CSS равны

ОК, поэтому я знаю, что мы не можем списать SE, поэтому важно, чтобы вы выбрали скрытие заголовков, поскольку вы хотите, чтобы они были доступны для пользователей AT (Assisted). display: none; is not (некоторые считыватели не читают их), и вы не можете "навести" их на поиск - 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, даже если вы начнете поднимать флаги, я думаю, что это похоже на все остальное, если вы можете доказать законность использование для скрытия элемента - не должно быть никаких проблем.. и на самом деле в этом случае дополнительные заголовки должны теоретически помочь им "найти структуру" тоже - так что я действительно чувствую, что это не самое большое беспокойство.

Мои мысли

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

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

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

Ответ 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;
}

ИЛИ

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