Створюйте вражаючі зображення для Open Graph з Open Graphy

Open Graph — це протокол, впроваджений Facebook у 2010 році, що дозволяє веб-розробникам контролювати, як їхні веб-сторінки відображаються при поширенні в соціальних мережах. Використовуючи метатеги Open Graph, можна вказувати заголовок, опис, зображення та іншу важливу інформацію, яка з'являється у прев'ю на соціальних платформах. Саме тут на допомогу приходить Open Graphy — зручний пакет для Laravel, що динамічно генерує ці необхідні зображення Open Graph для вашого додатка. Open Graphy дозволяє створювати соціальні картки на льоту, використовуючи інтуїтивно зрозумілі шаблони або створюючи власні, щоб ваш контент завжди справляв враження у соціальних мережах.

# Основні можливості

Просто генеруйте зображення Open Graph для свого сайту.
Додавайте заголовок, зображення та логотип до зображення Open Graph.
Включайте скріншот сторінки в зображення Open Graph, щоб демонструвати попередній перегляд.
Обирайте з 5 різних стандартних шаблонів: stripes, nodes, sunny, verticals та strings.
Налаштовуйте кольори та стилі шаблонів.
Зберігайте згенеровані зображення в кеші.
Створюйте свої власні шаблони за бажанням.

Примітка: Для коректного відображення зображень Open Graphy потребує встановлення браузера Chrome або Chromium на вашому сервері. У файлі README ви знайдете інструкції з встановлення на Ubuntu/Debian і macOS.

Коли Chrome або Chromium вже встановлено, ви можете встановити пакет за допомогою Composer:

composer require saasykit/laravel-open-graphy

Також можна опублікувати конфігурацію для подальшого налаштування:

php artisan vendor:publish --tag="open-graphy-config"

На завершення додайте наступний компонент до свого Blade-шаблону в тегах <head></head>:

<x-open-graphy::links title="Laravel News Open Graphy Demo" template="sunny" />

Це виведе наступне:

<meta property="og:image" content="{URL}">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
 
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{URL}">

Ось приклад зображення Open Graph, згенерованого за допомогою Open Graphy з шаблоном sunny і логотипом Laravel News:

Дізнайтеся більше про цей пакет і перегляньте вихідний код на GitHub.