Html тег meta content

Html тег meta content

Тег (от англ. meta information — мета информация) определяет данные (они называются ещё метатеги), которые используются для хранения информации, предназначенной для браузеров и поисковых систем.

Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере . Как правило, атрибуты любого метатега сводятся к парам « имя=значение », имена которых определяются ключевыми словами content , name или http-equiv .

Синтаксис¶

Закрывающий тег не требуется.

Атрибуты¶

charset Задаёт кодировку документа. content Устанавливает значение атрибута, заданного с помощью name или http-equiv . http-equiv Предназначен для конвертирования метатега в заголовок HTTP. name Имя метатега, также косвенно устанавливает его предназначение.

charset¶

Указывает кодировку документа. Атрибут введён в HTML5 и предназначен для сокращения формы , которая задавала кодировку в предыдущих версиях HTML и XHTML.

Название кодировки, например UTF-8.

Значение по умолчанию

content¶

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

Некоторые значения атрибута content для , предназначенных для поисковых роботов, приведены в табл. 1.

Табл. 1. Значения для meta name=»robots»

Значение Описание
index Разрешает роботу индексировать данную страницу.
noindex Запрещает роботу индексировать текущую страницу. Она не попадает в базу поисковика и её невозможно будет найти через поисковую систему.
follow Разрешает роботу переходить по ссылкам на данной странице.
nofollow Запрещает роботу переходить по ссылкам на данной странице. При этом всем ссылкам не передаётся ТИЦ (тематический индекс цитирования) и PagePank.
noarchive Запрещает роботу кэшировать данную страницу.

Допустимые значения атрибута content для , которые предназначены для управления просмотром сайта на мобильных устройствах, приведены в табл. 2.

Табл. 2. Значения для meta name=»viewport»

Значение Допустимые значения Описание
width device-width или целое положительное число Устанавливает ширину области просмотра в пикселях.
height device-height или целое положительное число Устанавливает высоту области просмотра в пикселях.
initial-scale Число от 0.0 до 10.0 Устанавливает соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра.
maximum-scale Число от 0.0 до 10.0 Задаёт максимальное значение масштаба. Должно быть больше или равно minimum-scale, в противном случае игнорируется.
minimum-scale Число от 0.0 до 10.0 Задаёт минимальное значение масштаба. Должно быть меньше или равно maximum-scale, в противном случае игнорируется.
user-scalable yes или no Если указано no, то пользователь не сможет масштабировать веб-страницу. По умолчанию используется yes.
Читайте также:  Os remove system32 python

Строка символов, которую надо взять в одинарные или двойные кавычки.

Значение по умолчанию

http-equiv¶

Браузеры преобразовывают значение атрибута http-equiv , заданное с помощью content , в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.

Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута http-equiv .

Content-Type Тип кодировки документа.

expires Устанавливает дату и время, после которой информация в документе будет считаться устаревшей.

pragma Способ кэширования документа.

refresh Загружает другой документ в текущее окно браузера.

Значение по умолчанию

name¶

Устанавливает идентификатор метатега для пары « имя=значение ». Одновременно использовать атрибуты name и http-equiv не допускается.

Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута name .

author Имя автора документа. description Описание текущего документа. keywords Список ключевых слов, встречающихся на странице. viewport Управляет просмотром сайта на мобильных устройствах.

Значение по умолчанию

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

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
 html> head> title>METAtitle> meta charset="utf-8" /> meta name="GENERATOR" content="Microsoft FrontPage 4.0" /> meta name="ProgId" content="FrontPage.Editor.Document" /> head> body> p>. p> body> html> 

Источник

Html тег meta content

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

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Таких метатегов может быть любое количество. Все они размещаются внутри тега , желательно в самом начале.

Пример

Скопировать ссылку «Пример» Скопировано

     name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3" >  head> meta name="description" content="Краткое описание страницы"> meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3" > meta name="viewport" content="width=device-width, initial-scale=1.0"> head>      

Как понять

Скопировать ссылку «Как понять» Скопировано

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

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

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

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Метатег, который задаёт кодировку страницы, не отличается по структуре от обычных:

  meta charset=". ">      

Остальные метатеги содержат атрибуты name или http - equiv , которые используются в паре с атрибутом content :

  meta name=". " content=". "> meta http-equiv=". " content=". ">      

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

  name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3"> meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3" >      

Атрибуты

Скопировать ссылку "Атрибуты" Скопировано

  • charset — задаёт кодировку страницы. Мы рекомендуем писать здесь UTF - 8 — это самый распространённый вариант.
  meta charset="UTF-8">      
  • http - equiv — атрибут, который может изменять поведение страницы или серверов. Используется в паре с content . У него есть несколько значений:
    • "default - style" — предпочтительный стиль таблиц, который используется на странице. В этом случае в атрибуте content прописывается заголовок из элемента , который связан с таблицей CSS-стилей, или заголовок элемента , который содержит таблицу CSS-стилей.
    • "refresh" — время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом, который указан в секундах.
      meta http-equiv="refresh" content="3">      
    • name — имя мета-тега, которое также определяет его значение. Используется в паре с content . Можно задать следующие значения:
      • "keywords" — ключевые слова, которые помогают поисковикам находить страницу в интернете. По сути, это самые важные слова из содержания страницы.
        meta name="keywords" content="Рецепт, печенье, готовим дома">      
      • "viewport" — задаёт параметры окна просмотра в браузере. Страницу можно сделать адаптивной, подогнав ширину окна под размеры устройства. В примере ниже width указывает ширину окна просмотра, а initial - scale — коэффициент масштабирования страницы при первом открытии:
        name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" >      
      • "description" — краткое описание страницы, которое видит пользователь, когда находит сайт в поисковике. Например: «Рассказываем, как нарезать картошку тонкими ломтиками» для сайта о кулинарии. Это описание помогает поисковикам найти страницу, а пользователю — узнать, о чём она. Так что не забывайте указывать "description" .
        name="description" content="Рассказываем, как нарезать картошку тонкими ломтиками"> meta name="description" content="Рассказываем, как нарезать картошку тонкими ломтиками" >      
        meta name="author" content="Иван Петров">      

      Подсказки

      Скопировать ссылку "Подсказки" Скопировано

      💡 Чтобы избежать ошибок кодировки, необходимо уместить метатег с атрибутом charset в первых 1024 байтах документа. Для этого старайтесь указывать его в самом начале тега .

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

      💡 С помощью атрибута http - equiv = "refresh" можно сделать так, чтобы страница отправляла пользователя на другую страницу через определённое количество секунд. Например, отправим пользователя на главную Яндекса через 15 секунд:

        meta http-equiv="refresh" content="15;url=https://www.yandex.ru">      

      На практике

      Скопировать ссылку "На практике" Скопировано

      Дока Дог советует

      Скопировать ссылку "Дока Дог советует" Скопировано

      🛠 В , помимо стандартных метаданных, передаются всякие специальные. Например, есть такой браузер, как Safari: он очень любит подстраивать номера телефонов в какой-то удобный для себя вид. Чтобы отключить это своеволие, нужен отдельный метатег:

        meta name="format-detection" content="telephone=no">      

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

      🛠 Через метатеги задаётся и Open Graph-разметка: заголовок, картинка и описание для репоста в соцсетях.

      Алёна Батицкая советует

      Скопировать ссылку "Алёна Батицкая советует" Скопировано

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

      Пример текста под заголовком сайта в поисковой выдаче (сниппет)

      Если хочется контролировать, что именно увидит пользователь в поиске — всегда заполняйте description .

      🛠 Есть отдельная категория метаразметки — OG-разметка. OG расшифровывается как open graph. Такая разметка нужна для того, чтобы при вставке ссылки на ваш сайт в соцсетях в превью отображалась красивая карточка.

      Пример open graph (OG) разметки

      Стандартный набор метатегов для красивой карточки в Facebook:

         property="og:description" content="Посетите лучший сайт в интернете и познайте тщетность бытия"> meta property="og:title" content="Лучший сайт в интернете"> meta property="og:description" content="Посетите лучший сайт в интернете и познайте тщетность бытия" > meta property="og:image" content="http://best-site/thumbnail.jpg"> meta property="og:url" content="http://best-site/index.htm">      

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

      Источник

      HTML Tag

      The tag defines metadata about an HTML document. Metadata is data (information) about data.

      tags always go inside the element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.

      Metadata will not be displayed on the page, but is machine parsable.

      Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

      There is a method to let web designers take control over the viewport (the user's visible area of a web page), through the tag (See "Setting The Viewport" example below).

      Browser Support

      Attributes

      Attribute Value Description
      charset character_set Specifies the character encoding for the HTML document
      content text Specifies the value associated with the http-equiv or name attribute
      http-equiv content-security-policy
      content-type
      default-style
      refresh
      Provides an HTTP header for the information/value of the content attribute
      name application-name
      author
      description
      generator
      keywords
      viewport
      Specifies a name for the metadata

      Global Attributes

      More Examples

      Define keywords for search engines:

      Источник

Оцените статью