СОРОК ТРЕТИЙ УРОК

Meta-теги

Если вы откроете исходник любого мало-мальски грамотного сайта, то вы определенно наткнетесь на целый список meta-тегов, расположенных в заголовке страницы между тегами <head> и </head>. Возьму для примера свой сайт www.dikarka.ru. Если открыть код и просмотреть то, что находится в заголовке, можно найти вот такие записи:

<meta HTTP-EQUIV="content-TYPE" content="text/html; charset=windows-1251"> <meta HTTP-EQUIV="EXPIRES" content="Wed, 06 Apr 2005 10:14:45 GMT"> <meta HTTP-EQUIV="content-LANGUAGE" content=ru> <meta name="DESCRIPTION" content="Дикая правда, дикие уроки создания web-страничек, дикий обжора, дикаркины рассказы, дикие конкурсы"> <meta name="KEYWORDS" content="уроки html, уроки css, уроки рисования, уроки flash, уроки огородникам, рассказы, кулинария, конкурсы, страхование"> <meta name="AUTHOR" content="Валентина Ахметзянова"> <meta name="ROBOTS" content=index,all> <meta name="REVIZIT AFTER" content="5 days">

Какие-то выражения вам покажутся знакомыми, какие-то вы поймете интуитивно, а какие-то вам покажутся полной абракадаброй. Вот и займемся на этом уроке изучением непонятного. Чтобы вы могли сами решить, что использовать на своих сайтах, а что можно и опустить за ненадобностью.

Все мета-теги делятся на две группы: группа HTTP-EQUIV и группа NAME.


meta HTTP-EQUIV="REFRESH"

У меня был такой случай - писала-писала я свои уроки, начиная со странички lessons.html - долго так писала, чуть рука не отсохла. Сайт у меня тогда был то ли во фреймах, то ли просто в таблицах, уже и не припомню. Потом сайт я переделала, ввела технологию SSI (которой мы с вами скоро займемся), и пришлось мне переименить расширения всех страничек из .html в .shtml.

Так как страничек на сайте у меня накопилось порядочно, то и времени на переделку у меня ушло... дай бог памяти... Неделю точно корпела.

Ну вот, пишу дальше свои уроки, радуюсь притоку новых посетителей. Но недолго. Стали мне приходить гневные письма, смысл которых был примерно следующим: "аааааааааа! Где уроки???? Я же их поставил(а) в любимые ссылки, каждое утро с них и начинал(а), а теперь што? Теперь там голое место! Вертайте все назад!" Ну и дальше в том же духе. Типа как я могла, как мне не стыдно и требовали прекратить это безобразие и вернуть все "как раньше стояло".

Как же я расстроилась! Ну не поворачивать же прогресс вспять! Да даже если я поверну... меня же закидают помидорами новые ученики, которые уже пришли на новые страницы! Можно было конечно две версии дальше писать. Но это еще глупее. Думала я, думала... и наконец придумала! Написала я одну страничку lessons.html следующего содержания: "Mилые граждане, уроки переехали на новый адрес!" И ссылку дала. А для особо непонятливых, написала в заголовке head странички код:

<html lang="ru"> <HEAD> <TITLE>Переход на другую страничку</TITLE> <meta HTTP-EQUIV="REFRESH" content="1; URL=http://www.dikarka.ru"> </HEAD> <BODY> <h1>Mилые граждане, уроки переехали на новый адрес!</h1> <a href="http://www.dikarka.ru">ДИКАЯ ПРАВДА</a> </BODY> </HTML>

Видите, я специально выделила жирным нужную строчку. Как раз она и отвечает за загрузку новой странички www.dikarka.ru И сделает она ровно через секунду, так как я написала content="1;..." А если страничка вдруг не загрузится, то, на всякий случай я ссылочку поставила. a href="www.dikarka.ru", чтобы уж наверняка мой уважаемый посетитель не удрал на чужой сайт.

Вот эта ССЫЛКА

Еще один момент. Если у вас сайт часто обновляем, например вы туда запихиваете каждую минуту новости, то можете написать вместо переадресации адрес той же странички с кодом content="60". И она будет обновлять сама себя каждые 60 секунд! В этом случае адрес не нужно указывать. Просто напишите

<meta HTTP-EQUIV="REFRESH" content="60">

Вот и все! Такая вещь очень полезна в чатах. Если мы дойдем до уроков PHP когда-нибудь, то обязательно воспользуемся этим meta-тегом. Только напомните! А то ведь я и забыть могу. И будут тогда ваши чатлане сидеть и часами ждать когда же их мудрые изречения появятся на свет божий. И, скорей всего, они сбегут с такого чата, возмущенные таким к себе отношением.

Хотя, скажу прямо, существует и другой способ переадресации страницы с помощью средств JavaScript. И, чтобы не делать отдельный урок, я этот скрипт тут и приведу, ладно? Просто нужно вставить следующий код в любое место вашей странички

<script language="JavaScript"> window.location.href = "http://www.dikarka.ru" </script>

И уверяю вас, вы и пикнуть не успеете, как перенесетесь по заветному адресу на www.dikarka.ru. Как раз в мои объятья.


meta HTTP-EQUIV="content-TYPE"

Вообще, бывают мета-теги как необязательными (в предыдущем примере), так и обязательными. Вот этот тег - тег кодировки - является очень даже обязательным. И отвечает он за правильное отображение текста. Наверняка приходилось вам бывать на сайтах, где вместо букв - непонятные слова и знаки. Думаю, вы мысленно ругаете такого горе-дизайнера самыми обидными словами. Но нас с вами теперь уж никто точно никто не обругает, и если нам, например нужна кирилица (windows), мы сразу напишем замечательную строчку:

<meta HTTP-EQUIV="" content-TYPE"" content="text/html; charset=Windows-1251">

Вот еще некоторые значения, которые могут использоваться:

  • KOI8-r - Кириллица (КОИ8-Р)
  • Windows-1252 - Западная Европа (Windows)
  • cp866 - Кириллица (DOS).

Так что дерзайте! Единственно, убедитесь в том, что ваш сервер не переиначит все по своему. А то ведь и такое бывает - пишешь одну кодировку, сервер, не читая изменяет ее на другую, а в результате получается каша, расхлебывать которую придется вам.


meta HTTP-EQUIV="EXPIRES"

Наверняка вы замечали, что когда попадаете повторно на чей-то сайт, то он грузится гораздо быстрее, чем в первый раз. Это все благодаря кэшированию. Сайт забивается в память вашего компьютера, и при повторной загрузке моментально выкладывает его содержимое. Это все здорово для статичных сайтов, содержимое которых не меняется. Но как же быть, если документ изменился?

Например вы сделали замечательный сайт, людям он очень понравился, они даже подписались на все ваши рассылки. А вы и рады стараться. Обновили сайт, добавили туда кучу новой полезной информации и разослали всем своим подписчикам письма - типа приходите, любуйтесь, пользуйтесь, мне не жалко! Это все для вас! Ну, народ, бросив все свои дела, рванулся к вам за свежатенькой, а там - событья трехмесячной давности. Короче, вы один только и любуетесь на свои изменения и удивляетесь падению интереса к вашему уникальному ресурсу!

Возможно, вы вообще бы решили прекратить сеять доброе и вечное, раз такая черная людская неблагодарность, не попадись вам под руку сегодняшний урок. И о счастье! Вы скорее открываете код своего сайта и пишите следующую строчку:

<meta HTTP-EQUIV="EXPIRES" content="Wed, 06 Apr 2005 10:14:45 GMT">

И это будет означать - с 6 апреля 2005 года 10 часов 14 минут 45 секунд по Гринвичу прошу считать документ устаревшим и загрузить в кэш новую версию сайта! И тут же старый кэш сотрется, а новый забьется. До нового вашего распоряжения.

Вот уж народ возрадуется, вот уж возликует, вот уж не только сам притащится на сайт, но и знакомых, родственников и всех друзей притащит. Что значит сила meta-тега!


meta HTTP-EQUIV="PRAGMA"

А с помощью этого meta-тега вы можете вообще запретить кэширование вашего документа. Просто нужно написать строчку

<meta HTTP-EQUIV="PRAGMA" content="NO-CACHE">

Вот и все! Коротко и ясно!


meta HTTP-EQUIV="content-LANGUAGE"

В этом случае вы можете сразу указать, какой язык вы используете. Для этого достаточно указать в стандарте ISO двухсимвольное имя языка, используемого на вашем сайте. Для русского это будет "ru", для английского - "en", немецкого - "de", французского - "fr", итальянского - "it", японского - "ja", и так далее. Можно даже указать диалект. Так, "en-US" будет означать "английский язык. Американская версия", а "en-GB" - английский язык. Великобритания. А вто и два примерчика. Думаю, они вам будут понятны и без пояснений:

<meta HTTP-EQUIV="content-LANGUAGE" content="en-GB"> <meta HTTP-EQUIV="content-LANGUAGE" content=ru>


meta HTTP-EQUIV="CACHE-CONTROL"

С помощью этого тега вы можете управлять кэшированием вашего сайта. Чтобы долго не рассусоливать по каждому пункту, просто приведу тут все возможные значения.

  • NO-CACHE. Запрет на кэширование
  • PRIVATE. Браузером может кэшироваться, но proxy-сервером - ни за что!
  • PUBLIC. Будет кэшироваться при любых обстоятельствах
  • NO-STORE. Кэшироваться будет, но в историю не попадет.

Будет это выглядеть примерно так:

<meta HTTP-EQUIV="CACHE-CONTROL" content="private">

А теперь перейдем к meta-тегам группы "NAME".


meta name="KEYWORDS"
и
meta name="DESCRIPTION"

Наверняка вы уже встречались с этими тегами. Однако для полноты картины расскажу и о них. Может кому-то это и будет в диковинку.

Эти два тега служат для описания вашего сайта. И помогают поисковым системам вывести о вашем сайте правильную информацию. Вернее, это раньше так было. Можно было внести в ключевые слова чуть ли не всю советскую энциклопедию и радоваться обилию посетителей и первым местом в поисковых системах, теперь этот номер не пройдет. Теперь эти слова вообще не учитываются. Но по привычке люди пишут и пишут ключевые слова. Привычка, понимаете ли. Я вот тоже никак не могу избавиться от этой привычки и в каждую страничку запихиваю все слова, по которым, мне кажется все помчатся на мой сайт. Может и зря пишу, а может и не зря. Так что можем написать вместе:

<meta name="KEYWORDS" content="уроки html, рассказы, кошки, собаки, конкурсы, кулинария">

А вот к другому тегу DESCRIPTION отнеситесь, пожалуйста, с большим уважением. Представьте, что это маленький анонс вашей странички. И вот этот анонс тот же Яндекс вывесит вместе с результатом поиска. Если же нет, то он выхватит первый попавшийся текст, который может абсолютно ничего не сказать вашему возможному посетителю.

Вот я возьму и наберу в строчке поиска Яндекса фразу "дикая правда". И получу на первой странице следующие ссылки:

  1. ДИКАЯ ПРАВДА
    У каждого своя правда Вот у меня она - дикая И мои Дикие уроки мастерства - не исключение!
  2. А район там хороший,да дикий > правда....:)Хе - хе
  3. ..Полное ощущение "дежа вю", только за окном - Москва, а не Барнаул, и вместо страшной неизвестности - дикая правда
  4. Прапор... дикий.... правда мал ещё )
  5. это кстати, не сарказм. и дикая правда. ну вы считайте

Видите, только в первом случае связная информация, в остальных же случаях - какие-то вырванные фразы, и естесственно, посетитель скорее всего не пойдет туда, где непонятно что его ждет. Хотя, бывают и исключения.

Но вы старайтесь писать грамотно, кратко и так, чтобы посетитель сразу же захотел пойти только по вашей ссылке! Пусть описание не влияет на рейтинг, но зато помогает ориентироваться посетителю. И придут к вам как раз те, которые так нуждаются в ваших трудах!

Так что как описать свой сайт, каждую свою страничку - решайте сами. Но опишите обязательно. А я напишу вот так:

<meta name="DESCRIPTION" content="Дикая правда. Самые дикие и веселые уроки создания собственных web-страничек. А также Дикие конкурсы, Дикие рассказы и Дикая кулинария. Присоединяйтесь!">


meta name="DOCUMENT-STATE"

Этот тег указывает поисковикам нужно ли им присылать своих роботов для переиндексации или достаточно одного раза. Поэтому, если у вас статичная страница, можете написать

<meta name="DOCUMENT-STATE" content="Static">

В противном случае, замените на content="Dynamic". И тогда робот будет приходить сам и обновлять данные ваших страничек


meta name="REVIZIT AFTER"

Этот тег очень похож на предыдущий, но здесь можно указывать через сколько дней приглашать робота для переиндексации

<meta name="REVIZIT AFTER" content="7 days">

И будьте уверены, робот-полицейский раз в неделю, как на работу будет приходить и делать свою работу. И что радует, совершенно бесплатно!


meta name="ROBOTS"

А с этим тегом мы можем давать разные указания роботу, что можно индексировать, а что нет. Мало ли, владелец сайта решил держать все свои секреты на секретной странице секретного сайта. И никому об этом не сказал. А роботу что? Его дело маленькое. Ну, попросил его кто-то найти домашний рецепт изготовления водородной бомбы или там имя любовницы своего шефа, ну он и рад стараться. Залез на засекреченный сайт, все списал и выложил для ознакомления почтеннейшей публике. И все! Пропал секрет!

Вот поэтому и был для этого разработан специальный тег для роботов. И разные значения тоже разработали. Вот они:

Возможные варианты:

  • INDEX - документ можно индексировать
  • NOINDEX - нельзя индексировать
  • FOLLOW - если в документе есть ссылки, указывающие на другие страницы, то их индексировать можно
  • NOFOLLOW - если нет ссылок на документы, то нельзя индексировать
  • ALL - можно все инедксировать
  • NONE - ничего нельзя индексировать

Пример, когда можно идексировать сайт, но если ссылок на какие-то страницы нет, туда не лезть!

<meta name="ROBOTS" content="INDEX,NOFOLLOW">

Пожалуй, это все, что может вам пригодиться. Есть еще много других мета-тегов, которые не столь популярны.

Единственно, могу еще посоветовать в код своей странички поместить свою фамилию и авторские права. Мало ли... кто-то возьмет и сопрет весь ваш сайт вместе с потрохами. И выложит на сервер и заявит, что все это его! Но не на того напали! Вы откроете его код и ткнете носом в свои иницалы. Тут ему и стыдно станет. Конечно же, он может и сам догадаться и переправить ваши права на свои. Но, надеюсь, до этого дело не дойдет!

А написать можно примерно так:

<meta name="AUTHOR" content="Валентина Ахметзянова"> <meta name="COPYRIGHT" content="Это все мое. Прошу не тырить!">

Ну вот, вроде и подстраховались.


К списку всех уроков

(В. Ахметзянова, 2005 г)