Что такое meta в html
Перейти к содержимому

Что такое meta в html

  • автор:

Что такое meta в html

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

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

  • Алёна Батицкая ,
  • Василь Хабибуллин

Обновлено 20 октября 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

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

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

Пример

Скопировать ссылку «Пример» Скопировано

     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

Скопировать ссылку "charset" Скопировано

Задаёт кодировку страницы. Мы рекомендуем писать здесь UTF - 8 — это самый распространённый вариант.

  meta charset="UTF-8">      

content

Скопировать ссылку "content" Скопировано

Основное содержимое метатега, которое используется только с http - equiv и name .

http - equiv

Скопировать ссылку "http-equiv" Скопировано

Атрибут, который может изменять поведение страницы или серверов. Используется в паре с content . У него есть несколько значений:

  • "default - style" — предпочтительный стиль таблиц, который используется на странице. В этом случае в атрибуте content прописывается заголовок из элемента , который связан с таблицей CSS-стилей, или заголовок элемента , который содержит таблицу CSS-стилей.
  • "refresh" — время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом, который указан в секундах.
  meta http-equiv="refresh" content="3">      

name

Скопировать ссылку "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="Рассказываем, как нарезать картошку тонкими ломтиками" >      
  • "author" — имя автора страницы.
  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. Такая разметка нужна для того, чтобы при вставке ссылки на ваш сайт в соцсетях в превью отображалась красивая карточка.

Пример open graph (OG) разметки

Стандартный набор метатегов для красивой карточки в 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">      

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

Что такое meta в html

Тег (от англ. meta information — мета информация) определяет данные (они называются ещё метатеги), которые используются для хранения информации, предназначенной для браузеров и поисковых систем.

Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере . Как правило, атрибуты любого метатега сводятся к парам « имя=значение », имена которых определяются ключевыми словами content , name или http-equiv .

Синтаксис¶

1 2 3
head> meta /> head> 

Закрывающий тег не требуется.

Атрибуты¶

Задаёт кодировку документа.

Устанавливает значение атрибута, заданного с помощью name или http-equiv .

Предназначен для конвертирования метатега в заголовок HTTP.

Имя метатега, также косвенно устанавливает его предназначение.

charset¶

Указывает кодировку документа. Атрибут введён в HTML5 и предназначен для сокращения формы , которая задавала кодировку в предыдущих версиях HTML и XHTML.

Синтаксис

meta charset="" /> 

Значения

Название кодировки, например UTF-8.

Значение по умолчанию

content¶

content устанавливает значение атрибута, заданного с помощью name или http-equiv . Атрибут content может содержать более одного значения, в этом случае они разделяются запятыми или точкой с запятой.

Некоторые значения атрибута content для , предназначенных для поисковых роботов, приведены в табл. 1.

Табл. 1. Значения для meta name="robots"

Значение Описание
index Разрешает роботу индексировать данную страницу.
noindex Запрещает роботу индексировать текущую страницу. Она не попадает в базу поисковика и её невозможно будет найти через поисковую систему.
follow Разрешает роботу переходить по ссылкам на данной странице.
nofollow Запрещает роботу переходить по ссылкам на данной странице. При этом всем ссылкам не передаётся ТИЦ (тематический индекс цитирования) и PagePank.
noarchive Запрещает роботу кэшировать данную страницу.

Допустимые значения атрибута content для , которые предназначены для управления просмотром сайта на мобильных устройствах, приведены в табл. 2.

Табл. 2. Значения для meta name="viewport"

Значение Допустимые значения Описание
width device-width или целое положительное число Устанавливает ширину области просмотра в пикселях.
height device-height или целое положительное число Устанавливает высоту области просмотра в пикселях.
initial-scale Число от 0.0 до 10.0 Устанавливает соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра.
maximum-scale Число от 0.0 до 10.0 Задаёт максимальное значение масштаба. Должно быть больше или равно minimum-scale, в противном случае игнорируется.
minimum-scale Число от 0.0 до 10.0 Задаёт минимальное значение масштаба. Должно быть меньше или равно maximum-scale, в противном случае игнорируется.
user-scalable yes или no Если указано no, то пользователь не сможет масштабировать веб-страницу. По умолчанию используется yes.

Синтаксис

meta content=". " /> 

Значения

Строка символов, которую надо взять в одинарные или двойные кавычки.

Значение по умолчанию

http-equiv¶

Браузеры преобразовывают значение атрибута http-equiv , заданное с помощью content , в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.

Синтаксис

meta http-equiv="" /> 

Значения

Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута http-equiv .

Тип кодировки документа.

Устанавливает дату и время, после которой информация в документе будет считаться устаревшей.

Способ кэширования документа.

Загружает другой документ в текущее окно браузера.

Значение по умолчанию

name¶

Устанавливает идентификатор метатега для пары « имя=значение ». Одновременно использовать атрибуты name и http-equiv не допускается.

Синтаксис

meta name="" /> 

Значения

Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута name .

Имя автора документа.

Описание текущего документа.

Список ключевых слов, встречающихся на странице.

Управляет просмотром сайта на мобильных устройствах.

Значение по умолчанию

Спецификации¶

  • Referrer Policy
  • HTML Living Standard
  • HTML 5
  • HTML 4.01 Specification

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
 html> head> title>METAtitle> meta charset="utf-8" /> meta name="GENERATOR" content="Microsoft FrontPage 4.0" /> meta name="ProgId" content="FrontPage.Editor.Document" /> head> body> p>. p> body> html> 

Тег meta, ключевые слова

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

Перечень ключевых слов задаётся тегом , у которого атрибут name имеет значение keywords . Ключевые слова (самые важные слова из содержания страницы) перечисляются в атрибуте content через запятую:

Раньше этот тег был очень важен для поисковиков. Каково положение дел сейчас? Мы бы с удовольствием вам поведали, но это большой секрет Яндекса и Гугла.

Краткое описание страницы задаётся похожим образом, только значение атрибута name меняется на description :

Краткое описание (или аннотация) страницы часто используется поисковиками при отображении результатов поиска.

Скриншот браузера с описанием страницы в результатах поиска

Существуют рекомендации по правильному использованию метатегов от Гугла и Яндекса.

Перейти к заданию

  • index.html Сплит-режим

Сайт начинающего верстальщика

Сайт начинающего верстальщика

Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл тренажёры по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.

Моё первое задание — вести дневник и честно писать обо всех своих свершениях.

Раздел про навыки

Подвал сайта


Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ

Спасибо! Мы скоро всё исправим)

Мета-теги

Мета-теги в HTML-коде

Мета-теги в HTML-коде

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

Основные функции тега :

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

Мета-теги бывают универсальными и поддерживаемыми только какими-то конкретными системами.

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

Robots

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

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

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

Description

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

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

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

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

Keywords

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

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

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

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

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

Title

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

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

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

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

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

Другие мета-теги

Верификация

Для подтверждения права собственности на сайт и возможности управлять им в Вебмастере Яндекса или Search Console в Google можно использовать особые мета-теги верификации google-site-verification и yandex-verification (или иной способ).

Viewport

Мета-тег нужен для адаптации к мобильным устройствам, контролирует масштаб видимой области просмотра в браузере. Без него отображение некорректное.

Http-equiv

  • Content-Type – помогает определить кодировку и тип документа;
  • Refresh – перенаправление на другую страницу после заданного в секундах времени нахождения;
  • Content-Language – указание основного языка документа.

Тег указывает браузеру, на основании каких данных нужно обработать содержание документа.

Author и Copyright

Функция – идентификация автора. Если сайт принадлежит компании, используется Copyright, если конкретному лицу – Author.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *