Мы уже говорили о том, как работают поисковые системы: пользователь вводит запрос в строку поиска, а затем 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>.
