Анализ сайта
 5
Тарифы и ценыИнструментыБлогЕщё
 5
ВходРегистрация
  1. Инструменты
    2. /
  2. Генератор Open Graph изображений

Генератор Open Graph изображений

Мы в TelegramНашли ошибку?
Генератор Open Graph изображений поможет вам создать привлекательные и информативные изображения для улучшения видимости вашего сайта в социальных сетях.

Пример изображения:

og

Сгенерированная ссылка:

https://cover.pr-cy.io/api/og?logo=https%3A%2F%2Fa.pr-cy.ru%2Fassets%2Fimg%2Flogo-w.png&bgColor=354251&color=ffffff&title=%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA+%D0%B4%D0%BB%D1%8F+%D0%BE%D1%82%D0%BB%D0%B8%D1%87%D0%BD%D0%BE%D0%B9+%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B8&category=%D0%9F%D0%BE%D0%BB%D0%B5%D0%B7%D0%BD%D1%8B%D0%B5+%D0%BC%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%B0%D0%BB%D1%8B

Код для в ставки в <head>:

<meta
  property="og:image"
  content="https://cover.pr-cy.io/api/og?logo=https%3A%2F%2Fa.pr-cy.ru%2Fassets%2Fimg%2Flogo-w.png&bgColor=354251&color=ffffff&title=%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA+%D0%B4%D0%BB%D1%8F+%D0%BE%D1%82%D0%BB%D0%B8%D1%87%D0%BD%D0%BE%D0%B9+%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B8&category=%D0%9F%D0%BE%D0%BB%D0%B5%D0%B7%D0%BD%D1%8B%D0%B5+%D0%BC%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%B0%D0%BB%D1%8B"
/>

Как пользоваться инструментом

Нужно заполнить несколько полей:

  1. Лого;

  2. Заголовок страницы;

  3. Описание;

  4. Ссылка на фоновое изображение.

Дальше нужно выбрать цвет фона, если не используете фоновое изображение, и цвет текста.

В результате вы получите код, который нужно вставить в тег <head> страницы.

Автоматизация

Чтобы не вставлять картинки на страницы вручную, процесс можно автоматизировать.

  1. Откуда берутся изображения?

Изображения формируются через API pr-cy.io. Базовый URL для обращения к API - https://cover.pr-cy.io/api/og.

  1. Формирование URL для запроса к API

Чтобы создать изображение, нужно добавить к базовому URL параметры, которые определяют, как будет выглядеть изображение.

Каждый параметр добавляется в URL после знака вопроса и разделяется амперсандом (&).

Например, чтобы задать заголовок (title), категорию (category) и цвет текста (color), URL должен выглядеть так:

https://cover.pr-cy.io/api/og?title=Заголовок&category=Категория&color=000000

  1. Значения параметров

Параметры, которые вы можете добавить в URL:

  • title: Это строка, которая будет отображаться вверху изображения. Значение должно быть закодировано в URL.

  • category: Это строка, которая будет отображаться под заголовком. Значение также должно быть закодировано в URL.

  • color: Это шестнадцатеричный код цвета текста без символа #.

  • bgColor: Это шестнадцатеричный код цвета фона без символа #.

  • logo: Это URL-адрес изображения, которое будет использоваться в качестве логотипа.

  • bgImage: Это URL-адрес изображения, которое будет использоваться в качестве фона.

  1. Добавление URL в код сайта

URL с нужными параметрами нужно добавить в метатеги в <head> страниц сайта. Это можно сделать, например, с помощью любого плагина для WordPress, который позволяет добавлять произвольные метатеги.

Вот пример готового URL:

https://cover.pr-cy.io/api/og?title=Заголовок&category=Категория&color=000000&bgColor=FFFFFF&logo=https://mywebsite.com/mylogo.jpg&bgImage=https://mywebsite.com/mybackground.jpg

Заголовок, категорию, цвета и ссылки нужно заменить на соответствующие значения для вашего сайта.

Документация

Базовая ссылка: https://cover.pr-cy.io/api/og

ПараметрПолезные материалы
titleСтрока в кодировке URL, которая будет отображаться вверху
categoryСтрока в кодировке URL, которая будет отображаться под заголовком
colorЦвет текста — шестнадцатеричная строка цвета без символа #.
bgColorЦвет фона — шестнадцатеричная строка цвета без символа #.
logoURL-адрес изображения
bgImageURL-адрес изображения, которое будет фоном