Типичные ошибки в семантике HTML4/HTML5 и почему их следует избегать

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

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

Статья на тему разметки совсем недавно появилась на springboardseo.com, которую я старательно и перевел.

Типичные семантические ошибки

Злоупотребление Div’ами

Div используется для разбивки шаблона на логические сегменты, когда нет возможности применить подходящий по семантике тэг. До HTML5 не было таких тэгов, как <header> и <footer>, так что при использовании DOCTYPEHTML4 или XHTML, не забывайте придумывать ID для соответствующих разделов, равно как и для сайдбаров, главных колонок и прочих логических разделов шаблона. Никогда не следует упускать возможность довести семантику до ума.

Множественные H1

В XTML и версиях HTML ранее пятой (которые, по большому счету, до сих пор остаются наиболее распространенными версиями HTML), одной из самых распространенных семантических ошибок было использование множественных H1 на одной странице. Тэг H1 используется исключительно для главного заголовка страницы и должен использоваться только один раз непосредственно перед содержательной частью – аналогично газетной статье, в которой могут иметься подзаголовки, но основной заголовок всегда только один.

Спецификация HTML5 добавляет этой проблеме новое измерение: дело в том, что в ней рекомендуется то, что с точки зрения HTML 4.01 было семантической ошибкой, а именно – использование более одного H1. Множественные заголовки вполне уместны в HTML5, поскольку страницы в нем сегментированы в большей степени (и иным образом), но в версиях до HTML5 на странице должен быть H1 должен быть только один.

Пропуск уровней заголовков

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

Шаблоны, основанные на таблицах

Мы уже больше десяти лет живем в XXI веке, так что об этом, по большому счету, можно было бы и умолчать. Тем не менее: в HTML таблицы предназначены для табличных данных. То есть: для изображения таблиц – пожалуйста. Для шаблона страницы – не стоит.

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

Главное, что вы должны запомнить касательно CSS-позиционирования: оно на 90% достижимо посредством одних только свойств float и margin. Для большинства шаблонов нет никакой необходимости загромождать таблицы стилей излишне подробными свойствами позиционирования – так вам будет потом сложно разобраться в собственных стилях.

Блочные элементы внутри строчных элементов

Для новичков разница между строчными и блочными элементами зачастую оказывается источником немалой путаницы.

Злоупотребление BR

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

Но каким же образом семантическая разметка влияет на SEO?

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

Структура текста – это понятие визуального восприятия, имеющее смысл только для людей. Поисковики же получают контекстуальные стимулы из семантических смыслов, заключенных в заголовках, подзаголовках, списках определений и прочих семантически богатых элементах HTML.

Семантика, SEO и будущее

Если вы уже сейчас не пишете собственные HTML и CSS коды, то лучше озаботьтесь тем, чтобы начать это делать в ближайшем будущем. Почему? С появлением противоречивой системы Schema.org, созданной тремя поисковыми гигантами, пришествие Семантической Паутины все более и более переходит из области идей, где она обреталась уже больше десятилетия, в область реальности.

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