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

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

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

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

Тег <title>

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

Пример
<!DOCTYPE html>
<html>
<head>
    <title>Пример тега TITLE</title>
</head>
<body>
...
</body>
</html>

Тег <link>

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

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

Пример
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
...
</body>
</html>

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

Атрибуты тега <link>
href Адрес связанного файла.
media Устройство, для которого следует применять стилевое оформление.
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/x-icon для подключения иконки сайта.

Тег <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 он станет в два раза больше. Если сайт имеет одну версию – русскую, то нет смысла использовать UTF-8, будет вполне достаточно Windows-1251. Но если имеются версии на других языках, то следует выбрать UTF-8.

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

Автоматическое обновление страницы через каждые 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@aaanet.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">

Записать информацию (Cookie) на машине клиента:

<meta http-equiv="set-cookie" content="NAME=aaa13;
expires=Friday,04-Apr-14 23:59:59 GMT; path=/win/internet/html/;
domain=citforum.ru;">
См. также примеры использование Cookie на JavaScript, на PHP, описание технологии cookie.

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

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

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

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


.

Популярное:


Содержание:


Новое за неделю



Сейчас на сайте: 2592