Search on this site

Blog ✌️

How to create awesome og:images using React components
@danestves
--- views

How to create awesome og:images using React components

Published

Flyyer simplifies the process of creating Facebook Open Graph image tags for your web or mobile application's share metadata. I have already some time testing Flyyer which is an og:image as a service, what this service promises us is to create templates with React or Vue and use them to create images based on them.

One of the most tedious things when writing posts is not writing the post itself, it's finding the right image so that when we share it on social networks it catches the eye and people want to go in and see it; we even use tools like Canva or PhotoShop to make them, or we call our design and marketing team to create this image. βœ‹ No more.

What if I tell you that you can create images with React components?

I have already some time testing Flyyer which is a og:image as a service, what this service promises us is to create templates with React or Vue and use them to create images based on them, in these templates we can pass variables with which we can build our images, for example the title and the backgroundImg of a post and we can get the following results:

Image preview with Twitter design

We can even detect if the userAgent is WhatsApp and generate a specific image for it:

Preview image with WhatsApp design

In this case as an example it is just a gray square, but we can put anything in there; thanks to the way Flyyer works we can generate a different view depending on the userAgent, which currently supports a lot of them:

1declare enum FlyyerAgentName {
2 FACEBOOK = 'facebook',
3 MESSENGER = 'messenger',
4 WHATSAPP = 'whatsapp',
5 INSTAGRAM = 'instagram',
6 LINKEDIN = 'linkedin',
7 PINTEREST = 'pinterest',
8 TELEGRAM = 'telegram',
9 TWITTER = 'twitter',
10 BING = 'bing',
11 REDDIT = 'reddit',
12 GOOGLE = 'google',
13 GOOGLE_ADS = 'google ads',
14 AMAZON_ALEXA = 'amazon alexa',
15 AMAZON = 'amazon',
16 YANDEX = 'yandex',
17 YAHOO = 'yahoo',
18 HUBSPOT = 'hubspot',
19 MSN = 'msn',
20 ZOOM = 'zoom',
21 SLACK = 'slack',
22 DISCORD = 'discord',
23 SAFARI = 'safari',
24 FLIPBOARD = 'flipboard',
25 APPLE = 'apple',
26 DUCKDUCKGO = 'duckduckgo',
27 DISQUS = 'disqus',
28}

These are the current ones but little by little they are adding more agents so that we can customize our images even more.

How to start with Flyyer?

First of all I want to tell you that this tutorial will be for React, but if you want to know how to do it with Vue let me know on my Twitter with a DM.

Now let's start by creating a Flyyer app:

1yarn create flyyer-app flyyer-tutorial

You will be presented with some options to create the application, for this tutorial we will follow with the react-typescript-tailwind option (if you don`t know TypeScript yet I recommend this post where I teach TS with React), after choosing that option we hit enter and wait for the folder with the application to be created.

When it is finished, we go into the folder and install the dependencies

1cd flyyer-tutorial && yarn

After installing the dependencies we will find this structure of folders and files

1flyyer-tutorial/
2β”œβ”€β”€ static/
3β”‚ β”œβ”€β”€ background.jpg
4β”‚ └── logo.svg
5β”œβ”€β”€ templates/
6β”‚ └── hello.tsx
7β”œβ”€β”€ .eslintrc.js
8β”œβ”€β”€ .gitignore
9β”œβ”€β”€ flyyer.config.js
10β”œβ”€β”€ package.json
11β”œβ”€β”€ tsconfig.json
12β”œβ”€β”€ types.d.ts
13└── README.md

The most important thing is what is inside the templates folder, there we will have our first file called main.tsx.

main.tsx
1import React from "react"
2import { TemplateProps } from "@flyyer/flyyer-types";
3import classNames from "classnames";
4Β 
5import "../styles/tailwind.css";
6Β 
7import background from "../static/background.jpg";
8import logo from "../static/logo.svg";
9Β 
10function Layer({ className, ...props}: React.ComponentPropsWithoutRef<"div">) {
11 return <div {...props} className={classNames("absolute inset-0", className)} />;
12}
13Β 
14// Make sure to 'export default' a React component
15export default function MainTemplate({ variables }: TemplateProps) {
16 const {
17 title = "Hello world!",
18 img = background,
19 description,
20 } = variables;
21Β 
22 return (
23 <>
24 <Layer>
25 <img className="w-full h-full object-cover" src={img} />
26 </Layer>
27 <Layer className="bg-gradient-to-t from-gray-500 mt-64" />
28 <Layer className="flex flex-col justify-end items-start px-12 py-12 text-white">
29 <img src={logo} className={classNames("filter-white" /* custom */, "w-36 h-36")} />
30 <h1 className="text-6xl mt-4">{title}</h1>
31 {description && (
32 <h2 className="text-4xl font-mono tracking-wider mt-2">{description}</h2>
33 )}
34 </Layer>
35 </>
36 );
37}

As you can notice it is a component like any other React component, but the difference is that we can customize it as we want to create a unique og:image.

It receives as parameters the variables that in this case is what is sent through the URL and that we will use to send any type of data and render it in the component so that at the end it gives us an image.

In this case the URL of an image would look like this:

1?title=Hello&20Word&img=my_image.jpg&description=here%20is%20my%20description

You can notice that it is sent in URL Params format, we don't have to worry because the characters look in a different way, for example the spaces are transpiled to %20 and Flyyer takes care of parsing this data and deliver it to us in a clean way in the React component.

Now to see our component we start the development server with

1yarn start
Starting the development server with the terminal

To view our component, go to Flyyer Studio and we will have the following screen

Flyyer Studio

Now this great screen is where we will have automatic refresh every time we change something in the component and where we can pass variables to see how our component acts:

CampoDescripciΓ³n
Base URLThe URL of our local server, by default http://localhost:7777.
TemplatesThe name of the template we want to see, these names will be the name of the file inside the templates folder.
User agentWe can emulate the agent from where we want to see the image, for now it has default which is the browser and WhatsApp, but little by little they will be adding more.
VariablesAnd here you can say that this is where the magic happens, is where we will pass all the variables in JSON format and play with them to see how our image acts.
Flyyer Studio

Now we are going to create a custom component for the WhatsApp view

main.tsx
1import React from "react"
2// Add FlyyerAgentName to get the enum we will use below
3import { TemplateProps, FlyyerAgentName } from "@flyyer/flyyer-types";
4import classNames from "classnames";
5Β 
6import "../styles/tailwind.css";
7Β 
8import background from "../static/background.jpg";
9import logo from "../static/logo.svg";
10Β 
11function Layer({ className, ...props}: React.ComponentPropsWithoutRef<"div">) {
12 return <div {...props} className={classNames("absolute inset-0", className)} />;
13}
14Β 
15// Add agent to be able to use this prop as well
16export default function MainTemplate({ agent, variables }: TemplateProps) {
17 const {
18 title = "Hello world!",
19 img = background,
20 description,
21 } = variables;
22Β 
23 // And now we add this conditional to detect if the userAgent is WhatsApp
24 if (agent.name === FlyyerAgentName.WHATSAPP) {
25 return (
26 <Layer className="p-20 bg-white">
27 <img
28 src={logo}
29 alt={title}
30 className="w-full h-full"
31 />
32 </Layer>
33 );
34 }
35Β 
36 return (
37 <>
38 <Layer>
39 <img className="w-full h-full object-cover" src={img} />
40 </Layer>
41 <Layer className="bg-gradient-to-t from-gray-500 mt-64" />
42 <Layer className="flex flex-col justify-end items-start px-12 py-12 text-white">
43 <img src={logo} className={classNames("filter-white" /* custom */, "w-36 h-36")} />
44 <h1 className="text-6xl mt-4">{title}</h1>
45 {description && (
46 <h2 className="text-4xl font-mono tracking-wider mt-2">{description}</h2>
47 )}
48 </Layer>
49 </>
50 );
51}

With that, now we go to our browser and change the User agent to WhatsApp

Flyyer Studio with WhatsApp as agent

We will see that now we have our view of how the image would look in WhatsApp, and so we can customize as we want the view in WhatsApp and the normal view. Remember that we do not only have WhatsApp, we have a whole list of agents that we can use to customize the images.

Now, from here on it's up to you to give it your personal touch, change colors, create new code and customize it your way. For reasons of the post on my part I will leave it that simple so we can continue with the explanation.

Deploy our component

Well, after we have already customized our component it is time to deploy our app, and this is very simple. Remember Flyyer_KEY that I mentioned above that we would use later? Well, right now we are going to use it; the first thing we will do is to pause the execution of the Flyyer development server and execute the following commands in the terminal:

1# Remember to replace the text after the = with your key
2export Flyyer_KEY=wdswermdcl8346egcsre
1yarn build && yarn deploy

After it is finished, our template will be up in Flyyer so it can be used, you will be able to see the properties of your deploy inside your Flyyer account that we previously created.

How can we use our component?

I want to give much more visibility to the documentation so I will leave you direct links to how to use Flyyer with your favorite technology, the documentation is very well written and besides, you already passed the most complicated part which is the creation of your og:image component:

Want to see an example running?

Inspect this page with the browser console and then go to the <head>, look for a tag called og:image and you will see how it works in production, you can even enter the URL of the image so you can see it yourself.

In all my website I use NextJS, if you want to see how I implement it I leave you a code extract and the direct link to the file:

src/layouts/blog.tsx
1const flyyer = new Flyyer({
2 tenant: 'danestves',
3 deck: 'danestves',
4 template: 'blog',
5 variables: {
6 img: `https://danestves.com${frontMatter.image}`,
7 title: frontMatter.seotitle,
8 description: frontMatter.summary,
9 },
10 meta: {
11 id: frontMatter.slug,
12 },
13})

See file

Conclusions

As you can see more and more tools are coming out that make our development much easier every day, now we just call a library and it does all the work for us. For me, outsource services is one of the best things about programming, I hope this post has been very helpful and if you want me to make a post about how to make the og:image with Vue let me know in a comment on Twitter and I will know how many people are interested in the next post πŸš€

- See you at code πŸ‘¨β€πŸ’»