Назад
Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс




Поиск по сайту




Наш Telegram бот: @htmlweb_bot

Мета теги. Информация в заголовке <head>

Контейнер <head> содержит информацию для браузеров и поисковых систем.

Внутри контейнера <head> могут размещаться следующие теги: <base>, <index>, <link>, <meta>, <script>, <style>, <title>.

Содержимое контейнера <head> не отображается напрямую на экране, за исключением тега <title>, устанавливающего заголовок окна web-страницы.

Тег <title>

Тег <title> задает название web-страницы, которое выводится в заголовке окна или во вкладке браузера. Является обязательным для любого HTML-документа. Название web-страницы должно отражать суть ее содержимого.

Пример
<!DOCTYPE html>
<html>
<head>
    <title>Название web-страницы</title>
</head>
<body>
...
</body>
</html>

Тег <link> устанавливает связь с внешним файлом, который имеет отношение к текущему html-документу.

Контейнер <head> может содержать несколько тегов <link>.

Пример
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/styles.css" type="text/css">
    <link rel="icon" href="/favicon.png" type="image/png">
    <link rel="icon" href="/favicon.svg" type="image/svg">
</head>
<body>
...
</body>
</html>

В этом примере подключается внешний файл стилей style.css и устанавливается иконка сайта в двух форматах: favicon.png и favicon.svg.

Атрибуты тега <link>

href
Адрес связанного файла.
media
Устройство, для которого следует применять стилевое оформление.
Возможные значения атрибута:
  • all - все типы (значение по умолчанию);
  • print - принтеры и другие печатающие устройства;
  • projection - проекторы;
  • screen - экран монитора;
  • speech - речевые синтезаторы и программы для воспроизведения текста вслух. Например, речевые браузеры.
В качестве значения можно также использовать медиа-запросы. Например, чтобы css-файл не влиял на вид страницы на мобильных устройствах: 
<link rel="stylesheet" href="desktop-styles.css" media="min-width: 590px">

Устаревшие, хотя и корректные типы, которые не дают результата:

  • braille - устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми;
  • embossed - принтеры, использующие для печати систему Брайля;
  • handheld - наладонники, смартфоны, устройства с малой шириной экрана;
  • projection - проекторы;
  • tty - устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея);
  • tv - телевизоры.
rel
Отношение между текущим документом и связанным файлом.
Возможные значения атрибута:
  • alternate - альтернативный вариант документа (например, страница для печати или перевод);
  • author - ссылка на страницу автора документа;
  • help - ссылка на документ помощи;
  • icon - иконка сайта (часто используют с shortcut);
  • licence - ссылка на информацию об авторских правах;
  • next - ссылка на следующий документ в серии;
  • pingback - ссылка на адрес Пинг-бэк сервера, который обрабатывает Пинг-бэки в текущем документе;
  • prefetch - указывает, что конечный документ должен кэшироваться;
  • prev - ссылка на предыдущий документ в серии;
  • search - ссылка на поисковый инструмент;
  • sidebar - ссылка на документ для отображения в боковой панели браузера (если она есть);
  • stylesheet - ссылка на файл стилей.
sizes
Размер иконок для визуального отображения (только для rel="icon").
Значение: ширина иконки в пикселях без указания единиц, латинская буква х в любом регистре, высота иконки. Если иконок несколько, то можно задавать их размеры через пробел. Ключевое слово any показывает, что иконка может масштабироваться в любой размер. Новый атрибут для тега <link> в HTML 5.
type
MIME-тип данных связанного файла.
Возможные значения атрибута:
  • text/css - для подключения файла стилей;
  • image/png - для подключения иконки сайта в формате png;
  • image/svg - для подключения иконки сайта в формате svg.

Тег <meta>

Тег <meta> определяет метаданные, которые предназначены для браузеров и поисковых систем. Чаще всего атрибуты любого метатега сводятся к парам «имя=значение».

Контейнер <head> может содержать несколько тегов <meta>.

Пример
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Ivanov I.I.">
    <meta http-equiv="refresh" content="30">
</head>
<body>
...
</body>
</html>

В этом примере устанавливается кодировка UTF-8, имя автора HTML-документа и автоматическая перезагрузка страницы через 30 секунд.

Для сайтов на русском языке возможно применение одной из следующих двух кодировок: Windows-1251 или UTF-8. Главное отличие кодировок – это используемый набор символов. Кодировка Windows-1251 однобайтовая, т.е. представить в ней можно только 255 символов (для кириллицы этого вполне достаточно). В UTF-8 можно представить намного больше символов, т.к. используются последовательности длиной до 6 байт. Символ русского языка в кодировке UTF-8 занимает 2 байта. Таким образом, если документ содержит только буквы русского алфавита и никаких других символов, то в UTF-8 он станет в два раза больше.

В прошлом Windows-1251 была очень популярна для сайтов на русском языке. Однако, она имеет один существенный недостаток – не поддерживает псевдографику. В настоящее время предпочтение отдают UTF-8.

Не забывайте, что в текстовом редакторе должна быть выбрана та же кодировка, что указана в charset.

Атрибуты тега <meta>

charset
Кодировка документа. Атрибут введен в HTML5 и предназначен для сокращения формы тега <meta>, которая задавала кодировку в предыдущих версиях HTML.
content
Значение атрибута, заданного с помощью name или http-equiv. Атрибут content может содержать более одного значения, в этом случае они разделяются запятыми или точкой с запятой.
Возможные значения для name="robots":
  • noindex – запрещает индексирование документа;
  • nofollow – запрещает проход по ссылкам, имеющимся в документе;
  • index – разрешает индексирование документа;
  • follow – разрешает проход по ссылкам;
  • all – равносильно index, follow;
  • none – равносильно noindex, nofollow.
http-equiv
Определяет заголовок HTTP, которому принадлежит информация. Например:
  • refresh – автоматическое обновление страницы или загрузка другого документа через заданное время (W3C не рекомендует использовать этот тег);
  • expires – дата устаревания кэша. Если указанная дата прошла, то очередной запрос этого документа вызывает реальную страницу без использования кэша;
  • pragma – запрет кэширования страницы.
Другие возможные HTTP-заголовки и их значения приведелы в примерах ниже.
name
Определяет имя метатега для пары «имя=значение». Например:
  • author – имя автора документа;
  • description – описание страницы;
  • keywords – список ключевых слов, встречающихся на web-странице;
  • robots – управляет индексацией web-страницы;
  • viewport – контроль размера окна просмотра и масштаба web-страницы. Подробнее.

На этой странице htmlweb.ru/php/example/show_meta_tag.php Вы можете получить содержимое всех Мета Тегов, содержащихся на любой странице в интернете.

Примеры метатегов

Автоматическое обновление страницы через каждые 30 секунд:

<meta http-equiv="refresh" content="30">

Перенаправление на указанную страницу через 20 секунд:

<meta http-equiv="refresh" content="20; Url=http://zagar61.ru/">

Указание адреса электронной почты автора:

<meta http-equiv="reply-to" content="support@htmlweb.ru">

Защита от превращения телефонных номеров, найденных на web-странице, в Skype-меню:

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">

Дата создания web-страницы:

<meta name="date" content="Nov 11 2000 10:12 GMT">

Не сохранять страницу в кэш (используется для баннеров):

<meta http-equiv="pragma" content="no-cache">

Частота индексации роботами поисковых систем (Яндекс её игнорирует):

<meta name="revisit-after" content="1 days">
<meta http-equiv="set-cookie" content="NAME=aaa13;
expires=Friday,04-Apr-14 23:59:59 GMT; path=/win/internet/html/;
domain=citforum.ru;">

Метатеги можно хранить во внешнем файле.

Необязательный атрибут тега <head> profile указывает на внешний файл метатегов. В качестве значения этого атрибута указывается URL данного файла. Например:

<head profile="http://htmlweb.ru/html/head.php">
    ...
</head>

Читать дальше: Тег base


.