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 теги можно посмотреть в официальной документации