Мета-теги

Мета-теги — служебные теги в разметке HTML. Они предназначены для указаний сведений поисковым роботам и браузерами. Взгляните на вкладку с этим уроком и вы увидите текст, с помощью которого всегда сможете найти нужную вкладку, открытую в браузере.

При запросе в поисковой системе (например Google или Yandex) также показывается этот заголовок и описание.

При добавлении статьи с сайта на страницу в социальных сетях появляется картинка и описание.

Всё это — работа мета-тегов. Именно в них можно определить заголовок и описание для текущей HTML страницы, картинку, которая появится при копировании ссылки в социальных сетях.

Title

За заголовок во вкладке браузера отвечает тег title, внутри которого содержится заголовок страницы. Часто советую использовать заголовок от 50 до 80 символов. Такое ограничение существует из-за того, что поисковые системы не могут показать больше символов в качестве заголовка страницы. Заголовок внутри тега title отобразится во вкладке в браузере.

<title>Code Basics: основы программирования</title>

Description

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

<meta name="description" content="Бесплатные практические уроки по программированию для тех, кто начинает с нуля.">

Open Graph

Open Graph (og) — придуманный в компании Facebook набор мета-тегов, которые позволяют задавать уникальную картинку и описание страницы при публикации в социальных сетях. Данные мета-теги сейчас поддерживаются почти всеми известными социальными сетями и мессенджерами, став одним из важнейших пунктов при создании сайта.

Основными og мета-тегами являются:

  • og:title — Заголовок страницы. При публикации в социальных сетях будет использоваться вместо заголовка title.
<meta name="og:title" content="Code Basics: основы программирования">
  • og:description — Описание страницы. Заменяет для социальных сетей описание из мета-тега description.
<meta name="og:description" content="Бесплатные практические уроки по программированию для тех, кто начинает с нуля.">
  • og:image — Изображение страницы. Один из важнейших og мета-тегов. Если он не указан, то соц. сети стараются автоматически найти картинку внутри страницы. Эти картинки не всегда подставляются удачные, поэтому можно чётко указать, какую картинку будет использовать социальная сеть.
<meta name="og:image" content="/images-header.png">

При отсутствии og мета-тегов социальные сети будут брать данные из стандартных мета-тегов title и description на HTML странице.

Задание

Добавьте в редактор 3 мета-тега:

  • title
  • description
  • og:image

Значение мета-тегов произвольное.


Советы


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

Пожалуйста, авторизуйтесь с помощью учётной записи GitHub, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт на GitHub.