Meta теги
В первой главе этого учебника, об общем построении html документа, я говорил о том, что все html документы должны иметь вот такой шаблон кода:
<html> - начало документа
<head> - начало головы
</head> - закрытие головы
<body> - начало тела
</body> - закрытие тела
</html> - конец документа
Где между тегами <body> </body> указывается информация предназначенная для вывода на экран в нужном нам виде, а между тегами<head> </head> исключительно служебная информация предназначенная для поисковых систем и браузеров тех или иных пользователей. Так что же это за информация такая и для чего она нужна? Отвечу, планомерно и порционально в этой главе.
С тегом <title> мы уже знакомы, с помощью него мы указываем имя документа в заголовке страницы. Теперь новый тег <meta>(закрывающего тега не требует) с помощью него мы и будем указывать эту самую служебную информацию на нашей страничке.
<meta> тег имеет следующие атрибуты:
- http-equiv - указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных.
- name - информационное имя. (применяется в паре с атрибутом content)
- content - информационное содержание, связанное с мета именем (name)
Теперь на примерах будем вникать в суть дела.
Пример (очень нужный и важный):
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
Сначала расскажу зачем необходима эта строка в заголовке html документа. Данная запись указывает браузеру кодировку в которой была написана данная страница - формат документа и раскладку клавиатуры, в данном случае это кириллица для Windows. Если эту строку не писать в заголовке страницы, то есть большая вероятность что весь текст на Вашей странице отобразится в виде непонятных человеку "иероглифов" у разных пользователей тех или иных браузеров. Конечно, пользователь может применить к такому документу команду в браузере Вид->Кодировка->Кириллица, но он может не знать о данной функции, да и зачем утруждать человека данным действием.
Теперь разберём по "слогам" нашу запись:
<meta http-equiv="Content-Type" - указываем что в этом мета теге мы будем заниматься Content-Type - типом содержания
Content="text/html; - а именно его текстом
Charset=Windows-1251"> - документ для Windows - Кириллица где 1251 кодировка раскладки клавиатуры, так например Английская клавиатура будет задаваться Charset=Windows-1252
В настоящее время продвинутые веб-мастера рекомендуют использовать кодировку UTF 8
То есть писать в голове документа вот так:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Пример:
<meta http-equiv="Content-Language" Content="ru">
В этой строчке говорится о том что язык Language документа является русским Content="ru"
Неправильная установка языка и раскладки клавиатуры может привести к печальным последствиям.
Пример:
<meta name="author" Content="Остап Бендер">
<meta name="copyright" Content=""Рога и копыта" Остап Бендер">
Данные метаописатели предназначены для заявления об авторских правах непосредственно в заголовке html кода, так name="author"указывает имя автора страницы, а name="copyright" авторское право (копирайт) в котором может указываться фамилия, имя, отчество автора сайта, название фирмы, бренда.. и т. д. Кроме того включив в заголовок документа такое описание Вы значительно упростите задачу поисковой машине при поиске Вашего сайта по имени автора, названию фирмы, бренду...
Пример:
<meta name ="Generator" Content="Microsoft Notepad">
Если хотите можете указать с помощью какого html редактора была написана данная страница.
Пример:
<meta name="description" Content="Производим закупку по выгодным ценам рогов и копыт!">
Description - краткое описание страницы. Данное описание частенько используется поисковыми системами для вывода в результатах поиска, по какому либо запросу, информации о сайте и его назначении.
Пример:
<meta name="keywords" Content ="рога, копыта, рожки, рог, копыто, копытце, закупка, покупка, приобретение, выгодно, продать, купить, сбыть, реализовать, корова, бык, коровьи, бычьи, оплата, деньги, наличные, цена, цене">
Keywords - ключевые слова веб-страницы, опять таки предназначены для поисковых машин.
Представьте что Вы ищете в какой либо поисковой системе сайт с информацией о том где можно продать те же рога и копыта :) Какие слова и фразы Вы будите вводить в строке "Поиск"? ну наверно что то типа: "Где продать коровьи рога?" или "Реализовать копыта по выгодной цене" Так вот если определить ключевые слова и так сказать предугадать мысли потенциального посетителя можно надеяться на то, что та или иная поисковая система выдаст ссылку на Ваш сайт в первых строчках результата поиска. Конечно ввод данного метоописателя не есть гарант того что именно Ваш сайт займет первые места в поиске по данным словам, но всё же не стоит им пренебрегать. Впрочем, оптимизация и раскрутка сайта это отдельная тема для разговора.
Помните что описание description не должно превышать по длине более 200 символов, а ключевые слова keywords 1000 символов, иначе это может пагубно отразится при продвижении Вашего сайта в ТОП поисковых систем.
Пример:
<meta name="Publisher-Email" Content="Ваш_e-mail@сервер.домен">
<meta name="Publisher-URL" Content="http://www.Ваш_сайт/">
Думаю понятно.. здесь указывается адрес Вашего почтового ящика Publisher-Email и адрес сайта Publisher-URL
Пример:
<meta name ="revisit-after" Content="15 days">
Если некая страница на Вашем сайте подразумевает постоянное обновление и/или дополнение информационным содержанием, то хорошо было бы включить данное описание в заголовок данной страницы. Такое введение позволит программе роботу своевременно посещать Ваш сайт и индексировать его содержание. В нашем примере мы заявили о том, что собираемся обновлять содержание на странице не менее одного раза в 15 дней, можете не сомневаться программа робот возьмет Ваши планы себе на заметку и будет приходить "к Вам в гости" раз в пятнадцать дней, для того чтобы проверить ничего ли у Вас не изменилось..
Пример:
<meta http-equiv="expires" content="Sun, 24 jan 2010 12:28:36 GMT+03:00">
Для того чтобы ускорить загрузку страницы, а так же сэкономить трафик современные браузеры сохраняют посещаемые пользователем страницы в кэш (на жёсткий диск), и при повторном посещении загружают их не с сервера, а непосредственно с кэша. На самом деле такая функция хороша собой.. но есть одно "но", дело в том что в браузере может отображаться уже устаревшая информация, какой либо страницы. Представьте, к примеру, Ваш сайт представляет собой некое периодическое новостное интернет издание, а пользователь получит, вместо самых свежих новостей, уже устаревшую информацию, ту которая хранится у него в кэше!! и не разобравшись в чем "беда" примет Ваш сайт за "мертвый" заброшенный и никем не обновляемый.
Для того чтобы принудительно заставить браузер загружать ту или иную страницу не с жёсткого диска, а с сервера необходим мета тег с данным синтаксисом, где указывается день недели, число месяц год время (чч:мм:сс) и часовой пояс(GMT+03:00 - время Московское + три часа). День недели и время дня можно не указывать. Теперь при чтении страницы браузером страница будет грузится с сервера, если указанная дата и время настало или просрочено, и напротив из кэша если указанное время еще не наступило.
Ниже на всякий случай приведены таблицы сокращений от Английских слов на месяцы и дни недели
Месяцы: |
От Английского: |
Сокращения: |
Январь |
January |
Jan |
Февраль |
February |
Feb |
Март |
March |
Mar |
Апрель |
April |
Apr |
Май |
May |
May |
Июнь |
June |
Jun |
Июль |
July |
Jul |
Август |
August |
Aug |
Сентябрь |
September |
Sep |
Октябрь |
October |
Oct |
Ноябрь |
November |
Nov |
Декабрь |
December |
Dec |
|
Дни недели: |
От Английского: |
Сокращения: |
Понедельник |
Monday |
Mon |
Вторник |
Tuesday |
Tue |
Среда |
Wednesday |
Wed |
Четверг |
Thursday |
Thu |
Пятница |
Friday |
Fri |
Суббота |
Saturday |
Sat |
Воскресенье |
Sunday |
Sun |
|
Атрибуту content можно присвоить значение "0" <meta http-equiv="Expires" content="0"> в этом случае страница всегда будет загружаться с сервера.
И еще.. некоторые поисковые роботы могут отказаться индексировать документ с заведомо устаревшей датой. - не искушайте судьбу..
Пример:
<meta http-equiv="pragma" content="no-cache">
А такая запись вовсе запретит браузеру кэшировать данную страницу.
Пример:
<meta name="robots" content="Index,follow">
Данный мета тег предназначен для подачи поисковому роботу той или иной команды.
Список возможных команд роботу:
- Index - индексировать страницу
- Noindex - не индексировать страницу
- Follow - прослеживать гиперссылки на странице
- Nofollow - не прослеживать гиперссылки на странице
- All - индексировать страницу и прослеживать гиперссылки на странице (по умолчанию)
- None - не индексировать страницу и не прослеживать гиперссылки на странице
Пример:
<meta http-equiv="Refresh" content="10; URL=http://www.mysite/index.html">
Если вдруг по каким либо причинам Вы задумаете поменять URL адрес Вашего сайта то хорошо было бы на старом месте оставить страницу вроде этой:
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<meta http-equiv="Refresh" content="10; URL=http://www.mysite/index.html">
<title>Переадресация</title>
</head>
<body>
<font size="+1">
Адрес сайта был изменен, через 10 секунд Ваш браузер будет автоматически перенаправлен по новому адресу:<br>
<a href="http://www.mysite.ru/index.html"><b>http://www.mysite.ru/</b></a><br>
Нажмите <a href="http://www.mysite.ru/index.html">здесь</a> для того чтобы выполнить переход немедленно.<br>
Приносим извинения за доставленные неудобства.
</font>
</body>
</html>
Разберём и осмыслим строчку из примера:
<meta http-equiv="Refresh" content="10; URL=http://www.mysite/index.html">
meta http-equiv="Refresh" - Refresh (восстановление) указывает браузеру что данную страницу необходимо обновить
content="10; - обновить через заданное количество секунд (в нашем случае десять)
URL=http://www.mysite/index.html"- адрес новой/другой страницы на которую следует перейти.
Пример:
<meta http-equiv="Refresh" content="30">
А вот если в заголовке Refresh URL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.
Такой метод широко используется в новостных лентах, где информация идет так сказать потоком и требует постоянного обновления.
Пример:
<meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=1.0, Transition=0)">
<meta http-equiv ="Page- Exit " Content="RevealTrans(Duration=3.0, Transition=23)">
Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.
- Page-Enter - Эффект появления страницы
- Page- Exit - Эффект исчезновения страницы
В которых:
- Duration - время действия эффекта в секундах
- Transition - Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:
Номер |
Описание эффекта |
Номер |
Описание эффекта |
0 |
Прямоугольники внутрь |
12 |
Растворение |
1 |
Прямоугольники наружу |
13 |
Вертикальная панорама внутрь |
2 |
Круг внутрь |
14 |
Вертикальная панорама наружу |
3 |
Круг наружу |
15 |
Горизонтальная панорама внутрь |
4 |
Наплыв наверх |
16 |
Горизонтальная панорама наружу |
5 |
Наплыв вниз |
17 |
Уголки влево - вниз |
6 |
Наплыв вправо |
18 |
Уголки влево - вверх |
7 |
Наплыв влево |
19 |
Уголки вправо – вниз |
8 |
Вертикальные жалюзи |
20 |
Уголки вправо – вверх |
9 |
Горизонтальные жалюзи |
21 |
Случайные горизонтальные полосы |
10 |
Шажки горизонтальные |
22 |
Случайные вертикальные полосы |
11 |
Шажки вертикальные |
23 |
Случайный выбор эффекта |
Пример:
Файл page1.html
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=1.0, Transition=12)">
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor="#c5ffa0">
<center>
<h2>На заметку:</h2>
<font size="+1">Эффекты перехода с одной страницы на другую работают не во всех браузерах.</font><hr><br>
<font size="+1">Нажмите на "Перейти" чтобы перейти к следующей странице<br>
и оценить эффект перехода от одной странице к другой.</font><br><br>
<a href="page2.html"><font size="+2">"Перейти"</font></a>
</center>
</body>
</html>
Файл page2.html
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=2.0, Transition=23)">
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor="#c0e4ff">
<center>
<h2>На заметку:</h2>
<font size="+1">Эффекты открытия и закрытия веб-страниц будут видны только при переходе <br>
от одной страницы к другой или же при помощи кнопок "назад" "вперёд". <br>
При первом открыти страницы, а также во время перезагрузки<br>
эффекты перехода видны не будут.</font><hr><br>
<font size="+1">Нажмите на "Перейти" чтобы перейти к следующей странице<br>
и оценить эффект перехода от одной странице к другой.</font><br><br>
<a href="page1.html"><font size="+2">"Перейти"</font></a>
</center>
</body>
</html>
-
Ещё раз напомню о том что мета теги стоит применять умело и грамотно особенно это касается команд для робота и кодировки символов, иначе весь Ваш труд может пойти насмарку..
-
Заголовок Refresh (автоматический переход на другую страницу) можно использовать не совсем стандартно.. Некоторые авторы используют его для создания своего рода "презентации" слайд шоу, где сменяющиеся страницы и есть кадры презентации. Представьте заходит человек на такой сайт а тут ему "Откинетесь на спинку кресла и расслабьтесь..":) а далее сами по себе пошли картинки, графики, тексты.. а последняя страница тупиковая где пользователь берёт сайт "в свои руки" или же может замыкаться на первую. Только всегда помните о золотом правиле веб-мастера: Главное не переборщить!
|