Метатеги используются для хранения информации предназначенной для браузеров
и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам
для получения описания сайта, ключевых слов и других данных.
Метатеги для поисковых механизмов
Среди разработчиков сайтов существует мнение, что правильно написанные
метатеги позволяют подняться к верхним строчкам поисковых серверов.
На самом деле это не так, на одних метатегах высоко не поднимешься,
но и неудачно выполненное содержимое метатегов может ухудшить рейтинг
сайта.
Два метатега предназначены специально для поисковых серверов: description
(описание) и keywords (ключевые слова). Некоторые
вебмастера добавляли в раздел keywords ключевые
слова, которые не имеют никакого отношения к теме сайта, но зато пользовались
определенным успехом среди посетителей поисковиков. Однако, через некоторое
время, поисковые системы научились бороться с таким явлением и проверяют содержимое
веб-страницы на соответствие заявленным ключевым словам.
Некоторые принципы, относящиеся к метатегам:
- не включайте ключевые слова, которые не содержатся на ваших страницах;
- не повторяйте ключевые слова;
- используйте метатеги по их прямому назначению;
- делайте описание и список ключевых слов различными для каждой страницы
сайта с учетом содержимого.
description
Большинство поисковых серверов отображают содержимое поля description
(пример 1) при выводе результатов поиска.
Если этого тега нет на странице, то поисковый движок просто перечислит первые
встречающиеся слова на странице, которые, как правило, оказываются не очень-то
и в тему.
Пример 1. Использование Description
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>description</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Сайт об HTML и создании сайтов">
</head>
<body>
<p>...</p>
</body>
</html>
keywords
Этот метатег был предназначен для описания ключевых слов, встречающихся на
странице (пример 2). Но в результате действия людей, желающих попасть в
верхние строчки поисковых систем любыми средствами, теперь дискредитирован.
Поэтому многие поисковики пропускают этот параметр.
Пример 2. Использование Keywords
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>keywords</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Keywords" content="HTML, META, метатег, тег, поисковая система">
</head>
<body>
<p>...</p>
</body>
</html>
Ключевые слова можно перечислять через пробел или запятую. Поисковые системы
сами приведут запись к виду, который они используют.
Автозагрузка страниц
Чтобы автоматически загружать новый документ через определенный промежуток
времени используется инструкция http-equiv=»refresh»
(пример 3).
Пример 3. Автозагрузка страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Автозагрузка</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="refresh" content="5; URL=http://www.htmlbook.ru">
</head>
<body>
<p>...</p>
</body>
</html>
Браузер поймет эту запись, как ожидать 5 секунд, а затем загрузить новую страницу,
указанную в параметре URL, в данном случае это переход на сайт htmlbook.ru.
Этот метатег позволяет создавать перенаправление (редирект) на другой сайт.
Если URL не указан, произойдет автоматическое обновление текущей страницы через
количество секунд, заданных в атрибуте content.
Кодировка
Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы,
необходимо установить параметр <meta http-equiv=»Content-Type»
content=»text/html; charset=имя кодировки»>. Для операционной системы
Windows и кириллицы charset обычно принимает
значение utf-8 или windows-1251 (пример 4).
Пример 4. Выбор текущей кодировки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Кодировка</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<p>Кириллица</p>
</body>
</html>
Если указание кодировки отсутствует, браузер пытается сам определить, какой
тип символов используется в документе и выбирает необходимую кодировку автоматически.
Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях
предлагает вьетнамскую кодировку вместо кириллицы. По этой причине лучше всегда
указывать приведенную строчку. Тем не менее, возникают обстоятельства, когда
указание кодировки может принести определенный вред. Например, веб-сервер автоматически
использует перекодирование данных в KOI-8, а браузер, встретив параметр charset=windows-1251,
переводит текст в кодировку Windows. Получается двойное изменение символов,
прочитать такой текст не просто. К счастью, подобная проблема уже отходит в
прошлое, во всяком случае, ее легко можно выявить и нейтрализовать на уровне
сервера.
Мета-теги
Если вы откроете исходник любого мало-мальски грамотного сайта, то определенно наткнетесь на целый список meta-тегов, расположенных в заголовке страницы между тегами <HEAD> и &tl;/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=»Помощь в создании собственного сайта. Уроки html, css, javascript, flash, рисования. Рассказы и биографии. Сад и огород. Поздравления с праздником и кулинария. Автолюбителям. Страхование. Помощь инвалидам. Уголок юриста и адвоката»>
<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 следующего содержания: «Милые граждане, уроки переехали на новый адрес!» И ссылку новой странички написала. А для особо непонятливых, написала в заголовке <HEAD> странички код:
Листинг 1. Страничка lesson.html
<HTML>
<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>
Обратите внимание на строчку
<META HTTP-EQUIV=»REFRESH»
Как раз она и отвечает за загрузку новой странички 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 отнеситесь, пожалуйста, с большим уважением. Представьте, что это маленький анонс вашей странички. И вот этот анонс тот же Яндекс вывесит вместе с результатом поиска. Если же нет, то он выхватит первый попавшийся текст, который может абсолютно ничего не сказать вашему возможному посетителю.
Вот я возьму и наберу в строчке поиска Яндекса фразу «дикая правда». И получу на первой странице следующие ссылки:
- ДИКАЯ ПРАВДА.
У каждого своя правда. Вот у меня она – дикая. И мои Дикие уроки мастерства — не исключение! - А район там хороший, да дикий > правда….:)Хе — хе
- ..Полное ощущение «дежа вю», только за окном — Москва, а не Барнаул, и вместо страшной неизвестности — дикая правда
- Прапор… дикий…. правда мал ещё )
- это кстати, не сарказм. и дикая правда. ну вы считайте
Видите, только в первом случае связная информация, в остальных же случаях — какие-то вырванные фразы, и естественно, посетитель скорее всего не пойдет туда, где непонятно что его ждет. Хотя, бывают и исключения.
Но вы старайтесь писать грамотно, кратко и так, чтобы посетитель сразу же захотел пойти только по вашей ссылке! Пусть описание не влияет на рейтинг, но зато помогает ориентироваться посетителю. И придут к вам как раз те, которые так нуждаются в ваших трудах!
Так что как описать свой сайт, каждую свою страничку — решайте сами. Но опишите обязательно. А я напишу вот так:
<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=»Это все мое. Прошу не тырить!»>
Ну вот, вроде и подстраховались.
Мета-тег (англ. metainformation — метаинформация) – это тег, в котором может содержаться описание веб-страницы, ключевые слова, информация об авторе, управляющие команды для поисковых машин/браузеров и т.д.
Если правильно использовать МЕТА-теги, то это может послужить хорошим способом раскрутки сайта/блога.
Размещается мета-тег в голове HTML-документа между тегами <head></head>.
Мета-тег обозначается тегом <meta> и имеет следующие атрибуты:
- http-equiv – служит для преобразования мета-тега в заголовок HTTP.
Пример: <meta http-equiv=» » Content=» «> - name – имя мета-тега (применяется в паре с атрибутом content).
Пример: <meta name=» » Content=» «> - content – указывает значение атрибута, который был задан с помощью name или http-equiv.
Пример: <meta name=» » Content=» «> - charset – кодировка HTML-документа.
Пример: <meta charset=» «>
Закрывающий тег для <meta> не нужен.
Теперь примеры с описанием:
HTML-кодировка веб страницы:
Чтобы указать браузеру, в какой HTML-кодировке была сохранена веб-страница, необходимо указывать в мета-теге вот такие данные:
<meta http-equiv="Content-Type" content="text/html; charset=имя кодировки">
Обычно имя кодировки задают в Windows-1251 либо utf-8.
Пример:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Кодировка</title> </head> <body> содержание </body> </html>
Подробней о кодировке вы можете почитать тут.
Информация о документе
Если вам нужно указать информацию о владельце (авторе) сайта/блога или компании используйте следующий мета-тег:
<meta name="author" content="имя автора" />
или
<meta name=»copyright» content=»Сайт фирмы ЖЖЖ» />
Пример:
<html> <head> <meta name="author" content="Вини Пух" /> <title>Автор</title> </head> <body> содержание </body> </html>
Описание страницы
Для краткого описания веб-страницы используйте следующие значения в мета-теге «description»:
<meta name="description" Content="краткое описание веб-страницы">
Пример:
<html> <head> <meta name="description" Content="Интересная и полезная статья о мета-тегах!"> <title>Автор</title> </head> <body> содержание </body> </html>
Описание в description не должно превышать 200 символов.
Ключевые слова
Чтобы указать поисковой машине, какие на веб-странице присутствуют ключевые слова, нужно использовать в мета-теге следующее значение «keywords».
Пример:
<html> <head> <meta name="keywords" Content ="мета-тег,описание,html"> <title>Ключевые слова</title> </head> <body> содержание </body> </html>
Максимальное количество ключевых слов в теге keywords не более 5-6 слов.
Кстати, рекомендую вам почитать полезную статью о том, как грамотно составить мета-теги.
Адрес
Чтобы указать электронную почту автора и адрес сайта/блога, используйте следующее значение в мета-теге:
Publisher-Email – адрес электронной почты;
Publisher-URL – адрес сайта.
<meta name="Publisher-Email" Content="адрес электронной почты"> <meta name="Publisher-URL" Content="http://www.адрес_сайта/">
Пример:
<html> <head> <meta name="Publisher-Email" Content="test-bloggood@mail.ru"> <meta name="Publisher-URL" Content="/"> <title>Адрес</title> </head> <body> содержание </body> </html>
Обновление страницы
Если вы часто обновляете страницу сайта, вы можете сообщить поисковому роботу, когда прийти ему снова и проиндексировать обновленную страницу.
<META NAME="Revisit-After" CONTENT="10 days">
Пример:
<html> <head> <META NAME="Revisit-After" CONTENT="10 days"> <title>Обновление страницы</title> </head> <body> содержание </body> </html>
Через 10 дней должен прийти робот и повторно проиндексировать страницу. Хотя многие веб-мастера утверждают, что поисковый робот не будет подчиняться и придет индексировать по собственному расписанию.
Время жизни документа в КЭШе
Чтобы ускорить загрузку веб-страницы, браузеры сохраняют веб страницу в КЭШ (на жестком диске). Если вы поменяете шапку сайта, то, возможно, посетитель, который недавно заходил на ваш сайт изменений не увидит. Вся причина в КЭШе.
Чтобы заставить браузер загружать веб-страницу не с КЭШа, а напрямую с сервера, нужно для этого указать в мета-теге день недели, число, месяц, год, время (чч:мм:сс) и часовой пояс.
<meta http-equiv="expires" content="Sun, 24 May 2014 12:28:36 GMT+03:00">
Пример:
<html> <head> <meta http-equiv="expires" content="Sun, 24 May 2014 12:28:36 GMT+03:00"> <title>КЭШ</title> </head> <body> содержание </body> </html>
Таблица сокращений слов на месяцы
Таблица сокращений слов на дни недели
Команды для поисковых систем
<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">
Список команд для поисковых роботов:
- Index – разрешение на индексацию веб-страницы;
- Noindex – не индексировать веб-страницу;
- Follow – прослеживать ссылки на веб-странице;
- Nofollow – не прослеживать ссылки на веб-странице;
- All – индексировать страницу и прослеживать ссылки на веб-странице (по умолчанию);
- None – не индексировать страницу и не прослеживать ссылки на веб-странице
Пример:
<html> <head> <META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW"> <title> Команды для поисковых систем</title> </head> <body> содержание </body> </html>
Автоматический переход на другую страницу
Если вам нужно перенаправить пользователя из одной страницы на другую через какой-то промежуток времени, вы можете использовать вот такой способ:
<meta http-equiv="Refresh" content="8; URL=/">
Настройка:
content=»8; — время, через которое пользователь автоматически перенаправится на другую страницу. В данном примере это будет через 8 секунд.
url=» – замените адрес или страницу, на которую вы хотите отправить пользователя.
Пример:
<html> <head> <meta http-equiv="Refresh" content="8; URL=/"> <title> Автоматический переход на другую страницу</title> </head> <body> содержание </body> </html>
Красивые эффекты при переходе по ссылке
Красивые эффекты при переходе по ссылке работают, к сожалению, не во всех браузерах (эффект работает только в Internet Explorer):
<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 – см. в таблице снизу)
Таблица номеров эффектов для «Transition»:
Пример:
Сохраните файл как «1.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> Эффекты перехода страниц – СТРАНИЦА №1 </h2> <font size="+1"> Красивые эффекты при переходе по ссылке работают, к сожалению, не во всех браузерах (эффект работает только в Internet Explorer).</font><hr><br> <a href="2.html"><font size="+2">"Далее"</font></a> </center> </body> </html>
Сохраните файл как «2.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> Эффекты перехода страниц – СТРАНИЦА №2 </h2> <font size="+1"> Красивые эффекты при переходе по ссылке работают, к сожалению, не во всех браузерах (эффект работает только в Internet Explorer).</font><hr><br> <a href="1.html"><font size="+2">"Далее"</font></a> </center> </body> </html>
Какие мета-теги использую я
HTML-кодировка веб страницы:
<meta http-equiv="Content-Type" content="text/html; charset=имя кодировки">
Описание страницы:
<meta name="description" Content="краткое описание веб-страницы">
Ключевые слова:
<meta name="keywords" Content ="ключевые слова через запятую">
Автоматический переход на другую страницу (редко):
<meta http-equiv="Refresh" content="8; URL=http://ваш-сайт/">
Вот, пожалуй, это все, что я хотел рассказать о мета-тегах.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Популярные статьи:
Добавить комментарий
Метки: html, основы
Опубликовано: 25.06.2010 Последняя правка: 08.12.2015
Тег <META> применяется для указания информации об HTML-документе, которая помогает браузерам правильно отображать страницы, а поисковым машинам — их индексировать. Теги <META> иначе называются метатегами, а информация, которую они содержат — метаданными. Это могут быть данные о кодировке веб-страницы, ее авторе, данные содержащие ключевые слова и описание и т.д.
Атрибуты
Личные атрибуты:
- name — Задает имя метатега, чтобы браузерам и поисковикам было понятно к какому типу относится информация указанная в content.
- http-equiv — Тоже имя метатега, но указывает название HTTP-заголовка. Является заменой атрибуту name в тех случаях, когда данные передаются по HTTP.
- content — Обязательный атрибут. Содержит значение метатега.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: документ.
Модель тега: может располагаться только в «шапке» документа, внутри элемента <HEAD>, в любом количестве.
Может содержать: данный элемент является пустым/Empty.
Открывающий тег: необходим. Закрывающий тег: запрещен.
Синтаксис
<head>
<meta content="значение">
</head>
Список метатегов заданных элементом <META>
Мета-тег и описание | Пример |
---|---|
author — Содержит имя автора документа. | <meta name=«author» content=«Иван Иванов»> |
copyright — Информация об авторских правах. | <meta name=«copyright» content=«Сopyright 2011 BestCompany»> |
description — Осмысленное описание веб-страницы, которое отображается в поисковике при выдаче запроса. | <meta name=«description» content=«Описание тега META, и его атрибутов.»> |
keywords — Список ключевых слов через запятую. | <meta name=«keywords» content=«HTML справочник, тег, META, атрибуты»> |
robots noindex — Запрещает поисковикам индексировать содержимое страницы. | <meta name=«robots» content=«noindex»> |
robots nofollow — Запрещает поисковикам переход по ссылкам на странице и их индексацию. | <meta name=«robots» content=«nofollow»> |
robots none — Запрещает поисковикам индексацию содержимого и ссылок. | <meta name=«robots» content=«none»> |
Content-Language — Указывает основной язык, используемый на странице. | <meta http-equiv=«Content-Language» content=«en»> |
Content-Type — Информация о кодировке страницы. | <meta http-equiv=«Content-Type» content=«text/html; charset=windows-1251»> |
pragma no-cashe — Запрещает браузеру брать веб-страницу из кэша. Соответственно, при каждом обновлении страницы — она будет полностью загружаться с сервера. | <meta http-equiv=«pragma» content=«NO-CACHE»> |
refresh — Автоматический редирект (перенаправление) с текущей страницы — на указанную через заданный в секундах интервал (число с точкой с запятой (;)). | <meta http-equiv=«refresh» content=«4;url=https://spravka.seodon.ru/html/meta.php»> |
Конечно, это далеко не все существующие метатеги, да и эти не всегда нужны. Но желательно на всех страницах указывать Content-Type, description и keywords.
Для запрета индексации содержимого страницы также можно использовать тег <NOINDEX>, который поддерживается отечественными поисковыми системами.
Пример HTML: применение тега META
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>seodon.ru - Применение тега META</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<meta name="author" content="Автор документа">
<meta name="copyright" content="© 2011 Имя или название">
<meta name="description" content="Описание документа">
<meta name="keywords" content="ключевые слова">
</head>
<body>
<p>Контент.</p>
</body>
</html>
Результат примера
Поддержка версиями HTML
Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
Поддержка: | Да | Да | Да | Да | Да |
От автора: вопрос кодировок является, без сомнения, одним из актуальных вопросов рано или поздно встающим перед любым веб-мастером. Практически каждый из нас сталкивался с такой, порой довольно неприятной, проблемой, как проблема корректного отображения информации на сайте, т.е. вывод ее на экран в нужной нам кодировке. Несмотря на то, что этот вопрос почти всегда решается очень легко, и ничего сложного в нем нет. Сейчас в сети можно часто увидеть вопросы о всевозможных «кракозябрах, вопросах и ромбиках» на сайте.
1. Кодировка при работе без использования баз данных
Забегая вперед, давайте сразу сформулируем основной тезис, придерживаясь которого мы значительно облегчим себе работу:
Кодировка в Вашем проекте должна быть универсальной.
Какое значение вкладывается в этот термин — «универсальная»? Это значит, что все составляющие создаваемого проекта, которые так или иначе касаются кодировок, должны иметь единую кодировку. Чтобы понять эту мысль разобьем сформулированный тезис на пункты, которые затем поэтапно разберем:
1. Содержимое всех файлов должно иметь единую кодировку.
2. Заголовки должны передавать единую кодировку.
3. В качестве кодировки сервера необходимо установить единую кодировку.
4. Кодировка соединения с БД также не должна отличаться от кодировки создаваемого проекта.
Это 4 основных правила, которые и являются составляющими сформулированного тезиса. Давайте теперь разберем каждый из этих пунктов.
Итак, на сервере создадим файл index.php, содержимое которого сохраним в кириллической кодировке. Сделать это можно, например, в редакторе Notepad++ через пункт меню Кодировки.
Узнать текущую кодировку файла можно взглянув в строку состояния редактора (в нижней панели).
Здесь уместно дать небольшой совет. При создании сайтов лучше пользоваться одной из двух кодировок: кириллической (windows-1251) или юникод без сигнатуры BOM (utf-8 without BOM). При этом следует знать, что юникод более универсален. Эта кодировка содержит большее количество символов, а потому идеально подойдет для мультиязычных сайтов, в то время как с кириллической кодировкой здесь могут возникнуть проблемы. Есть еще ряд нюансов при использовании юникода. В общем, лучше использовать ту кодировку, которая более универсальна, но если Ваш сайт содержит только кириллические символы, то никто не запрещает использовать Вам windows-1251, тем более, что она также имеет свои плюсы (детальнее об этом, возможно, в одном из следующих уроков).
Отлично, кодировка нашего файла кириллическая (windows-1251). У всех остальных файлов проекта, согласно первому пункту, кодировка должна быть аналогичной. В мета-тегах (между тегами head) также укажем эту кодировку:
<meta http—equiv=«content-type» content=«text/html; charset=windows-1251» /> |
Выведем какой-нибудь текст кириллицей на страницу:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»> <html xmlns=«//www.w3.org/1999/xhtml»> <head> <meta http—equiv=«content-type» content=«text/html; charset=windows-1251» /> <meta name=«keywords» content=«» /> <meta name=«description» content=«» /> <title>Кодировки</title> <link href=«» rel=«stylesheet» type=«text/css» /> </head> <body> <p>Тестовая строка</p> </body> </html> |
Сохраним файл и попробуем открыть его в браузере… На экран выводится нечитабельная строка — набор вопросительных знаков вместо букв.
Почему так? Ведь мы сохранили файл в кириллической кодировке, в мета-теге также прописали нужную кодировку, но это не помогло. Если мы взглянем, в какой именно кодировке браузер отобразил нам текст, то увидим UTF-8.
При этом если мы выставим в браузере вручную нужную нам кодировку, то текст станет читабельным, но… до следующего обновления страницы в браузере. Еще раз зададимся вопросом, почему так произошло? Почему браузер никак не отреагировал на кодировку указанную в мета-теге?
«Виноват» здесь не браузер, а сервер. Дело в том, что сервер отсылает в браузер так называемые заголовки, где указывается кодировка, в которой браузер должен отобразить содержимое файла. В качестве кодировки сервер берет кодировку по умолчанию, т.е. так называемую дефолтную кодировку сервера. Посмотреть дефолтную кодировку сервера можно в конфигурационном файле httpd.conf, расположенном на сервере в каталоге usr\local\apache\conf\. Здесь кодировка задается в строке AddDefaultCharset. Здесь же мы можем изменить кодировку на нужную нам, при этом не забывая после внесения изменений перезапускать сервер.
Но изменить кодировку получится только на локальном сервере. На сервере в сети хостер нам просто не даст доступ к конфигурационному файлу сервера… и правильно сделает 🙂 Что же нам делать в таком случае? Неужели придется подстраиваться под настройки сервера? Конечно же нет. Для решения этой задачи существует 2 варианта, отвечающих за второй и третий сформулированные нами выше пункты.
Согласно второму пункту мы можем самостоятельно передать в заголовках необходимую кодировку. Делается это при помощи функции header(), в параметрах которой мы укажем тип документа и, собственно, кодировку. В самом верху файла (перед объявлением доктайпа (типа документа)) добавим строку кода:
<?php header(«Content-type: text/html; Charset=windows-1251»); ?> |
Если теперь обновить страницу в браузере, то увидим читабельный текст в кириллической кодировке. Замечательно — мы решили задачу! Путем передачи заголовков мы указали нужную нам кодировку. Но этот вариант не совсем универсален. Дело в том, что заголовки передаются посредством функции header(), т.е. для этого мы используем средства PHP. Но что же тогда делать, если файлы нашего проекта имеют расширение html? В файлах с таким расширением по умолчанию код PHP не выполняется, соответственно — заголовки не будут отправлены. Результат — вновь нечитабельный текст в браузере.
Альтернативой является второе решение (пункт 3), которое гораздо более универсальнее первого. Итак, согласно пункта 3 мы должны установить дефолтной кодировкой сервера нужную нам. Но как это можно сделать, если к конфигурационному файлу сервера мы доступа не имеем? Очень просто. Предусмотрен специальный файл, в котором можно изменять некоторые настройки сервера, в частности — дефолтную кодировку. Файл этот не имеет расширения и называется .htaccess (с точкой в начале имени файла). В самом файле достаточно прописать ту же строку, что и в конфигурационном файле сервера, но с указанием необходимой кодировки:
AddDefaultCharset windows—1251 |
Сервер при этом перезапускать не нужно, поскольку фактически мы ничего не изменяем в его настройках, а просто «говорим» серверу, что в качестве дефолтной кодировки следует использовать ту, которую мы только что указали.
Теперь файлы открываются в «правильной» (нужной нам) кодировке (функцию header() теперь нет надобности использовать) и кодировка нашего проекта не будет зависеть от настроек сервера того или иного хостера.
Но помните, если мы нарушим сформулированный нами тезис об универсальности кодировки и, к примеру, при установленной в качестве дефолтной кодировки кириллице перекодируем содержимое файлов в юникод, то получим знаменитые «кракозябры».
2. Проблема кодировки при работе с базой данных
Теперь взглянем на ту же проблему, но с использованием в работе БД. Дело в том, что в таблицах БД лежит текст, и эти таблицы также могут иметь свою кодировку. Поскольку я использую в качестве сервера Денвер, который настроен под кириллическую кодировку, то логично, что для хранения информации в БД по умолчанию используется также кириллическая кодировка.
Не будем ничего изменять в настройках и при создании БД и таблицы оставим все как есть, т.е. будет использована кириллическая кодировка. Хотя, забегая вперед, можно сказать, что если бы мы создали таблицы в нужной нам кодировке, то это совсем не означает, что данные будут выведены в этой же кодировке… вся хитрость в том, что здесь существует такой параметр, как кодировка соединения с БД. Вот ее то мы и будем использовать для достижения нужного результата.
Итак, создадим файл с кодировкой юникод (поскольку мы заранее знаем, что данные из БД будут выведены в кириллической кодировке), т.е. мы таким образом поставили перед собой в учебных целях проблему, которую и попытаемся решить… как говорится, тяжело в учении… 🙂
При создании файла не забудем передать в заголовках нужную нам кодировку, поскольку в файле .htaccess указана сейчас кириллическая кодировка, но мы хотим, чтобы новый файл работал корректно в юникоде:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php header(«Content-type: text/html; Charset=utf-8»); ?> <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»> <html xmlns=«//www.w3.org/1999/xhtml»> <head> <meta http—equiv=«content-type» content=«text/html; charset=utf-8» /> <meta name=«keywords» content=«» /> <meta name=«description» content=«» /> <title>Кодировка при работе с БД</title> <link href=«» rel=«stylesheet» type=«text/css» /> </head> <body> </body> </html> |
Теперь создадим БД charset и в ней таблицу test с двумя полями:
id, тип INT, первичный ключ, автоинкремент;
text, тип VARCHAR, длина 255.
В таблицу поместим единственную запись в поле text:
Эту запись мы и будем выводить на экран. Для этого пропишем соединение с сервером MySQL, выберем БД для работы и запросом выберем необходимые данные (все это мы уже проделывали в ряде предыдущих уроков, а потому подробно останавливаться на объяснении всего этого — нет оснований):
<?php header(«Content-type: text/html; Charset=utf-8»); mysql_connect(«localhost», «root», «») or die(«Can’t connect to server»); mysql_query(«SET NAMES ‘utf8′») or die(«Can’t set charset»); mysql_select_db(«charset») or die(«Can’t select DB»); $res = mysql_query(«SELECT `text` FROM `test` WHERE `id`=». 1) or die(mysql_error()); $row = mysql_fetch_assoc($res); ?> |
Теперь в массиве $row мы имеем искомую строку. Давайте выведем ее в теле страницы (между тегами body):
<?php echo $row[‘text’]; ?> |
Если сейчас открыть страницу в браузере, то увидим опять-таки вместо читабельного текста вопросительные знаки. Так произошло оттого, что браузер (согласно отосланных заголовков) открыл страницу в юникоде, но информация из БД достается в кириллической кодировке. Как это исправить? Очень просто — достаточно после соединения с сервером БД указать в запросе кодировку соединения, тогда данные из БД будут отдаваться в искомой кодировке.
Пропишем необходимый запрос после соединения:
mysql_connect(«localhost», «root», «») or die(«Can’t connect to server»); mysql_query(«SET NAMES ‘utf8′») or die(«Can’t set charset»); |
Теперь после обновления страницы информация выводится корректно.
Вот и вся хитрость.
Заключение
Стоит обратить внимание на отличия в именовании кодировок в MySQL от традиционного их именования, т.е. того, к которому мы привыкли. Например, указать юникод правильно так — «utf8», но не так — «utf-8». Второй вариант серверу MySQL будет непонятен. Аналогично с кириллицей: правильно так — «cp1251», но не так — «windows-1251».
На этом наш урок подходит к концу. Теперь, если Вы будете использоваться в своей работе озвученные выше правила, то проблем с кодировками у вас будет гораздо меньше.
Надеюсь, данный урок был полезен для Вас. Если у Вас остались какие-либо вопросы, то я с удовольствием отвечу на них в комментариях.
Автор: Кудлай Андрей
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.