<head> — всему голова
пару слов о том, что у нас в «голове»…
<head> — всему голова
пару слов о том, что у меня в «голове»…
Twitter, GitHub, почта, VKontakte, Facebook и т. д.: @realetive
<head> — всему голова
пару слов о том, что у всех в «голове»…
Шаблон минимальной страницы
<!DOCTYPE html>
<html lang="ru">
<title>head – всему голова</title>
<body>
Привет! Я живой валиден!
</body>
</html>
Шаблон минимальной страницы
<!DOCTYPE html>
<html lang="ru">
<title>head – всему голова</title>
<body>
Привет! Я живой валиден!
</body>
</html>
Шаблон минимальной страницы
<!DOCTYPE html>
<html lang="ru">
<title>head – всему голова</title>
<body>
Привет! Я живой валиден!
</body>
</html>
Шаблон минимальной страницы
<!DOCTYPE html>
<html lang="ru">
<title>head – всему голова</title>
<body>
Привет! Я живой валиден!
</body>
</html>
Шаблон минимальной страницы
<!DOCTYPE html>
<html lang="ru">
<title>head – всему голова</title>
<body>
Привет! Я живой валиден!
</body>
</html>
Документ успешно проходит валидацию на w3c.
Шаблон минимальной страницы
Три тега…
<head lang="ru">
<title>head – всему голова</title>
<style>
#thisSlide pre {
color: #000;
background-color: transparent;
}
</style>
</head>
<head style="display: block" lang="ru">
<title style="display: block">head – всему голова</title>
<style style="display: block">
#thisSlide pre {
color: #000;
background-color: transparent;
}
</style>
</head>
<head style="display: block" lang="ru">
<title style="display: block" contenteditable>head – всему голова</title>
<style style="display: block" contenteditable>
</style>
</head>
<title>
Мозг отвечает за сознание человека, т. е. за определение понятия «Я»:
<title>Я – документ!</title>
<!-- CSS-стили во внешнем файле -->
<link rel="stylesheet" href="styles.css">
<!-- CSS-стили прямо в документе -->
<style> /* ... */ </style>
<!-- JavaScript -->
<script src="script.js"></script>
<script> // Привет <script>
<noscript><!--no JS alternative--></noscript>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- habr.ru/p/201358 -->
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
Эти три тега настоятельно рекомендуется указать в самом начале
Контролируем поставку статических ресурсов
<!-- Указываем полный базовый адрес текущего
документа и задаём целевое окно для всех
ссылок на текущей странице -->
<base href="//wsd.events/assets/"
target="_blank">
Управляем «видимостью»
<!-- Отключаем автоматическое определение
и форматирование телефонных номеров -->
<meta name="format-detection" content="telephone=no">
… и браузер их больше «не видит»
Скрываем поле поиска…
<!-- …в результатах поисковой выдачи -->
<meta name="google" content="nositelinkssearchbox">
Мы встроили поиск к себе в поиск, чтобы ты мог искать, пока ищешь…
Отключаем переводчик…
<!-- …если Google Chrome неправильно определяет
основной язык… -->
<meta name="google" content="notranslate">
…или у вас есть локализованная страница для этого пользователя.
Контроль сердечного ритма?
<!-- Переиндексировать страницу раз в 2 недели -->
<meta name="revisit" content="14">
Яндекс и Гугл игнорирует содержимое этого тега…
Эмоциональное регулирование?
Да легко!
<!-- Указываем возрастные ограничения -->
<meta name="rating" content="safe for kids">
…ибо ■■■■■!
Центр сексуальности?
<!-- Описание документа -->
<meta name="description"
content="Я — сексуальная верстальщица…">
В определённых ситуациях содержание этого тега используется в результатах поиска.
«Посылаем» поисковики…
<!-- Отменяем индексацию «зеркала» -->
<meta http-equiv="url" content="https://всд.рф/">
Тег прекращает индексацию страницы поисковой системой, и перенаправляет робота поисковой машины по указанной ссылке.
Контролируем внешние источники
<!-- Позволяет контролировать источники
загрузки для контента -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'">
Желательно расположить этот тег как можно выше, т. к. он применяется только к контенту, перечисленному после него.
Подробнее: bit.ly/mdn-csp
«Социальные» теги Facebook / Open Graph
<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="//wsd.events/p.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="//wsd.events/i.jpg">
…
Facebook / Instant Articles
<meta property="op:markup_version" content="v1.0">
<!-- URL веб-версии статьи -->
<link rel="canonical" href="//wsd.events/a.html">
<!-- Стили, применяемые к ресурсу -->
<meta property="fb:article_style" content="myarticlestyle">
…
Да «тысячи» их!..
Twitter, Google+, Schema.org, Open Search…
Местоположение
<meta name="ICBM" content="широта, долгота">
<meta name="geo.position" content="широта;долгота">
<meta name="geo.region" content="код страны, регион">
<meta name="geo.placename" content="город">
Улучшаем рейтинг одинакового содержания
<!-- Указываем целевую страницу
//wsd.events/2016/10/01/?page=2 -->
<link rel="canonical"
href="//wsd.events/2016/10/01/">
Гугл о канонических URL: bit.ly/google-canonical
Сторонние сервисы управления
Например, оффлайн-редакторы для блогов на WordPress…
<link rel="EditURI" href="//wsd.events/xmlrpc.php?rsd"
type="application/rsd+xml" title="RSD">
Нативные «веб-компоненты»!
<!-- Загружаем внешний HTML-файл в этот -->
<link rel="import" href="component.html">
Подробнее: habr.ru/p/230751.
А здесь будет демо (если получится):
«Прогреваем» сеть…
<!-- Определяем сторонние подключения -->
<link rel="dns-prefetch" href="//www.google-analytics.com/">
<link rel="dns-prefetch" href="//bit.ly/">
<!-- Предзапрос -->
<link rel="prefetch" href="https://web-standards.ru/">
<!-- Предподключение -->
<link rel="preconnect" href="https://web-standards.ru/">
Асинхронная загрузка
<link rel="preload" href="cat.jpg" as="image">
<link rel="preload" href="cat.mp4" as="video">
<link rel="preload" href="ComicSans.woff" as="font">
Пререндер
<link rel="prerender" href="//bit.ly/lecture-head">
…когда мы точно знаем, что пользователь туда перейдёт.
«Обратная связь»
<!-- Автоматически оповещаем сайты, ссылающиеся на него -->
<link rel="pingback" href="//wsd.events/xmlrpc.php">
<!-- Уведомляет URL, когда вы ссылаетесь на него
на вашем сайте -->
<link rel="webmention" href="//wsd.events/webmention">
Не только в браузере!
<!-- РСС и Атом-ленты -->
<link rel="alternate" href="//wsd.events/rss.xml"
type="application/rss+xml" title="RSS">
<link rel="alternate" href="//wsd.events/feed.atom"
type="application/atom+xml" title="Atom 0.3">
Accelerated Mobile Pages (AMP)
<!-- Ссылка на AMP-вресию текущего документа -->
<link rel="amphtml"
href="//wsd.events/2016/10/01/amp-version.html">
Связи…
<!-- Документ, содержащий архивную ссылку
на текущую страницу -->
<link rel="archives" href="//wsd.events/2016/10/"
title="Конференции октября 2016">
Связи…
<!-- Документ, располагающийся «выше»
по иерархии структуры сайта -->
<!-- Статья «Путь наставника» -->
<!-- web-standards.ru/articles/path-of-tutor/ -->
<link rel="index"
href="http://web-standards.ru/category/articles/"
title="Статьи">
Стартовая точка
<link rel="start"
href="//wsd.events/2009/11/28/"
title="Самый первый WSD Минске">
Прошлая публикация
<link rel="prev"
href="//wsd.events/2016/06/25/"
title="WSD в Екатеринбурге">
Навигация
<!-- Первый, следующий, предыдущий и последний
документ в серии -->
<link rel="first" href="https://example.com/feed">
<link rel="next" href="https://example.com/feed?page=4">
<link rel="previous" href="https://example.com/feed?page=2">
<link rel="last" href="https://example.com/feed?page=147">
Фавиконки
<!-- IE 11, Chrome, Firefox, Safari, Opera -->
<link rel="icon" href="img/to/favicon-16.png" sizes="16x16">
<link rel="icon" href="img/to/favicon-32.png" sizes="32x32">
<link rel="icon" href="img/to/favicon-48.png" sizes="48x48">
<link rel="icon" href="img/to/favicon-62.png" sizes="62x62">
<link rel="icon" href="img/to/favicon-192.png" sizes="192x192">
+ type="image/png"
Манифест
<!-- JSON-файл со спецификацией вашего приложения -->
<link rel="manifest" href="manifest.json">
Автоматизация:
# Автоматическая генерация фавиконок и манифеста
npm install favicons -D
На разных языках!
<link rel="alternate" title="English"
hreflang="en"
href="https://en.wsd.events/2016/10/01/">
<link rel="alternate" title="Русскоговорящие англичане"
hreflang="ru-en"
href="https://ru-en.wsd.events/2016/10/01/">
Гугл о мультиязычности: bit.ly/google-langs
Титры…
<!-- Участники проекта, благодарности, технологии -->
<rel="author" href="humans.txt">
Как robots.txt, только человечный и для людей – humanstxt.org.
Авторство
<link rel="me" href="//romanganin.ru" type="text/html">
<link rel="me" href="mailto:hi@romanganin.ru">
<link rel="me" href="sms:+79216556291">
По правилам использования авторских мета-тегов личная страница автора обязательно должна располагаться на том же домене, что и авторский текст: habr.ru/p/121097
Авторские права
<!-- Ссылка на документ, описывающий авторские права -->
<link rel="copyright" href="copyright.html">
Вопросы?
Будьте здоровы!
