Html meta description – — HTML: (description), (keywords), (title)

Метатеги | htmlbook.ru

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

Метатеги для поисковых механизмов

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

Два метатега предназначены специально для поисковых серверов: description (описание) и keywords (ключевые слова). Некоторые вебмастера добавляли в раздел keywords ключевые слова, которые не имеют никакого отношения к теме сайта, но зато пользовались определенным успехом среди посетителей поисковиков. Однако, через некоторое время, поисковые системы научились бороться с таким явлением и проверяют содержимое веб-страницы на соответствие заявленным ключевым словам.

Некоторые принципы, относящиеся к метатегам:

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

description

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

Пример 1. Использование Description

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>description</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <meta name="description" content="Сайт об HTML и создании сайтов"> 
 </head> 
 <body> 
  <p>...</p>
 </body>
</html>

keywords

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

Пример 2. Использование Keywords

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>keywords</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="Keywords" content="HTML, META, метатег, тег, поисковая система"> 
 </head>
 <body> 
  <p>...</p>
 </body>
</html>

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

Автозагрузка страниц

Чтобы автоматически загружать новый документ через определенный промежуток времени используется инструкция http-equiv=»refresh» (пример 3).

Пример 3. Автозагрузка страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Автозагрузка</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="refresh" content="5; URL=http://www.htmlbook.ru"> 
 </head>
 <body> 
  <p>...</p>
 </body>
</html>

Браузер поймет эту запись, как ожидать 5 секунд, а затем загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт htmlbook.ru.

Этот метатег позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content.

Кодировка

Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы, необходимо установить параметр <meta http-equiv=»Content-Type» content=»text/html; charset=имя кодировки»>. Для операционной системы Windows и кириллицы charset обычно принимает значение utf-8 или windows-1251 (пример 4).

Пример 4. Выбор текущей кодировки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Кодировка</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 </head>
 <body> 
  <p>Кириллица</p>
 </body>
</html>

Если указание кодировки отсутствует, браузер пытается сам определить, какой тип символов используется в документе и выбирает необходимую кодировку автоматически. Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях предлагает вьетнамскую кодировку вместо кириллицы. По этой причине лучше всегда указывать приведенную строчку. Тем не менее, возникают обстоятельства, когда указание кодировки может принести определенный вред. Например, веб-сервер автоматически использует перекодирование данных в KOI-8, а браузер, встретив параметр charset=windows-1251, переводит текст в кодировку Windows. Получается двойное изменение символов, прочитать такой текст не просто. К счастью, подобная проблема уже отходит в прошлое, во всяком случае, ее легко можно выявить и нейтрализовать на уровне сервера.

htmlbook.ru

Тег HTML — мета теги страницы description, keywords, viewport

Мета тег <meta> HTML определяет информацию о веб странице. Теги группы meta называют мета тегами, а содержимое мета тега — метаданными. Метаданные указывают различную техническую информацию о документе, в основном для браузеров и поисковых систем и не видны пользователю на сайте.

Часто используются meta-теги: author, description, keywords, viewport, charset.

Мета теги находятся в области <head> HTML документа (подробнее про <head>). Вставить или, как говорят, прописать мета теги можно в любом порядке и количестве.

Использовать meta теги не обязательно, но мы рекомендуем заполнять хотя бы мета теги description, viewport, charset. Это будет плюсом для внутренней оптимизации сайта.

Синтаксис

<meta атрибут="значение" атрибут="значение">

Примеры использования <meta> в HTML коде

<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Мета теги в HTML документе. Описание популярных мета тегов, примеры использования на веб странице">
<meta name="author" content="Ivan Ivanov">
</head>
</html>

Основные мета теги

Ниже приведены несколько основных тегов <meta> с комментариями по применению и примерами использования.

Meta-тег description

Краткое описание документа (страницы сайта). Поисковые системы могут использовать содержимое мета тега description для вывода в сниппете поисковой выдачи.

Текст из meta description в сниппете выдачи

Пример использования мета тега description
<meta name="description" content="Краткое описание страницы">

Meta-тег keywords

Ключевые слова страницы. Ранее использовался для указания поисковым системам основные смысловые фразы веб-страницы. На данный момент существуют разные мнения как правильно и стоит ли заполнять мета тег keywords.

Пример заполнения мета тега keywords
<meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3">

Meta-тег viewport

Задает некоторые параметры окна просмотра в браузере. Атрибут

width указывает ширину окна просмотра (вьюпорта), initial-scale — коэффициент масштабирования при первом открытии страницы.

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta-тег charset

Кодировка веб страницы. Наиболее частое значение: «UTF-8».

Пример использования мета тега кодировки charset
<meta charset="UTF-8">

Meta тег refresh

Мета тег с атрибутом http-equiv=»refresh» указывает время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом указанным в content атрибуте. Значение указывается в секундах.

Пример использования meta http refresh
<meta http-equiv="refresh" content="45"> <!-- Обновление страницы каждые 45 секунд -->

Поддержка браузерами

Атрибуты

Атрибут Значения Описание
charset

character_set

Указывает кодировку HTML документа.

content

тестовое значение

Основное содержимое мета тега. Зависит от других атрибутов. Используется вместе с http-equiv или name.

http-equiv

content-type
default-style
refresh

Устанавливает HTTP заголовок для атрибута content.

Сontent-type — Кодировка. Устаревшее значение, в HTML5 используйте charset (см. пример выше).
Default-style — Предпочтительная таблица стилей.
Refresh — Интервал автообновления страницы.

name

application-name
author
description
generator
keywords
viewport

Имя мета тега. Как и http-equiv определяет суть мета тега.

Application-name — имя веб приложения, которое представляет страница.
Author — имя автора веб страницы.
Description — краткое описание страницы.
Generator — Указывает на программное обеспечение, использованное для создания страницы (для не рукописных страниц).
Keywords — ключевые слова страницы.
Viewport — некоторые параметры области просмотра страницы.

guruweba.com

его значение и правила написания

Пример html-кода

 

<html>
<head>
<meta name="description" content ="краткое описание страницы">
</head>
</html>

 

Значение мета-тега description

Просматривая страницу результатов поиска (SERP), посетители читают описания предлагаемых страниц и уже на этом уровне выбирают, какую из предложенных страниц посетить первой. Высокий CTR (click through rate – процент кликабельности) у страницы является значимым фактором ранжирования. Поэтому мета-тег description может влиять на позицию сайта в результатах поисковой выдачи тех поисковиков, которые его учитывают (в частности, Google).

 

Правила написания description

 

  • Дескрипшн не должен превышать 300-320 символов. Именно такой объем текста выводится в выдаче (под ссылкой на страницу). Если длина мета-тега больше указанного значения, описание будет отображаться не полностью.
  • Правильный description должен содержать ключевые слова, под которые вы намерены продвигать страницу. Самые частотные запросы должны быть расположены в начале описания. Не используйте в мета-теге более 3-4 ключевых фраз. Одно и то же слово не следует повторять более 5-7 раз.
  • Тег должен описывать содержимое определенной страницы. Его текст должен быть понятным и кратким, не рекомендуется использовать общие фразы.
  • Описание в мета-теге description должно быть уникальным для всех страниц сайта, не рекомендуется копировать часть текста страницы, для заполнения тега.
  • Мета-тег description должен отличаться от мета-тега title.
  • Дескрипшн должен быть привлекательным для пользователей, давать представление о том, какую информацию они найдут на описанной странице, а также указывать на преимущества продуктов или услуг.

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

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

 

Какой должна быть длина мета тега дескрипшн после изменений алгоритма Google?

 

В декабре 2017 года, Google увеличил длину описания страницы в поисковой выдаче до 320 символов. Но спустя время, снова сократил его. Согласно твиту Дэнни Салливана (аналитик и журналист, который работает на Google), фиксированной длины у дескрипшена сейчас нет. То есть описание страницы всегда генерируется на основе массы переменных (запроса пользователя, его локации, устройства и т.п.)

Our search snippets are now shorter on average than in recent weeks, though slightly longer than before a change we made last December. There is no fixed length for snippets. Length varies based on what our systems deem to be most useful.

— Danny Sullivan (@dannysullivan) May 14, 2018

 

sitechecker.pro

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *