Open Graph Image Generator

Fill the details and click "Generate"

...
Get the API
Download

Example Code


<?php

// Bruzu API key – get yours at https://bruzu.com
$apiKey = "YOUR-BRUZU-API-KEY";

$url = "Url of the page";
$title = "Title of the page";
$description = "Description of that url";

$apiLink = "https://img.bruzu.com/?bg=black&h=627&w=1200&a.tp=textbox&a.ox=center&a.oy=bottom&a.x=598&a.y=191&a.w=956&a.h=68&a.fill=white&a.ta=left&a.fs=60&a.lh=1&a.fw=900&a.ff=Poppins&a.fontStyle=normal&a.maxHeight=120&b.tp=textbox&b.x=115&b.y=219&b.w=960&b.h=122&b.fill=white&b.ta=left&b.fs=50&b.lh=1&b.fw=400&b.ff=Inter&b.fontStyle=normal&b.ox=left&b.oy=top&b.maxHeight=250&c.tp=textbox&c.oy=bottom&c.x=115&c.y=568&c.w=960&c.h=45&c.fill=white&c.ta=left&c.fs=40&c.lh=1&c.fw=400&c.ff=Inter&c.fontStyle=normal&c.ox=left&c.maxHeight=40&a.t=".urlencode($title)."&b.t=".urlencode($description)."&c.t=".urlencode($url);

$png = file_get_contents($apiLink."&ak=".$apiKey);
$imgLink = 'data:image/png;base64,' . base64_encode($png);

// You can use this link into your HTML code 
// <meta property="og:image" content="<?=$imgLink?>" >

?>


<!DOCTYPE html>
<html>
<head>
  <meta property="og:image" content="<?=$imgLink?>" >
</head>
<body>

</body>
</html>
What is an og:image? An og:image is Open Graph image, the image displayed on link preview wihtin social media sites and apps.
How do I set or change an Open Graph Image? You set it using a metatag using: property='og:image'
What should the Open Graph Image size be? The size of your Open Graph Image should be: 1200x600 px
What is a Twitter card? A Twitter card is an Open Graph image, displayed when a user shares a link on Twitter.
How do I use this with the Twitter card validator? Generate and serve the Twitter card image with the Bruzu API, using the meta property: twitter:image
How can I make a twitter card? Generate the image you want using the Bruzu API and put it into your HTML meta tags. For example: `<meta property='twitter:image' content='https://cdn.bruzu.com/0dda170dafc354849fc485ebda313fa4.png'>`