Мета теги страниц сайта: title, description, keywords, robots и другие

Содержание:

Viewport мета тег
Adding Meta Tags to Your Documents
Управление режимами Internet Explorer
Ответы на наиболее частые вопросы
Alt атрибуты изображения
- Оптимизация alt тега img для изображений
Meta Description Attribute
Мета теги для SEO (поисковой) оптимизации
Как правильно написать description?
Функции мета тегов
Пример использования элемента meta
Задачи
Meta Keywords Attribute
HTML Ссылки
HTML Теги
Листинг
Микроразметка Schema
- Как лучше всего использовать разметку schema org
Типичные ошибки при написании мета-тегов
Мета тег description
- Мета совет
§ 2. Мета-тег «keywords» (ключевые слова)

Viewport мета тег

Метатег Viewport позволяет вам настроить, как страница будет масштабироваться и отображаться на любом устройстве. Обычно этот тег и его значение выглядят следующим образом:

Где «width=device-width» заставляет страницу соответствовать ширине экрана в пикселях, независимо от устройства, а «initial-scale=1» устанавливает соотношение 1:1 между пикселями CSS и пикселями устройства, с учётом ориентации экрана.

Этот тег легко добавить, и одного скриншота из Google достаточно, чтобы показать разницу:

Мета тег Viewport не имеет ничего общего с ранжированием, но напрямую влияет на пользовательский опыт

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

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

Adding Meta Tags to Your Documents

You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes −

Sr.No	Attribute & Description
1	Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
2	content Specifies the property’s value.
3	scheme Specifies a scheme to interpret the property’s value (as declared in the content attribute).
4	http-equiv Used for http response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

Управление режимами Internet Explorer

Заключительный мета-тег, который должен присутствовать на Ваших страницах, позволяет в зависимости от указанного значения content сообщить браузеру Internet Explorer как отображать документ (в каком режиме) в зависимости от версии, которая используется в данный момент:

<meta http-equiv = "X-UA-Compatible" content = "IE=edge">

Атрибут content задает режим для страницы, например, чтобы имитировать работу Internet Explorer 7, укажите IE=EmulateIE7. Укажите IE=5, IE=7 или IE=8, чтобы выбрать один из этих режимов совместимости. Также можно задать IE=edge, чтобы использовать в Internet Explorer 8 наивысший доступный режим.
Значение IE=edge сообщает браузеру пользователя, что необходимо использовать последний доступный режим отображения документа, используйте это значение на своих страницах.

Грамотное размещение метаданных на каждой странице Вашего сайта, сделает его привлекательным для поисковых машин и упростит процесс индексации.

Ответы на наиболее частые вопросы

Если вы ставите подробное ТЗ копирайтеру, то лучше мета-теги создавать вместе с планом статьи, так как они неразрывны.

Если же вы готовите статью самостоятельно, в таком случае неважно. Должен ли заголовок H1 и title быть разным?

Должен ли заголовок H1 и title быть разным?

Нет никаких подтверждений этой теории. Максимально полный ответ дал Сергей Кокшаров (Devaka) в своем исследовании.

Использование разных ключевых запросов помогает расширить семантику статьи. Например:

Абсолютно синонимические запросы со спросом:

Комбинирование их в заголовке и тайтле, поможет собирать больше трафика и не плодить дубли.

Стоит ли использовать название бренда в тайтле?

Да, если бренд известный и поможет повысить CTR:

Нет, если о вашем бренде никто не знает:

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

Alt атрибуты изображения

Атрибут alt изображения добавляется к тегу изображения img для описания его содержимого. Альтернативные атрибуты важны с точки зрения внутренней оптимизации сайта по двум причинам:

Альтернативный текст показывается посетителям, если какое-либо конкретное изображение не может быть загружено (или если отображение картинок отключено).
Атрибуты Alt обеспечивают контекст для роботов, потому что поисковые системы не могут «видеть» изображения.

На e-commerce сайтах изображения часто имеют решающее влияние на то, как посетитель взаимодействует со страницей

Поисковики так же прямо заявляют о важности этого тега

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

Даже Мюллер писал у себя в Твиттере, что продуманное альтернативное описание изображения необычайно важно, если вы хотите занять высокое место в Google Картинках. Однако не забывайте о релевантности

Не только alt-текст, заголовки и подписи должны соответствовать изображению, но и сама картинка должна размещаться в тематическом контенте

Однако не забывайте о релевантности. Не только alt-текст, заголовки и подписи должны соответствовать изображению, но и сама картинка должна размещаться в тематическом контенте.

Оптимизация alt тега img для изображений

Сделайте всё возможное, чтобы оптимизировать свои самые важные изображения (картинки товаров, инфографику, инструкции), которые могут получить хорошие позиции в поиске Google Images.
Добавьте alt-текст на страницах, где не так много другого контента (кроме картинок).
Делайте тег alt для изображений понятным и достаточно информативным, разумно используйте ключевые слова и убедитесь, что они естественным образом вписываются в содержание страниц.

Meta Description Attribute

The meta description is a useful meta tag as, very simply, it explains to search engines and (sometimes) searchers themselves what your page is about. Let’s say you were googling the phrase “meta keywords” for example. You might encounter the following results:

It’s important to note that the meta description tag won’t always show up in the results for a Google search (Google frequently picks a snippet of text from the page itself) but it’s useful in other ways. Google has also stated that keywords in meta descriptions won’t affect your rankings. However, a compelling meta description tag could entice searchers to click through from the SERP to your site, especially if the description includes the keywords they were searching for. And a strong click-through rate from the SERP could indirectly improve your rankings.

Google’s reasons are somewhat mysterious, but their actions speak loudly: meta keywords don’t much matter anymore, but meta descriptions most certainly do.

Мета теги для SEO (поисковой) оптимизации

Title

Заголовок страницы. В индексе это — крупная синяя ссылка на сайт, в браузерных вкладках — название.

Как заполнять

Атрибут должен содержать основные ключевые слова и конкурентные преимущества

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

У Google максимум — 70 (12 слов), у Яндекс — 80 (15 слов).

Рассмотрим пример. Дано: ключевые слова «купить кресло», «купить кресло недорого», «купить удобное кресло»

Неудачный title: Купить кресло. Купить удобное кресло, купить кресло недорого

Удачный title: Как купить удобное кресло недорого с доставкой и получить скидку 15%?

Description

Краткий «анонс» страницы в результатах поиска. Несколько коротких предложений, в которых используются ключевые слова (не все — наиболее значимые) конкретной страницы. Рекомендуемая длина meta тега — 160-200 символов.

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

С помощью meta name description поисковым роботом описание страницы — сниппет. Он отображается в результатах поиска под title.

Если атрибут не заполнен либо сформирован не по правилам (значительно превышен лимит символов, переспам), то поисковый робот составляет описание автоматически, «собирая» его по кусочкам фраз на странице. Результат получается не сильно привлекательный и «продающий».

Как заполнять
Дано: магазин продажи книг; ключевые слова «интересная книга», «купить книгу»

Неудачный Description: Книги издавна являются одними из самых близких «друзей» человека. Интересная книга помогает скоротать время, дает полезные знания, раскрывает занимательные факты, пробуждает эмоции. Потому стоит задуматься о том, чтобы купить книгу в нашем магазине.

Удачный Description: Нужна интересная книга? В нашем магазине — широкий выбор тематик: от узкоспециальной литературы до мировых бестселлеров. У нас Вы можете купить книгу с доставкой в течение 1-5 дней в любой регион РФ. Первым покупателям — скидка 10%.

Keywords

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

Сейчас поисковики не придают данному атрибуту такой вес, как раньше. Но грамотное использование его не будет лишним.

Как заполнять

Как правильно написать description?

Напомним, description — это описание страницы. Здесь правила похожие, но в целом посвободнее:

длина мета-тега не должна превышать 150 символов.
не забываем про ключи!
пишем не для роботов, а для людей, которые будут читать ваше описание.
если тайтл — это вся соль, вся суть сайта, то дескрипшн — описание более красивыми словами. Более рекламными, если хотите. Сравните, например:

<title>Установка пластиковых окон в Воронеже на любой вкус и цвет</title> и<meta name=»description» content=»Вы хотите купить пластиковые окна? На нашем сайте вы подберете себе оптимальный вариант и получите консультацию специалиста”. Вот хороший пример description:

Как правильно написать description

А вот неудачный пример. Вроде и ключевые слова есть, но полезной информации для потенциального покупателя — ноль.

Неудачный пример description

Тут вообще без комментариев. Скрыл — ну и зря!

Неудачный пример description

Тут и в тайтле, и дескрипшне превышен лимит символов — тексты получаются обрезанными.

Калькулятор пластиковых окон в Воронеже

Как видите, ничего сложного в том, что такое мета-теги, нет. Главное — соблюдать все правила и давать действительно полезную информацию о вашем сайте — как поисковикам, так и потенциальным клиентам. Удачи в оптимизации!

Функции мета тегов

Основной особенностью тегов этого типа является то, что они не имеют отображаемого контента, располагаются в разделе HEAD и могут содержать любую дополнительную информацию для автоматической обработки веб клиентами — браузерами, роботами, специализированным ПО.

По назначению предоставляемой информации можно условно выделить наиболее широко используемые группы:

Сведения о документе: авторство, источники и т. п.;
Информация для поисковых роботов: ключевые слова, краткое описание, и т. д.;
Инструкции для браузеров: кодовые страницы, куки, интервалы автоматического обновления;
Инструкции для специализированного ПО и различных сервисов, например — указание для программ парсеров адреса с копией данных страницы подготовленных для машинной обработки.

Пример использования элемента meta

Один из вариантов применения тега — указание HTTP-заголовков, которые должны быть отправлены клиенту до отправки самой веб-страницы. Например:

<meta http-equiv="Content-Type" content="text/html" />

Такая запись указывает, что страница должна быть отправлена вместе с HTTP-заголовком Content-Type: text/html. Такой заголовок указывает браузеру или другой программе тип отправляемого документа. Тем не менее, несмотря на то, что первоначально предполагалось, что веб-серверы будут считывать метатеги внутри отправляемых клиенту веб-страниц, и формировать HTTP-заголовки в зависимости от их содержимого, на практике это не реализовано в наиболее используемых веб-серверах, соответственно, веб-серверы не меняют отправляемые клиенту HTTP-заголовки, а клиент (веб-браузер) обрабатывает эти метатеги самостоятельно (в частности, данные из мета тегов могут заменять данные, получаемые из HTTP-заголовков).

Кроме того, мета теги могут использоваться для того, чтобы сообщить браузеру информацию о документе, когда HTTP-заголовки недоступны (например, если страница открывается локально с диска, а не загружается с веб-сервера).

В общей форме метаданные записываются в следующем виде: в теге указывается атрибут (имя) и связанный с ним атрибут (содержимое), в котором описывается какой-либо аспект веб-страницы, например, ключевые слова:

<meta name="keywords" content="википедия, энциклопедия" />

Задачи

У меня есть 3 задачи по этой теме. В первых двух надо выбрать правильный вариант. Они касаются тайтлов. В последнем нужно дать развернутый ответ.

Задача 1

Задача: Сравнение релевантности title. Запрос «Купить красный диван», гео Москва.

Ответ: b) Купить красный диван в Москве от 18 965 рублей. В этом тайтле есть все слова из запроса, имеется гео и уникализация.

В варианте a) не указано гео. Этот тайтл будет ранжироваться ниже. Такая же ситуация с c). В d) главный ключ не в точном вхождении.

Задача 2

Здесь в главной роли уже выступает морфология и правильная постановка слов.

Задача: Сравнение релевантности title. Запрос «купить квартиру в жулебино новостройка», гео Москва.

Ответ: е) Купить квартиру в новостройке в районе Жулебино Москвы. Здесь есть все слова из запроса и топоним (тут он является именно городом, а не районом).

Вариант d) также неплох. В нем есть дополнительные слова. Но нас интересует именно уникальная оптимизация под конкретный ключ.

Задача 3

Тут у нас кейс. Это скрин из Яндекс.Вебмастера.

В начале ноября внедрили метатеги и текстовую оптимизацию на агрегатор (вертикальная линия). Сразу начался рост трафика, но просел CTR.
Вопрос: Почему так произошло?

Ответ: Яндекс часто в сниппет берет данные из контента на странице. Раньше его не было, поэтому он брал дескрипшн.

После внедрили генереж. Но он плохо отрабатывал для пользователей: был не так привлекателен, как дескрипшн. Соответственно, генереж стал чаще появляться в сниппетах. Поэтому упал CTR. Это довольно частая проблема для агрегаторов.

Meta Keywords Attribute

Meta Keywords are an example of a meta tag that doesn’t make much sense to use these days. Years ago, the meta keyword tags may have been beneficial, but not anymore.

Remember back in kindergarten and when your teacher gave you a stern look and said “if you can’t stop using those crayons while I’m talking, I’m going to take them away from you,” and you didn’t listen and, to your shock, they were indeed taken away? That’s sort of what Google did with meta keywords.

Years ago, marketers eager for page views would insert keywords totally unrelated to their pages into their code in an attempt to pirate traffic from the more popular pages, those that actually were about Lindsay Lohan, or whoever was then trending. This was known as «keyword stuffing.» Google eventually got wise to this and decided in the end to devalue the tool. These days Google doesn’t use meta keywords in its ranking algorithm at all, because they’re too easy to abuse.

HTML Ссылки

HTML по АлфавитуHTML по КатегориямHTML Атрибуты ТеговHTML Атрибуты ГлобалHTML Атрибуты СобытийHTML ЦветаHTML ХолстыHTML Аудио / ВидеоHTML Наборы символовHTML DOCTYPEsHTML Кодирование URLHTML Языковые кодыHTML Коды странHTTP Ответы сервераHTTP МетодыPX в EM конвертерГорячие клавиши

HTML Теги

<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

Листинг

Куда можно добавлять текстовую оптимизацию на листинге?

Все уже устали пинать seo-портянки, хотя мы все равно иногда встречаем их в выдаче. Но учитывая тренды SEO 2021, уже будем встречать меньше и меньше.

Разберем на примерах. Всего их будет 5.

Текст после листинга

Здесь текст можно добавить для большего количества вхождений.

На слайде пример агрегатора с хорошо сгенерированным текстом.

Блоки преимуществ

Текстовые шаблоны можно добавлять в блоки преимуществ: «широкий ассортимент», «гарантия на», «помощь», «быстрая доставка» и т. д.

Текст в карточках товаров на листинге

Текстовую оптимизацию можно использовать в карточках товаров. Делают это реже, но можно попробовать.

Этот пример мы затронем и разберем чуть позже.

Микроразметка Schema

Микроразметка Schema – это особый метод организации данных на каждой из ваших веб-страниц, который распознаётся поисковыми системами. Отличное решение, особенно учитывая, что от её внедрения выигрывают все.

Семантическая разметка schema:

Это отличный буст для вашего UX.
Добавляет огромную ценность в разрезе SEO.

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

Разметка структурированных данных – это именно то, что помогает поисковым системам не только читать контент, но и понимать, к чему относятся определенные слова.

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

Использование тегов schema для определённых элементов страницы делает сниппет в поиске обогащённым полезной информацией и привлекательным для пользователей. А возвращаясь к предыдущим пунктам этой статьи, напомню ещё раз, что поведенческие факторы, такие как CTR и показатель отказов, влияют на позиции вашего сайта.

Как лучше всего использовать разметку schema org

Изучите доступные схемы на schema.org.
Создайте карту своих самых важных страниц и определитесь с концепциями, относящимися к каждой из них.
Реализуйте разметку аккуратно (при необходимости используйте Мастер разметки структурированных данных от Google).
Тщательно проверяйте микроразметку. Убедитесь, что она не вводит пользователей в заблуждение.

Типичные ошибки при написании мета-тегов

Title и Description

Слишком длинный или короткий тег. Google рекомендует избегать длинных и многословных заголовков, оставляя их краткими.

Тег не существует. На каждой странице должен быть тег заголовка и мета-описания.

Несколько тегов на одной странице. Поисковые системы могут отображать нежелательный тег, если на странице их несколько.

Повторяющиеся теги на нескольких страницах

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

Robots

Неиндексированные страницы заблокированы robots.txt. Это не позволяет поисковику видеть тег robots noindex, что делает возможной индексацию URL.

Сквозная аналитика

от 990 рублей в месяц

Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
Анализируйте воронку продаж от показов до ROI
Настройте интеграции c CRM и другими сервисами: более 50 готовых решений
Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды

Узнать подробнее

Мета тег description

Мета-описание (meta description) – также находится в <head> веб-страницы и обычно (хотя далеко не всегда) отображается в сниппете поисковой выдачи вместе с заголовком и URL-адресом страницы.

Например, это мета-описание данной статьи:

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

Description занимает большую часть сниппета поисковой выдачи и приглашает пользователей щёлкнуть именно по вашей ссылке, обещая чёткое и комплексное решение их запроса.
Описание влияет на количество получаемых вами кликов, а также может улучшить CTR и снизить показатель отказов, если содержание страницы действительно соответствует обещаниям. Вот почему описание должно быть в равной степени реалистичным, привлекательным и чётко отражать содержание.
Если ваше описание содержит ключевые слова, использованные человеком в своём поисковом запросе, они будут выделены в поисковой выдаче жирным шрифтом

Это помогает вам привлечь внимание и сообщить пользователю, что именно он найдёт на вашей странице.

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

Лучший способ выяснить, что необходимо поместить в мета тег Description для эффективного ранжирования – провести анализ конкурентов. Вбейте главный поисковый запрос вашей будущей или текущей страницы в Яндекс и Google. Посмотрите, кто и как заполнил описание, и возьмите себе всё самое лучшее из топа.

Мета совет

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

Например:

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

§ 2. Мета-тег «keywords» (ключевые слова)

С начала вкратце о том, а что, собственно, такое эти самые «ключевые слова».

Те слова, которые наиболее полно характеризуют содержимое html-страницы и будут для нее ключевыми. Это могут быть как отдельные слова, так и словосочетания, но они обязательно должны встречаться в тексте на странице. По ним поисковики определяют релевантность страницы тому или иному запросу.

Например, для этой странице ключевыми словами будут «мета-теги», «мета-тег title», «мета-тег keywords» и т.д.

Более подробно о ключевых словах, в частности, и об оптимизации сайта, вообще, мы поговорим в соответствующих разделах.

Чтобы облегчить работу поисковым системам, используется мета-тег «keywords». В нём вебмастер прописывает ключевые слова для страницы. HTML-код мета-тега «keywords» выглядит следующим образом:

Перечень ключевых слов»> Содержимое мета-тега «title» Основное содержимое страницы

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