OG-image generátor — egyedi megosztási kép pillanatok alatt
A /api/og végpont 1200×630 méretű OG-image-et generál a paraméterek alapján. Ágyazd be a saját oldalad <meta og:image> tag-jébe — Facebook, Twitter, LinkedIn, Slack és Discord automatikusan használja.
Amikor valaki megosztja az oldaladat a Facebookon, Twitter-en, Slack-en vagy
Discord-on, a szolgáltatás letölti a HTML head-jéből az og:image URL-t és
egy kártyát mutat helyette. Ha nincs ilyen tag, vagy a kép rossz méretű,
csúnyább a megjelenés és kevesebb a kattintás.
A PromNET ehhez kínál egy ingyenes, public OG-image generátort: nem kell tervezőprogram, nem kell egyenként legyártani minden cikkre a képet, csak adsz egy URL-t.
Hol van a builder?
/app/og-builder — élő előnézettel, sablon-választóval,
color-picker-rel. Másolható a kész URL és a komplett <meta> snippet is.
Hogy működik?
A /api/og végpont egy GET-kérést vár, és SVG-formátumú 1200×630
képet ad vissza. Az SVG-t a Facebook, Twitter, LinkedIn, Slack, Discord
egyaránt elfogadja og:image-ként.
https://promnet.hu/api/og?title=Helló+világ&template=defaultParaméterek
| Param | Kötelező | Default | Leírás |
|---|---|---|---|
title | igen | — | A kép fő-szövege. Max 100 karakter. |
template | nem | default | default / blog / quote / event |
theme | nem | dark | dark vagy light |
color | nem | ff4d4d | Hex szín (kettős kereszt nélkül) |
subtitle | nem | — | Másodlagos szöveg, max 80 karakter |
date | nem | — | event és blog sablonhoz |
location | nem | — | Csak event sablonhoz |
branding | nem | true | false-ra állítva eltünteti a “promnet.hu” footert |
Sablonok
default — Központi cím gradient háttéren. Általános célra.
blog — Bal felső sarokban brand, lent dátum. Cikkekhez.
quote — Nagy idézőjelek, italic szöveg, alá szerző. Idézetes posztokhoz.
event — Cím + dátum + helyszín. Event-nyitólapokhoz.
Beágyazás
Tedd ezt a saját oldalad <head>-jébe (mindenhova ahol meg akarod osztani):
<meta property="og:image"
content="https://promnet.hu/api/og?title=Új+cikk+a+blogon&template=blog&date=2026.+május+1." />
<meta name="twitter:image"
content="https://promnet.hu/api/og?title=Új+cikk+a+blogon&template=blog&date=2026.+május+1." />
<meta name="twitter:card" content="summary_large_image" />A space-eket (+ vagy %20) ne felejtsd el URL-encode-olni, ha nem
template-engine-ből jön a paraméter. Ékezetes karakterek mehetnek, de
URL-encode-olva (%C3%A1 = á).
Cache-ezés
- 1 nap böngésző-cache (
max-age=86400) - 7 nap edge-cache a Cloudflare oldalán (
s-maxage=604800)
Ha módosítasz a címen vagy színen, azt új URL-paraméterezésnek látja a
cache, így automatikusan regenerálódik. Ha pontosan ugyanazzal a
paraméter-listával kérnéd vissza, és újra akarod generáltatni, írj a URL
végére egy &v=2 cache-bustert.
Rate-limit
60 generálás / óra / IP. Ez a végpont magas limittel megy, mert hot-link-elve használja a felhasználó-oldal — minden megosztáskor a Facebook/Twitter scraperje letölti egyszer, aztán a saját CDN-jén tartja.
Ha ezt a limitet rendszeresen átléped (pl. nagy forgalmú oldal és minden oldalon más OG), akkor érdemes a generált képet letárolni a saját oldaladon (egy build-step során lehúzni, és statikusan kiszolgálni).
Mikor SVG és mikor PNG?
Jelenleg minden válasz SVG. A platformok 99%-a kezeli az SVG-t, de van néhány régebbi metainfo-scraper (pl. néhány corporate Slack-instance, némely RSS-olvasó), amely csak PNG-t tud. Ha pont ilyennel találkozol, jelezd a [email protected]-n — a roadmap-en van Browser Rendering API alapú PNG-fallback.
Jó-e a kép a Facebook scrapernek?
Az opengraph debugger két jó eszköz:
Mindkettő bekéri az URL-t, megmutatja milyennek látja a scraper, és van “Scrape Again” gomb is — ha megváltozott az og:image, ezzel kényszerítheted ki a re-fetch-et a CDN-jeikből.
Példák
Blog-cikk OG:
/api/og?title=Magyar+webhosting+guide&template=blog&date=2026.+május+1.&color=ff4d4dEsemény OG:
/api/og?title=PromNET+Meetup&template=event&date=Június+12&location=Budapest&color=10b981Idézet OG:
/api/og?title=A+legjobb+kód+az,+ami+nem+létezik&template=quote&subtitle=Steve+Jobs&theme=lightMit nem tud még a generátor?
- Egyedi font-feltöltést (jelenleg system-stack)
- Custom logót — a “promnet.hu” footer kapcsolható (
branding=false), de saját logó URL-paraméterben még nincs - 1080×1080 (Instagram-square) méretet — fix 1200×630
Ezek a roadmap-en vannak. Szólj nyugodtan, mi a hiányzó dolog számodra a [email protected] címen.