Meta html: Тег | htmlbook.ru

alexxlab

HTML/Элемент meta

Синтаксис

HTML

XHTML

<head>
  ...
  <meta content="...">
  ... 
</head>

Описание

Элемент meta определяет метаданные (технические данные) HTML-документа. К подобным данным относят краткое описание страницы, ключевые слова, данные об авторе документа, о последнем изменении документа и прочее. Данный элемент создан для предоставления информации о документе поисковым машинам и браузерам.

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

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

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

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

Верс.Раздел
HTML
2.0Associated Meta-information: METAПеревод
3.2META
4.01The META element
DTD: Transitional Strict Frameset
5.04.2.5 The meta element
5.14.2.5. The meta element
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1. 1Extensible HyperText Markup Language

Атрибуты

charset
Указывает кодировку HTML-документа.
content
Указывает значение метаданных.
http-equiv
Указывает прагма директиву. (Конвертирует метаданные в HTTP заголовок.)
name
Указывает название метаданных.
scheme
Указывает схему интерпретации значения атрибута «content».
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

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

Листинг кода

<!DOCTYPE html>
<html>
<head>
<!— указываем кодировку документа —>
<meta charset=»utf-8″>
<!— ~~~ —>
<title>Элемент meta</title>
</head>
<body>
<h2>Пример использования элемента «meta»</h2>
<p>Данный документ имеет кодировку «utf-8». </p>
</body>
</html>

Элемент meta

Главные теги — Учебник HTML

❮ Назад Далее ❯

HTML элемент <head> контейнер для всех головных элементов: <title>, <style>, <meta>

, <link>, <script>, и <base>.

HTML <head>

Элемент <head> представляет собой контейнер для метаданных (данных о данных) и помещается между ними. Тег <html> и тег <body>.

Метаданные HTML — это данные о документе HTML. Метаданные не отображаются.

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

HTML <title>

Элемент <title> определяет заголовок документа и является обязательным во всех HTML документах.

Элемент <title>:

  • Определяет заголовок на вкладке браузера
  • Предоставляет заголовок для страницы, когда она добавляется в избранное
  • Отображает заголовок страницы в результатах поиска

Простой HTML документ:

Пример

<!DOCTYPE html>
<html>

 <head>
  <title>Заголовок страницы</title>
 </head>

 <body>
  Содержание документа……
 </body>

</html>

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

HTML <style>

Элемент <style> используется для определения информации о стиле для одной HTML страницы:

Пример

<style>
 body {background-color: powderblue;}
 h2 {color: red;}
 p {color: blue;}
</style>

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

HTML <link>

Элемент <link> используется для связи с внешними таблицами стилей:

Пример

<link rel=»stylesheet» href=»mystyle.

css»>

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

Совет: Чтобы узнать все о CSS, посетите CSS Учебник.

HTML <meta>

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

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

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

<meta charset=»UTF-8″>

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

<meta name=»description» content=»Бесплатные веб учебники»>

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

<meta name=»keywords» content=»HTML, CSS, XML, JavaScript»>

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

<meta name=»author» content=»Щипунов Андрей»>

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

<meta http-equiv=»refresh» content=»30″>

Пример тега <meta>:

Пример

<meta charset=»UTF-8″>
<meta name=»description» content=»Бесплатные веб учебники»>
<meta name=»keywords» content=»HTML,CSS,XML,JavaScript»>
<meta name=»author» content=»Щипунов Андрей»>

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

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

В HTML существует метод, позволяющий веб дизайнерам взять контроль над видовым окном через тег <meta>.

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

Вы должны включить следующий элемент <meta> видового экрана на всех ваших веб страницах:

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

В <meta> элемент viewport содержит инструкции для браузера о том, как управлять размерами страницы и масштабирование.

Часть width=device-width задает ширину страницы, соответствующую ширине экрана устройства (которая будет варьироваться в зависимости от устройства).

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

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

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


Без мета тега viewport

С помощью мета тега viewport

HTML <script>

Элемент <script> используется для определения клиентского Javascript.

JavaScript пишет «Привет JavaScript!» в HTML элемент с помощью:

Пример

<script>
function myFunction() {
  document.getElementById(«demo»).innerHTML = «Привет JavaScript!»;
}
</script>

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

Совет: Чтобы узнать все о JavaScript, посетите JavaScript Учебник.

HTML <base>

Элемент <base> задает базовый URL адрес и базовый целевой объект для всех относительных URL адресов на странице:

Пример

<base href=»https://schoolsw3.com/images/» target=»_blank»>

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

HTML Главные элементы

Тег Описание
<head> Определяет информацию о документе
<title>		 Определяет заголовок документа
<base> Определяет адрес по умолчанию или цель по умолчанию для всех ссылок на странице
<link> Определяет связь между документом и внешним ресурсом
<meta> Определяет метаданные о документе HTML
<script> Определяет сценарий на стороне клиента
<style> Найдете информацию о стиле документа

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.

❮ Назад Далее ❯


Тег HTML: мета | HTML Dog

Метаданные — информация о HTML-документе — которая не может быть охвачена заголовком

, стилем , ссылкой , базой или скриптом элементами.

Элементы

meta обычно наиболее удобно размещаются внутри элемента head .

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

Атрибут Описание Возможные значения
имя Имя текстовых метаданных. Используется в сочетании с атрибутом содержимого . Текст. Некоторые часто используемые имена метаданных включают в себя:
  • автор : Имя автора страницы.
  • описание : Краткое описание страницы, часто используемое в результатах поиска. Следует использовать только один раз.
  • ключевые слова : Разделенные запятыми ключевые слова, относящиеся к документу.
  • viewport : Передает инструкции, такие как начальный масштаб и масштабируемый пользователем для мобильных устройств.
  • robots : Инструктирует сканеры страниц, например поисковые системы, что делать в отношении индексации страницы ( index и noindex ) и перехода по ее ссылкам ( Follow и nofollow ).
http-экв. «Директива прагмы», имитирующая инструкцию HTTP на стороне сервера. Используется в сочетании с атрибутом содержимого .
  • тип содержимого : Объявление кодировки символов. Старомодная альтернатива атрибуту charset .
  • стиль по умолчанию : Предпочтительная таблица стилей. Указывает на ссылку или элемент стиля .
  • обновление : обновление по времени в секундах или перенаправление. Зло.
содержание Значение элемента. Либо текстовые метаданные, если имя задано атрибутом name , либо значение соответствующего атрибута http-equiv . Текст.
кодировка Кодировка символов страницы HTML. Следует использовать только один раз. Объявление кодировки символов. Рекомендуется UTF-8 .
Глобальные атрибуты

Только одно из name , http-equiv или charset должно использоваться в любом элементе meta .

Реклама здесь! На давно известном, хорошо читаемом и уважаемом ресурсе веб-разработки.

Пример 

<головной язык="en">
      <метакодировка="utf-8"> 
    HTML-тег: мета

Начало работы с картами | Документы

  1. Начало работы с картами
  2. Атрибуция карты и контента
  3. URL-сканирование и кэширование
  4. Дисплей карты
  5. Несколько URL-адресов в твите
  6. Твиттер-карты и Open Graph

 

Начало работы с карточками

Чтобы начать работу с разметкой карточек, укажите тип карточки для своего контента, добавив следующую HTML-разметку в раздел HEAD страницы:

Свойства карты — это простые пары «ключ-значение», каждое из которых определено в метатеге HTML, как показано выше. Объединенный набор свойств определяет общее взаимодействие с карточками в Твиттере, и каждый тип карточек поддерживает и требует определенного набора свойств.

Все карты имеют одно общее основное свойство — значение типа карты:

Свойство карты Описание
твиттер:карта Тип карты, который может быть одним из «summary», «summary_large_image», «app» или «player».

На странице поддерживается только один тип карт. Если на странице существует более одного значения twitter:card , «последнее» в последовательности будет иметь приоритет.

 

Карточка и атрибуция контента

Каждая карточка имеет встроенную атрибуцию контента, которая отображает соответствующие учетные записи Twitter для указанного вами контента. Пользователи смогут следить и просматривать профили привязанных аккаунтов прямо с карты. Существует два вида атрибуции:

Атрибуция веб-сайта : Указывает учетную запись Twitter для веб-сайта или платформы, на которой был опубликован контент. Обратите внимание, что служба может установить отдельные учетные записи Twitter для разных страниц/разделов своего веб-сайта, и следует использовать наиболее подходящую учетную запись Twitter, чтобы обеспечить наилучший контекст для пользователя. Например, nytimes.com может установить атрибуцию веб-сайта «@nytimes» для статей на главной странице и «@NYTArts» для статей в разделе «Искусство и развлечения».

Атрибуция создателя : Указывает отдельного пользователя, создавшего контент на карточке. Это относится к сводке с карточкой большого изображения.

Настройте атрибуцию карты, используя следующие свойства:

Свойство карты Описание Обязательно
твиттер: сайт @username для веб-сайта, используемого в нижнем колонтитуле карточки. Нет
твиттер:создатель @username для создателя/автора контента. №

 

Сканирование и кэширование URL-адресов

Сканер Twitter учитывает спецификацию Google robots.txt при сканировании URL-адресов. Если страница с карточной разметкой заблокирована, карточка показываться не будет. Если URL-адрес изображения заблокирован, миниатюра или фотография отображаться не будут.

Twitter использует User-Agent Twitterbot (с такой версией, как Twitterbot/1.0), которую можно использовать для создания исключения в файле robots.txt .

Например, вот файл robots.txt , запрещающий сканирование для всех роботов, кроме сборщика Twitter:

Агент пользователя: Twitterbot
Запретить:
Пользовательский агент: *
Запретить: /

Вот еще один пример, в котором указывается, какие каталоги разрешено сканировать Twitterbot (в данном случае запрещаются все каталоги, кроме каталогов изображений и архивов):

Агент пользователя: Twitterbot
Запретить: *
Разрешить: /изображения
Разрешить: /архивы

Серверный файл robots. txt должен быть сохранен как обычный текст с кодировкой символов ASCII. Чтобы убедиться в этом, выполните следующую команду:

$ файл -I robots.txt
robots.txt: текстовый/обычный; кодировка = us-ascii

Контент кэшируется Twitter в течение 7 дней после публикации ссылки на страницу с карточной разметкой в ​​твите.

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

 

Отображение карточки

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

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

Если вы хотите добавить мультимедиа (фотографии, видео и открытки) на временную шкалу, рассмотрите один из следующих вариантов:

  • Учетные записи могут закрепить твит в верхней части своей временной шкалы, что автоматически разворачивает твит и отображает карточку. (Это возможно только в Интернете.).
  • Для фотографий и анимированных GIF-файлов загрузите медиаданные непосредственно с помощью твита или рассмотрите возможность использования Twitter API для загрузки медиафайлов.
  • Форматы объявлений с призывом к действию см. в Twitter Ads for Website Cards.

 

Несколько URL-адресов в твите

В некоторых случаях пользователям может потребоваться твитнуть несколько URL-адресов. В твите может быть показана только одна карточка. Вот порядок приоритета при обработке нескольких URL-адресов:

  1. Изображения или мультимедиа, прикрепленные к твитам, будут иметь приоритет перед любой карточкой, прикрепленной к URL-адресу.
  2. URL-адреса с карточками обрабатываются в порядке появления в твите, с первого по последний

 

Карты Twitter и Open Graph

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

Обратите внимание, что, хотя Open Graph рекомендует указывать сопоставление префикса RDFa Core 1.1 CURIE «og» с помощью , для карт Twitter такая разметка не требуется. и использование префикса twitter: в атрибуте имени метаэлемента HTML. Протокол Open Graph также определяет использование атрибутов свойства и содержимого для разметки ( ) в то время как Twitter карты используют имя и содержимое . Парсер Twitter вернется к использованию свойства и содержимого , поэтому нет необходимости изменять существующую разметку протокола Open Graph, если она уже существует.

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

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