Практический веб-дизайн - 15 лучших трюков с META Tag

Когда вы пишете веб-документ, вы можете обойтись без мета-тегов, если нужно. Вы можете просто оставить свой раздел <HEAD> пустым (кроме TITLE) и перейти прямо к содержимому, например так:

 <HTML>  <HEAD>  <TITLE>My Magnificent Web Page</TITLE>  </HEAD>  <BODY>

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

Что ж, давайте узнаем.

Согласно Webopedia , мета-тег:

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

И в соответствии с консорциумом World Wide Web ,

«Метаданные — это машинно-понятная информация для Интернета».

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

Обратите внимание, что мета-теги являются «синглетонами»; они не требуют использования закрывающих тегов, таких как </META> . Они должны войти в раздел <HEAD></HEAD> чтобы функционировать.

Ключевые слова и описания

Самые важные мета-теги дают поисковым системам что-то, за что можно зацепиться, когда они пытаются проиндексировать вашу страницу. Двумя тегами META, которые выполняют эту функцию, являются теги KEYWORD и DESCRIPTION. Тег KEYWORD содержит ключевые слова, которые пользователи поисковых систем вводят для поиска страниц, подобных вашей. META-тег для этой страницы может выглядеть примерно так:

(Примечание: как указал бдительный участник форумов SitePoint , если вы хотите придерживаться строгих стандартов XHTML, ваш тег будет выглядеть следующим образом:

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

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

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

Тег ОПИСАНИЕ — это отличное место для размещения слогана вашей организации или другой рекламной или описательной фразы, которая привлекает внимание читателя. Помните, что большинство поисковых систем будут использовать только первые 150 символов или около того. Сначала сфокусируйтесь на содержании страницы, а не на слогане вашей организации.

Имейте в виду: большинство поисковых систем имеют правила против тега META «спам», что означает, что вы не должны пытаться перегружать поисковую систему, повторяя одно и то же ключевое слово или фразу снова и снова. Лучший способ справиться с этим — сделать ваши ключевые слова и описание краткими и краткими и избегать повторения.

Вот что можно попробовать: почему бы не щелкнуть правой кнопкой мыши на этой странице, выбрать «Просмотреть исходный код» и посмотреть, какие мета-теги SitePoint выбрал для встраивания в HTML-код этой статьи? Я не кодировал эту страницу, это сделали гуру SitePoint, и я поставил вам доллары на пончики, что их теги META KEYWORDS и META DESCRIPTION существенно отличаются от приведенных выше примеров — больше подходят для SitePoint contt и, вероятно, лучше, чем выбор те, которые я выбросил.

Стоит отметить, как и некоторые участники SitePoint, что из четырех самых популярных поисковых систем — Google , AltaVista , FAST и Inktomi — только одна, Inktomi, по-прежнему индексирует веб-страницы с помощью тега META KEYWORDS. Некоторые люди, в том числе Дэнни Салливан из Search Engine Watch , советуют нам не беспокоиться о написании мета-тегов для поисковых систем (хотя, наоборот, вероятно, не стоит пытаться удалить их с существующих страниц).

С другой стороны, стоит отметить, что механизм Inktomi поддерживает несколько небольших поисковых систем, и другие поисковые системы, такие как Teoma, все еще могут использовать теги META для индексирования своих страниц. Во многих интрасетях и других вспомогательных поисках сайтов также используются мета-теги. И сама Inktomi — все еще сила, с которой нужно считаться. Так что решение за вами.

Стоит ли тратить время и силы на создание тегов META KEYWORD и DESCRIPTION? Ответ зависит от аудитории вашего сайта и от того, какие поисковые системы и стратегии будут использоваться для доступа к странице. Одно можно сказать наверняка, их не повредит. Если вы хотите охватить все свои базы, добавьте их. Просто знайте, что они могут не стоить времени и усилий, которые вы потратите на их создание.

Обновить и перенаправить

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

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

http://www.geocities.com/OurCoolSoftware/,

пользователи будут входить в:

http://www.OurCoolSoftware.com/

Но как насчет пользователей, которые уже знают и используют старый адрес Geocities, и у него есть закладки? Что ж, после того, как вы переместили контент вашего сайта на новый URL, вы пишете тег META REFRESH для старой страницы. Это заставляет старую страницу автоматически «перенаправлять» пользователя на новую страницу с задержкой, указанной в секундах, например:

 <META HTTP-EQUIV="refresh" CONTENT="10;  url=http://www.ourcoolsoftware.com">

Напишите немного текста, чтобы предупредить серфера, что его переносят на новую страницу, и вуаля! Вы перенаправили посетителей своего сайта на новую страницу с очень небольшим шумом и суетой:

Мы перешли на больший и лучший сайт! Вы будете доставлены на наш новый сайт через 10 секунд. Когда вы попадете туда, не забудьте добавить в закладки нашу новую страницу!

Примерно через 10 секунд посетители вашего сайта будут в курсе новых интересных событий, не узнавая новый URL . Вы сделали перенаправление для них. И если вы хотите отправить их на новую страницу через 2 секунды, или 30, или что-то еще, просто измените номер в разделе CONTENT тега на любое другое.

Лично я считаю, что 10 секунд — это хороший выбор — достаточно долго, чтобы читатель мог прочитать ваш текст, давая ему понять, что происходит, и добавить в закладки новый сайт, но недостаточно долго, чтобы сделать их нетерпеливыми. И некоторые люди раздражаются с 2-3-секундным перенаправлением — если по какой-то причине они не хотят посещать новую страницу, у них нет возможности нажать кнопку НАЗАД. Кроме того, если они не понимают, что они перенаправляют, они могут задаться вопросом, если они не угнали на сайте они не хотят идти на — порно сайт, возможно, или сайт, который ставит под угрозу их компьютера безопасность. Посетителю сайта всегда лучше знать, что происходит, прежде чем это произойдет, и дать им время принять решение о том, разрешить или нет перенаправление. Кроме того, это обычная вежливость, и в наши дни вежливость имеет большое значение.

Примечание. В очень редких случаях тег REFRESH не будет работать по непонятным причинам, о которых я не буду здесь говорить. Таким образом, вы можете добавить такую строку:

Если ваш браузер через несколько минут не откроет вам наш новый сайт, нажмите на ссылку ниже, чтобы перейти на наш новый сайт. Оказавшись там, не забудьте добавить нас в закладки!

www.ourcoolsoftware.com/

Разумеется, версия тега REFRESH с простой ванилью также имеет свое применение — идея состоит в том, чтобы автоматически обновлять страницу с выбранными интервалами. Это полезно для страниц с информацией о фондовом рынке, скажем, новостными лентами, рекламным контентом или любой информацией, которая меняется в считанные минуты. Вот тег:

 <META HTTP-EQUIV="refresh" CONTENT="600">

600 в теге указывает количество секунд между автоматическими перезагрузками страницы, что в данном случае означает 10 минут между перезагрузками.

Другое, более креативное, использование тега REFRESH — это ознакомление посетителя с последовательностью контента. Скажите, что вы хотите сфотографировать ваших посетителей на Улуру (Айерс-Рок). Вы можете создавать отдельные HTML-страницы каждой фотографии и сопровождающего ее текста, а также использовать тег REFRESH, чтобы перемещать посетителя со страницы на страницу без необходимости прикасаться к мышке. Если вы решите попробовать это, убедитесь, что у вас достаточно времени для загрузки каждого изображения и для чтения текста посетителем. Вам придется судить, сколько времени достаточно — слишком мало времени, и они будут чувствовать себя рывками от одной страницы к другой, и слишком много времени будет напрягать их терпение.

Кстати, не беспокойтесь о значении атрибута тега HTTP-EQUIV. Вы можете использовать атрибут, не зная, что он дает имя пары «имя / значение» и что он указывает серверу обрабатывать эту пару как часть заголовка документа MIME (Multipurpose Internet Mail Extensions). Видите, разве вы не счастливее, не зная об этом?

Храните свою страницу вне рамок других сайтов

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

 <META HTTP-EQUIV="Window-target" CONTENT="_top">t

Другое использование метатег

Вот некоторые другие мета-теги, которые вы можете использовать, если видите необходимость:

META Author

Определяет автора страницы.

META Date

Определяет дату, когда страница была создана.

 <META NAME="Date" CONTENT="November 17, 2002">

META Copyright

Устанавливает дату авторского права на страницу.

 <META NAME="Copyright" CONTENT="2000-2003 SitePoint,  Inc. All rights reserved.">

истечение

Если вы хотите, чтобы срок действия вашей страницы истек, вот как это сделать:

 <META HTTP-EQUIV="expires" CONTENT=  "thu, 31 DEC 2002 00:04:00 EST">

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

 <META HTTP-EQUIV="expires" CONTENT="0">

META Cache-Control

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

 <META HTTP-EQUIV="Cache-Control" CONTENT ="no-cache">

Следующий тег работает специально для браузеров Netscape:

 <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

META Content-Type

Это определяет символьное содержимое страницы. В то время как большинству HTML-страниц просто не нужно, это требуется любой странице, использующей XHTML.

 < META HTTP-EQUIV="Content-Type" CONTENT="text/html;  charset=ISO-8859-1>

Приведенный выше тег является достаточно общим и может использоваться для большинства веб-страниц. Есть много других доступных значений кодировки символов. ISO-8859-1 является значением по умолчанию.

META Content-Style-Type

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

 <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

МЕТА Роботы

«Роботы» — это программы, используемые поисковыми системами для индексации страниц вашего сайта. Большинство сайтов в порядке, все их страницы индексируются отдельно; эти сайты могут использовать следующий тег:

 <META NAME="robots" CONTENT="all">

Но у вас есть другие варианты:

 <META NAME="robots" CONTENT="noindex,nofollow"> 

 (страница вообще не добавляется в поисковую систему; другой способ написать это - <META NAME="robots" CONTENT="none"> ) 
 <META NAME="robots" CONTENT="noindex,follow"> 

 (пока домашняя страница не добавляется в поисковую систему, робот переходит по ссылкам) 
 <META NAME="robots" CONTENT="index,nofollow"> 

 (только домашняя страница проиндексирована) 
 <META NAME="robots" CONTENT="index,follow>

По умолчанию используется последнее значение: «CONTENT». Здесь есть каталог поисковой системы (главная страница) и все ссылки. Если это то, что вы хотите, нет необходимости добавлять теги ROBOTS.

МЕТА «Картинки»

Консорциум World Wide Web предоставляет протокол маркировки сайтов, который называется PICS , что означает «Платформа для спецификации интернет-контента». Многие пакеты программного обеспечения для веб-фильтрации используют информацию PICS, чтобы решить, какие сайты удобны для семьи, а какие нет. Сама идея может быть довольно сложной, поэтому вместо того, чтобы дать вам что-то «общее», я предлагаю вам посетить сайт PICS и решить, как поступить самостоятельно. Или зайдите на сайт ICRA (Internet Content Rating Association), чтобы узнать, как «оценить» ваш сайт за контент.

META Generator

Этот тег автоматически добавляется многими редакторами HTML, такими как PageMill, Front Page и Dreamweaver:

 <META NAME="generator" CONTENT="program name and version">

МЕТА «Смарт Парсинг»

«Умный анализ» — это скрытое и обычно нежелательное изобретение Microsoft, которое еще не получило широкого распространения. При использовании в каком-либо приложении или операционной системе Microsoft, это заставит выбранные слова или фразы на вашем сайте ссылаться на другие сайты по выбору Microsoft — то есть пользователь, который нажимает на слово «автомобиль» с меткой Smart, будет скрыт, скажем, сайт Toyota. Если это произойдет, например, на странице «Дженерал Моторс», кто-то в представительском люксе будет недоволен, когда он привлечет его или ее внимание.

Хотя Smart Parsing отсутствует в текущих версиях XP или Internet Explorer 6, он является функцией Office XP (по умолчанию отключен) и может появиться в будущих версиях XP, IE и других продуктов Microsoft. Это неудобно похоже на TopText, неприятный и хорошо известный тип программ-шпионов (подробнее о программах-шпионах читайте в моей статье SitePoint от 20 сентября 2002 года, AdWare и Under -ware: полное руководство ). В общем, подобные вещи — плохая идея, возможно, незаконная, и определенно навязчивая и нежелательная.

На момент написания этой статьи (ноябрь 2002 года) Microsoft заключила договор с 25 компаниями, включая ESPN, C | Net, MSNBC, FedEx и другими, на использование технологии Smart Tag для ссылки на выбранные слова и фразы в любом веб-документе, который может быть захвачен Смарт-теги. Если вы похожи на меня, вы будете ссылаться на ESPN или FedEx только в том случае, если хотите на них ссылаться, и не позволите Microsoft добавлять ссылки на вашу страницу без вашего разрешения. Используйте этот тег, чтобы скрыть смарт-теги от своих страниц, и помните, что этот тег META должен появляться на каждой странице вашего сайта:

 <META NAME="MSSmartTagsPreventParsing" CONTENT="true">

Позвольте MetaGen сделать это для вас

MetaGen страница Мэтта Мицкевича автоматически генерирует основные теги META для вашей страницы. Еще один замечательный ресурс от волшебников на SitePoint — подружитесь!