HTML/Элемент meta
Синтаксис
HTML
XHTML
<head> ... <meta content="..."> ... </head>
Описание
Элемент meta
определяет метаданные (технические данные) HTML-документа. К подобным данным относят краткое описание страницы, ключевые слова, данные об авторе документа, о последнем изменении документа и прочее. Данный элемент создан для предоставления информации о документе поисковым машинам и браузерам.
Метаданные документа выражаются в виде пар «имя-значение» («свойство-значение»), где «name
» («http-equiv
») атрибут указывает имя (свойство), а «content
» атрибут этого же элемента указывает значение.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Верс. | Раздел | |
---|---|---|
HTML | ||
2.0 | Associated Meta-information: META | Перевод |
3.2 | META | |
4.01 | The META element DTD: Transitional
Strict
Frameset | |
5.0 | 4.2.5 The meta element | |
5.1 | 4.2.5. The meta element | |
XHTML | ||
1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset | |
1.![]() | Extensible 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 Учебник.
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
.
Дополнительные атрибуты
Атрибут | Описание | Возможные значения |
---|---|---|
имя | Имя текстовых метаданных. Используется в сочетании с атрибутом содержимого . | Текст. Некоторые часто используемые имена метаданных включают в себя:
|
http-экв. | «Директива прагмы», имитирующая инструкцию HTTP на стороне сервера. Используется в сочетании с атрибутом содержимого . |
|
содержание | Значение элемента. Либо текстовые метаданные, если имя задано атрибутом name , либо значение соответствующего атрибута http-equiv . | Текст. |
кодировка | Кодировка символов страницы HTML. Следует использовать только один раз. | Объявление кодировки символов. Рекомендуется UTF-8 . |
Глобальные атрибуты |
Только одно из name
, http-equiv
или charset
должно использоваться в любом элементе meta
.
Реклама здесь! На давно известном, хорошо читаемом и уважаемом ресурсе веб-разработки.
Пример
<головной язык="en"> <метакодировка="utf-8">HTML-тег: мета
Начало работы с картами | Документы
- Начало работы с картами
- Атрибуция карты и контента
- URL-сканирование и кэширование
- Дисплей карты
- Несколько URL-адресов в твите
- Твиттер-карты и 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.
должен быть сохранен как обычный текст с кодировкой символов ASCII. Чтобы убедиться в этом, выполните следующую команду: txt
$ файл -I robots.txt robots.txt: текстовый/обычный; кодировка = us-ascii
Контент кэшируется Twitter в течение 7 дней после публикации ссылки на страницу с карточной разметкой в твите.
Если вы столкнулись с проблемами, когда карточки в твитах не отображаются должным образом, см. Руководство по устранению неполадок с карточками.
Отображение карточки
Карточки Твиттера, сгенерированные из метатегов, появляются только тогда, когда твит раскрывается на временной шкале (в Интернете) или просматривается на отдельной странице постоянной ссылки твита (нажав дату на временной шкале, либо в Интернете). или на мобильном).
В некоторых случаях карты могут появляться на временной шкале, например, на изображениях, публикуемых в Twitter, форматах рекламы и экспериментах, проводимых Twitter.
Если вы хотите добавить мультимедиа (фотографии, видео и открытки) на временную шкалу, рассмотрите один из следующих вариантов:
- Учетные записи могут закрепить твит в верхней части своей временной шкалы, что автоматически разворачивает твит и отображает карточку.
(Это возможно только в Интернете.).
- Для фотографий и анимированных GIF-файлов загрузите медиаданные непосредственно с помощью твита или рассмотрите возможность использования Twitter API для загрузки медиафайлов.
- Форматы объявлений с призывом к действию см. в Twitter Ads for Website Cards.
Несколько URL-адресов в твите
В некоторых случаях пользователям может потребоваться твитнуть несколько URL-адресов. В твите может быть показана только одна карточка. Вот порядок приоритета при обработке нескольких URL-адресов:
- Изображения или мультимедиа, прикрепленные к твитам, будут иметь приоритет перед любой карточкой, прикрепленной к URL-адресу.
- 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, если она уже существует.