Атрибут name тега <meta> — вид метаданих
Атрибут name ім'я для метаданих.
Атрибут name вказує ім'я для інформації/значення атрибута content.
Загальний опис
автор: NagarD
- Нотатка
-
Якщо атрибут
автор: с3сhttp-equivвстановлено, то атрибутnameнепотрібен.
Синтаксис
<meta name = "value">Атрибут name може отримувати 5 значень:
-
application-name -
Задає ім'я веб-додатка, який представляє сторінку
автор: с3с -
author -
Задає ім'я автора документа. Приклад:
автор: с3с<meta name="author" content="Hege Refsnes"> -
description -
Вказує опис сторінки. Пошукові системи можуть використати цей опис щоб показати результатами пошуку. Приклад:
автор: с3с<meta name="description" content="Free web tutorials CSS.In.UA"> -
generator -
Визначає один з програмних пакетів, які використовуються для створення документа (не використовується для сторінок створених не автоматичними методами). Приклад:
автор: с3с<meta name="generator" content="FrontPage 4.2"> -
keywords -
Вказує розділений комами список ключових слів, що мають відношення до змісту сторінки (повідомляє пошуковим системам зміст сторінки).
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | ≤12.1 | 12 | ≤6 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута name теґа <meta>
<!DOCTYPE HTML>
<html>
<head>
<title>META</title>
<meta charset="utf-8">
<meta name = "description" content = "Уроки по вивченню веб-сайтів" >
<meta name = "keywords" content = "HTML, CSS, JavaScript, jQuery">
<meta name = "author" content = "Shevchenko Oleg">
</head>
</html>Метатеґи не видно на сторінці — тому приклад робить їх видимими: head і meta перемкнуто в display: block, а вміст малюється через content: attr(...). Кольором розділено чотири різні ключі — name, property, charset і http-equiv, — і одразу видно, що це не варіанти одного й того самого.
HTML
<html lang="uk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Довідник CSS, HTML і JavaScript українською">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#2f6fd0">
<meta name="keywords" content="це поле пошуковики не читають уже багато років">
<meta property="og:title" content="Заголовок для соцмереж — через property, не name">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Сторінка з метаданими</title>
</head>
<body>
<h1>Те, що бачить людина</h1>
<p>Угорі — справжній вміст теґа <head> цієї самої сторінки. Стилі лише
зробили його видимим: жодного тексту приклад не дублює руками, кожен
рядок намальовано з атрибутів name, property, charset і content самих
метатеґів.</p>
</body>
</html>CSS
body {
font: 16px/1.5 system-ui, sans-serif;
margin: 12px;
background: #fff;
color: #111;
}
head {
display: block;
margin: 0 0 18px;
padding: 10px 12px;
border: 2px dashed #b9c6d8;
background: #f6f9ff;
}
head::before {
content: "вміст <head> цієї сторінки:";
display: block;
margin-bottom: 8px;
color: #5a6472;
font: 600 .9em/1.4 system-ui, sans-serif;
}
meta,
title {
display: block;
font: 14px/1.7 ui-monospace, monospace;
}
meta[name]::before {
content: "name=" attr(name) " → " attr(content);
color: #1b4f9c;
}
meta[property]::before {
content: "property=" attr(property) " → " attr(content);
color: #7d3c98;
}
meta[charset]::before {
content: "charset=" attr(charset) " — власний ключ, без name і content";
color: #3a9a4f;
}
meta[http-equiv]::before {
content: "http-equiv=" attr(http-equiv) " → " attr(content);
color: #c0392b;
}
title::before {
content: "<title> (це не метадані) → ";
color: #5a6472;
}
h1 {
margin: 0 0 8px;
font-size: 1.3em;
}
p {
max-width: 520px;
color: #5a6472;
}Коментарі
Коментарів ще немає — будьте першим!