Html мета описание – Мета теги для сайта — что такое мета теги, какие бывают, для чего прописывать ключевые слова в мета-теги

Содержание

| Справочник HTML



Элемент <meta> определяет метаданные (технические данные) HTML-документа. К подобным данным относят краткое описание страницы, ключевые слова, данные об авторе документа, о последнем изменении документа и т.д. Метаданные не отображаются на странице, но интерпретируются браузерами и поисковыми системами.

Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>.

Метаданные документа выражаются в виде пар «имя-значение» («свойство-значение»), где атрибуты name или http-equiv указывают имя (свойство), а атрибут content этого же элемента указывает значение.

Если задается атрибут name или http-equiv, то должен быть задан атрибут content. В обратном случае атрибут content не используется.

Синтаксис

<head>
  <meta>
</head>

Закрывающий тег

Не требуется.

Атрибуты

charsetHTML5
Указывает кодировку символов для текущего HTML-документа. Авторам рекомендуется использовать значение UTF-8.
Тег <meta> с атрибутом charset лучше всего располагать в качестве первого дочернего элемента внутри элемента <head>. Чтобы текст на странице отображался корректно, кодировка, указанная в значении атрибута должна совпадать с кодировкой самого документа.

content
Устанавливает значение атрибута, заданного с помощью name или http-equiv.

http-equiv
Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:
default-style — указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей.
refresh — указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы".
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:
<meta http-equiv="refresh" content="30">
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:
<meta http-equiv="refresh" content="0; url=http://wm-school.ru/">

name
Обеспечивает дополнительное описание тега. Если этот атрибут опущен, он считается эквивалентным атрибуту http-equiv. Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv, charset или itemprop.
application-name — указывает название веб-приложения, используемого на странице.
author — используется для указания имени автора веб-страницы:
<meta name="author" content="Max White">
description — является описанием страницы, оно чаще всего используется поисковыми системами для определения, чему та посвящена, например:
<meta name="description" content="Описание содержимого страницы">
generator — указывает один из пакетов программного обеспечения, используемого для создания документа, например:
<meta name="generator" content="Joomla 3.5">
keywords — содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:
<meta name="keywords" content="Ключевые слова через запятую">
pragma — предотвращает кэширование страницы браузером, например:
<meta http-equiv="pragma" content="no-cache">
expires — может быть использован для указания того, когда у страницы должен истечь срок актуальности (и она должна быть удалена из кэша), например:
<meta http-equiv="expires" content=" Fri, 04 Apr 2018 23:59:59 GMT">
robots — показывает, должны ли поисковые системы включать данную страницу в результаты поиска. Например, значение nofollow устанавливает, что поисковые системы могут включать данную страницу в результаты поиска, но не должны показывать страницы, на которые ведут ссылки с нее:
<meta name="robots" content="nofollow">
viewport — позволяет разработчикам управлять размером исходной области просмотра на различных устройствах:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width — указывает браузеру задать ширину области просмотра равную ширине экрана устройства какой бы она ни была;
initial-scale=1.0 — устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

scheme
Указывает полезную информацию о схеме или названии самой схемы, которая должна быть использована для уточнения значения свойства атрибута content.

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

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

Атрибут scheme не поддерживается в HTML5.

В HTML5 был добавлен атрибут charset, который облегчил определение кодировки символов страницы:

  • HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  • HTML5: <meta charset="UTF-8">

Пример использования:

Определяем метаинформацию о HTML документе:

Пример HTML:

Попробуй сам
<!DOCTYPE html> <html> <head> <title>Заголовок страницы</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="HTML, Meta Tags, метаданные"> <meta name="description" content="Сайт об HTML и CSS"> </head> <body>Основное содержимое страницы</body> </html>

Спецификации

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

Элемент
<meta> 2+ 1+ 3.5+ 1+ 1+ 1+
Элемент
<meta> 1+ 1+ 6+ 1+

Дополнительная информация

Группа значений атрибута NAME

Группа значений атрибута HTTP-EQUIV

HTML уроки: HTML Мета-теги

HTML Раздел Head

HTML Элементы



wm-school.ru

Учебник HTML 5. Статья "Метаданные в HTML"

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

Мета элементы, как правило, используются, чтобы указать описание страницы, ключевые слова, автора документа и другие метаданные. Разрешается и, как правило, необходимо использовать несколько метатегов. Тег <meta> всегда размещается внутри тега <head>.

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

Тег <meta> позволяет сообщить браузеру посетителя, какой набор символов и какую кодировку необходимо установить на веб-странице. Атрибут charset (HTML тега <meta>) задает кодировку символов для HTML документа.

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" >  <!-- задаем кодировку документа UTF-8 -->
		<title>Пример использования тега <meta></title>
	</head>
	<body>
		<h3>Это заголовок.</h3>
		<p>Это параграф.</p>
	</body>
</html>

В данном примере мы задали кодировку документа UTF-8 с использованием элемента <meta> и атрибута charset. Кодировка UTF-8 одна из общепринятых и стандартизированных кодировок текста, которая позволяет хранить символы Юникода.

Стандарт HTML 5 не запрашивает конкретную кодировку, но дает рекомендацию использовать кодировку UTF-8. Не рекомендуется использовать кодировки ASCII, CESU-8, UTF-7, BOCU-1, SCSU и UTF-32 по различным причинам.


Считается хорошей практикой, и настоятельно рекомендуется определять набор символов (кодировку), используя атрибут charset. Атрибут charset является лишь частью алгоритма определения кодировки страницы браузером. Рекомендуется указывать кодировку символов первым <meta> элементом (если используется несколько). Обратите внимание, что для одного документа указывается только одна кодировка.


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

Часто используемые мета-теги

Метаданные разделены на две основные группы:

  • первая группа - значения атрибута name.
  • вторая группа - значения атрибута http-equiv.

Атрибут name отвечает за текстовую информацию о странице, её авторе, содержит рекомендации для поисковых систем, а атрибут http-equiv формирует гипертекстовый заголовок страницы и определяет его обработку.


Совместно с элементом <meta> используется еще один атрибут - content, его основная задача заключается в том, чтобы задать значения, связанное с атрибутами name и http-equiv, в зависимости от контекста. Если один из этих атрибутов указан, то атрибут content должен обязательно присутствовать, чтобы задать значение. Если атрибут http-equiv используется, то атрибут name не должен устанавливаться в мета-теге.


Рассмотрим часто используемые варианты использования тега <meta>:

<meta name = "description" content = "Бесплатные уроки по созданию сайтов" >

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

<meta name = "keywords" content = "HTML, CSS, JavaScript">

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

Определяет автора контента:

<meta name = "author" content = "Denis Bolshakov">

Давайте рассмотрим пример использования этих мета тегов:

<!DOCTYPE html>
<html>
	<head>
		<meta name = "description" content = "Бесплатные уроки по созданию сайтов" > <!-- мета элемент, который описывает содержимое документа -->
		<meta name = "keywords" content = "HTML, CSS, JavaScript, jQuery"> <!-- мета элемент, который описывает ключевые слова в документе -->
		<meta name = "author" content = "Denis Bolshakov"> <!-- мета элемент, который указывает имя автора документа -->
		<title>Пример использования атрибутов name и content</title>
	</head>
	<body>
		<h3> Это заголовок.</h3>
		<p>Это параграф. </p>
	</body>
</html>

В данном примере мы использовали три элемента <meta>:

  • первый мета элемент описывает содержимое документа (значением атрибута name мы указали, что это описание страницы (description), а текстовое содержимое указали в атрибуте content. Это описание могут использовать поисковые машины для отображения результатов поиска.
  • второй мета элемент описывает ключевые слова в документе (значением атрибута name мы указали, что это ключевые слова (keywords), а текстовое содержимое указали в атрибуте content. Ключевые слова могут использоваться некотрыми поисковыми машинами.
  • третий мета элемент описывает имя автора документа (значением атрибута name мы указали, что это автор документа (author), а имя автора указали в атрибуте content.

Атрибут http-equiv

Атрибут http-equiv фактически эквивалентен гипертекстовому заголовку (имитация http-заголовка), формируют заголовок страницы и определяют его обработку. Как правило, они управляют действиями браузеров и используются для формирования информации, выдаваемой обычными http-заголовками. Название заголовка указывается в атрибуте http-equiv, а значение указывается в атрибуте content. В некоторых случаях могут автоматически быть переведены в настоящие HTTP-заголовки.

Давайте рассмотрим пример его использования:

<!DOCTYPE html>
<html>
	<head>
		<meta  http-equiv  = "refresh" content = "15, URL='http://basicweb.ru'" > <!-- мета элемент, который указывает, что страница будет перезагружена через 15 секунд и перейдет по указанному URL -->
		<meta  http-equiv  = "content-security-policy" content = "default-src https:" > <!-- мета элемент, который разрешает загрузку ресурсов (изображения, шрифты, скрипты и так далее) только с использованием https -->
		<title>Пример использования атрибута http-equiv тега <meta></title>
	</head>
	<body>
		<h3> Это заголовок.</h3>
		<p>Это параграф. </p>
	</body>
</html>

В данном примере мы использовали три элемента <meta> для которых были указаны различные значения атрибута http-equiv:

  • первый мета элемент, указывает, что страница будет перезагружена (значение refresh) через 15 секунд и перейдет по указанному URL (значения, указанные в атрибуте content). Если адрес URL не указан, то страница просто будет перезагружена.
  • второй мета элемент разрешает загрузку ресурсов (изображения, шрифты, скрипты и так далее) только с использованием https. Это стало доступным благодаря использованию значения content-security-policy, которое позволяет с использованием атрибута content определить правила (политику) для обслуживаемых ресурсов.

Индексация страниц

Используется поисковыми системами при индексации страниц:

<meta name = "robots" content = "noindex, follow">

Доступные значения:

Значение атрибутаОпределение
noindex запрещает индексирование документа.
nofollow запрещает проход по ссылкам в документе.
indexразрешает индексирование документа.
followразрешает проход по ссылкам в документе.

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

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

Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге <head> разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

<meta name = "viewport" content = "width=device-width, initial-scale = 1">
  • Атрибут name задает имя документа метаданным, значение "viewport" дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
  • Значение width=device-width атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height.
  • Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

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

Доступные значения:

Значение атрибутаОпределение
widthОпределяет ширину в пикселях области просмотра (значение - положительное целое число или device-width).
heightОпределяет высоту в пикселях области просмотра (значение - положительное целое число или device-height).
initial-scaleОпределяет соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение - положительное целое число от 0.0 до 10.0.
minimum-scaleОпределяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale). Значение - положительное целое число от 0.0 до 10.0.
maximum-scaleОпределяет максимальное значение zoom (оно должно быть больше или равно minimum-scale). Значение - положительное целое число от 0.0 до 10.0.
user-scalableЛогическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб).

Управление режимами 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 сообщает браузеру пользователя, что необходимо использовать последний доступный режим отображения документа, используйте это значение на своих страницах.

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


Вопросы и задачи по теме

Перед тем как перейти к изучению СSS 3 ответьте на следующий вопрос:

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

Показать ответ

1. Настоятельно рекомендуется определять набор символов (кодировку) в документе:

<meta charset = "utf-8" >

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

<meta name = "description" content = "Одно два предложения, содержащихся в тексте" >

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

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

4. Для корректного (однотипного) отображения страниц в браузерах Internet Explorer необходимо использовать следующий мета-тег:

<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
Начать обучение CSS 3

basicweb.ru

Описание мета-тегов в head страницы html

Посмотрев HTML код разных сайтов возникает вопрос – зачем в нем так много мета-тегов и для чего они нужны? В данной статье представлены все самые встречающеюся теги с примерами и пояснениями.

1

Описание страницы

Title

Заголовок страницы, оптимальная длина 50-60 символов.

Description

Краткое описание страницы длинной 160-180 символов, используется в выводе результатов поиска.

<meta name="description" content="...">

Keywords

Содержит ключевые слова встречающихся на странице. Не более 20-ти слов и 3-х повторов.

<meta name="keywords" content="...">
  • Google – не использует.
  • Яндекс – под вопросом.

Кодировка сайта

<meta http-equiv="content-type" content="text/html; charset=utf-8">

В HTML5 тег сократили:

Application-Name

Название веб-приложения. Можно указать несколько названий для разных языковых локалей.

<meta name="application-name" content="Моё приложение">
<meta name="application-name" lang="en" content="My application">
<meta name="application-name" lang="fr" content="Mon application">
  • В Android используется при добавлении сайта на главный экран.
  • В Windows 8, 10 при добавлении сайта в панель приложений и плиткой в меню пуск.

Generator

Сообщает, с помощью какой программы был сгенерирован код страницы.

<meta name="generator" content="...">

Author

Информация об авторе сайта.

<meta name="author" content="...">

Copyright

Информация о владельце сайта.

<meta name="copyright" content="...">

Reply-To

Указывает способ связи с автором страницы.

<meta name="reply-to" content="[email protected]">

Content-Language

Указывает язык страницы. Используется поисковыми машинами при индексировании.

<meta http-equiv="content-language" content="ru">

Help

Предоставляет ссылку на справку или e-mail.

<link rel="help" href="mailto:[email protected]">

2

Управление индексацией

Robots

Задает правила индексации для поисковых роботов.

<meta name="robots" content="index, follow">

Общие значения:

index, follow или all Разрешено индексировать текст и ссылки на странице
noindex Не индексировать текст страницы
nofollow Не переходить по ссылкам на странице
noindex, nofollow или none Запрещено индексировать текст и переходить по ссылкам
noarchive Не показывать ссылку на сохраненную копию в поисковой выдаче

Яндекс

noyaca Не использовать описание из Яндекс.Каталога для сниппета в результатах поиска

Google

nosnippet Запрещает показывать видео или фрагмент текста в результатах поиска
noimageindex Запрещает указывать вашу страницу как источник ссылки для изображения
noodp Не использовать описание из каталога DMOZ

Last-Modified

Альтернативно HTTP-заголовку Last-Modified задает дату последнего изменения для статических страниц.

<meta http-equiv="last-modified" content="[email protected]:04:23 +00:00">

Document-State

Определяет частоту индексации для поисковых роботов.

<meta name="document-state" content="dynamic">
static Индексировать один раз
dynamic Индексировать страницу регулярно

Revisit-After

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

<meta name="revisit-after" content="5 days">

3

Управление кэшированием

Cache-Control

Указывает как браузеру кэшировать страницу.

<meta http-equiv="cache-control" content="no-cache">
Допустимые значения:
public Кэшируется все
private Кэшируется браузером, но не proxy-сервером
no-cache Запрещает кэширование
max-age=0 Сколько секунд хранить в кэше

Pragma

Отключает кэширование.

<meta http-equiv="pragma" content="no-cache">

Expires

Дата окончания кэша браузера. Если указать прошедшую дату или 0, то документ не будет кэшироваться.

<meta http-equiv="expires" content="0">

4

Canonical - предпочитаемый канонический адрес

Если у страницы есть дубликаты с одним содержанием и разными URL, например:

http://exaple.comcategory/jquery
http://exaple.com/category/jquery?sort=desc

В rel="canonical" указывается адрес, который будет считаться основным и будет использоваться в поисковой выдаче.

<link rel="canonical" href="http://exaple.com/jquery">

Prev

Указывает URL предыдущий страницы при пагинации.

<link rel="prev" href="http://example.com/jquery">

Next

Указывает URL следующий страницы при пагинации.

<link rel="next" href="http://example.com/jquery?page=3">

5

Rel Alternate

Атрибут «Hreflang»

Этот атрибут указывает ссылки на разные языковые версии сайта. Код языка указывается в формате ISO 639-1.

<link rel="alternate" hreflang="ru" href="http://ru.example.com/">

Или код языка и региона, регион указывается в формате ISO 3166-1 Alpha 2:

<link rel="alternate" hreflang="ru-RU" href="http://ru-ru.example.com/">

Значение x-default говорит о том что страница главная и не соответствует какому-либо языку или региону.

<link rel="alternate" hreflang="x-default" href="http://example.com/">

Описание: Яндекс Google

Атрибут «Media»

Значение handheld или only screen and (max-width: 640px) указывают адрес мобильной версии.

<link rel="alternate" media="handheld" href="http://m.example.com/">
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/">

Атрибут «Type»

application/rss+xml – ссылка на RSS канал.

<link rel="alternate" type="application/rss+xml" href="http://example.com/rss">
application/atom+xml – фид в формате Atom.
<link rel="alternate" type="application/atom+xml" href="http://example.com/atom">

6

Viewport

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

<meta name='viewport' content="width=1024">
<meta name="viewport" content="width=device-width">	
<meta name="viewport" content="width=device-width, initial-scale=1">
width=1024 Ширина сайта 1024px и мобильный промаштабирует сайт под разрешение экрана
width=device-width Ширина сайта «резиновая» и растягивается на весь экран мобильного
initial-scale=1 Соотношение 1:1 между пикселями в CSS и пикселями устройства

7

Google

Google-Site-Verification

Подтверждение прав пользователя сервисов Google.

<meta name="google-site-verification" content="...">

Google-Play-App

Подобно apple-itunes-app выводит баннер приложения в Андроид.

<meta name="google-play-app" content="app-id=ru.название_приложения">

Google

Значение «Notranslate»

Если страница написана на языке, который не подходит пользователю, Google добавляет ссылку, позволяющую сделать перевод на нужный язык. Значение notranslate отключает эту функцию.

<meta name="google" value="notranslate">
Значение «Nositelinkssearchbox»

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

<meta name="google" content="nositelinkssearchbox">	

Chrome-Webstore-Item

Добавление ссылки в Интернет-магазин Chrome.

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/xxxxxxxxxxxxx">

Publisher

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

<link rel="publisher" href="https://plus.google.com/xxxxxxxxx">

8

Разное

Search

Указывает на XML файл OpenSearch, который позволяет делать поиск по сайту в браузере не заходя на него.

Подробнее о формате на http://opensearch.org.

<link rel="search" type="application/opensearchdescription+xml" title="Поиск на example.com" href="http://example.com/opensearch.xml">

Referrer

Задает HTTP-заголовок «Referer» который отправится на сервер при переходе по ссылкам.

<meta name="referrer" content="origin">
none Никогда не передает заголовок
none-when-downgrade Заголовок передается только если используется HTTPS
origin Передает данные о хостах и поддоменах
unsafe-url Передает полный URL

Refresh

Задаст задержку в секундах, после чего браузер обновит страницу.

<meta http-equiv="refresh" content="10">
Также можно указать другой адрес по которому перейдет браузер после задержки.
<meta http-equiv="refresh" content="10; URL=http://www.name.com/">

Skype Toolbar

Мета-тег skype_toolbar отключает расширение Skype на странице (только старые версии).

<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">  

CSRF

Свидетельствует о том, что на сайте реализована защита от CSRF-атак.

<meta name="csrf-token" content="gZoOqHdVwfq2QpfkwH6lQE75ivykrHdOS0rVfhiX">
<meta name="csrf-param" content="authenticity_token">

Ссылка на канал в телеграм

<meta name="telegram:channel" content="@telegram">

Тег Base

Указывает браузеру как обрабатывать относительные URL в ссылках и src изображений относительно адреса текущей страницы.

В примере, браузер запросит изображение по адресу:
http://site.ru/category/images/logo.png

<head>
	<base href="http://example.com/category/">
</head>
<body>
	<img src="images/logo.png">
</body>

snipp.ru

Атрибут content тега | HTML справочник

HTML тег <meta>

Значение и применение

Атрибут content (HTML тега <meta>) задает значение, связанное с атрибутами name и http-equiv, в зависимости от контекста. Если один из этих атрибутов указан, то атрибут content должен обязательно присутствовать, чтобы задать значение.

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

Синтаксис:

<meta content = "text">

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

ЗначениеОписание
textЗначение, связанное с атрибутами name и http-equiv, в зависимости от контекста.

Отличия HTML 4.01 от HTML 5

Нет.

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

<!DOCTYPE html>
<html>
	<head>
		<meta name = "description" content = "Бесплатные уроки по созданию сайтов" > <!-- мета элемент, который описывает содержимое документа -->
		<meta name = "keywords" content = "HTML, CSS, JavaScript, jQuery"> <!-- мета элемент, который описывает ключевые слова в документе -->
		<meta name = "author" content = "Denis Bolshakov"> <!-- мета элемент, который указывает имя автора документа -->
		<title>Пример использования атрибута content тега <meta></title>
	</head>
	<body>
		<h3> Это заголовок.</h3>
		<p>Это параграф. </p>
	</body>
</html>

В данном примере мы использовали три элемента <meta>:

  • первый мета элемент описывает содержимое документа (значением атрибута name мы указали, что это описание страницы (description), а текстовое содержимое указали в атрибуте content. Это описание могут использовать поисковые машины для отображения результатов поиска.
  • второй мета элемент описывает ключевые слова в документе (значением атрибута name мы указали, что это ключевые слова (keywords), а текстовое содержимое указали в атрибуте content. Ключевые слова могут использоваться некотрыми поисковыми машинами.
  • третий мета элемент описывает имя автора документа (значением атрибута name мы указали, что это автор документа (author), а имя автора указали в атрибуте content.
<!DOCTYPE html>
<html>
	<head>
		<meta  http-equiv  = "refresh" content = "15, URL='http://basicweb.ru'" > <!-- мета элемент, который указывает, что страница будет перезагружена через 15 секунд и перейдет по указанному URL -->
		<meta  http-equiv  = "content-security-policy" content = "default-src https:" > <!-- мета элемент, который разрешает загрузку ресурсов (изображения, шрифты, скрипты и так далее) только с использованием https -->
		<meta  http-equiv  = "default-style" content = "default style" > <!-- мета элемент, который указывает имя предпочитаемых css стилей документа -->
		<title>Пример использования атрибута http-equiv тега <meta></title>
		<link href = "default.css" rel = "stylesheet" type = "text/css" title = "default style">
	</head>
	<body>
		<h3> Это заголовок.</h3>
		<p>Это параграф. </p>
	</body>
</html>

В данном примере мы использовали три элемента <meta> для которых были указаны различные значения атрибута http-equiv:

  • первый мета элемент, указывает, что страница будет перезагружена (значение refresh) через 15 секунд и перейдет по указанному URL (значения, указанные в атрибуте content). Если адрес URL не указан, то страница просто будет перезагружена.
  • второй мета элемент разрешает загрузку ресурсов (изображения, шрифты, скрипты и так далее) только с использованием https. Это стало доступным благодаря использованию значения content-security-policy, которое позволяет с использованием атрибута content определить правила (политику) для обслуживаемых ресурсов.
  • третий мета элемент, указывает имя предпочитаемых css стилей документа. Обратите внимание, что значение атрибута content должно совпадать со значением глобального атрибута title HTML тега <link>.

HTML тег <meta>

basicweb.ru

Элемент head и метаданные веб-страницы

Последнее обновление: 08.04.2016

Основная часть документа html, фактически все, что мы увидим в своем браузере при загрузке веб-страницы, располагается между тегами <body> и </body>. Здесь размещаются большинство элементов html.

Хотя большинство элементов в HTML5 остаются теми же, что и в ранних версиях, но несколько изменился способ их использования. Рассмотрим базовые элементы HTML5, их предназначение и использование.

Элемент head и метаданные веб-страницы

Как правило, одним из первых элементов html-документа является элемент head, задача которого состоит в установке метаданных страницы и ряда сопроводительной информации. Метаданные содержат информацию о html-документе.

Заголовок

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элемент title</title>
	</head>
	<body>
		<p>Содержание документа HTML5</p>
	</body>
</html>

Элемент base

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


<!DOCTYPE html>
<html>
	<head>
		<base href="content/">
		<meta charset="utf-8">
		<title>Элемент base</title>
	</head>
	<body>
		<a href="newpage.html">Перейти</a>
	</body>
</html>

Хотя для ссылки в качестве адреса указана страница newpage.html, но фактически ее адресом будет content/newpage.html. То есть в одной папке с текущей страницей должна быть подпапка content, в которой должен находится файл newpage.html

Можно также указывать полный адрес:


<base href="http://www.microsoft.com/">

В это случае ссылка будет вести по адресу http://www.microsoft.com/newpage.html

Элемент meta

Элемент meta определяет метаданные документа.

Чтобы документ корректно отображал текст, необходимо задать кодировку с помощью атрибута charset. Рекомендуемой кодировкой является utf-8:


<meta charset="utf-8">

При этом надо помнить, что указанная элементе meta кодировка должна совпадать с кодировкой самого документа. Как правило, текстовый редактор позволяет указать кодировку документа. Если мы хотим ориентироваться на utf-8, то в настройках текстового редактора надо выбирать UTF-8 w/o BOM. Например, выбор кодировки в Notepad++:

Элемент meta также имеет два атрибута: name и content. Атрибут name содержит имя метаданных, а content - их значение.

По умолчанию в HTML определены пять типов метаданных:

  • application name: название веб-приложения, частью которого является данный документ

  • author: автор документа

  • description: краткое описание документа

  • generator: название программы, которая сгенерировала данный документ

  • keywords: ключевые слова документа

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

Добавим в документ ряд элементов meta:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<base href="content/">
		<title>Элемент title</title>
		<meta name="description" content="Первый документ HTML5">
		<meta name="author" content="Bill Gates">
	</head>
	<body>
		<a href="newpage.html">Содержание документа HTML5</a>
	</body>
</html>

metanit.com

seodon.ru | Теги HTML - Тег META

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

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

Атрибуты

Личные атрибуты:

  • name — Задает имя метатега, чтобы браузерам и поисковикам было понятно к какому типу относится информация указанная в content.
  • http-equiv — Тоже имя метатега, но указывает название HTTP-заголовка. Является заменой атрибуту name в тех случаях, когда данные передаются по HTTP.
  • content — Обязательный атрибут. Содержит значение метатега.

Общие атрибуты:

  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: документ.

Модель тега: может располагаться только в «шапке» документа, внутри элемента <HEAD>, в любом количестве.

Может содержать: данный элемент является пустым/Empty.

Открывающий тег: необходим. Закрывающий тег: запрещен.

Синтаксис

<head>
 <meta content="значение">
</head>

Список метатегов заданных элементом <META>

Мета-тег и описаниеПример
author — Содержит имя автора документа.<meta name="author" content="Иван Иванов">
copyright — Информация об авторских правах.<meta name="copyright" content="Сopyright 2011 BestCompany">
description — Осмысленное описание веб-страницы, которое отображается в поисковике при выдаче запроса.<meta name="description" content="Описание тега META, и его атрибутов.">
keywords — Список ключевых слов через запятую.<meta name="keywords" content="HTML справочник, тег, META, атрибуты">
robots noindex — Запрещает поисковикам индексировать содержимое страницы.<meta name="robots" content="noindex">
robots nofollow — Запрещает поисковикам переход по ссылкам на странице и их индексацию.<meta name="robots" content="nofollow">
robots none — Запрещает поисковикам индексацию содержимого и ссылок.<meta name="robots" content="none">
Content-Language — Указывает основной язык, используемый на странице.<meta http-equiv="Content-Language" content="en">
Content-Type — Информация о кодировке страницы.<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
pragma no-cashe — Запрещает браузеру брать веб-страницу из кэша. Соответственно, при каждом обновлении страницы — она будет полностью загружаться с сервера.<meta http-equiv="pragma" content="NO-CACHE">
refresh — Автоматический редирект (перенаправление) с текущей страницы — на указанную через заданный в секундах интервал (число с точкой с запятой (;)).<meta http-equiv="refresh" content="4;url=http://spravka.seodon.ru/html/meta.php">

Конечно, это далеко не все существующие метатеги, да и эти не всегда нужны. Но желательно на всех страницах указывать Content-Type, description и keywords.

Для запрета индексации содержимого страницы также можно использовать тег <NOINDEX>, который поддерживается отечественными поисковыми системами.

Пример HTML: применение тега META

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>seodon.ru - Применение тега META</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Language" content="ru">
  <meta name="author" content="Автор документа">
  <meta name="copyright" content="© 2011 Имя или название">
  <meta name="description" content="Описание документа">
  <meta name="keywords" content="ключевые слова">
 </head>
 <body>
  <p>Контент.</p>
 </body>
</html>

Результат примера

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

spravka.seodon.ru

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

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