Демонстрація <meta> тегів

Як правильно оформити мета-теги, щоб посилання виглядало красиво у соцмережах, месенджерах та пошукових системах

Букет квітів з доставкою

Букет квітів з доставкою

1 099 грн
flowers.ua
S
Primary SEO

Базові мета-теги для пошукових систем — title, description, canonical URL.

HTML
<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 сторінки, щоб уникнути дублювання.

f
Open Graph (Facebook, Telegram, Viber)

Протокол від Facebook. Визначає як посилання виглядає при шерінгу — зображення, заголовок, опис.

HTML
<!-- Тип контенту: 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 повідомляє платформам, що це товар.

Facebook / Telegram preview
OG Preview

Букет квітів — 1099 грн з доставкою

Чудовий букет квітів з доставкою по Україні. Замовляйте на flowers.ua.

flowers.ua
Twitter / X preview
Twitter Preview

Букет квітів — 1099 грн з доставкою

Чудовий букет квітів з доставкою по Україні від flowers.ua.

dabo.com.ua
$
Open Graph: Product

Розширення OG для товарів — ціна, валюта, наявність. Використовується Facebook, Pinterest, каталогами.

HTML
<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 показувати ціну прямо у прев'ю.

X
Twitter Cards (X)

Twitter/X використовує власні теги. Якщо їх нема — бере Open Graph як фолбек.

HTML
<!-- 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 — текст для скрінрідерів.

{ }
Schema.org / JSON-LD

Структуровані дані для Google — товар з ціною може з'явитися у rich snippets пошукової видачі.

JSON-LD
<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.