Тег <meta> HTML - мета теги, информация о странице

Рейтинг: 5 из 5, голосов 18
+++++

Мета тег <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 секунд -->

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<meta> Да Да Да Да Да

Атрибуты

Атрибут Значения Описание
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 - некоторые параметры области просмотра страницы.

Оцените, насколько полезна эта статья
+++++
Оставьте комментарий

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