Продвижение сайтов – процесс долгий и сложный, а потому специалисты SEO часто прибегают к весьма нестандартным способом повлиять на положение веб-ресурса в поисковой выдаче. Валидность HTML-кода тот неочевидный метод продвижения, о котором необходимо знать еще на этапе разработки нового сайта. Но обо всем по порядку.
HTML (HyperText Markup Language) – стандартизированный язык разметки документов (гипертекста), встречающийся почти на каждой веб-странице современных сайтов. Язык HTML автоматически интерпретируется браузерами и выводится на страницы не в виде набора символов, тегов и атрибутов, а в формате стандартного текста.
Отформатировать же HTML-разметку помогает CSS – каскадные таблицы стилей. Через Cascading Style Sheets задаются шрифты, настраиваются интерактивные элементы, оформление параграфов, заголовок, ссылок.
В чем польза от HTML и CSS в SEO
Валидный код, соответствующий правилам и принятым стандартам, положительно оценивается поисковыми роботами и «облегчает» жизнь сайту. Если же структура кода нарушена, оформлена с ошибками, то тот же «Яндекс» или Google могут неправильно распознать контент, пропустить важные теги и даже исключить ресурс или отдельные веб-страницы из индекса. Избежать столь серьезных санкций помогут советы, описанные ниже.
Теги в HTML
Язык HyperText Markup Language базируется на тегах – специальных элементах, сообщающих браузеру, каким образом интерпретировать представленный на странице код, какое содержимое выводить или скрывать. Теги добавляются на страницы с помощью скобок <>, как в одиночном порядке, так и в парном – в зависимости от синтаксиса, правил, стандартов.
Дополнительно предусмотрены атрибуты, еще сильнее раскрывающие суть тега: например, в конструкции <html lang= «ru-RU»>…</html> подробность в виде lang поможет браузеру сразу определить язык содержимого, то есть «русский». Крошечная подсказка, но браузер уже не ошибется в процессе интерпретирования.
Главные HTML-теги, встречающиеся в каждой разметке
К наиболее распространенным и даже «базовым» элементам языка относятся следующие теги:
- <html> — сообщает браузеру, какой формат или версия HyperText Markup Language использовались при подготовке веб-страницы.
- <head> — состоит из служебной информации для браузера, поисковых роботов: метаданные, заголовок Title, описание, description. Важная часть кода, которую не заметят посетители, но оценят «Яндекс» и Google.
- <body> — видимая для пользователей информация. Содержит основную информацию, начиная с текста, а заканчивая медиаконтентом, параграфами, списками.
О каких SEO-тегах в HTML важно знать
Внутри тега html содержится многое, что создает структуру веб-страницы и передает данные поисковым роботам. Но для SEO полезнее элементы, скрывающиеся в head:
- <title> — заголовок, отображается в названии вкладки, которая появляется в браузере. А еще «тайтл» находится над сниппетом в поисковой выдаче, помогая пользователю сразу оценить содержимое веб-страницы. Специалисты SEO считают Title основополагающим тегом, находящимся в Head.
- <meta> — содержит мета-теги. Добавляется с атрибутами name и content, в которые вписываются ключевые слова и дополнительное описание. Работают атрибуты по следующему принципу: сначала задается name=»description», а уже после – content=»» с необходимым сниппетом. Важно! Тег непарный и добавляется отдельно в head.
- <link> — разрешает добавить связь с внешними документами, стилями, файлами. Через такой тег с атрибутами rel и href подключается тот же CSS. Конструкция выглядит следующим образом «link rel=»stylesheets» href=»style.css»». При добавлении ссылок важно помнить о синтаксисе: те же изображения подключаются через src, а link — через href. Нельзя забывать также об упоминании свойства подключаемого элемента: rel=»stylesheets», то есть, каскадные таблицы стилей. Если же подключается не CSS, то в rel записывается уже иная информация, указанная в стандартах разметки HTML.
- <link> с атрибутом canonical. Пригодится в тех случаях, если необходимо разграничить (в первую очередь для поисковых роботов) информацию на веб-сайте и скрыть нежелательные дубли веб-страниц с похожим или вовсе одинаковым содержимым. Иногда схожий контент проще удалить, но в некоторых ситуациях важно сохранить сайт в первозданном виде, не изменив структуру, и в тоже время избежать санкций со стороны «Яндекс» или Google.
Теги в контейнере body
Тег body содержит видимую для посетителей сайта информацию и состоит преимущественно из весьма распространенных элементов, вроде отформатированного текста, навигационных меню, медиаконтента, списков, ссылок:
- Заголовки H1…H6. Помогают разбить на блоки и сформировать предсказуемую структуру страницы. Заголовки ценятся поисковыми роботами, но только в том случае, если используются правильно. А именно: начинаются с H1 (встречается только раз на странице), а после следуют по очереди – от H2 до H6.
- Параграф <p>. Разбивает текст страницы на абзацы. Тег парный.
- Полужирное начертание. Изменить оформление отдельного слова, предложения или важной мысли помогут теги <strong> или <b>. И, если второй способ оформления исключительно визуальный, то первый еще расставляет акценты и семантически выделяет важный фрагмент в тексте. Разница незаметна при просмотре веб-страницы, но становится очевидной, если содержимое прочитывается синтезаторами речи для незрячих или слабо видящих людей.
- Курсив. Как и в случае с полужирным начертанием, в HTML встречаются теги <em> (выделяет экспрессивно-эмоциональный фрагмент текста) и <i>. Цели одинаковые, но смысл закладывается разный.
- Маркированный список строится вокруг парного тега <ul></ul>, нумерованный — <ol></ol>. И вне зависимости от типа для формирования строк используются <li></li>.
- Изображения. Добавляются в разметку веб-страницы с помощью тега <img>, а также атрибутов src и alt. Наглядно структура выглядит следующим образом: <img src=»ссылка_на_изображение» alt=»наглядное_описание_картинки»>.
- Ссылки. Разрешают ссылаться на отдельные страницы сайта или внешние источники. Добавляются через парный тег <a> с атрибутом href. Конструкция целиком выглядит следующим образом: «<a href=»URL-адрес»>выделенный текст</a>». Если добавить еще атрибут rel=»noindex», то ссылка перестанет индексироваться поисковыми роботами.
- Блок <div>. Разграничивает информацию на странице, разрешает собирать отдельные части кода в специальный контейнер, к которому в дальнейшем добавляется атрибут class=»», на который можно ссылаться при подготовке стилей через CSS.
Полезные советы по связке SEO и HTML
Кроме перечисленных выше нюансов важно помнить и о дополнительных:
- Безошибочный HTML-синтаксис. Парные теги в HTML 5 необходимо закрывать (<p>…</p>), иначе дальнейший код после ошибки перестанет отображаться на странице, а поисковые роботы не смогут определить содержимое сайта.
- Правильная вложенность тегов. Правило банальное, но часто приводящее к ошибкам. Принцип следующий – первым открытый тег закрывается последним.
- Разметка без стилей (атрибут или тег style). Стили задаются в CSS. А вот в HTML применять способ оформления нежелательно, хотя и можно.
- Заполнение контейнера head. Между тегами <head>…</head> в разметке веб-страницы располагается информация для браузеров и поисковых роботов, а потому важно следовать некоторым правилам, устоявшимся в обществе веб-мастеров.
Во-первых, желательно избегать частого выделения текста с помощью <strong> или <i>. Во-вторых, необходимо соблюдать чистоту кода: не писать теги и атрибуты с заглавной буквы и выработать привычку использовать синтаксис равномерно. Например, использовать двойные кавычки по всей разметке, а не вперемешку с одинарными.
В-третьих, не помешает заполненный атрибут alt у изображений в теге <img>. А еще – грамотно составленная структура страницы: один заголовок <h1> на странице, навигационное меню из ссылок <a>.
Найти часть допущенных ошибок поможет validator.w3.org, способный отсканировать код и предупредить, где потерялись символы, не подписаны картинки, а в какой момент необходимо подправить заголовки.