Як правильно оформити мета-теги, щоб посилання виглядало красиво у соцмережах, месенджерах та пошукових системах
Базові мета-теги для пошукових систем — title, description, canonical URL.
<title>Букет квітів — замовлення з доставкою | Meta Demo</title>
<meta name="description" content="Демонстрація можливостей мета-тегів...">
<meta name="author" content="Олег Бушев">
<link rel="canonical" href="https://dabo.com.ua/meta-demo">
title — заголовок сторінки у результатах пошуку. description — опис під заголовком. canonical — вказує пошуковику основну URL сторінки, щоб уникнути дублювання.
Протокол від Facebook. Визначає як посилання виглядає при шерінгу — зображення, заголовок, опис.
<!-- Тип контенту: product, article, website -->
<meta property="og:type" content="product">
<meta property="og:url" content="https://dabo.com.ua/meta-demo">
<meta property="og:title" content="Букет квітів — 1099 грн з доставкою">
<meta property="og:description" content="Чудовий букет квітів з доставкою...">
<!-- Зображення: мін. 1200×630 для якісного прев'ю -->
<meta property="og:image" content="https://flowers.ua/images/Flowers/photoreports/445493319_ULLNERPGOAJA.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Букет квітів з доставкою">
<!-- Локаль та назва сайту -->
<meta property="og:locale" content="uk_UA">
<meta property="og:site_name" content="flowers.ua">
og:image — найважливіший тег для соцмереж. Без нього посилання виглядає як звичайний текст. og:site_name відображає назву сайту-джерела. og:type=product повідомляє платформам, що це товар.
Чудовий букет квітів з доставкою по Україні. Замовляйте на flowers.ua.
Чудовий букет квітів з доставкою по Україні від flowers.ua.
Розширення OG для товарів — ціна, валюта, наявність. Використовується Facebook, Pinterest, каталогами.
<meta property="product:price:amount" content="1099">
<meta property="product:price:currency" content="UAH">
<meta property="product:availability" content="in stock">
<meta property="product:condition" content="new">
<meta property="product:retailer" content="flowers.ua">
product:price:currency — код валюти за ISO 4217 (UAH, USD, EUR). product:availability — варіанти: in stock, out of stock, preorder. Ці теги дозволяють Facebook та Pinterest показувати ціну прямо у прев'ю.
Twitter/X використовує власні теги. Якщо їх нема — бере Open Graph як фолбек.
<!-- summary_large_image = велике фото зверху -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Букет квітів — 1099 грн з доставкою">
<meta name="twitter:description" content="Чудовий букет квітів з доставкою по Україні від flowers.ua.">
<meta name="twitter:image" content="https://flowers.ua/images/Flowers/...jpg">
<meta name="twitter:image:alt" content="Букет квітів з доставкою">
<meta name="twitter:site" content="@flowers_ua">
twitter:card — тип картки. summary_large_image дає велике фото зверху. summary — маленьке фото зліва. twitter:site — акаунт сайту в X. image:alt — текст для скрінрідерів.
Структуровані дані для Google — товар з ціною може з'явитися у rich snippets пошукової видачі.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Букет квітів з доставкою",
"image": "https://flowers.ua/images/...jpg",
"offers": {
"@type": "Offer",
"priceCurrency": "UAH",
"price": "1099",
"availability": "https://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "flowers.ua"
}
}
}
</script>
Google використовує JSON-LD для rich snippets — зірочки, ціна, наявність прямо у пошуковій видачі. Це збільшує CTR на 20-30%. Валідатор: Rich Results Test.