- Инструменты /
- Генератор Open Graph изображений
Генератор Open Graph изображений
Как пользоваться инструментом
Нужно заполнить несколько полей:
Лого;
Заголовок страницы;
Описание;
Ссылка на фоновое изображение.
Дальше нужно выбрать цвет фона, если не используете фоновое изображение, и цвет текста.
В результате вы получите код, который нужно вставить в тег <head> страницы.
Автоматизация
Чтобы не вставлять картинки на страницы вручную, процесс можно автоматизировать.
- Откуда берутся изображения?
Изображения формируются через API pr-cy.io. Базовый URL для обращения к API - https://cover.pr-cy.io/api/og.
- Формирование URL для запроса к API
Чтобы создать изображение, нужно добавить к базовому URL параметры, которые определяют, как будет выглядеть изображение.
Каждый параметр добавляется в URL после знака вопроса и разделяется амперсандом (&).
Например, чтобы задать заголовок (title), категорию (category) и цвет текста (color), URL должен выглядеть так:
https://cover.pr-cy.io/api/og?title=Заголовок&category=Категория&color=000000
- Значения параметров
Параметры, которые вы можете добавить в URL:
title: Это строка, которая будет отображаться вверху изображения. Значение должно быть закодировано в URL.
category: Это строка, которая будет отображаться под заголовком. Значение также должно быть закодировано в URL.
color: Это шестнадцатеричный код цвета текста без символа #.
bgColor: Это шестнадцатеричный код цвета фона без символа #.
logo: Это URL-адрес изображения, которое будет использоваться в качестве логотипа.
bgImage: Это URL-адрес изображения, которое будет использоваться в качестве фона.
- Добавление URL в код сайта
URL с нужными параметрами нужно добавить в метатеги в <head> страниц сайта. Это можно сделать, например, с помощью любого плагина для WordPress, который позволяет добавлять произвольные метатеги.
Вот пример готового URL:
Заголовок, категорию, цвета и ссылки нужно заменить на соответствующие значения для вашего сайта.
Документация
Базовая ссылка: https://cover.pr-cy.io/api/og
| Параметр | Полезные материалы |
|---|---|
| title | Строка в кодировке URL, которая будет отображаться вверху |
| category | Строка в кодировке URL, которая будет отображаться под заголовком |
| color | Цвет текста — шестнадцатеричная строка цвета без символа #. |
| bgColor | Цвет фона — шестнадцатеричная строка цвета без символа #. |
| logo | URL-адрес изображения |
| bgImage | URL-адрес изображения, которое будет фоном |