Предоставьте полезные метаданные для вашего веб-контента и повысьте свою позицию в поисковых результатах с помощью мета-тегов.
Наряду с заголовком вашей страницы, а также скриптами и таблицами стилей, которые она использует, в разделе head HTML-документа можно добавить мета-теги. Они являются важными для SEO, доступности и общей производительности веб-сайта.
Узнайте, как использовать мета-теги и ознакомьтесь с информацией, которую они могут предоставить.
Мета-теги — это элементы, предоставляющие дополнительную информацию о веб-странице. Браузеры не отображают этот метаданный напрямую, но любой инструмент может использовать его для различных целей. К ним относятся поисковые системы, браузеры и другие веб-сервисы.
Данные, которые вы предоставляете в мета-тегах, помогают улучшить рейтинги поисковых систем, способствуют отзывчивости и доступности веб-сайта, а также улучшают отображение ваших страниц в социальных сетях.
Мета-теги являются тегами самозакрывания; здесь нет </meta>, потому что они не заключают в себе никакого содержания. Вся информация содержится в их атрибутах. Мета-теги можно добавить в раздел head вашего HTML-документа:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</html>
Приведенный выше HTML-шаблон содержит два мета-тега в разделе head. Они предоставляют информацию о наборе символов (UTF-8) и видеовьюпорте соответственно.
Большинство мета-тегов используют комбинацию следующих атрибутов для хранения своих данных.
Часто поддерживаемые различными веб-сервисами и браузерами мета-теги включают:
Этот отрывок до 155 символов кратко описывает содержание страницы. Поисковые системы часто отображают его под заголовком страницы и URL. Важно предоставить лаконичное и точное описание, чтобы побудить пользователей кликнуть по ссылке и посетить вашу страницу.
<meta name="description" content="Краткое описание вашей страницы">
Facebook и другие социальные платформы активно используют эти теги. Они используют информацию в этих тегах для улучшения представления ссылок на вашу страницу при их обмене пользователями. Мета-теги Open Graph включают атрибуты, такие как og:title, og:description и og:image:
<meta property="og:title" content="Заголовок вашей страницы">
<meta property="og:description" content="Краткое описание вашей страницы">
<meta property="og:image" content="URL связанного изображения">
Эти теги предоставляют информацию для поисковых систем и могут помочь улучшить рейтинг вашей страницы. Они также включены в список основных практик по SEO. Они включают атрибуты, такие как robots, author и другие. Несмотря на то, что их важность с течением времени снизилась, все равно важно включать их в ваш HTML-документ.
<meta name="robots" content="index, follow">
<meta name="author" content="Ваше Имя">
Мета-тег видеовьюпорта является важным элементом в адаптивном веб-дизайне. Он сообщает браузеру адаптировать макет веб-страницы в соответствии с шириной устройства, обеспечивая правильное отображение контента и читаемость на мобильных устройствах.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Эти мета-теги важны для управления определенными аспектами обработки веб-страниц браузерами и серверами. Они включают атрибуты, такие как refresh и X-UA-Compatible. Несмотря на то, что их прямое воздействие на SEO может варьироваться, они играют ключевую роль в влиянии на поведение страницы и совместимость.
<meta http-equiv="refresh" content="5;url=https://example.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Ваши проекты, вероятно, не будут использовать все эти теги одновременно, но важно иметь хорошее понимание различных мета-тегов, доступных для использования. Кроме того, использование мета-тегов приносит пользу в улучшении организации HTML-документов.
Мета-теги гибки, потому что:
Вот пример пользовательского мета-тега:
<meta name="target-audience" content="разработчики">
В этом примере пользовательский тег указывает аудиторию контента, указывая, что он предназначен для разработчиков.
Пользовательские мета-теги предоставляют способ расширить стандартный набор тегов, широко признанных. Однако важно тщательно документировать использование пользовательских тегов и иметь хорошее понимание того, как вы собираетесь их использовать. Другие сервисы по умолчанию не будут использовать или распознавать их, поэтому, вероятно, вам придется написать свой собственный код для их обработки.
Добавить комментарий