Какие бывают 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 | Значение этого тега указывает — как часто обновляется информация на вашем сайте, и как часто поисковая система должна на него заходить чтобы увидеть обновления. В силу сложившихся условий — поисковые системы сейчас самостоятельно определяют частоту сканирования сайта, поэтому, возможно, наличие этого тега ничего вам не даст. |
Источники информации:
Теги html meta name
Кусочек метаданных страницы. Описывает содержание страницы для браузера, поисковиков и соцсетей.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
В теге хранится краткое описание страницы, ключевые слова и другие данные, которые могут понадобиться браузерам и поисковым системам.
Таких метатегов может быть любое количество. Все они размещаются внутри тега , желательно в самом начале.
Пример
Скопировать ссылку «Пример» Скопировано
name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3" >head> meta name="description" content="Краткое описание страницы"> meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3" > meta name="viewport" content="width=device-width, initial-scale=1.0"> head>
Как понять
Скопировать ссылку «Как понять» Скопировано
Теги содержат полезную для поисковиков и браузеров информацию. Информация в метатегах называется метаданными. Пользователь не видит их содержимое на странице.
Метатеги различаются набором атрибутов и их значений. Один тег содержит одно сообщение: например, описание страницы , ключевые слова , кодировку страницы или другие метаданные.
Мы рекомендуем вставить как минимум метатеги description , viewport , charset . Они помогут оптимизировать сайт для браузера пользователя и поисковых систем.
В прописывается информация, которую нельзя указать в , , , или .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Метатег, который задаёт кодировку страницы, не отличается по структуре от обычных:
meta charset=". "> Остальные метатеги содержат атрибуты name или http - equiv , которые используются в паре с атрибутом content :
meta name=". " content=". "> meta http-equiv=". " content=". "> Первый атрибут задаёт параметр, который мы меняем, а второй — значение. Вот как будет выглядеть метатег, в котором прописываются ключевые слова на странице:
name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3">meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3" >
Атрибуты
Скопировать ссылку "Атрибуты" Скопировано
- charset — задаёт кодировку страницы. Мы рекомендуем писать здесь UTF - 8 — это самый распространённый вариант.
meta charset="UTF-8"> - http - equiv — атрибут, который может изменять поведение страницы или серверов. Используется в паре с content . У него есть несколько значений:
- "default - style" — предпочтительный стиль таблиц, который используется на странице. В этом случае в атрибуте content прописывается заголовок из элемента , который связан с таблицей CSS-стилей, или заголовок элемента , который содержит таблицу CSS-стилей.
- "refresh" — время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом, который указан в секундах.
meta http-equiv="refresh" content="3">- name — имя мета-тега, которое также определяет его значение. Используется в паре с content . Можно задать следующие значения:
- "keywords" — ключевые слова, которые помогают поисковикам находить страницу в интернете. По сути, это самые важные слова из содержания страницы.
meta name="keywords" content="Рецепт, печенье, готовим дома">- "viewport" — задаёт параметры окна просмотра в браузере. Страницу можно сделать адаптивной, подогнав ширину окна под размеры устройства. В примере ниже width указывает ширину окна просмотра, а initial - scale — коэффициент масштабирования страницы при первом открытии:
name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" >- "description" — краткое описание страницы, которое видит пользователь, когда находит сайт в поисковике. Например: «Рассказываем, как нарезать картошку тонкими ломтиками» для сайта о кулинарии. Это описание помогает поисковикам найти страницу, а пользователю — узнать, о чём она. Так что не забывайте указывать "description" .
name="description" content="Рассказываем, как нарезать картошку тонкими ломтиками">meta name="description" content="Рассказываем, как нарезать картошку тонкими ломтиками" >meta name="author" content="Иван Петров">Подсказки
Скопировать ссылку "Подсказки" Скопировано
💡 Чтобы избежать ошибок кодировки, необходимо уместить метатег с атрибутом charset в первых 1024 байтах документа. Для этого старайтесь указывать его в самом начале тега .
💡 Атрибуты http - equiv и name выполняют похожие функции, поэтому их нельзя использовать одновременно.
💡 С помощью атрибута http - equiv = "refresh" можно сделать так, чтобы страница отправляла пользователя на другую страницу через определённое количество секунд. Например, отправим пользователя на главную Яндекса через 15 секунд:
meta http-equiv="refresh" content="15;url=https://www.yandex.ru">На практике
Скопировать ссылку "На практике" Скопировано
Дока Дог советует
Скопировать ссылку "Дока Дог советует" Скопировано
🛠 В , помимо стандартных метаданных, передаются всякие специальные. Например, есть такой браузер, как Safari: он очень любит подстраивать номера телефонов в какой-то удобный для себя вид. Чтобы отключить это своеволие, нужен отдельный метатег:
meta name="format-detection" content="telephone=no">🛠 С помощью метатегов можно задавать поведение мобильной версии сайта. Например, можно прописать, на сколько на мобайле можно увеличить масштаб и насколько уменьшить относительно стандарта.
🛠 Через метатеги задаётся и Open Graph-разметка: заголовок, картинка и описание для репоста в соцсетях.
Алёна Батицкая советует
Скопировать ссылку "Алёна Батицкая советует" Скопировано
🛠 Если не задать описание для страницы при помощи , то поисковые системы при добавлении сайта в свою базу возьмут первый попавшийся текст со страницы и составят из него так называемый сниппет — текст под заголовком сайта в поисковой выдаче.
Если хочется контролировать, что именно увидит пользователь в поиске — всегда заполняйте description .
🛠 Есть отдельная категория метаразметки — OG-разметка. OG расшифровывается как open graph. Такая разметка нужна для того, чтобы при вставке ссылки на ваш сайт в соцсетях в превью отображалась красивая карточка.
Стандартный набор метатегов для красивой карточки в Facebook:
property="og:description" content="Посетите лучший сайт в интернете и познайте тщетность бытия">meta property="og:title" content="Лучший сайт в интернете"> meta property="og:description" content="Посетите лучший сайт в интернете и познайте тщетность бытия" > meta property="og:image" content="http://best-site/thumbnail.jpg"> meta property="og:url" content="http://best-site/index.htm">Большинство соцсетей используют информацию, указанную в тегах из примера выше, для генерации превью ссылок.
