2.5.
HTML
-теги, важные для
SEO
-оптимизации
Есть базовый список тегов HTML, важных для SEO-продвижения. 80 % из них участвуют в формировании контента страницы, остальные нужны для передачи данных поисковой системе.
Подборка HTML-тегов по степени важности:
Метатеги
<title>Заголовок</title> заголовок страницы в окне браузера и в поисковой выдаче. Что туда пропишете, по тому и будете ранжироваться.
<meta name="description" content = "текст"> краткое описание ресурса для поиска. Чем подробнее и понятнее вы составите данный тег, тем выше вероятность, что поисковая система использует его для формирования описания сайта.
<meta name="Keywords" content="текст,"> список ключевых слов, которым посвящена данная страница (в некоторых случаях полезен). Используется только в Landing Page для закрепления важных запросов за страницей.
Теги контента
<h1-4></h1-4> (заголовки контентных блоков страниц, чем меньше цифра, тем важнее заголовок.).
<p></p> абзацы, очень важный тег, напрямую участвует в подаче контента для режима чтения в браузере.
<span></span> тег для выделения строки в рамках других тегов. Обычно используется для форматирования отдельных элементов.
<b>жирный</b>, <strong></strong> теги выделения контента жирным цветом. Рекомендуется использовать тег b.
<i>курсив</i>, <em></em> теги выделения текста курсивом. Рекомендуется использовать тег i.
<s>старая цена</s> для старой информации, чтобы не удалять с сайта.
<ins>Новая версия</ins> для выделения новой версии контента.
<sub>1текст</sub> нижний индекс написания.
<sup>1текст</sup> верхний индекс написания.
<ul><li> элемент</li></ul> списки маркированные.
<ol><li>1. элемент</li></ol> списки нумерованные.
<blockquote>Текст</blockquote> заметка или комментарий к абзацу от автора. Полезная информация, атрибут авторства site.
<abbr title=> <abbr> аббревиатуры и их расшифровка, редко используется.
<address>Текст</address> для информации об авторе или прописывания адреса.
<samp>Текст</samp> для вывода контента, кодов программ, стилей и пр. Выглядит красиво.
<kbd>Текст</kbd> схожий с samp, пишет набираемый на клавиатуре текст моноширинным шрифтом.
Таблицы
Таблицы довольно сложная и в то же время интересная тема. По сей день встречаются сайты, использующие внутреннюю табличную верстку. Важно понимать основы создания таблиц и уметь их правильно читать, чтобы успешно редактировать и развивать сайт.
<table><tr><td></td></tr></table> таблицы. В них также встречаются дополнительные теги для форматирования и структурирования информации.
<tr></tr> строка в таблице.
<th></th> заглавная ячейка таблицы.
<td></td> столбец или ячейка таблицы.
Сложности в форматировании таблиц:
<thead></thead> тег для хранения одной или нескольких строк в шапке таблицы. Может быть только один в таблице.
<tbody></tbody> тело таблицы, хранит основную информацию из строк и столбцов.
<tfoot></tfoot> тег для хранения одной или нескольких строк внизу таблицы, подвал.
Можно обойтись без сложностей, для шапки задать свой стиль, для тела таблицы свой, подвал тоже выделить.
Важные атрибуты таблиц:
colspan=" " объединяет определенное количество ячеек.
rowspan = " " объединяет несколько строк в одну.
Прочие полезные атрибуты:
cellspacing = " " внешний отступ ячеек друг от друга в px.
cellpadding = " " внутренний отступ от содержимого до границ ячеек в px.
border = " " рамка для таблицы, ее толщина.
width = " " ширина в px или % таблицы. Рекомендуется %.
height = " " высота в px или % таблицы. Рекомендуется %.10
Универсальные атрибуты для тегов
Универсальные атрибуты можно задать практически любому тегу и контенту на странице, чтобы повысить его интерактивность.
title = " " подсказка при наведении на элемент. Используется для определений, пояснений внутри страницы.
dir = " " направление написания текста, слева направо или справа налево.
contenteditable="true | false" дает возможность пользователям изменять текст или элемент текста.
align = " center | left |right | justify" выравнивание текста по центру, левому/правому краю, по всей ширине.