Мета теги HTML их назначение и правильное заполнение. Что такое мета теги, как правильно заполнить и проверить: примеры из практики За что отвечает атрибут meta

Мета-теги — это необязательные атрибуты, размещенные в заголовке страницы, между тегами и , которые никак не отображаются браузером (за исключением содержимого тега ). <b>Мета-теги </b> могут содержать описание html-страницы, ключевые слова к ней, информацию об авторе, управляющие команды для браузера и поисковых роботов, а также прочую служебную информацию, не предназначенную для посетителей. <b>Мета-теги </b> для сайта играют очень важную роль. Их добавление в html-документ могут существенно помочь сайту в его жизни.</p> <p>Всегда применяйте только те мета-теги, которые реально нужны для работы веб-сайта. Не следует загромождать область <head> лишними инструкциями, т.к. любая ошибка здесь может привести к печальным последствиям.</p> <h2>Функции мета-тегов</h2> <p>На <a href="/internet/tehnicheskie-sredstva-i-metody-obrabotki-informacii-tehnicheskie/">данный момент</a> не существует их четкой стандартизации, однако функции мета-тегов достаточно разнообразны. Можно выделить несколько основных направлений использования мета-тегов:</p> <ul><li>мета-теги могут идентифицировать авторство веб-документа, его адрес, частоту его обновлений;</li> <li>мета-теги используются поисковыми роботами для индексации и создания заголовков гипертекстовых документов;</li> <li>мета-теги влияют на режим отображения веб-страниц.</li> </ul><h2>Группы метатегов</h2> <p>Мета-теги можно разделить на две основные группы — это <b>NAME </b> и <b>HTTP-EQUIV </b>. Группа <b>NAME </b> отвечает за текстовую информацию о веб-документе, его авторе, а также - формирует рекомендации для поисковых роботов. Мета-теги, относящиеся к группе <b>HTTP-EQUIV </b> фактически эквивалентны гипертекстовым заголовкам, они формируют заголовок веб-страницы и определяют его обработку, а также управляют действиями браузеров и используются для формирования информации, выдаваемой обычными заголовками.</p><p>Элемент <b>meta </b> принимает следующие атрибуты: <span>content, http-equiv, name, charset и scheme. </p><table class="table table-bordered">Атрибут<th>Описание </th> <tr><td>Name </td><td>Имя метатега, также косвенно устанавливает его предназначение. Примеры: include, keywords, description, author, revised, generator и др. </td> </tr><tr><td>content </td><td>Устанавливает значение атрибута, заданного с помощью name или http-equiv. </td> </tr><tr><td>scheme (устарел) </td><td>Указывает <a href="/good-to-know/google-play-prosit-aktivirovat-promokod-v-telefone-s-androidom-plei/">полезную информацию</a> о схеме или название самой схемы, которая должна быть использована для интерпретации значения свойства (то есть значения атрибута «content»). Не применяется в HTML5. </td> </tr><tr><td>charset </td><td>Новый атрибут, показывает кодировку документа в HTML5. Пример: <meta charset="utf-8"> </td> </tr><tr><td>http-equiv </td><td>Формирует заголовок страницы и определяет его обработку. Как правило, управляет действиями браузеров и используется для формирования информации, выдаваемой обычными заголовками. Например HTTP-EQUIV может использоваться для управления кэшированием, обновлением страницы, автоматической загрузки другой страницы. </td> </tr></table><h2>Группа значений атрибута <b>NAME </b></h2> <h3>«keywords» (ключевые слова)</h3> <p><b>Keywords </b> поисковые системы используют для того, чтобы определить релевантность страницы тому или иному запросу. При формировании данного значения необходимо использовать только те слова, которые <b>обязательно </b> встречаются в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Ключевые слова нужно добавлять по одному, через запятую, в единственном числе. Рекомендованное количество слов в «keywords» - не более десяти. Кроме того, выявлено, что разбивка этого значения на несколько строк влияет на оценку ссылки поисковыми машинами. Некоторые поисковые системы не индексируют сайты, в которых в значении «keywords» повторяется одно и то же слово для увеличения позиции в списке результатов.</p><p>Если раньше «keywords» имел определённую роль в ранжировании сайта, то в последнее время поисковые системы относятся к нему нейтрально.</p> <p>HTML-код с «keywords» :</p><p> <!DOCTYPE html> <html> <head> <title>keywords Основное содержимое страницы

«description» (описание страницы)

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

Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница. «Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!

HTML-код с «description» :

description Основное содержимое страницы

«Author» и «Copyright»

Эти значения, как правило, не используются одновременно. Функция author и copyright - идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».

HTML-код с «author» :

Примеры применения метатегов Основное содержимое страницы

«Robots»

Robots - формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.

У «robots» могут быть следующие значения:

  • index - страница должна быть проиндексирована;
  • noindex - страница не индексируется;
  • follow - гиперссылки на странице учитываются;
  • nofollow - гиперссылки на странице не учитываются
  • all - включает значения index и follow, включен по умолчанию;
  • none - включает значения noindex и nofollow.

HTML-код с «robots» :

Примеры применения метатегов Основное содержимое страницы

Группа значений атрибута HTTP-EQUIV

«Content-Type»

Content-Type определяет тип документа и его кодировку.

HTML-код с «Content-Type» :

Примеры применения метатегов Основное содержимое страницы

В HTML5 указание кодировки упрощено:

«refresh»

Refresh - задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой html-страницы с заданным адресом (url).

HTML-код с «refresh» :

Основное содержимое страницы

Браузер поймет эту запись, как через 5 секунд загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт сайт. Значение «refresh» позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content .

Обратите внимание, что кавычки в указании URL-адреса перед http не ставятся.

«Content-Language»

Content-Language указывает язык документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого браузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.

HTML-код с «content-language» :

Язык документа Основное содержимое страницы

В HTML5 указание языка упрощено:

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

Пример HTML:

Попробуй сам Заголовок страницы Основное содержимое страницы

Задачи

Итоговое задание

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

Пришло время повторить изученное и выполнить четыре несложных задания:

Ключевые слова

  • Реши сам »

С помощью одинарного тега задайте ключевые слова: "HTML,CSS,JavaScript" для текущей веб-страницы.

Ключевые слова

Ключевые слова

Метатеги (англ. meta tags) - предназначены для предоставления структурированных метаданных о веб-странице.

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

- начало документа
- начало головы
- закрытие головы
- начало тела
- закрытие тела
- конец документа

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

С тегом </b> мы уже знакомы, с помощью него мы указываем имя документа в заголовке страницы. Теперь новый тег <b><meta> </b> (закрывающего тега не требует) с помощью него мы и будем указывать эту самую служебную информацию на нашей страничке.</p> <b><meta> </b> тег имеет следующие атрибуты: <ul><li><b>http-equiv </b> - указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных.</li><li><b>name </b> - информационное имя. (применяется в паре с атрибутом <b>content </b>)</li><li><b>content </b> - информационное содержание, связанное с мета именем (<b>name </b>)</li> </ul><p>Теперь на примерах будем вникать в суть дела.</p> <h2>Кодировка символов и язык</h2> <p>Пример (очень нужный и важный):</p> <p> <b><meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"> </b></p> <p>Сначала расскажу зачем необходима эта строка в заголовке html документа. Данная запись указывает браузеру кодировку в которой была написана данная страница - формат документа и раскладку клавиатуры, в данном случае это кириллица для Windows. Если эту строку не писать в заголовке страницы, то есть большая вероятность что весь текст на Вашей странице отобразится в виде непонятных человеку "иероглифов" у разных пользователей тех или иных браузеров. Конечно, пользователь может применить к такому документу команду в браузере <b>Вид->Кодировка->Кириллица </b>, но он может не знать о данной функции, да и зачем утруждать человека данным действием.</p> <p>Теперь разберём по "слогам" нашу запись:<br><b><meta http-equiv="Content-Type" </b> - указываем что в этом мета теге мы будем заниматься <b>Content-Type </b> - типом содержания<br><b>Content="text/html; </b> - а именно его текстом<br><b>Charset=Windows-1251"> </b> - документ для Windows - Кириллица где <b>1251 </b> кодировка раскладки клавиатуры, так например Английская клавиатура будет задаваться <b>Charset=Windows-1252 </b></p> <p>В настоящее время продвинутые веб-мастера рекомендуют использовать кодировку <b>UTF 8 </b></p> <p>То есть писать в голове документа вот так:</p> <p> <b><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </b></p> <p> <b><meta http-equiv="Content-Language" Content="ru"> </b></p> <p>В этой строчке говорится о том что язык <b>Language </b> документа является русским <b>Content="ru" </b></p> <p>Неправильная установка языка и раскладки клавиатуры может привести к печальным последствиям.</p> <h2>Информация о документе</h2> <p> <b><meta name="author" Content="Остап Бендер"> </b> <br><b><meta name="copyright" Content=""Рога и копыта" Остап Бендер"> </b></p> <p>Данные метаописатели предназначены для заявления об авторских правах непосредственно в заголовке html кода, так <b>name="author" </b> указывает имя автора страницы, а <b>name="copyright" </b> авторское право (копирайт) в котором может указываться фамилия, имя, отчество автора сайта, название фирмы, бренда.. и т. д. Кроме того включив в заголовок документа такое описание Вы значительно упростите задачу поисковой машине при поиске Вашего сайта по имени автора, названию фирмы, бренду...</p> <p> <b><meta name ="Generator" Content="Microsoft Notepad"> </b></p> <p>Если хотите можете указать с помощью какого html редактора была написана данная страница.</p> <h2>Описание страницы и ключевые слова</h2> <p> <b><meta name="description" Content="Производим закупку по выгодным ценам рогов и копыт!"> </b></p> <p><b>Description </b> - краткое описание страницы. Данное описание частенько используется поисковыми системами для вывода в результатах поиска, по какому либо запросу, информации о сайте и его назначении.</p> <p> <b><meta name="keywords" Content ="рога, копыта, рожки, рог, копыто, копытце, закупка, покупка, приобретение, выгодно, продать, купить, сбыть, реализовать, корова, бык, коровьи, бычьи, оплата, деньги, наличные, цена, цене"> </b></p> <p><b>Keywords </b> - ключевые слова веб-страницы, опять таки предназначены для поисковых машин.</p> <p>Представьте что Вы ищете в какой либо поисковой системе сайт с информацией о том где можно продать те же рога и копыта:) Какие слова и фразы Вы будите вводить в строке "Поиск"? ну наверно что то типа: "Где продать коровьи рога?" или "Реализовать копыта по <a href="/browsers/chasy-dlya-bega-kupit-praktichnye-modeli-chasov-dlya-bega-po/">выгодной цене</a>" Так вот если определить ключевые слова и так сказать предугадать мысли потенциального посетителя можно надеяться на то, что та или иная поисковая система выдаст ссылку на Ваш сайт в первых строчках результата поиска. Конечно ввод данного метоописателя не есть гарант того что именно Ваш сайт займет первые места в поиске по данным словам, но всё же не стоит им пренебрегать. Впрочем, это отдельная тема для разговора.</p> <p>Помните что описание <b>description </b> не должно превышать по длине более 200 символов, а ключевые слова <b>keywords </b> 1000 символов, иначе это может пагубно отразится при продвижении Вашего сайта в ТОП поисковых систем.</p> <h2>Адрес</h2> <p> <b><meta name="Publisher-Email" Content="Ваш_e-mail@сервер.домен"> </b> <br><b><meta name="Publisher-URL" Content="http://www.Ваш_сайт/"> </b></p> <p>Думаю понятно.. здесь указывается адрес Вашего почтового ящика <b>Publisher-Email </b> и адрес сайта <b>Publisher-URL </b></p> <h2>Обновление страницы</h2> <p> <b><meta name ="revisit-after" Content="15 days"> </b></p> <p>Если некая страница на Вашем сайте подразумевает постоянное обновление и/или дополнение информационным содержанием, то хорошо было бы включить данное описание в заголовок данной страницы. Такое введение позволит программе роботу своевременно посещать Ваш сайт и индексировать его содержание. В нашем примере мы заявили о том, что собираемся обновлять содержание на странице не менее одного раза в 15 дней, можете не сомневаться программа робот возьмет Ваши планы себе на заметку и будет приходить "к Вам в гости" раз в пятнадцать дней, для того чтобы проверить ничего ли у Вас не изменилось..</p> <h2>Время действия документа и кэш</h2> <p>Для того чтобы ускорить загрузку страницы, а так же сэкономить трафик современные браузеры сохраняют посещаемые пользователем страницы в кэш (на <a href="/online-services/proverka-diska-s-pomoshchyu-chkdsk-kak-proverit-zhestkii-disk-ne-zagruzhaya/">жёсткий диск</a>), и при повторном посещении загружают их не с сервера, а непосредственно с кэша. На самом деле такая функция хороша собой.. но есть одно "но", дело в том что в браузере может отображаться уже устаревшая информация, какой либо страницы. Представьте, к примеру, Ваш сайт представляет собой некое периодическое новостное интернет издание, а пользователь получит, вместо самых свежих новостей, уже устаревшую информацию, ту которая хранится у него в кэше!! и не разобравшись в чем "беда" примет Ваш сайт за "мертвый" заброшенный и никем не обновляемый.</p> <p>Для того чтобы принудительно заставить браузер загружать ту или иную страницу не с <a href="/spam/obzor-luchshih-programm-dlya-proverki-zhestkogo-diska-kak-uznat-sostoyanie/">жёсткого диска</a>, а с сервера необходим мета тег с данным синтаксисом, где указывается день недели, число месяц год время (чч:мм:сс) и часовой пояс(<b>GMT+03:00 </b> - время Московское + три часа). День недели и время дня можно не указывать. Теперь при чтении страницы браузером страница будет грузится с сервера, если указанная дата и время настало или просрочено, и напротив из кэша если указанное время еще не наступило.</p> <p>Ниже на всякий случай приведены таблицы сокращений от Английских слов на месяцы и дни недели</p> <td valign="top"> </td> <p>Атрибуту <b>content </b> можно присвоить значение <b>"0" <meta http-equiv="Expires" content="0"> </b> в этом случае страница всегда будет загружаться с сервера.</p> <p>И еще.. некоторые поисковые роботы могут отказаться индексировать документ с заведомо устаревшей датой. - не искушайте судьбу..</p> <p> <b><meta http-equiv="pragma" content="no-cache"> </b></p> <p>А такая запись вовсе запретит браузеру кэшировать данную страницу.</p> <h2>Команды для робота</h2> <p> <b><meta name="robots" content="Index,follow"> </b></p> <p>Данный мета тег предназначен для подачи поисковому роботу той или иной команды.</p> <p>Список возможных команд роботу:</p> <ul><li><b>Index </b> - индексировать страницу</li><li><b>Noindex </b> - не индексировать страницу</li><li><b>Follow </b> - прослеживать гиперссылки на странице</li><li><b>Nofollow </b> - не прослеживать гиперссылки на странице</li><li><b>All </b> - индексировать страницу и прослеживать гиперссылки на странице (по умолчанию)</li><li><b>None </b> - не индексировать страницу и не прослеживать гиперссылки на странице</li> </ul><h2>Автоматический переход на другую страницу</h2> <p> <b><meta content="10; URL=http://www.mysite/index.html"> </b></p> <p>Если вдруг по каким либо причинам Вы задумаете поменять URL адрес Вашего сайта то хорошо было бы на старом месте оставить страницу вроде этой:</p> <p> <html> <br> <head> <br> <meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"> <br><b><meta content="10; URL=http://www.mysite/index.html"> </b> <br> <title>Переадресация



Адрес сайта был изменен, через 10 секунд Ваш браузер будет автоматически перенаправлен по новому адресу:
http://www.mysite.ru/
Нажмите здесь для того чтобы выполнить переход немедленно.
Приносим извинения за доставленные неудобства.


Разберём и осмыслим строчку из примера:

meta - Refresh (восстановление) указывает браузеру что данную страницу необходимо обновить
content="10; - обновить через заданное количество секунд (в нашем случае десять)
URL=http://www.mysite/index.html" - адрес новой/другой страницы на которую следует перейти.

А вот если в заголовке Refresh URL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.

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

Эффекты при переходе по ссылке


Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.

  • Page-Enter - Эффект появления страницы
  • Page- Exit - Эффект исчезновения страницы

В которых:

  • Duration - время действия эффекта в секундах
  • Transition - Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:
Номер Описание эффекта Номер Описание эффекта
0 Прямоугольники внутрь 12 Растворение
1 Прямоугольники наружу 13 Вертикальная панорама внутрь
2 Круг внутрь 14 Вертикальная панорама наружу
3 Круг наружу 15 Горизонтальная панорама внутрь
4 Наплыв наверх 16 Горизонтальная панорама наружу
5 Наплыв вниз 17 Уголки влево - вниз
6 Наплыв вправо 18 Уголки влево - вверх
7 Наплыв влево 19 Уголки вправо – вниз
8 Вертикальные жалюзи 20 Уголки вправо – вверх
9 Горизонтальные жалюзи 21 Случайные горизонтальные полосы
10 Шажки горизонтальные 22 Случайные вертикальные полосы
11 Шажки вертикальные 23 Случайный выбор эффекта

Файл page1.html





Эффекты перехода страниц



На заметку:


Эффекты перехода с одной страницы на другую работают не во всех браузерах.




"Перейти"


Файл page2.html





Эффекты перехода страниц



На заметку:


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


Нажмите на "Перейти" чтобы перейти к следующей странице
и оценить эффект перехода от одной странице к другой.


"Перейти"


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

    Заголовок Refresh (автоматический переход на другую страницу) можно использовать не совсем стандартно.. Некоторые авторы используют его для создания своего рода "презентации" слайд шоу, где сменяющиеся страницы и есть кадры презентации. Представьте заходит человек на такой сайт а тут ему "Откинетесь на спинку кресла и расслабьтесь..":) а далее сами по себе пошли картинки, графики, тексты.. а последняя страница тупиковая где пользователь берёт сайт "в свои руки" или же может замыкаться на первую. Только всегда помните о золотом правиле веб-мастера: Главное не переборщить!

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

Начнём с определения что такое метатеги?

Метатеги (англ. meta tags) - это (X)HTML-теги, предназначенные для предоставления структурированных метаданных о веб-странице. Как правило, указываются в заголовке тега (X)HTML-документа. Метатеги не отображаются на странице и не имеют видимого контента. В них располагается дополнительная информация для поисковых роботов, различного ПО.

В SEO, когда слышим что-то вроде “Нужно прописать метатеги на странице”, в голове сразу же всплывают метатеги Description и Keywords, ну и, само собой, Title. Какое же SEO без этого тега? Начну сразу с них.

Тег Title

Его ещё называют метатег Title, хотя, с технической точки зрения, — это не так. Очень важный тег, влияет на ранжирование, является заголовком страницы и часто используется поисковыми роботами при формировании заголовка сниппета. Поэтому, помимо того, что в Title нужно добавлять основные ключевые слова, важно следить за его привлекательностью. Он должен стимулировать пользователей к переходу на сайт.

Title должен:

  1. Отображать суть страницы.
  2. Ближе к началу содержать прямое вхождение наиболее конкурентного запроса.
  3. Быть читабельным предложением с вхождение ключевых слов.
  4. Отличаться от заголовка страницы

    .

  5. Не содержать спама.
  6. Быть уникальным для каждой страницы.
  7. Примерной длины — около 70 — 130 символов.

Для посадочных страниц, категорий, разделов рекомендую заполнять Description вручную.

Автоматически заполнять Description можно, например, для карточек товара. Для этого используйте шаблоны вида:

Description: В нашем интернет-магазине + “название магазина” + доступные цены от + “цена” + на + “название карточки товара” + с доставкой по + “город”.

Description: “Название карточки товара” + по доступной цене + “цена” + от интернет-магазина + “название магазина” + с доставкой по + “город”.

Как делать нельзя:

  1. Не делайте слишком короткие Description — в Google Search Console, в разделе Оптимизация HTML видно короткие метаописания.
  2. Там же отслеживайте и исправляйте дубли Description (они должны быть уникальны).
  1. Не пишите несогласованные фразы — метатег должен быть читабельным.Не используйте перечисления.

Метатег Keywords

Этот мета-тег не влияет на ранжирование, но, поскольку Яндекс пишет , что meta keywords может учитываться — рекомендую заполнять его, добавляя 3–5 релевантных контенту фраз, разделённых между собой запятыми.

Метатег expires — также используется для управления кэшированием. В мета-тег устанавливается дата. Когда она проходит, браузер должен использовать повторный сетевой запрос, а не имеющийся кэш страницы. Дата указывается в формате RFC850.

Пример использования:

Метатег content-language — указывает язык документа.

Пример использования:

В HTML5 указание языка упрощено:

Постарался перечислить, как мне показалось, самые интересные метатеги. Если вас интересуют другие meta, рекомендую ознакомиться с материалами: Метатеги, которые поддерживаются в Google и Использование HTML-элементов Яндекс .

Подведём итоги

Метатегов достаточно много, но, как оптимизатору, чаще всего приходится использовать в SEO тег Title, meta description, meta keywords. Если вы начинающий сеошник или владелец сайта, рекомендую также ознакомиться с вебинаром “Правила формирования Title и Description” нашего SEO-TeamLead Евгения Аралова:

Подписаться на рассылку

Один из вариантов применения тега meta - указание HTTP -заголовков, которые должны быть отправлены клиенту до отправки самой веб-страницы. Например:

<meta http-equiv = "Content-Type" content = "text/html" / >

Такая запись указывает, что страница должна быть отправлена вместе с HTTP-заголовком Content-Type: text/html. Такой заголовок указывает браузеру или другой программе тип отправляемого документа. Тем не менее, несмотря на то, что первоначально предполагалось, что веб-серверы будут считывать meta-теги внутри отправляемых клиенту веб-страниц, и формировать HTTP-заголовки в зависимости от их содержимого, на практике это не реализовано в наиболее используемых веб-серверах, соответственно, веб-серверы не меняют отправляемые клиенту HTTP-заголовки, а клиент (веб-браузер) обрабатывает эти meta-теги самостоятельно (в частности, данные из meta-тегов могут заменять данные, получаемые из HTTP-заголовков ).

Кроме того, meta-теги могут использоваться для того, чтобы сообщить браузеру информацию о документе, когда HTTP-заголовки недоступны (например, если страница открывается локально с диска, а не загружается с веб-сервера).

В общей форме метаданные записываются в следующем виде: в теге meta указывается атрибут name (имя) и связанный с ним атрибут content (содержимое), в котором описывается какой-либо аспект веб-страницы, например, ключевые слова:

<meta name = "keywords" content = "википедия, энциклопедия" / >

Функции мета-тегов

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

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

Группы мета-тегов

Мета-теги разделены на две основные группы - NAME и HTTP-EQUIV. Группа NAME отвечает за текстовую информацию о странице, ее авторе, а также - рекомендации для поисковых систем. HTTP-EQUIV фактически эквивалентны гипертекстовым заголовкам, формируют заголовок страницы и определяют его обработку. Как правило, они управляют действиями браузеров и используются для формирования информации, выдаваемой обычными заголовками.

Группа NAME

Мета-тег Author и Copyright

Мeтa-тeг PICS-Label

Мeтa-тeг Window-target

Определение окна загружаемой страницы.

Мета-тег Imagetoolbar

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

<meta http-equiv = "imagetoolbar" content = "no" / >

Значение мета-тегов

Метаданные о веб-странице изначально предназначались в том числе для того, чтобы помочь поисковым машинам отнести веб-страницу к той или иной категории. В 90-е годы мета-теги активно использовались в целях раскрутки своего сайта, в том числе предоставляя ложные или избыточные метаданные. После этого поисковые машины стали придавать мало внимания метаданным; теперь большее значение имеет правильное структурирование веб-страницы и наличие большого количества ссылок на сайт с авторитетных ресурсов.

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

Описание

HTML тег является пустым элементом и располагается внутри элемента . Он используется для предоставления дополнительной информации (метаданных) о HTML-документе, используемой браузерами и поисковыми системами.

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

Примечание: содержимое элементов не отображается на веб-странице.

Атрибуты

charset: Указывает кодировку символов для текущего HTML-документа. Чаще всего используется кодировка UTF-8.

Тег с атрибутом charset лучше всего располагать в качестве первого дочернего элемента внутри элемента . Чтобы текст на странице отображался корректно, кодировка, указанная в значении атрибута должна совпадать с кодировкой самого документа. content: Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения. http-equiv: Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте.

  • default-style : указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента