Open graph image Generator

An Open graph image generator that uses the current web page information to create an Open graph Image.

The code in this project uses the title, subTitle, color, and main image url information to generate an Open graph image for a post as an example.

Open Grpah(og)?

The Open Graph protocol enables any web page to become a rich object in a social graph.

For more information, read Open Graph Protocol.

The open graph protocol allows external sites to provide images for links, such as the following example images(github og images), so that users can get information about the page without having to go to the link.

Why?

In an open graph, images are more visually appealing to users.

It can attract users' attention and encourage them to visit the page further, or it can give them a glimpse of what the page is about without having to visit it.

However, Open graph images are usually served as images that exist on the page. For example, the first image on the page, or the largest image, or an image that fits certain rules.

However, in this case, the image cannot describe the page as a whole, and users are unlikely to be intrigued by the little information it provides.

The Open Graph Image Generator project aims to solve this problem by generating Open graph images using page information.

The main idea came from A framework for building Open Graph images on Github blog.

Architecture

• nodejs 18.x
• serverless framework
• puppeteer 21.3.7
• @sparticuz/chromium 117.0.0 (ref: Chromium Support)
• eta 3.1.1
• aws-sdk 2.1472.0
• AWS
  • AWS Lambda
  • Amazon S3
  • Amazon API Gateway

For use

Set the generated Open graph image in the meta tag.

Example

This is an example using code written in test with ngrok.

curl -X POST localhost:8080/post?title=hello_og!&category=NEWS&subTitle=og_image_generator:D&mainImageUrl=MainImageUrl

Facebook

Twitter