Заголовок страницы, метатеги

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

Предварительное замечание: Чтобы не путаться в смысле того, что будет изложено ниже, давайте договоримся о терминологии. А именно, будем называть верхнюю часть показываемой пользователю страницы "шапкой страницы" или "шапкой сайта" (шапка зачастую одинакова для всех страниц сайта). А служебную часть кода страницы назовем заголовком страницы.

Заголовок страницы (header) - это служебная часть html-кода страницы, которая предшествует тегу <body> и содержит данные, предназначенные для браузера: описание документа с помощью специальных метатэгов, ссылки на подключаемые файлы, например, файл стилей или файл со скриптами, или непосредственно описание стилей и задание скриптов. Содержимое заголовка страницы не отображается напрямую на веб-странице, за исключением тега <TITLE>, устанавливающего название (заголовок) окна веб-страницы.

Заголовок страницы имеет следующий формат:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
      Здесь размещаются мета-теги, скрипты, стили, ссылки и так далее.
</HEAD>

Внутри контейнера <head> допускается размещать следующие элементы: <TITLE>, <META>, <STYLE>, <LINK>, <SCRIPT>, <BASE>, <BASEFONT>, <BGSOUND>. Эти элементы мы последовательно рассмотрим, но вначале несколько слов о теге <!DOCTYPE>.

Теги <!DOCTYPE> и <HTML>

В первой строке каждой html-страницы всегда должен находиться тег <!DOCTYPE> (что означает "объявление типа документа"). Этот тег сообщает браузерам, что страницу нужно вывести с соблюдением определенного стандарта или подвида этого стандарта. Достаточно детальный и подробный рассказ о теге <!DOCTYPE> содержится в статье Джеффри Зельдмана (Jeffrey Zeldman, перевод: Александр Качанов), которую я включил в мою подборку статей для вебмастеров. Рекомендую прочитать эту статью, в которой даны рекомендации по тому, как правильно сформировать этот тег.

Во второй строке заголовка страницы размещается тег <HTML>. Я пока не встречал подробного описания этого тега, поэтому записываю его без всяких дополнительных параметров. Хотя на других сайтах мне встречались более сложные конфигурации, например, такого вида:
<html xmlns="http://www.w3.org/1999/xhtml">.

Tег <TITLE>

Тэг <TITLE> - это элемент HTML-кода, который определяет слова, появляющиеся в заголовке окна веб-браузера, когда он обратится к созданной вами странице. Например, при просмотре текущей страницы в заголовке вашего браузера видны слова "Конспект вебмастера. Заголовок страницы, мета-теги". Эти слова были введены в тэг <TITLE> в HTML-коде сайта, и они не отображаются более нигде в содержании страницы (если, конечно, вы не повторите их в тексте). HTML-код для данного тэга выглядит следующим образом
<TITLE>Конспект вебмастера. Заголовок страницы, тег TITLE, мета-теги</TITLE>

Тэг <TITLE> обычно является первым элементом в секции <HEAD> кода страницы, хотя это в принципе не обязательно и порядковое расположение тэга <TITLE> в секции <HEAD> не имеет существенного значения.

Если тег <TITLE> отсутствует, то содержание заголовка окна браузера определяется тем, что заложили разработчики браузера. Это может быть название браузера (так делает Mozilla), или URL открытой страницы. Специализированные программы создания веб-страниц часто вписывают в этот тег ничего не значащие слова типа “Home Page” (“Домашняя страница”), “Page 1” (“Страница 1”), “Page 2” и так далее. Такие названия часто встречаются на страницах, созданных начинающими вебмастерами, которые просто не знают как правильно использовать тэг <TITLE>.

Особое значение тега <TITLE> определяется тем, что все поисковые системы используют содержание этого тэга для того, чтобы отобразить информацию о вашем сайте в результатах поиска. Слово или слова, указанные в тэге <TITLE>, появятся в виде ссылок на странице результатов поиска, и пользователи будут руководствоваться именно этими словами при принятии решения о том, следует ли переходить из поисковых систем на сайт по этой ссылке. Без сомнения, по значению для определения привлекательности сайта для пользователя тэги <TITLE> можно поставить на второе место, сразу после собственно содержания вашей страницы.

Большинство начинающих владельцев веб-сайтов ошибочно полагают, что в данный тэг следует помещать название их сайта. Между тем, тэг <TITLE> должен формироваться индивидуально для каждой страницы сайта и должен включать специфичные именно для текущей страницы ключевые слова и фразы. Большое значение имеет даже порядок следования слов в этом теге. Основные рекомендации по заполнению тега <TITLE> сводятся к следующему.

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

Если придуманное вами содержание тега <TITLE> состоит из слов, не встречающихся в тексте страницы, следует постараться переработать текст так, чтобы в нем содержались столь важные и специфичные ключевые слова. При этом не следует прибегать к искусственным приемам типа добавления этих слов в верхнюю или нижнюю часть странички, делая их одного цвета с фоном, чтобы не изменять основной текст. Не надо и выводить их шрифтом самого маленького размера, чтобы никто их не заметил. Если эти ключевые слова действительно настолько важны, что вы хотите, чтобы они привлекали пользователей поисковых систем на ваш сайт, то надо постараться, чтобы они были красиво и изящно включены в содержание текста данной странички.

Рекомендации по составлению тега <TITLE> вы найдете на многих сайтах. Вот несколько ссылок:

В разделе о поисковой оптимизации мы еще вернемся к рекомендациям о том, как правильно сформировать содержимое тега <TITLE>, а сейчас займемся рассмотрением других элементов заголовка страницы.

Мета-теги

Мета-теги служат для предоставления браузеру клиента и поисковым системам некоторой служебной информации. Это теги языка HTML, имеющие следующий формат:
<meta name="имя" content="значение">
или
<meta http-equiv="имя" content="действие">.

Мета-теги можно использовать для предоставления сведений самым разным клиентам, и каждая система обрабатывает мета-теги только заданного формата, игнорируя остальные. Ни один из мета-тегов не является обязательным. Более того, большое количество и объем мета-тегов увеличивают объем HTML-кода страницы и замедляют ее загрузку. Но правильная и в разумных количествах установка их на страницы вашего сайта принесет несомненную пользу.

Условно мета-теги можно разделить на 3 группы:

  • содержащие управляющие команды для браузера;
  • содержащие управляющие команды для поисковых систем;
  • содержащие информацию о странице и ее авторе.

Mета-теги, содержащие управляющие команды для браузера

О том, что данный мета-тег предназначен для управления браузером, говорит атрибут http-equiv.

<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
Этот мета-тег говорит браузеру, в какой кодировке сделана страница. Вообще-то, определять правильную кодировку должен либо сервер, либо браузер. Но не всегда они бывают правильно настроены. И тогда посетитель, зайдя на страницу, увидит вместо русского текста непонятные крокозябры. Причем в некоторых случаях не помогает даже явное переключение кодировки в браузере. Поэтому можно порекомендовать всегда включать этот тег в заголовок страницы, при этом необходимо проверить, чтобы указанная в нем кодировка соответствовала кодировке, в которой страницу отдает сервер.

<meta http-equiv="Content-Language" content="ru">
Этот мета-тег сообщает, на каком языке написана страница. В большинстве случаев этот тег можно считать излишним, но, как и в предыдущем примере, он может оказаться полезен в случае неправильных настроек браузера.

<meta http-equiv="pragma" content="no-cache">
Этот мета-тег запрещает браузеру кэшировать страницу (то есть сохранять ее в памяти). Полезно применять его на часто обновляющихся страницах.

<meta http-equiv="refresh" content="N; url=URL">
Этот мета-тег через N секунд после загрузки в браузер текущей страницы перезагрузит вместо нее страницу с указанным URL (естественно, вместо N должна быть написана цифра - количество секунд, а вместо URL - правильный адрес страницы). Тег очень полезен в случае переезда сайта или изменения его структуры, т.к. позволяет перенаправить посетителя, пришедшего по старой ссылке, на нужную страницу.

Mета-теги, содержащие управляющие команды для поисковых систем

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

<meta name="description" content="описание страницы">
Cамый, пожалуй, важный из мета-тегов, содержащих управляющие команды для поисковых систем. И не потому, что поисковики его индексируют или используют при поиске. Не индексируют и не используют. Но именно "описание страницы" из этого мета-тега поисковые системы часто показывают в результатах поиска, и от того, насколько это описание хорошее, "зазывающее" и соответствующее тому, что хочет найти пользователь, во многом зависит, перейдет ли он на ваш сайт или на соседний. Поэтому можно порекомендовать всегда использовать этот мета-тег, при этом серьезно и тщательно продумывая включаемое в него описание страницы.

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

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

<meta name="keywords" content="ключевые слова">

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

Все было прекрасно придумано и работало, пока в процесс не вмешались спамеры, которые создавали так называемые дорвеи - сайты, не содержащие полезной информации, но за счет грамотного заполнения тега keywords оказывавшиеся на первых местах в поисковой выдаче. В результате поисковые системы были вынуждены практически исключить из рассмотрения при индексировании страниц ключевые слова и описания, чтобы сохранить релевантность списка результатов поиска. Так что сейчас все основные поисковики либо вообще игнорируют этот мета-тег, либо придают ему мизерное значение. Цитата с сайта Рамблера:

При индексации учитывается лишь та информация, которую пользователь может увидеть на странице. Скрытые поля (meta name="keywords"...) при индексировании сайтов игнорируются.

Тем не менее полностью удалять или игнорировать этот тег не следует. Он полезен при составлении списка ключевых слов, так что о нем и о теге description мы еще поговорим в разделе о поисковой оптимизации.

<meta name="robots" content="..., ..." />
<meta name="googlebot" content="..., ..." />

Эти метатеги позволяют контролировать сканирование и индексирование страницы поисковыми системами. Метатег robots применяется ко всем поисковым системам, а "googlebot" - только к Google. По умолчанию задаются значения "index, follow" - "индексировать, переходить" (то же самое, что "all" - все), и их не надо определять. Google распознает следующие значения (указывая несколько значений, разделяйте их запятыми):

  • noindex: запрещает индексирование страницы
  • nofollow: запрещает роботу Googlebot переходить по ссылкам с этой страницы
  • nosnippet: запрещает показывать фрагмент содержания в результатах поиска
  • noodp: запрещает использование альтернативного описания из ODP/DMOZ
  • noarchive: запрещает Google показывать ссылку Сохранено в кэше для страницы.
  • unavailable_after:[date]: позволяет указать точную дату и время, когда необходимо прекратить сканирование и индексирование этой страницы
  • noimageindex: позволяет отметить, что вы не хотите указывать свою страницу в качестве источника ссылки для картинки, отображаемой в результатах поиска Google.
  • all : эквивалентно index,follow
  • none : эквивалентно noindex, nofollow

Следует отметить, что эту информацию можно указывать и в заголовке страниц с помощью команды НТТР-заголовка "X-Robots-Tag". Это особенно полезно, если нужно настроить сканирование и индексирование таких файлов, как графика, или других документов не в формате HTML.

Нужны ли эти теги? Учитывая, что "по умолчанию" поисковики страницу проиндексируют и по ссылкам с нее пойдут? Конечно, бывает необходимо закрыть от индексирования какие-то страницы сайта, но, думается, гораздо удобнее сделать это с помощью файла robots.txt.

<meta name="revisit" content="3 days" />
<meta name="revisit-after" content="3 days" />

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

Mета-теги, содержащие информацию о странице и ее авторе

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

<meta name="Generator" content="Название генератора">
Сообщает, с помощью какой программы был сгенерирован код страницы. Этот тег автоматически вставляют в код страницы почти все генераторы HTML и визуальные редакторы (Word, FrontPage, DreamWeaver...). Увидев в коде страницы этот мета-тег, можно довольно уверенно определить профессионализм веб-мастера :)

<meta name="site-created" content="10.11.2000">
Указывает дату создания сайта.

<meta name="expires" content="31.12.2009">
Указывает предполагаемую дату закрытия сайта.

<meta name="Author" content="автор">
Указывает автора страницы.

<meta name="Copyright" content="авторские права">
Указывает владельца авторских прав.

<meta name="Reply-to" content="vasya@pupkin.ru">
Указывает способ связи с автором страницы.

<meta name="Owner" content="Владелец">
Указывает собственника страницы.

<meta name="Address" content="Адрес">
Указывает адрес автора или собственника страницы.

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

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

Стили

Следующий элемент, который часто включается в заголовок страницы, это описания стилей (CSS), которые используются на странице. Целесообразно это только тогда, когда надо задать стили, используемые только на данной странице. В противном случае описания стилей лучше вынести в отдельный файл. Стили обрамляются тегами <style> </style> и неплохо бы их также заключить в тег комментариев, так как браузеры старых версий, коих осталось немного, но все же есть, могут не понять, что же вы им понаписали, и вывалить все это на экран недоумевающему пользователю. С помощью Каскадных таблиц стилей (CSS) можно описывать все, что угодно, начиная от оформления текста и заканчивая внешним видом страницы в целом. Выглядит это примерно следующим образом:

   <style>
	A:link {text-decoration: none}
	A:visited {text-decoration: none}
   </style>

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

Ссылки на другие файлы (link-и)

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

   <link rel="STYLESHEET" type="text/css" href="styles.css">

С помощью тега link можно указать браузеру не только расположение файла стилей, но и некоторых других файлов, например, favicon.ico. В отличие от тега <A>, тег <LINK> размещается всегда внутри контейнера <HEAD> и не создает ссылку.

Скрипты

В заголовке страницы вы можете также разместить скрипты, написанные на языках Java, PHP, JavaScript и др., которые будут тем или иным образом управлять загрузкой страницы. Скрипты могут быть самые разные, начиная с паролирования доступа пользователей к содержимому страницы, и заканчивая определением технического оснащения пользователя для последующей пересылки его на страницу оптимизированную именно для его версии браузера, цветности монитора и установленных дополнений. Здесь же вы можете подгружать картинки, которые понадобятся вам в процессе работы пользователя на странице. Так, например, если вы используете подмену картинки при наведении или клике на нее мышкой, то имеет смысл загрузить эти картинки сразу вместе со всеми остальными материалами страницы, а не начинать загрузку, когда пользователь уже подведет мышь к эффектной картинке.

Посмотреть примеры размещения скриптов в заголовке страницы вы можете практически на любом крупном сайте. Достаточно открыть исходный код страницы. С помощью скриптов могут определяться тип и настройки браузера, что позволяет подстраивать под них макет страницы. Полюбопытствуйте. Посмотрите Апорт, RLE и др. крупные сайты.

Теги <BASE>, <BASEFONT>, <BGSOUND>

Тег <BASE> определен внутри контейнера <HEAD> и инструктирует браузер относительно полного базового адреса текущего документа. Тег <BASE> предназначен для документов, в которых используется относительный адрес и эти документы могут переноситься в другую папку или даже на другой компьютер без потери связи. Браузер ищет тег <BASE>, определяет полный адрес документа и корректно загружает его. Например, если адрес документа указан как <base href="http://www.megasite.ru/hzchd">, то при добавлении рисунков достаточно использовать относительный адрес <img src="/images/ris10.gif">. При этом полный путь к изображению будет http://www.megasite.ru/hzchd/images/ris10.gif, что позволяет браузеру всегда находить графический файл, независимо от того, где находится текущая веб-страница. Также можно применять и иерархическую систему пути с двоеточием. Так, если изображение добавляется как <img src="../images/ris10.gif">, то полный путь к файлу будет http://www.megasite.ru/images/ris10.gif.

Второе применение тега <BASE> — задание целевого окна для всех ссылок на текущей странице.

Тег <BASEFONT> предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всем документе за исключением тега <FONT>, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере <HEAD> или <BODY>, причем несколько раз. Это позволяет изменять вид шрифта для части документа.

Тег <BGSOUND> определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии. Громкость, продолжительность звучания музыки и другие характеристики определяются с помощью параметров тега, а также могут управляться через скрипты. Этот тег должен размещаться только в контейнере <HEAD>.

Тег <BGSOUND> не входит в спецификацию HTML и при его использовании код не пройдет валидацию. К тому же пользователи, как правило, отрицательно относятся к музыке, которая играет на сайте, поэтому используйте эту возможность с осторожностью и по необходимости.

Полезные ресурсы

Загляните на досуге

импортные сигареты на университете | Смотрите flytransfer.by бла бла кар москва витебск.

Счетчики

Рейтинг@Mail.ru

LiveInternet

Rambler's Top100