Карточка для соцсетей в Nuxt

Заголовок вкладки и метаописание поисковик уже видят через обычные теги. Когда ссылку вставляют в ленту или чат, сервис часто строит отдельную карточку: крупный заголовок, текст и картинка. Для этого используют соглашение Open Graph.

Давайте разберём, как задать карточку на странице магазина. Функция useSeoMeta умеет принимать поля с префиксом og. Они не заменяют работу вкладки, а дополняют её для внешних сервисов. ogTitle и ogDescription попадают в служебные теги как заголовок и текст карточки. ogImage указывает абсолютный адрес обложки: относительный путь часто ломает превью, потому что чужой сервер не знает ваш домен. Картинку кладут на хостинг или в public и передают полный URL с протоколом. Строки в полях, как и в других метаданных, удобно писать на английском.

После публикации адреса мессенджер подтянет эти строки и покажет превью вместо голой ссылки. На странице магазина зададим три поля карточки:

<script setup>
	useSeoMeta({
		ogTitle: 'Shop',
		ogDescription: 'Goods',
		ogImage: 'https://example.com/cover.jpg',
	});
</script>
<template>
	<p>
		Welcome to the shop.
	</p>
</template>

Сделайте карточку для страницы отдела с собственным заголовком, описанием и адресом изображения на английском.

Настройте другую карточку для второй страницы отдела с иными строками и другой картинкой.