HTML: Мета-теги

Мета-теги — служебные теги в разметке 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 property="og:title" content="Code Basics: основы программирования">

• og:description — описание страницы. Заменяет для социальных сетей описание из мета-тега description.

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

• og:image — изображение страницы. Один из важнейших og мета-тегов. Если он не указан, то робот старается автоматически найти картинку внутри страницы. Эти картинки не всегда находятся правильные по смыслу, поэтому можно чётко указать, какую картинку будет использовать социальная сеть.

<meta property="og:image" content="/images-header.png">

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

Задание

Добавьте в редактор 3 мета-тега:
* title
* description
* og:image

Значение мета-тегов произвольное. Для title используйте специальный тег, указанный в начале этого урока.

Советы

• Все OG теги можно посмотреть в официальной документации