Атрибут http-equiv html тега

Советы и примечания

Примечание: <meta> Теги всегда заходят внутрь элемента <head>.


Примечание: Метаданные всегда передаются в виде пар «имя-значение».

Примечание: Атрибут content должен быть определен, если определено имя или атрибут HTTP-EQUIV. Если ни один из них не определен, атрибут Content не может быть определен.

Настройка видового экрана

В HTML5 появился метод, позволяющий веб-дизайнерам управлять окном просмотра через тег <meta>.

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

На всех веб-страницах необходимо включить следующий элемент <meta> видового экрана:

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

Элемент <meta> видовой экран предоставляет браузеру инструкции по управлению размерами страницы и масштабированию.

Ширина = устройство-ширина часть задает ширину страницы, чтобы следовать ширине экрана устройства (который будет варьироваться в зависимости от устройства).

Элемент начального масштаба = 1.0 задает начальный уровень масштабирования при первой загрузке страницы обозревателем.

Вот пример веб-страницы Без мета-тег видового экрана и та же веб-страница С мета-тег видового экрана:

Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.

Без мета-тега видового экрана

С помощью мета-тега видового экрана

Вы можете прочитать больше о видовом экране в нашем Адаптивный веб-дизайн — учебник по видовому экрану.

[ ^ ] Important Information

This article presents information as concisely as possible, and is intended as a general overview of XHTML header tags. More detailed header tag information is available elsewhere. In this article, each tag is presented along with a brief definition or explanation. Where two (or more) tag examples are provided, the first is a generalized version while others represent specific situations.

It is important to note that, when writing XHTML code, all tags (e.g., , , ) and their corresponding attributes (e.g., , , ) must be expressed entirely in lowercase character. However, the values of tag attributes are entirely case-insensitive. Also, valid XHTML also requires all tag elements to be closed. Thus, remember to close elements such as , , and with a “space-slash-bracket”, for example:

So the space between the last attribute quote and the slash is optional.

Specify Character Set

You can use <meta> tag to specify character set used within the webpage.

Example


By default, Web servers and Web browsers use ISO-8859-1 (Latin1) encoding to process Web pages. Following is an example to set UTF-8 encoding −

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

To serve the static page with traditional Chinese characters, the webpage must contain a <meta> tag to set Big5 encoding −

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Previous Page Print Page

Next Page  

[ ^ ] meta tags

Each element provides metadata according to its pair of and attributes. For each element, specifies the property and defines its property. All tags are entirely case-insensitive. If you are using XHTML for markup, however, all tags must be lowercase, but their values are case-insensitive. WordPress users may now add a complete set of data by using our free plugin, Head Meta Data3.

meta title

Although the tag is no longer used by most major search engines, it remains useful for reference and organizational purposes. This tag is simialr to the tag, which should be used either in addition to or as replacement for the tag:

meta description

The tag is used in the search results of major search engines. Optimizing the content of this tag with effective keywords will help improve page rank. Use any alphanumeric characters — uppercase and/or lowercase — and limit to 250 characters (including spaces) or less:

meta keywords

Also important in search engine optimization, are used by search engines in determining the type of content contained in the document. To optimize this tag, limit the number of keywords to around 12 page-specific lowercase words or short phrases. The keywords may be space-seperated or comma-seperated:

meta subject

The tag indicates the primary subject of the document. Although the tag is no longer used by most major search engines, it remains useful for reference and organizational purposes:

meta date

The tag specifies the date on which the document was last modified:

  • YYYY = four-digit year
  • MM = two-digit month
  • DD = two-digit day of month
  • hh = two-digit hour (00 through 23 only)
  • mm = two-digit minute (00 through 59)
  • ss = two-digit second (00 through 59)
  • TZD = time zone designator

meta resource-type

The tag describes the document resource type, and should be used in conjuction with the DTD declaration. Apparently, the value for the attribute must always be document:

meta distribution

The tag defines the intended level of distribution of the document on the world wide web. Supported distribution types include (WWWeb), (IP Block), and (Internal Use: not recommended, may cause problems). Use of this tag is rare for documents that are intended for use throughout the entire World Wide Web. Documents using this tag to limit distribution are advised to use the or file either in addition to or as replacement for the tag.

meta robots

The tag declares to search engines which links and/or content to follow/ignore, cache/archive, and/or display/ignore. Although the 1 file is the preferred method for these directives, the tag issues the same directives, namely as well as and (related tag: ):

Here are the possible values for the meta robots tag:

  • – index the page
  • – don’t index the page
  • – follow links from the page
  • – don’t follow links from the page
  • – don’t cache/archive the page
  • – do nothing, ignore the page
  • – do whatever you want, default behavior

meta googlebot

The tag declares to search engines which links and/or content to follow/ignore, cache/archive, and/or display/ignore. Although the 1 file is the preferred method for these directives, the tag issues the same directives, namely:

  • (open season on all content)
  • (index pages for search results)
  • (do not index pages for search results)
  • (follow links)
  • (do not follow links)
  • (please archive/cache all content)
  • (do not cache/archive content)
  • (use cached content as search result excerpt)
  • (use no excerpt or cached content in search results)

Here is an example:

meta expires

The tag is used in conjuction with the tag for frequently updated content. The tag indicates the expiry date for the document (related tag: ). This tag requires RFC1123 date format:

meta revisit-after

The tag declares the number of days after which search engines should revisit your webpage for re-indexing. This tag is used in conjuction with the tag for frequently updated content. The tag is useful for search rank optimization when search results are ordered according to date of most recent submission:

Other proprietary Microsoft nonsense

These are listed here for reference purposes only. If you find yourself needing more information regarding these proprietary tags, you are in a dark place, traveling down a very dark road..

Here is one for the MSIE image toolbar. Useful for disabling such nonsense:

This one is used to disable the MS WinXP theme compatibility nonsense:

meta viewport

This tag is recognized by the iPhone’s Mobile Safari browser and controls the behavior of its viewport. For example, if your site is 777 pixels wide, using the following meta tag would enable Mobile Safari to size the viewport according to the correct dimensions:

Мета-теги для поисковых систем

Robots

Мета-тег указывает роботам поисковых систем, как сканировать и индексировать страницу.

Для конкретного бота можно задать свою инструкцию. Например, заменить robots на Googlebot для Гугла или на YandexBot для Яндекса.

Возможные указания:

  • all – означает, что разрешена индексация и переход по ссылкам, аналогично index, follow;
  • noindex – запрет индексации;
  • index – разрешена индексация;
  • nofollow – нельзя переходить по ссылкам;
  • follow – можно переходить по ссылкам;
  • noarchive – запрещено показывать ссылку на сохраненную копию в выдаче;
  • noyaca – (для Яндекса) не использовать для сниппета описание из Яндекс.Каталога;
  • nosnippet – (в Google) нельзя использовать для сниппета фрагмент текста и показывать видео;
  • noimageindex – (в Google) запрет указания страницы как источника изображения;
  • unavailable_after: – (в Google) после указанной даты будет прекращено сканирование и индексирование страницы;
  • none – запрет индексации и перехода по ссылкам, аналогичен noindex, nofollow.

Description

Мета-тег name=«description» может использоваться поисковыми системами при формировании сниппета, поэтому он должен:

  • точно описывать содержание страницы;
  • вызывать желание кликнуть;
  • включать продвигаемое ключевое слово.

В разных поисковых системах выводятся 160–240 символов.

Description для каждой продвигаемой страницы должен быть уникальным.

Keywords

Мета-тег name=«keywords» раньше использовался поисковыми системами при ранжировании, но из-за многочисленных манипуляций его значимость постоянно уменьшалась. Теперь большинство поисковиков его игнорируют. Google не поддерживает вообще, а Яндекс , что может учитывать. Но на практике keywords давно не оказывает влияния, а его некорректное заполнение может привести к переспаму.

Существуют три подхода:

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

Если принято решение прописать ключевые слова, важно не допускать спама.

Ключевые слова должны характеризовать конкретную страницу и упоминаться в контенте.

Title

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

Данный HTML-тег важен для SEO: влияет на ранжирование и кликабельность по сниппету.

Классические рекомендации по заполнению мета-тега:

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

Рекомендуема длина – 70–80 символов.

HTML Ссылки

HTML по АлфавитуHTML по КатегориямHTML Атрибуты ТеговHTML Атрибуты ГлобалHTML Атрибуты СобытийHTML ЦветаHTML ХолстыHTML Аудио / ВидеоHTML Наборы символовHTML DOCTYPEsHTML Кодирование URLHTML Языковые кодыHTML Коды странHTTP Ответы сервераHTTP МетодыPX в EM конвертерГорячие клавиши

HTML Теги

<!—> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> — <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

Page Redirection


You can use <meta> tag to redirect your page to any other webpage. You can also specify a duration if you want to redirect the page after a certain number of seconds.

Example

Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify content attribute.

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Microsoft recommends Edge mode since IE11

As noticed by Lynda (see comments), the recommends Edge mode:

But the position of Microsoft was not clear. Another :

Instead, Microsoft recommended using :

As Ricardo explains (in the comments below) any DOCTYPE (HTML4, XHTML1…) can be used to trigger Standards Mode, not only HTML5’s DOCTYPE. The important thing is to always have a DOCTYPE in the page.

Clara Onager has even noticed in an older version of Specifying legacy document modes:

It is so confusing that Usman Y thought Clara Onager was speaking about:

Well… In the rest of this answer I give more explanations why using is a good practice in production.

[ ^ ] geo meta tags

The tag specifies the relative physical location of the document. For the name, latitude is plotted vertically as the “y” coordinate, while longitude is plotted horizontally as the “x” coordinate. For more information, search for “geotag generator” and “checkmap” or “check map”. Web pages that utilize are encouraged to display a GeoTag icon:

The helps to further define physical location by specifying the name of the location:

There is also a tag that is useful for indicating the associated region via the country’s subdivision code. The country’s subdivion code is predefined, taken from a controlled ISO 3166-2 list, and may be used for resource discovery. If the regional code is unknown, the 2-character country code may be used instead. This tag may also be used to check or validate the tag:

And don’t forget about the “geo.country” meta tag, which indicates the two-digit abbreviation of the associated country:

Here is another set of tags used to add your location to the GeoURL ICBM Address Server:

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

«Content-Type»

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

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

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

«refresh»

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

HTML-код с «refresh»:

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

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

[ ^ ] link tags6

link stylesheet

The tag is used to associate an external file with the document. When using the tag it is necessary to include both and , where “value” is set to either “print”, “screen”, or “all”:

link alternate

The tag may be used for establishing any number of a variety of link types. This tag is frequently associated with syndicated content, their inclusion subsequently enabling modern browsers to “autodiscover” any feeds that may be offered. For WordPress users, there is now a plugin that automatically produces a user-specified set of feed links2. For this tag, the attribute defines the feed format, while the attribute specifies the title given to the feed. Here are several examples of the tag providing feed links:

link bookmark


The tag specifies a “key entry point within an extended document.” For example, the following bookmark links employ attributes to specify associated names for each of the bookmarks. Each web document may include multiple bookmark links.

a few more..

Here are a few more that should be relatively (ha ha) self-explanatory:

Beyond the link types defined in this article, authors may create customized link types by defining them in an associated profile. For more information, refer to the attribute in the element of this document (view source code).

HTML Теги

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><menu><menuitem><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Пример использования элемента meta

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

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

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

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

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

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

History

For many years (2000 to 2008), IE market share was more than 80%. And IE v6 was considered as a de facto standard (80% to 97% market share in , for IE6 only, more market share with all IE versions).

As IE6 was not respecting Web standards, developers had to test their website using IE6. That situation was great for Microsoft (MS) as web developers had to buy MS products (e.g. IE cannot be used without buying Windows), and it was more profit-making to stay non-compliant (i.e. Microsoft wanted to become the standard excluding other companies).

Therefore many many sites were IE6 compliant only, and as IE was not compliant with web standard, all these web sites was not well rendered on standards compliant browsers. Even worse, many sites required only IE.

However, at this time, Mozilla started Firefox development respecting as much as possible all the web standards (other browser were implemented to render pages as done by IE6). As more and more web developers wanted to use the new web standards features, more and more websites were more supported by Firefox than IE.

When IE market sharing was decreasing, MS realized staying standard incompatible was not a good idea. Therefore MS started to release new IE version (IE8/IE9/IE10) respecting more and more the web standards.

Setting Cookies

Cookies are data, stored in small text files on your computer and it is exchanged between web browser and web server to keep track of various information based on your web application need.

You can use <meta> tag to store cookies on client side and later this information can be used by the Web Server to track a site visitor.

Example

Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify content attribute.

<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags Example</title>
      <meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
         
   </head>
   <body>
      <p>Hello HTML5!</p>
   </body>
</html>

If you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.

Note − You can check PHP and Cookies tutorial for a complete detail on Cookies.

Мета-тег keywords и другие поисковые системы

Насчёт других поисковиков. В написано, что содержимое мета-тега keywords

(значит, может и не учитываться). Т.е. для Яндекса всё же надо прописывать ключевые слова, лишним не будет.

Остальные поисковики:

  • Mail.ru пока не имеет своего поиска. Раньше искали с помощью Яндекса, затем Google + в какой-то мере использовались свои поисковые технологии. Возможно, в будущем у Mail.ru будет свой собственный поиск
  • Yahoo (как поисковик) стал Bing’ом
  • Bing — пока не очень изученное явление в Рунете, хотя трафик с него идёт, хоть и маленький. И почему-то индексирует он очень медленно. Скорей всего, доля его на мировом (а впоследствии, и на российском) поисковом рынке будет подрастать. Всё же это разработка Microsoft..
  • Всё остальное, что есть в Рунете — Qip.ru, Nigma.ru, Rambler.ru давно уже «ищут Яндексом», а потому на них внимания обращать не нужно.

Из всего этого следует, что всё же не лишним будет прописывать тег ключевых слов meta keywords. В частности, для сайтов на WordPress имеется отличный WP-плагин. Читайте и смотрите видео про плагин All-in-one-seo-pack. Однако прописывать ключевики нужно более-менее правильно и особо не заморачиваясь: 2-5 слов вполне достаточно.

Также стоит иметь в виду, что содержимое meta keywords — это не ключевые слова, подбираемые, например, в Яндексе.

Кроме того, не стоит вставлять в этот мета-тег повторы. Например, если контентом страницы является кулинарный рецепт, не нужно писать что-то вроде «приготовление салата, салат приготовить, рецепт салата». Вполне достаточно и намного красивее:

Случайные публикации:

  • Как не проиграть в SEO войне. Обзор SEO программы Netpeak spider…разом, можно и нужно проверить все ошибки сайта и при необходимости, исправить их.

  • Инструмент Disavow links в Google — как пользоваться и закрыть внешние ссылки? Видеоурок…большинстве случаев не потребуется пользоваться этой новой
  • Что такое лимиты Яндекс.XML и как их продать на бирже xmlstock.com?Несколько дней назад нашёл в Сети интересную биржу по продаже лимитов…
  • Неожиданный эффект от Postila.ru…ервисе всего лишь ссылку на сайт — и трафик пошёл.

    Вот как выглядит сам пост:

  • Как исправить ошибки URL в Google webmasters? Переадресация на другую страницу через .htaccess…и слева от URL с ошибками и щёлкнуть «Отметить как исправленные».

    Таким образом,

Оставьте комментарий:


С этим читают