Example:
Query | Desc | Example |
---|---|---|
img | Image product | https://cdn.gramedia.com/uploads/items/9786230029783_Jujutsukaisen_5.jpg |
writer | Writer product name | Gege Akutami |
title | Product name | Jujutsu Kaisen 05 |
isDiscount | If product is discount, put 'true' if not 'false' | true |
actualPrice | Actual price product | Rp. 40.000 |
discountedPrice | If product is discount, put the discounted price if not empty | Rp. 30.000 |
discount | If product is discount, put the discount value if not empty | 25 % |
publisher | Publisher name | Elex Media Komputindo |
Generate OG Image dynamically based on the product slug passed in the query url.
Using Next JS as base and Vercel/OG to generate HTML, CSS and JS, (you can even use Tailwind) to create or generate images.
This project can also be used as a separate service, which is only for generating OG images.
The benefit is that a preview image of a product can provide more information, for example the price of the product and its discount. Comparison:
Without custom image:
With custom generated image:
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev