lancejpollard / meta-tags.md
Use custom meta tags to store data that you need in javascript, instead of hard-coding that data into your javascript. I store my Google Analytics code in meta tags. Here’s some examples:
meta name pl-s">google-analytics" content pl-s">1-AHFKALJ"/> meta name pl-s">disqus" content pl-s">abcdefg"/> meta name pl-s">uservoice" content pl-s">asdfasdf"/> meta name pl-s">mixpanel" content pl-s">asdfasdf"/>
meta name pl-s">microid" content pl-s">mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7" />
meta name pl-s">apple-mobile-web-app-capable" content pl-s">yes"> meta content pl-s">yes" name pl-s">apple-touch-fullscreen" /> meta name pl-s">apple-mobile-web-app-status-bar-style" content pl-s">black"> meta name pl-s">format-detection" content pl-s">telephone=no"> meta name pl-s">viewport" content pl-s">width = 320, initial-scale = 2.3, user-scalable = no">
Internet Explorer Meta Tags
meta http-equiv pl-s">Page-Enter" content pl-s">RevealTrans(Duration=2.0,Transition=2)" /> meta http-equiv pl-s">Page-Exit" content pl-s">RevealTrans(Duration=3.0,Transition=12)" /> meta name pl-s">mssmarttagspreventparsing" content pl-s">true"> meta http-equiv pl-s">X-UA-Compatible" content pl-s">chrome=1"> meta name pl-s">msapplication-starturl" content pl-s">http://blog.reybango.com/about/"/> meta name pl-s">msapplication-window" content pl-s">width=800;height=600"/> meta name pl-s">msapplication-navbutton-color" content pl-s">red"/> meta name pl-s">application-name" content pl-s">Rey Bango Front-end Developer"/> meta name pl-s">msapplication-tooltip" content pl-s">Launch Rey Bango's Blog"/> meta name pl-s">msapplication-task" content pl-s">name=About;action-uri=/about/;icon-uri=/images/about.ico" /> meta name pl-s">msapplication-task" content pl-s">name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico" /> meta name pl-s">msapplication-task" content pl-s">name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico" /> meta name pl-s">msapplication-task" content pl-s">name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico" /> link rel pl-s">shortcut icon" href pl-s">/images/favicon.ico" />
meta name pl-s">tweetmeme-title" content pl-s">Retweet Button Explained" />
meta name pl-s">csrf-param" content pl-s">authenticity_token"/> meta name pl-s">csrf-token" content pl-s">/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc="/>
meta name pl-s">apple-mobile-web-app-capable" content pl-s">yes"> meta name pl-s">apple-mobile-web-app-status-bar-style" content pl-s">black"> meta name pl-s">format-detection" content pl-s">telephone=no"> meta name pl-s">viewport" content pl-s">width = 320, initial-scale = 2.3, user-scalable = no"> meta name pl-s">viewport" content pl-s">width = device-width"> meta name pl-s">viewport" content pl-s">initial-scale = 1.0"> meta name pl-s">viewport" content pl-s">initial-scale = 2.3, user-scalable = no"> link rel pl-s">apple-touch-icon" href pl-s">touch-icon-iphone.png" /> link rel pl-s">apple-touch-icon" sizes pl-s">72x72" href pl-s">touch-icon-ipad.png" /> link rel pl-s">apple-touch-icon" sizes pl-s">114x114" href pl-s">touch-icon-iphone4.png" /> link rel pl-s">apple-touch-startup-image" href pl-s">/startup.png"> link rel pl-s">apple-touch-icon" type pl-s">image/png" href pl-s">/apple-touch-icon.png" />
link rel pl-s">alternate" type pl-s">application/rss+xml" title pl-s">RSS" href pl-s">http://feeds.feedburner.com/martini" /> link rel pl-s">shortcut icon" type pl-s">image/ico" href pl-s">/favicon.ico" /> link rel pl-s">fluid-icon" type pl-s">image/png" href pl-s">/fluid-icon.png" /> link rel pl-s">me" type pl-s">text/html" href pl-s">http://google.com/profiles/thenextweb"/> link rel='shortlink' href='http://blog.unto.net/?p=353' /> link rel='archives' title='May 2003' href='http://blog.unto.net/2003/05/' /> link rel='index' title='DeWitt Clinton' href='http://blog.unto.net/' /> link rel='start' title='Pattern Recognition 1' href='http://blog.unto.net/photos/pattern_recognition_1_about/' /> link rel='prev' title='OpenSearch and OpenID? A sure way to get my attention.' href='http://blog.unto.net/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/' /> link rel='next' title='Not blog' href='http://blog.unto.net/meta/not-blog/' /> link rel pl-s">search" href pl-s">/search.xml" type pl-s">application/opensearchdescription+xml" title pl-s">Viatropos" /> link rel pl-s">self" type pl-s">application/atom+xml" href pl-s">http://www.syfyportal.com/atomFeed.php?page=3"/> link rel pl-s">first" href pl-s">http://www.syfyportal.com/atomFeed.php"/> link rel pl-s">next" href pl-s">http://www.syfyportal.com/atomFeed.php?page=4"/> link rel pl-s">previous" href pl-s">http://www.syfyportal.com/atomFeed.php?page=2"/> link rel pl-s">last" href pl-s">http://www.syfyportal.com/atomFeed.php?page=147"/> link rel='shortlink' href='http://smallbiztrends.com/?p=43625' /> link rel pl-s">canonical" href pl-s">http://smallbiztrends.com/2010/06/9-things-to-do-before-entering-social-media.html" /> link rel pl-s">EditURI" type pl-s">application/rsd+xml" title pl-s">RSD" href pl-s">http://smallbiztrends.com/xmlrpc.php?rsd" /> link rel pl-s">pingback" href pl-s">http://smallbiztrends.com/xmlrpc.php" /> link media pl-s">only screen and (max-device-width: 480px)" href pl-s">http://wordpress.org/style/iphone.css" type pl-s">text/css" rel pl-s">stylesheet" />
HTML Tag
The tag defines metadata about an HTML document. Metadata is data (information) about data.
tags always go inside the element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
There is a method to let web designers take control over the viewport (the user’s visible area of a web page), through the tag (See «Setting The Viewport» example below).
Browser Support
Attributes
| Attribute | Value | Description |
|---|---|---|
| charset | character_set | Specifies the character encoding for the HTML document |
| content | text | Specifies the value associated with the http-equiv or name attribute |
| http-equiv | content-security-policy content-type default-style refresh | Provides an HTTP header for the information/value of the content attribute |
| name | application-name author description generator keywords viewport | Specifies a name for the metadata |
Global Attributes
More Examples
Define keywords for search engines:
Какие бывают META теги и зачем они нужны
В продолжении первого поста про DOCTYPE, я, как и обещал, продолжу про META теги.
META-теги — это необязательные атрибуты, размещенные в заголовке страницы, которые могут содержать ее описание, ключевые слова к ней, информацию об авторе, управляющие команды для броузера и поисковых роботов, и прочую служебную информацию, не предназначенную для посетителей.
META-теги имеют два возможных атрибута
—
—
META-теги должны находиться в заголовке HTML-документа между
Стандартом HTML 4.01 значения и имена мета-тегов НЕ оговариваются, поэтому мы будем рассматривать те значения, которые уже устоялись в интернете и используются чаще других.
Пруфлинк: http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.1
(The META element can be used to identify properties of a document (e.g., author, expiration date, a list of key words, etc.) and assign values to those properties. This specification does not define a normative set of properties.)
Атрибут HTTP-EQUIV
META-теги с атрибутом HTTP-EQUIV эквивалентны HTTP-заголовкам. Обычно они управляют действиями броузеров и могут быть использованы для совершенствования информации, выдаваемой обычными заголовками. Теги такой формы могут дать такой же эффект, что и HTTP-заголовки, и на некоторых серверах автоматически могут быть переведены в настоящие HTTP-заголовки.
Некоторые генерируемые сервером поля заголовков не могут быть подменены значениями из META-тегов (в частности Date), другие подменяются только при ненормальном статус-коде (<>200). Когда заголовок не понятен, то значение HTTP-заголовка превалирует над значением META-тегов.
Значения поля content для Аттрибута HTTP-EQUIV
| Robots | Тег управляет индексацией конкретной web-страницы. При этом роботам можно запретить не только индексацию самого документа, но и проход по имеющимся в нем ссылкам. Инструкции по индексации записываются в поле content. Возможны следующие инструкции: NOINDEX — запрещает индексирование документа; NOFOLLOW — запрещает проход по ссылкам, имеющимся в документе; INDEX — разрешает индексирование документа; FOLLOW — разрешает проход по ссылкам. ALL — равносильно INDEX, FOLLOW NONE — равносильно NOINDEX, NOFOLLOW Значение по умолчанию: . В следующем примере робот может индексировать документ, но не должен выделять из него ссылки для поиска дальнейших документов: Имя тега, названия и значения полей нечувствительны к регистру. | Используется большинством поисковиков | |
| Description | Значение атрибута CONTENT — строка, которая определяет текстовое описание (краткую аннотацию) конкретной страницы Вашего сайта. Не стоит создавать слишком длинное и подробное описание Вашего сайта в данном теге, рекомендуется ограничиться текстом до 100 символов, поскольку поисковые машины, в большинстве случаев, имеют ограничение на количество индексируемых символов. Этот тег может сильно помочь в случаях, когда в документе мало текста, когда это управляющий фреймами файл (frameset) или в начале документа используются скрипты. | Самый широко используемый тег. Практически все поисковые системы учитывают его при индексации. Значение этого тега очень важно для раскрутки сайта, практически все поисковые системы опираются на этот тег, а некоторые выводят содержимое этого тега в результатах поиска (Google), поэтому желательно не просто указывать краткое описание документа, но сделать его содержание привлекательным рекламным сообщением. | |
| Keywords | Значение атрибута CONTENT — список ключевых слов, как правило, через запятую, соответствующих содержимому Вашего сайта. Это те слова, в запрос на которые, Вы хотели бы, появления Вашего сайиа в списке результатов поиска. Здесь также рекомендуется ограничиться списком до 30 слов. Можно поместить и наиболее частые опечатки ключевых слов. Также Вы можете здесь записать и английские слова, соответствующие содержимому Вашего сайта. Ну, а какие конкретно нужно писать слова — это уже тема отдельной статьи. Некоторые поисковые системы не индексируют сайты, в которых в данном теге повторяется одно и то же слово для увеличения позиции в списке результатов. | Учитывается большинством поисковых систем. Точно известно, что НЕ учитывает Google и Rambler | |
| document-state | Управление индексацией страницы для поисковых роботов. Определяет частоту индексации — или один раз индексировать (значение Static), или реиндексировать документ регулярно (значение Dynamic). | Используется редко | |
| GOOGLEBOT | Google поддерживает специальный тег Googlebot с помощью которого вы можете указать Google что он не должен индексировать и архивировать вашу страницу, другие поисковые системы этот тег проигнорируют. | ||
| Author | Автор, создатель сайта. Вряд ли используется поисковыми системами, и нужен скорее всего чтобы можно было показать что сайт сделан именно определенной персоной или фирмой. | ||
| Revisit | Значение этого тега указывает — как часто обновляется информация на вашем сайте, и как часто поисковая система должна на него заходить чтобы увидеть обновления. В силу сложившихся условий — поисковые системы сейчас самостоятельно определяют частоту сканирования сайта, поэтому, возможно, наличие этого тега ничего вам не даст. |