Ответ
Open Graph теги — это специальные метатеги, используемые для контроля отображения контента при публикации ссылки в соцсетях (Facebook, LinkedIn, Twitter и др.). Они помогают задать заголовок, описание, изображение и другие параметры превью.
Основные теги:
<meta property="og:title" content="Заголовок страницы">
<meta property="og:description" content="Краткое описание">
<meta property="og:image" content="URL изображения">
<meta property="og:url" content="Канонический URL страницы">
<meta property="og:type" content="website/article/etc.">Пример использования:
<head>
<meta property="og:title" content="Лучший рецепт пиццы">
<meta property="og:description" content="Пошаговый рецепт неаполитанской пиццы">
<meta property="og:image" content="https://example.com/pizza.jpg">
<meta property="og:url" content="https://example.com/pizza-recipe">
<meta property="og:type" content="article">
</head>Для проверки разметки можно использовать инструменты типа Facebook Sharing Debugger. Важно указывать абсолютные URL для изображений.
Ответ 18+ 🔞
Так, слушай, смотри, есть такая штука — Open Graph теги, ну, эти ваши «ог-метатеги», блядь. Это чтобы, когда ты ссылку в соцсетях кидаешь — в Фейсбуке, ВКонтакте, да где угодно — выглядело всё красиво, а не просто какая-то хуйня с адресом.
Вместо этого, понимаешь, появляется красивая карточка: заголовок, описание, картинка — всё, как у людей. А без них — пиши пропало, будет отображаться какая-то ерунда, которую браузер сам выхватит, и выйдет пиздец, а не превью.
Вот основные, которые тебе нужно воткнуть в <head>:
<meta property="og:title" content="Заголовок страницы">
<meta property="og:description" content="Краткое описание">
<meta property="og:image" content="URL изображения">
<meta property="og:url" content="Канонический URL страницы">
<meta property="og:type" content="website/article/etc.">Смотри, как это работает на живом примере, чтобы ты, наконец, въехал:
<head>
<meta property="og:title" content="Лучший рецепт пиццы">
<meta property="og:description" content="Пошаговый рецепт неаполитанской пиццы">
<meta property="og:image" content="https://example.com/pizza.jpg">
<meta property="og:url" content="https://example.com/pizza-recipe">
<meta property="og:type" content="article">
</head>Видишь? og:title — это то, что жирным будет светиться. og:description — текст под ним, чтобы заинтересовать. og:image — сюда, блядь, абсолютный URL картинки суёшь, иначе соцсети её просто не увидят, и будет у тебя вместо превью — пустота, ёпта! og:url — адрес страницы, а og:type — тип контента: статья, сайт, видео — подсказываешь системе, что это.
И главное — после того как всё настроил, не поленись проверить через специальные инструменты, типа Facebook Sharing Debugger. А то бывает, вроде всё сделал, а нихуя не работает — оказывается, кэш старый или путь к картинке относительный. Так что, делай по уму, и будет тебе счастье, а не «ой, а почему у меня ссылка криво выглядит».