Метатеги | 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.

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

HTML по теме

  • Тег <meta>

Статьи по теме

  • Метатеги

Мета-тег description — что это такое: значение мета описания для SEO, длина дескрипшн в Яндекс и Google

SEO WikiGoogleАлгоритмы ранжированияАнализ эффективностиВеб разработкаВнутренняя оптимизацияВредоносные технологииЗапросыИндексация сайтаИнтернет рекламаКонтекстная рекламаМета-тегиПоисковые системыПоисковые фильтрыПродвижение сайтовРанжированиеСервисыСоциальные сетиСпециалистыСсылочная оптимизацияСтруктура сайтаТекстовая оптимизацияТехническая оптимизацияЧерное SEOЯндекс

Оглавление

  1. Значение тега description для SEO
  2. org/ListItem»> Как прописать description

Description

Мета-описание description

Мета тег description (мета-описание, «дескрипшн») предназначен для создания краткого описания html-страницы. Его содержимое может использоваться поисковыми системами для формирования сниппета. Данный тег не влияет на внешний вид страницы, так как является служебной информацией. Он располагается в блоке <head> </head> html кода страницы.

da52af20-8711-4ca8-9bcb-1c66260edad4.png

Пример мета-описания в коде страницы:

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

Значение тега description для SEO

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

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

Как прописать description

Существует ряд рекомендаций по заполнению мета тега description:

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

Rookee — простой способ поднять сайт в ТОП поисковых систем

Начать продвижение

Базовая техническая оптимизация

12 090 ₽

Написание метатегов

от 2790 ₽

Наполнение сайта

Популярно

от 13 390 ₽/месяц

Настройка ссылочной стратегии

Популярно

1290 ₽

Настройка целей в Яндекс. Метрике

3590 ₽

Общий технический аудит

Популярно

3490 ₽

Оптимизация коммерческих факторов

4090 ₽

Оптимизация сайта под мобильные устройства

7990 ₽

Подбор запросов для продвижения

Популярно

от 3290 ₽

Присвоение региона продвижения

1290 ₽

Техническое задание на тексты

Популярно

от 1290 ₽

Увеличение кликабельности сайта в выдаче

3690 ₽

Установка Яндекс. Метрики

1490 ₽

SEO Wiki

Подписывайтесь на «Новости SEO рынка»

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

Перейти в блог

Метатег HTML

❮ Назад Полный справочник HTML Далее ❯


Пример

Описать метаданные в документе HTML:


<метакодировка="UTF-8">



 

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Тег определяет метаданные о HTML-документ. Метаданные — это данные (информация) о данных.

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

Метаданные не будут отображаться на странице, но могут быть обработаны машиной.

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

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

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

Элемент
<мета> Да Да Да Да Да

Атрибуты

Атрибут Значение Описание
кодировка набор символов Указывает кодировку символов для HTML-документа
содержание текст Указывает значение, связанное с атрибутом http-equiv или name
http-экв. политика безопасности контента
тип контента
стиль по умолчанию
обновление		 Предоставляет заголовок HTTP для информации/значения атрибута содержимого
имя имя-приложения
автор
описание
генератор
ключевые слова
область просмотра		 Задает имя для метаданных

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Другие примеры

Определите ключевые слова для поисковых систем:

Определите описание вашей веб-страницы:

0

meta name=»description» content=»Бесплатные веб-учебники для HTML и CSS»>

Определить автора страницы:

Обновлять документ каждые 30 секунд:

Настройка области просмотра, чтобы ваш сайт хорошо отображался на всех устройствах:

0″>

Настройка области просмотра

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

Вы должны включать следующий элемент на все свои веб-страницы:

Это дает браузеру инструкции о том, как для управления размерами страницы и масштабированием.

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая зависит от устройства).

Начальная шкала =1,0 9Часть 0026 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с метатегом области просмотра :

Совет: Если вы просматриваете эту страницу с помощью телефона или планшета, Вы можете нажать на две ссылки ниже, чтобы увидеть разницу.


Без метатег области просмотра

метатег окна просмотра

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

Связанные страницы

Учебник по HTML: HTML Head

Ссылка на HTML DOM: Метаобъект

Настройки CSS по умолчанию

Нет.

❮ Предыдущий Полный справочник HTML Далее ❯


Мета-имя HTML Атрибут

❮ HTML-тег

Пример

Используйте атрибут имени для определения описания, ключевых слов и автора HTML-документа. Также определите область просмотра, чтобы управлять размерами страницы и масштабированием для разные устройства:

<голова>


 
 

Попробуйте сами »

Атрибут name указывает имя для метаданных.

Атрибут name указывает имя для информации/значения содержание атрибут.

Примечание: Если установлен атрибут http-equiv , Атрибут name не должен быть установлен.

HTML5 представил метод, позволяющий веб-дизайнерам контролировать область просмотра (видимая пользователем область веб-страницы), через Тег (см. пример «Настройка области просмотра» ниже).

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

Атрибут
имя Да Да Да Да Да

Синтаксис

Значения атрибутов

Значение Описание
имя-приложения Указывает имя веб-приложения, которое представляет страница
автор Указывает имя автора документа. Пример:

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

генератор Указывает один из программных пакетов, используемых для создания документа (не используется на страницах, созданных вручную). Пример:

ключевые слова Указывает разделенный запятыми список ключевых слов, относящихся к странице (информирует поисковые системы, о чем страница).

Совет: Всегда указывайте ключевые слова (необходимые поисковым системам для каталогизации страницы). Пример:

окно просмотра Управляет областью просмотра (видимой пользователем областью веб-страницы).

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

Вы должны включать следующий элемент области просмотра на все свои веб-страницы:

Элемент области просмотра дает браузеру инструкции о том, как для управления размерами страницы и масштабированием.

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая зависит от устройства).

Часть initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с метатегом области просмотра:

Совет: Если вы просматриваете эту страницу с телефона или планшета, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.


Без метатег области просмотра

метатег окна просмотра

Вы можете узнать больше об области просмотра в нашем адаптивном веб-дизайне — Учебное пособие по области просмотра.

❮ HTML-тег


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top6s Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения.