Seopult Cybermarketing Click.ru Seopult TV Trustlink Webartex.ru UpToLike.ru Blog.Seopult.ru Форум
22 мая 2017

Какие базовые теги HTML необходимо знать при SEO-продвижении

Плюсануть
Поделиться
Отправить
Класснуть
Линкануть

HTML — это стандартизированный язык разметки документов в интернете. Браузеры интерпретируют язык HTML и отображают уже отформатированный текст. Разметка документов осуществляется с помощью тегов, которые задают тексту определенные свойства. Чтобы заниматься раскруткой сайта, необязательно досконально знать HTML. Но есть ряд тегов, работа с которыми является неотъемлемой частью SEO (их проверка и оптимизация входит в услугу SEO-аудита вашего сайта силами службы “Персональный менеджер”). Именно о них мы и расскажем.

«Теги», «метатеги», «атрибуты», «элементы» — разбираемся с понятиями

В статьях о SEO можно часто встретить эти термины, причем их часто путают, называя теги элементами, элементы — атрибутами и т.д.

<.../>

Итак, начнем с тегов. Это базовые конструкции HTML. Все они заключены в скобки <...>. Теги могут быть одиночными и парными. Во втором случае есть открывающий и закрывающий тег, обозначающийся <.../>. Примеры тегов:

<p></p>
<br>
<body></body>

Внутри тега располагается текст. В совокупности с тегом этот текст является элементом HTML. Элемент — это основная структурная единица документа, написанного на HTML. Вот примеры элементов:

<p>Этот тег свидетельствует о начале и конце абзаца</p>

<body>Текст, заключенный в этом теге, виден пользователю в браузере</body>

Элементы могут обладать атрибутами (свойствами). Они могут иметь стандартные значения или задаваться пользователем. Атрибут прописывается в открывающем теге после имени элемента и перед закрывающей скобкой (>). Вот пример атрибута:

<a href="http://www.site.ru">Данный элемент содержит атрибут href</a>

Разновидностью тегов являются метатеги. По сути, это теги, предназначенные для представления структурированных метаданных о веб-странице. Вот примеры метатегов:

<meta name="author" content="Павел Павлов" />
<meta name="description" content="Описание документа" />
<meta name="document-state" content="Dynamic" />

Итак, с понятиями разобрались. Теперь перейдем к рассмотрению самых важных тегов для SEO.

Теги структуры документа

Каждый HTML документ имеет такую структуру:

<!DOCTYPE html>
 <html>
  <head>

  </head>
  <body>

  </body>
</html>

В самом верху — строка декларации версии HTML. С нее начинается документ, который отвечает спецификации HTML определенной версии (например, в нашем случае это HTML 5).

Далее идет тег <html>. Он сообщают браузеру о том, что далее будет текст формата HTML. После открывающего тега <html> идет открывающий тег <head>. Внутри него располагается служебная информация (пользователям она не отображается). А вот информация внутри тега <body> как раз видна пользователям — именно здесь расположен основной контент (текст, изображения, видео и т. п.).

Теги заголовков

Заголовки очень важны для SEO, ведь они помогают определить поисковикам релевантность документов.

Первый тег — <title>. Он прописывается между тегами <head> и </head>. То есть информация в нем не отображается на странице, но поисковики ее учитывают и выводят как заголовок в результатах поиска. Поэтому текст внутри <title> должен быть длиной не более 60 символов. Синтаксис такой:

<head>
  <title>Заголовок страницы</title>
</head>

На одной странице допустим только один заголовок <title>.

Внутри тегов  <body>…</body> идут заголовки, которые отражаются в браузере. Главный заголовок заключен в парный тег <h1> — он единственный на странице, идет в самом начале. Потом содержимое разбивается на разделы заголовками <h2>, а уже после них — дробление на смысловые единицы с помощью <h3>. Заголовок уровня 3 (<h3>) не должен располагаться выше уровня 2 (<h2>).

Теги форматирования

Если их не использовать, то текст будет похож на «простыню», которую сложно читать. Благодаря форматированию в тексте можно расставить акценты, сделать его читабельным. Поисковики распознают теги форматирования и отдают предпочтение «удобным» текстам.

Для целей SEO достаточно использовать такие теги:

  • <p>...</p> (парный тег, обозначающий абзац);
  • <ul>...</ul> (маркированный список);
  • <ol>...</ol> (нумерованный список; <ul> или <ol> могут вкладываться друг в друга);
  • <li>…</li> (элемент списка);
  • <strong>…</strong> (выделение жирным);
  • <em>…</em> (выделение курсивом);
  • <blockquote>…</blockquote> (тег цитирования, обычно появляются кавычки, горизонтальная линия слева текста, и он сдвигается вправо).

Конечно, это далеко не все теги, но для успешного продвижения сайта их достаточно.

Метатеги

Можно выделить несколько ключевых направлений использования метатегов:

  • идентификация авторства;
  • передача поисковикам информации для создания заголовков гипертекстовых документов;
  • формирование карточки для отображения в социальных сетях;
  • влияние на режим отображения страниц.

Для целей SEO особенно важен метатег Description. Информация из него используется Google для формирования описания в сниппете, а вот Яндекс формирует сниппет на свое усмотрение. Тем не менее все поисковики учитывают информацию из Description для определения содержания страницы. Поэтому сюда обязательно стоит включить ключевые фразы. Синтаксис выглядит так:

<meta name="description" content="Описание длиной около 170 символов" />

Некоторые до сих пор используют метатег Keywords, но при ранжировании он не учитывается, так что заполнять его или нет, решать вам. Выглядит он так:

<meta name="keywords" content="ключ 1, ключ 2, ключ 3 и т. д." />

Очень важный метатег для SEO называется Robots. С его помощью можно запретить или разрешить индексацию страницы и ссылок на ней.
Метатег выглядит так:

<meta name="robots" content="index,follow" />

Значение index говорит о том, что роботам можно индексировать страницу (в противном случае меняем значение на noindex). Значение follow разрешает индексацию ссылок (в противном случае используем nofollow).

Для того чтобы страница корректно отображалась в соцсетях, тоже используются метатеги. Например, для ВК и Facebook нужно задать метатеги Property, для Twitter — Name, для Google+ — Itemprop.

Тег ссылок

С помощью тегов создаются гиперссылки. Синтаксис такой:

<a href="site.ru" target="_blank ">анкор ссылки</a>

Атрибут href указывает на адрес документа в интернете. Атрибут target определяет, как будет открываться новый документ. Возможны такие значения:

  1. _top (в текущем окне);
  2. _blank (в новом окне);
  3. _self (в текущем фрейме);
  4. _parent (в родительском фрейме).

Если атрибут target не задать, то по умолчанию будет использоваться значение _self.

Тег изображений

Для вставки и описания изображений тоже используется специальный тег. Для целей SEO особенно важны атрибуты alt и title. Синтаксис тега такой:

<img src=”url” alt="альтернативное имя" title="описание изображения" width="размер (в пикселях или %)" height="размер (в пикселях или %)">

Здесь используются атрибуты:

  • src (это атрибут, указывающий путь к файлу изображения);
  • alt (это описание видно вместо изображений, если отключен их показ в браузере);
  • title (данное описание выводится в виде всплывающей подсказки при наведении курсора на изображение).
  • width и height (соответственно, ширина и высота изображения).

Естественно, HTML-тегов намного больше, и если уметь ими пользоваться, то это только плюс. Но для начала работы с SEO вполне достаточно тех, что мы рассмотрели. Если же все еще «плаваете» в HTML и вам сложно оценить правильность кода, то закажите профессиональный SEO-аудит в SeoPult. Кроме определения валидности кода, здесь будет много полезной информации, от которой вы будете отталкиваться при продвижении сайта.

Плюсануть
Поделиться
Отправить
Класснуть
Линкануть

Давайте это обсудим

Расписание вебинаров и
мастер-классов
22 августа 2017 Вторник 13:00
Дмитрий Климчуков
Контекстная реклама: продвинутый курс
23 августа 2017 Среда 12:00
Михаил Смолянов
Финансовая грамотность для основателя бизнеса
23 августа 2017 Среда 13:00
Ксения Климчукова
Продвижение в Facebook и Instagram
24 августа 2017 Четверг 13:00
Евгений Костин
SEO: продвинутый курс