HTML – это стандартный язык программирования, служащий для разметки документов и просмотра страниц. Браузеры, считывая кодировку, выводят на экран удобный для восприятия контент.
Для продвижения сайта в сети нет необходимости профессионально разбираться в HTML. Однако существуют теги, напрямую связанные с SEO, которые желательно знать.
Photo by AltumCode on Unsplash
Подпишитесь на нас в Facebook, Telegram, Twitter или Instagram, чтобы ничего не пропустить!
СОДЕРЖАНИЕ СТАТЬИ
- Что такое «теги»?
- Что такое «элемент»?
- Что такое «атрибут»?
- Что такое «метатег»?
- Структурные HTML-теги
- Теги заголовков
- Теги форматирования
- Метатеги
- Теги и атрибуты ссылок
- Теги и атрибуты изображений
- Самые важные теги для SEO
Изучая тему SEO кроме терминов: «домен», «дроп домен», «ссылки», вы обязательно встретите такие термины: «тег», «метатег», «атрибут», «элемент». Пользователи часто заблуждаются, неправильно используя термины, например, называют тег элементом, элемент – атрибутом. Попробуем внести ясность.
Что такое «теги»?
Теги – это метки, которыми пользуются для размещения и каталогизации информации, тем самым обеспечивая быстрый поиск. По сути – это ключевые слова, которые позволяют легко найти необходимую информацию. Теги характеризуют материал, позволяет понять, на чем акцентируется публикация.
Они являются базовой конструкцией HTML. Их заключают в скобки <…>. Есть теги одиночные и парные. Вторые подразделяются на открывающий и закрывающий тег, обозначаются они так: <…>…<…/>.
Пример:
<p></p>
<br>
<body></body>
Что такое «элемент»?
Элемент – это основной компонент языка разметки, структурирующий текст документа. Внутрь тега помещают текст, он называется элементом HTML.
Пример:
<p>Тег обозначает начало и окончание каждого абзаца</p>
<body>Предложение, расположенное в этом теге, отображается в браузере</body>
Что такое «атрибут»?
Атрибуты – это дополнительные значения, которые настраивают или различными способами регулируют элементы, чтобы соответствовать определенным критериям. HTML-атрибуты сообщают браузеру, как должен отображаться тот или иной элемент страницы. Они могут иметь какой-то заданный стандарт или параметры задаются пользователем.
Пример:
<a href=»https://www. nic.ua»>Атрибут href, сообщает адрес документа, на который нужно перейти</a>
Что такое «метатег»?
Метатеги – это теги, применяемые для представления сопроводительных данных о странице. По сути, это один из видов тегов. Как правило, они указываются в заголовках документа, например, между символами <head> и </head>, но пользователям они не видны.
Пример:
<meta name=»author» content=»Тарас Шевченко» />
<meta name=»description» content=»Описание документа» />
<meta name=»document-state» content=»Dynamic» />
Имея понятие об основных используемых терминах, попробуем разобраться с тегами HTML, которые важны для SEO.
Структурные HTML-теги
Каждый HTML документ предполагает структуру, например:
<!DOCTYPE html>
<html>
<head>…</head>
<body>…</body>
</html>
Что означает набор этих символов?
<!DOCTYPE html> – это строка, декларирующая версию HTML. С нее начинается любой документ, который отвечает определенной версии. Он сообщает валидатору, какую версию HTML вы используете в своей странице.
Следующий символ <html> передает сообщение браузеру о том, что сейчас последует текст HTML-формата.
После открывающего символа <html> ставится открывающий символ <head>, внутри которого размещается служебная информация (при просмотре не отображается на странице) – это метатеги, скрипты счетчиков, коды валидации ресурса, взаимодействующие с разнообразными веб-сервисами.
Но то, что уже размещается внутри тега <body>, будет отображаться для пользователя. После это знака публикуется основной контент страницы: текст, изображения, видео, все то, что увидит человек, просматривающий сайт.
Безусловно, это неокончательный список тегов структуры. Существуют еще: <header>, <article>, <footer>, <div> и многие другие. Но те, что мы разобрали, являются основными для базовой оптимизации сайта.
Теги заголовков
Для поисковых систем большое значение имеют заголовки. Именно они определяют релевантность документов запросу пользователя.
Основной тег заголовков – <title>. Его прописывают внутри тега <head>. Сам он не отображается на странице, но роботы поисковых систем определяют его как заголовок.
В <title> самая важная информация должна превышать 60 символов – приблизительно столько их видно в заголовках сниппетов поисковых систем. Основной текст в <title> можно делать и с большим количеством символов.
Это будет выглядеть так:
<head>
<title>Заголовок страницы</title>
</head>
Пример отображения текста из <title>:
Из-за того, что Тег <title> размещается в служебном разделе <head>, его очень часто называют метатегом. Действительно, он похож на метатег. Но формально считается, что это тег заголовка документа.
Внутри тега <body> размещаются заголовки, которые будут видны в браузере. Основной заголовок заключен в парный тег <h1> – он один и прописывается в начале страницы. Для оптимизации это самый важный заголовок, отражающий суть страницы, именно в нем необходимо прописывать ключевые фразы. В дальнейшем текст разбивают на разделы заголовками <h2>, а уже после этого с помощью <h3 – <h6> может дробиться на смысловые единицы.
Важно помнить: заголовок нижнего уровня не должен располагаться выше заголовка верхнего уровня.
Теги форматирования
Без форматирования текст будет выглядеть, как сплошной набор букв и символов и будет сложно восприниматься читателем. Форматирование позволяет сделать текст читабельным. Кроме того, поисковые системы тоже отдают преимущество «удобным» текстам.
Для SEO продвижения можно использовать такие теги:
<p>…</p> (парный тег, обозначающий абзац);
<ul>…</ul> (маркированный список);
<ol>…</ol> (нумерованный список; <ul> или <ol>);
<li>…</li> (элемент списка);
<strong>…</strong> (выделение жирным);
<em>…</em> (выделение курсивом);
<blockquote>…</blockquote> (тег цитирования).
Это, конечно, не все теги, но их будет вполне достаточно, чтобы самому отформатировать текст, не привлекая специалиста.
Метатеги
Метатеги HTML решают следующие задачи:
- Определение авторства. Для этого применяется метатег Author:
<meta name=»author» content=»Тарас Шевченко» />
- Отправка информации поисковым системам для формирования заголовков и индексации документов.
- Формирование карточки для отображения контента в социальных сетях;
- Режим отображения страниц. Тег Viewport запускает режим отображения страницы сайта с адаптивной версткой на устройствах с разным разрешением экрана:
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
- Один из самых важных для SEO метатег – Robots. Он может запрещать или разрешать поисковикам индексировать страницу и указанные на ней ссылки.
<meta name=»robots» content=»index,follow» />
Значение index означает, что поисковой системе можно индексировать страницу. Если в этом нет необходимости, то меняем значение на noindex. follow – разрешение на индексацию ссылок, соответственно nofollow – запрет.
- Для SEO существенное значение имеет метатег Description. Информацию из него Google может использовать для описания в сниппете – фрагменте исходного текста, отражающемся в поисковой системе. Поисковая система Яндекс компонует сниппет по своим алгоритмам. Но все поисковые системы из Description учитывают информацию для определения релевантности контента поисковому запросу. Поэтому туда необходимо вносить ключевые фразы.
<meta name=»description» content=»Описание около 170 символов»/>
- Для быстрой проверки заголовков title, h1-h6 и метатегов description и keywords применяйте парсер PromoPult.
- Viewport – применяется для адаптации верстки под мобильные гаджеты.
- Content-Type – обозначает кодировку страницы.
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″>
или в HTML5: <meta charset=»UTF-8″>
- Content-Language – обозначает язык страницы. Неправильное отображение языка снижает уровень ранжирования в стране продвижения сайта.
<meta http-equiv=»content-language» content=»ua» /> или в рус. версии «ru»
или в HTML5: <html lang=» ua «> или в рус. версии «ru»
- Протокол Open Graph определяет процесс создания превью страницы при публикации ссылки в мессенджерах и соцсетях: Facebook, Telegram, LinkedIn и другими. Чтобы превью корректно отображались в соцсетях, нужно добавить в раздел <head> кода страницы, соответствующие мета-теги Open Graph.
Теги и атрибуты ссылок
Применение тегов позволяет создать гиперссылки:
<a href=»nic.ua»>анкор ссылки</a>
Атрибут href обозначает адрес документа в сети.
Атрибут target определяет, как будет открываться новый документ. Значения этого атрибута могут быть такие:
_top (в текущем окне);
_blank (в новом окне);
_self (в текущем фрейме);
_parent (в родительском фрейме).
Если атрибут target не указан, то по умолчанию будет применяться _self.
При применении атрибута target со значением _blank (открытие ссылки в новой вкладке) необходимо указать еще атрибут rel со значением noopener. Это позволит устранить уязвимость, связанную с получением частичного контроля над страницей со стороны ресурса, на который был переход:
<a href=»site.ru» target=»_blank» rel=»noopener»>анкор ссылки</a>
Бывает, для достижения определенных целей SEO ссылку прячут от индексации поисковиками. Для этого применяют атрибут rel со значением nofollow:
<a href=»site.ru» rel=»nofollow»>анкор ссылки</a>
Теги и атрибуты изображений
Для вставки и описания изображения применяют символ alt:
<img src=»url» alt=»альтернативное имя» title=»описание изображения» width=»размер (в пикселях или %)» height=»размер (в пикселях или %)»>
Здесь применены атрибуты:
- src – этот символ показывает путь к файлу изображения;
- alt – самый важный атрибут для продвижения сайта. Текст из alt применяется в поиске по изображению, в случае если его показ в браузере отключен, то данный текст отображается вместо картинки;
- title – при наведении курсора на картинку выводит описание в виде всплывающей подсказки;
- width и height – указывает ширину и высоту картинки.
Самые важные теги для SEO
| Теги структуры HTML документа | <html> | контейнер, который включает все содержимое страницы |
| <head><title>Заголовок страницы</title></head> | служебная информация о странице (не отображается на странице) | |
| <body>…</body> | хранение контента страницы, отражающегося в окне браузера | |
| Теги заголовков | <title>Заголовок страницы</title> | указывает на заголовки страницы (не отображается) |
| <h1> – <h6><h1> заголовок</h1> | h – «heading», отражает иерархию заголовков на странице | |
| Теги форматирования текста | <p>текст</p> | начало нового абзаца |
| <ul>текст</ul> | маркированный список | |
| <ol>текст</ol> | нумерованный список | |
| <li>текст</li> | определяет отдельный элемент списка | |
| <strong>текст</strong> | выделяет жирным шрифтом | |
| <em>текст</em> | выделяет курсивом | |
| <blockquote>текст </blockquote> | выделяет длинные цитаты внутри документа | |
| Метатеги | description | мета-описание страницы – тег, описывающий содержимое страницы примерно в 160 символах |
| robots | запрещает или разрешает поисковикам индексировать страницу и указанные на ней ссылки | |
| viewport | часть страницы, которую может увидеть пользователь без прокрутки | |
| author | тег содержит имя автора страницы | |
| property | мета-тег Open Graph для корректного отображения превью ссылки в соцсетях | |
| content-type | определяет тип документа и его кодирование | |
| content-language | описывает язык контента страницы | |
| Теги и атрибуты ссылок | <a> | определяет гиперссылку для перехода на место на странице или на другую страницу |
| атрибуты | href | адрес документа в сети |
| target | определяет способ открытия нового документа:_ top — в текущем окне;_blank — в новом окне;_self — в текущем фрейме;_parent — в родительском фрейме. | |
| rel | rel со значением nofollow — (не следовать) указывает поисковому роботу не индексировать активную ссылку | |
| Теги и атрибуты изображений | <img> | описание изображения |
| атрибуты | src | указывает путь к файлу изображения |
| alt | участвует в поиске по изображению, если в браузере отключен показ картинок | |
| title | при наведении курсора на изображение выдает описание в виде всплывающей подсказки | |
| width, height | задает ширину и высоту картинки |
·
Безусловно, HTML-тегов намного больше. Но тех, что описаны выше, будет достаточно для базового понимания поисковой оптимизации сайта.