Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д.
В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами.
Теперь рассмотрим использование мета-тегов.
Объявление кодировки символов в HTML
Мета-тег обычно используется для объявления кодировки символов в HTML-документе.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Declaring Character Encoding</title>
<meta charset="utf-8">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Чтобы установить кодировку символов в документе, используется CSS-правило @charset.
UTF-8 — это универсальная и рекомендуемая кодировка символов для HTML-документа. Однако, если она не указана, используется кодировка по умолчанию.
Определение автора документа
Вы также можете использовать метатег, чтобы четко определить, кто является автором или создателем веб-страницы.
Автором может быть физическое лицо, компания в целом или третье лицо.
<head>
<title>Defining Document's Author</title>
<meta name="author" content="Alexander Howick">
</head>Атрибут name метатега определяет имя фрагмента метаданных, в то время как атрибут content определяет его значение. Значение атрибута content может содержать текст, но не может содержать HTML-теги.
Ключевые слова и описание для поисковых систем
Некоторые поисковые системы используют метаданные keywords и descriptions, для индексации веб-страниц. Вот пример:
<head>
<title>Defining Keywords and Description</title>
<meta name="keywords" content="HTML, CSS, javaScript">
<meta name="description" content="Easy to understand tutorials and references on HTML, CSS, javaScript and more...">
</head>Поисковые системы часто используют мета-описание (description) для создания краткого описания страницы, когда она появляется в результатах поиска. Смотрите рекомендации по мета-описанию.
Настройка viewport для мобильных устройств
Вы можете использовать метатег viewport для правильного отображения веб-страниц на мобильных устройствах.
Без метатега viewport мобильные браузеры отображают веб-страницы с большой шириной экрана (десктопной), а затем уменьшают его до размера экрана мобильного устройства. В результате пользователю приходится использовать зум для просмотра малкого текста и элементов, что не очень удобно.
Метатег viewport позволяет вам установить оптимальный размер области просмотра и пределы масштабирования для просмотра веб-страниц на мобильных устройствах. Типичное определение метатега области просмотра будет выглядеть следующим образом:
<head>
<title>Configuring the Viewport</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>Значение width=device-width внутри атрибута content устанавливает ширину области просмотра равной ширине экрана устройства, тогда как initial-scale=1 устанавливает начальный масштаб или уровень масштабирования равным 100%, когда страница загружается браузером.
Всегда используйте тег <meta> viewport на своих веб-страницах. Это сделает ваш сайт более удобным и доступным для мобильных устройств.
