Типичные ошибки в семантике 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, созданной тремя поисковыми гигантами, пришествие Семантической Паутины все более и более переходит из области идей, где она обреталась уже больше десятилетия, в область реальности.

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

Нравятся статьи? Подписывайтесь на рассылку!

1 Star2 Stars3 Stars4 Stars5 Stars (Пока оценок нет)
loadingЗагрузка...
Логотип сайта

19 комментариев

  1. Хорошая статья, я смотрю Вы в подробности не углублялись, могу добавить что поисковые системы уже давно обращают внимание на валидность кода сайта, так же они еще обращают внимание на грамматические ошибки. Может у вас есть информация как сделать валидным код CMS Joomla я был бы Вам очень благодарен.

  2. Интересно. Думается мне, что множественные H1 – проблемка. Как поисковикам ранжировать сайты на HTML5 (с несколькими H1) и HTML4 (с одним H1)? Будет ли учитываться только первый H1? Или нет?

    Вот что интересно. Правда, это уже в рамках оптимизации, а эта статья – исключительно в рамках валидности и семантики.

  3. КОНСТАНТИН. по моему Профит ответил на ваш вопрос:

    Если вы уже сейчас не пишете собственные HTML и CSS коды, то лучше озаботьтесь тем, чтобы начать это делать в ближайшем будущем

  4. Хорошая статья!
    Хоть и старался использовать CSS, но злоупотреблял тэгами немало – надо исправляться.

    P.S. Поддерживаю КОНСТАНТИНА в его вопросе: как можно сделать валидным CMS Joomla?
    Кто-нибудь знает?

  5. Мне кажется семантический веб хоть и хорош собой, результативность поиска улучшится, но эту идею не получится реализовать быстро. Подумайте сколько сайтов в интернете, все сделаны по правилам? Некоторые сайты на хороших позициях держаться потому что качественный контент, оптимизированный, и сделаны они на таблицах, и в каждой строке стоит. Другие за счет плотности ключевых слов и возраста домена.
    Если произойдет резкая смена алгоритмов поиска, то будет революция. Вебмастера пойдут палками окна колотить, беспорядки начнутся. 😀 Это все конечно произойдет, но не в ближайшем будущем.

  6. Использование более 1 тега h1 не только является ошибкой валидностью, но и путает поисковых роботов, вследствие чего возникают проблемы с оптимизацией страницы

  7. Хорошая статья. Было бы уместно продолжение этой темы. Я не думал что валидность влияет на ранжирование…

Добавить комментарий для фотограф Александр Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.