Що таке OpenGraph зображення

OpenGraph зображення - це зображення, які використовуються для тегів OpenGraph, що відображаються в Twitter, Facebook та попередніх переглядах Open Graph.

OpenGraph зображення можуть бути статичними або динамічними. Це залежить від того, чи вони генеруються за допомогою генератора OpenGraph або інших інструментів.

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

Зображення, створені за допомогою інших інструментів, можуть бути динамічними. Наприклад, якщо ви використовуєте фреймворк рендерингу на стороні сервера для генерації OpenGraph зображень, ці зображення можуть генеруватися на основі поведінки користувача, часу, погоди або іншої динамічної інформації.

Створити OpenGraph зображення за допомогою інструментів

HTML-код OpenGraph

<meta property="og:url" content="https://example.com/article">
<meta property="og:title" content="Заголовок моєї статті">
<meta property="og:description" content="Це опис моєї статті">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="OpenGraph">

З цим HTML-кодом сторінка відображатиме зображення https://example.com/og-image.png в OpenGraph.

Ефекти попереднього перегляду

Після створення OG-зображення багато веб-сайтів надають онлайн-інструменти для попереднього перегляду та налагодження, щоб допомогти вам діагностувати проблеми. Ось деякі поширені інструменти: