HTML разметка и базовые теги в SEO

HTML разметка и базовые теги в SEO

Мы уже говорили о том, как работают поисковые системы: пользователь вводит запрос в строку поиска, а затем Google и Яндекс выдают ему список подходящих страниц. Но как именно поисковик определяет, что именно эти страницы релевантны запросу - то есть, что пользователь найдёт на них то, что ищет?

Одно из условий - текстовое соответствие содержимого страницы и формулировке запроса. Отсюда рекомендация специалистам по SEO включать ключевые слова в текст на сайте.

Но есть ещё один способ помочь поисковику увидеть, что именно найдёт пользователь на конкретной страницу сайта. Это оптимизация мета-тегов.

Из них особенно важно уделить внимание заполнению тегов Title и Description. Именно к ним обращаются и поисковые роботы, оценивая релевантность страницы запросу, и пользователи, решая, кликать по ссылке в выдаче - или не стоит.

скрин типа такого

Грамотно составленные Title и Description повышают шансы попадания сайта в топ поисковой выдачи.

Но обо всём по порядку.

Теги и атрибуты как составные части HTML разметки

HTML, HyperText Markup Language, язык разметки гипертекста - это список тегов. Через теги в коде страницы веб-мастера прописывают заголовки, содержимое документов и форматируют текст.

Поисковый робот видит и понимает содержимое страниц, «читая» теги и их атрибуты. Интерпретируя язык HTML разметки, браузер понимает, что размещено на странице и как это показать пользователю - где и как разместить текст, видео, картинку.

А ещё теги передают поисковым роботам всю необходимую информацию о каждой странице сайта: что там размещено, на какую тему, в каком формате.

Тег - это элемент языка HTML, который браузеру, как ему нужно отобразить информацию на страницу. Все теги пишутся в треугольных скобках <tag>. Делятся на парные и одиночные.

  • Парные теги состоят из открывающего и закрывающего, с одинаковым содержанием, но при этом закрывается тег слешком. Например, <p> и </p>.
  • Одиночные состоят лишь из одного открывающего тега, например, тег <img>.

Теги задают каркас страницы, структуру документа. Атрибуты внутри тегов нужны, чтобы расширить или модифицировать действия тегов. Атрибуты описываются по шаблону «имя="значение"» внутри открывающего тега.

  • Например, <meta name="description">. Внутри тега <meta name> размещён атрибут "description".

Структура любого HTML-документа выглядит так:

<!DOCTYPE html>

<html>

<head>

<title>Название документа</title>

</head>

<body>

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

<p>ображаемый на странице контент</p>

</body>

</html>

В этом примере <!DOCTYPE> указывает на тип документа, наш документ - HTML.

  • тег <html>…</html> отмечает границы документа, сообщает браузеру, что перед ним документ формата HTML
  • тег <head>…</head> - контейнер, внутри которого него помещается информация, которую видит только браузер и поисковый робот, для пользователей она скрыта. Они из всего содержимого этого тега видят только<title>…</title> - заголовок страницы
  • тег <body>…</body> ограничивает собой всю видимую для пользователя часть документа. Внутри <body> располагается весь контент - текст, картинки, видео и т.п.

Важно. Теги <html>, <head>, <body> - главные три тега, которые встречаются в ЛЮБОМ документе.

Содержимое каждой HTML – страницы прописывается в коде. Код размещается между тегами <html>…</html>.

Зачем SEO специалисту правильно формировать теги

Код (содержимое) страницы делится на две части:

  • внутри тегов <head>…</head> размещаются мета-теги. Если они не заполнены, сайт может работать и без них, но для SEO эти теги первостепенны. Именно по ним поисковый робот понимает, какую страницу он сканирует, какой контент на ней размещен и как ее применить в дальнейшем в выдаче. Оптимизация мета-тегов внутри <head> - важная задача SEO специалиста. Это такие теги, как <title>, <description>, <keywords> и другие. Их проработка критично важна для повышения позиций страниц сайта в выдаче.
  • внутри тегов <body>…</body> заключается «тело» страницы, то есть её содержимое. Эти теги позволяют отформатировать содержимое - разбить текст на абзацы, поставить заголовки, изменить размер видео или выровнять картинку по ссылке. Они нужны на этапе заполнения страниц сайта в процессе его SEO оптимизации. Позволяют улучшить поведенческие факторы, сделать содержимое страницы удобным и привлекательным для пользователя, прописать ключевые фразы в заголовках текста или описаниях видео (картинок), что повышает релевантность страницы запросу пользователя.

Если заполнять мета-теги вручную для каждой интернет-страницы, это занимает определённое время. Вот почему важно понимать, зачем это делается.

Итак, оптимизация тегов и мета-тегов позволит:

  • поднять сайт в поисковой выдаче. Если поисковики будут чётко понимать, что находится на страницах сайта, они смогут рекомендовать это пользователям. Особенно в этом смысле важно оптимизировать теги на сайтах интернет-магазинов;
  • сформировать привлекательный сниппет. Сниппет - это текстовая информация, «приглашалка» на сайт, которую пользователь видит в выдаче браузера по своему запросу сразу под заголовком страницы. Это краткое описание содержимого страницы, по которому пользователь принимает решение - переходить на сайт или нет. А отсюда и влияние на поведенческие факторы ранжирования, что также отражается на позициях сайта по тому или иному запросу в выдаче.

скрин, сниппет

  • для привлекательного описания страниц сайта в социальных сетях. Заполнение мета-тегов позволит создать интригующие описания, которые автоматически подтянутся к ссылкам, которые вы будете размещать и которые приведут пользователя на сайт.
  • скрин?

Как проверить мета-теги страниц

Когда вы проверяете теги HTML разметки, вы фактически видите сайт так, как его видит поисковый робот.

Более того: обладая знаниями HTML и CSS, вы можете обойтись без программиста, чтобы внести какие-то минимальные изменения и доработки на страницы сайта, поменять оформление контента, расставив заголовки в тексте, увеличив картинку, отформатировав таблицу с данными и т.п.

Просмотреть теги в коде страницы сайта можно двумя способами.

Способ 1.

Вам нужно зайти в панель для веб-мастеров: это Яндекс.Вебмастер и Google Search Console.

В Google ищите раздел «Просмотреть как гуглбот», слева в меню

скрин, раздел гугл консоль– просмотреть как гуглбот, слева в меню.

В яндекс.Вебмастер ищите раздел «Проверка ответа сервера».

скрин, вебмастер, проверка ответа сервера.

Способ 2.

Вы можете просмотреть код страницы и внести необходимые изменения прямо в браузере.

Для этого:

  • откройте в браузере Google Chrome, Mozilla Firefox и Opera интересующую страницу;
  • нажмите сочетание клавиш «CTRL» + «U»

В открывшемся окошке откроется HTML-код страницы.

Чтобы легко найти интересующий тег в коде страницы, можно использовать сочетание «CTRL» + «F», введя название интересующего тега: <title>, <description>, <h1>.

скрин

Какие базовые теги HTML важны для SEO

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

Эти теги важны для SEO, потому что помогают поисковикам определить релевантность документа, а пользователю - понять, о чём будет идти речь в контенте, который размещён на странице.

<title>

Самый важный тег заголовка, который прописывается между <head> и </head> и учитывается поисковиками при ранжировании сайта в выдаче.

Тег «тайтл» - это и есть заголовок страницы. Он не отображается на самой странице, когда пользователь её открывает, но виден в левом верхнем углу браузера и во вкладках.

На одной странице может быть только один заголовок <title>. Рекомендуемая длина - до 70 символов, всё «лишнее» поисковая система обрезает и не отображает в выдаче.

Скрин с тайтлом

В коде страницы <title> прописывается так:

< html>
< head>
< title>Содержимое мета-тега «title»< /title>

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

Внутри тега <body>…</body> размещаются другие теги заголовков - <h1>, <h2>, …<h6>. Это заголовки, которые пользователь видит в браузере как подзаголовки текста.

Главный заголовок заключён в парный тег <h1>…</h1>, он всегда единственный на странице. Он самый крупный из всех заголовков на странице.

Дальше по убыванию (и если нужно), заполняются теги <h2>…</h2>, и так по убыванию, до заголовков шестого уровня, <h6>…</h6>.

Этих тегов может быть сколько угодно много, но важно соблюдать иерархию: заголовок третьего уровня <h3> не должен располагаться выше заголовка второго уровня <h2>.

скрин с документами и заголовками разного уровня

Для SEO хорошо прописывать в этих заголовках ключевые фразы: это повышает релевантность страницы запросу пользователя.

Мета-тег <description>

Мета-теги передают поисковому роботу данные об авторе документа, его содержании, влияют на то, как поисковик сформирует сниппет страницы.

Для целей SEO самый важный мета-тег это <description>. Он кратко описывает содержание страницы.

Поисковики учитывают заполнение «Дескрипшен» и могут взять его содержимое для формирования сниппета. Поэтому нужно стараться включать в него ключевые фразы, но делать его оригинальным, не копировать текст из содержимого страницы, а описывать для пользователя, что он найдёт на ней.

Рекомендуемая длина <description>, на которую стоит ориентироваться SEO специалисту, составляет:

для Google: десктоп 120-140 символов; мобильный поиск 100-120 символов;

для Яндекс: десктоп 120-220 символов; мобильный поиск 110-200 символов.

Лучше самую важную информация прописывать в первых 100-140 символах.

Важно прописывать <description> для каждой страницы сайта. Задается он так:

< html>
< head>
< meta name="keywords" content="Перечень ключевых слов">
< meta name="description" content="Содержимое мета-тега «description»">

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

Помимо заголовков, содержимое страницы можно отформатировать и другими способами.

Расставить акценты, сделать текст читабельным (это оценят и пользователи, и поисковики), помогут такие теги, как:

<p>...</p> (обозначает абзац)

<ul>...</ul> (маркированный список)

<ol>...</ol> (нумерованный список)

<li>…</li> (элемент списка)

<strong>…</strong> (выделение жирным)

<em>…</em> (выделение курсивом)

<blockquote>…</blockquote> (выделение цитаты в тексте)

<mark> - выделение цвета маркером.

Тег ссылок

Ссылки на странице е задаются таким синтаксисом:

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

При этом атрибут href указывает на адрес документа в сети, атрибут target отвечает за то, как будет открываться документ по ссылке:

top-в текущем окне);

blank-в новом окне);

self-в текущем фрейме);

4parent-в родительском фрейме).

Для SEO специалиста важно выполнить внутреннюю перелинковку, поставив где уместно ссылки с одних страниц сайта на другие - это оценят поисковые системы.

Если на сайте много информационного контента, то перелинковка поможет пользователям лучше ориентироваться в разных темах и статьях, которые публиковались на ресурсе.

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

Чтобы вставить в текст картинку, можно использовать тег тоже.

Для SEO специалиста важно оптимизировать атрибуты alt и title, которые находятся в теге изображения.

Синтаксис тега изображения:

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

При этом атрибут:

  • srcуказывает путь к файлу (к картинке)
  • altвиден вместо картинки, если их показ запрещён в браузере пользователя
  • titleвыводится в виде подсказки, если навести курсор на изображение

Итого

Для начала работы над SEO сайта рассмотренных нами мета-тегов вполне хватит. Разумеется, на самом деле их намного больше.

При этом в большинстве современных панелей управления сайтами (админках)возможности заполнения мета-тегов, форматирования текста, добавления ссылок и картинок предусмотрены без вмешательств в код страницы.

Но понимать принципы прописывания кода простой HTML страницы её разметки важно для SEO-специалиста. Грамотное оформление текстов на сайте и прописывание мета-тегов сделает сайт видимым для роботов и привлекательным для пользователей.

Самыми важными для SEO является работа по оптимизации тегов из блока <head>: <title> и <description>.