Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке Open Graph?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Open Graph** - це набір спеціальних мета-тегів, які описують сторінку **для соціальних мереж і месенджерів**.
За їх допомогою можна контролювати, **як посилання виглядає при шерингу**: заголовок, опис, картинка, тип контенту.

Простіше кажучи:

> Open Graph відповідає за гарний і передбачуваний прев'ю-блок, коли посилання надсилають у соцмережі.

---

## Навіщо потрібен Open Graph

Без Open Graph соцмережа намагається вгадати, що показати:

- може взяти не той заголовок
- обрати випадкову картинку
- взагалі нічого не показати

Open Graph дозволяє явно сказати:

- який заголовок використовувати
- який опис показати
- яку картинку підставити
- що це за тип сторінки

---

## Хто використовує Open Graph

Стандарт був запропонований **Meta** (Facebook),
але зараз його використовують:

- Facebook
- LinkedIn
- Telegram
- WhatsApp
- Slack
- Discord
- і багато інших сервісів

Навіть якщо сервіс не підтримує весь стандарт, базові поля він майже завжди читає.

---

## Основні теги Open Graph

Найважливіші:

```html
<meta property="og:title" content="Заголовок сторінки" />
<meta property="og:description" content="Короткий опис" />
<meta property="og:image" content="https://site.com/cover.jpg" />
<meta property="og:url" content="https://site.com/page" />
<meta property="og:type" content="article" />
```

### Що вони означають

- **og:title** - заголовок для прев'ю
- **og:description** - текст під заголовком
- **og:image** - картинка прев'ю
- **og:url** - канонічний URL
- **og:type** - тип контенту (`website`, `article`, `product` тощо)

---

## Як Open Graph виглядає на практиці

Коли хтось надсилає посилання:

- соцмережа запитує HTML сторінки
- читає OG-теги
- формує картку прев'ю

Користувач бачить **охайний блок**, а не просто URL.

---

## Open Graph і SEO

Open Graph:

- **не впливає напряму** на ранжування в пошуку
- **сильно впливає** на клікабельність посилань
- покращує сприйняття бренду
- підвищує CTR у соцмережах і месенджерах

Це не про пошукові системи, а про **поширення контенту**.

---

## Open Graph у Next.js

У Next.js Open Graph зазвичай задається через **Metadata API**:

```ts
export const metadata = {
  openGraph: {
    title: 'Стаття про Next.js',
    description: 'Детальний розбір',
    images: ['/og-image.png'],
    type: 'article'
  }
}
```

Next.js сам:

- згенерує потрібні `<meta>`-теги
- коректно об'єднає їх з layout'ами
- вставить у `<head>`

---

## Часта помилка

Багато хто думає, що:

- `<title>` і `<meta description>` достатньо

Насправді:

- соцмережі орієнтуються **насамперед на Open Graph**

Без OG-тегів прев'ю майже завжди буде гіршим.

---

### Підсумок

Open Graph - це:

- стандарт опису сторінки для соцмереж
- контроль над прев'ю посилання
- важлива частина поширення контенту
- відмінно працює разом з Metadata API

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати395 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.