Що таке Open Graph?

Next.jsMiddle~1 хв читання

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:

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.