vercel/og-imageを使ったブログOGPの簡単自動生成 / Generate OGP easily using vercel og-image

WFSDFMPHJNBHFΛ࢖ͬͨ ϒϩά0(1ͷ؆୯ࣗಈੜ੒ -5 /BPLJ,JTIJ !QBTT

͸͡Ίʹ ࠓ೔͸͋Γ͕ͱ͏͍͟͝·͢

IUUQTCMPHQBTTDPN ΀Β͢ͷϒϩά

΀Β͢ͷϒϩά ٕज़ωλ΍ͦͷଞॾʑΛॻࣗ͘࡞ϒϩά l (JU)VCQBTTCMPH l ੩తαΠτδΣωϨʔλ)VHP l σβΠϯ͸طଘͷ΋ͷʹେྔͷύονΛ౰ͯͯΔ l ϗεςΟϯά7FSDFM

l 5XJUUFS΍͸ͯϒ্Ͱදࣔ l ΠϯϓϨογϣϯ΁ͷӨڹେ l ࢹೝੑͷ֦େ l ΫϦοΫྖҬͷ֦େ ը૾Λݸผʹ༻ҙ͍ͨ͠ʂ ϒϩάͷ0(1

ࠓ·Ͱͷ0(1ӡ༻ l هࣄΛॻͨ͘ͼʹ(*.1Ͱը૾Λ࡞੒ l ςϯϓϨʔτ΋ϦϙδτϦʹஔ͍ͱ͍ͨ l ͦͷը૾Λࣗ෼ͰDPNNJU ͦΕͰ΋ྑ͍ͬͪΌྑ͍͕໘౗

Ͳ͏ʹ͔ͯ͠0(1Λࣗಈੜ੒͍ͨ͠ʂ l όοΫΤϯυͷهࣄͰը૾Λ࢖͏͜ͱ͸ك l جຊ͸λΠτϧͷΈͷ0(1Λ࡞੒ ΋͠΍ࣗಈͰੜ੒Ͱ͖ΔͷͰ͸ʁ

طଘͷੜ੒ख๏ ࠨIUUQTTQFBLFSEFDLDPNTDILUKNGJSFCBTFEFPTIPVRJOHPHQTIFOHDIFOH ӈIUUQTTQFBLFSEFDLDPNEPSB ੜ஀-5ͷఆ൪ωλ

طଘͷੜ੒ख๏ l 'JSFCBTF $MPVE'VODUJPOT l ͓खܰ CZͨ͡· l /FYUKT 443
7FSDFM l +49Λ͔͚ΔͷͰෳࡶͳ͜ͱΛ͢Δͷʹ͸ྑͦ͞͏ l 0(1͚ͩͷͨΊͩͱΦʔόʔΤϯδχΞϦϯά͔ʁ

ୈࡾͷબ୒ࢶ WFSDFMPHJNBHF https://github.com/vercel/og-image

WFSDFMPHJNBHFͷಛ௃ l 63*ɾΫΤϦύϥϝʔλΛม͑Δ͜ͱͰੜ੒ը૾ΛมԽ l ϒϩάͷλΠτϧΛૹΕ͹0, l WFSDFMͰ؆୯σϓϩΠʂ l $*ͰσϓϩΠࣗಈԽΛؤுΜͳͯ͘΋0, l
$%/ʹΩϟογϡͯ͘͠ΕΔͷͰຖճը૾͕ੜ੒͞Εͣߴ଎ ࠓճͷ༻్ʹྑͦ͞͏

WFSDFMPHJNBHFͷσϓϩΠ جຊ͸3&"%.&௨Γʹ΍Ε͹0, WFSDFMPHJNBHFΛϑΥʔΫ WFSDFMKTPOΛฤू )5.-$44Λ͍ͬͯ͡σβΠϯΛมߋ WFSDFMʹσϓϩΠ

࣮ࡍͷྫ IUUQTPHJNBHFQBTTDPNBQJW$BEEZͰH31$ͷϦΫΤετΛϦόʔεϓϩΩγ͢ΔQOH

ؾΛ͚ͭΔϙΠϯτ l WFSDFMʹ೔ຊޠϑΥϯτ͕ͳ͍ l ͲΒ܅΋ݴͬͯͨɻ8FCϑΥϯτ͔ຒΊࠐΈͰରԠ l ࠷ॳۭനͷ0(1Λੜ੒ͯ͠͠·ͬͨ

ؾΛ͚ͭΔϙΠϯτ l σϑΥϧτͷ$BDIF$POUSPM͕೥ l ۭനͷ0(1͕5XJUUFSʹΩϟογϡ͞Εɺ5XJUUFS7BMJEBUPSΛ࢖ͬͯ΋ 0(1͕ߋ৽͞Εͳ͍ l 63-ʹόʔδϣϯQSFGJYΛ෇༩ͯ͠ରԠ l IUUQTPHJNBHFQBTTDPNBQJW$BEEZͰH31$ͷϦΫΤετΛϦόʔεϓϩΩ
γ͢ΔQOH

ਓʹΑͬͯ͸ؾʹͳΔϙΠϯτ l ੜ੒ը૾ͷϚʔΫΞοϓ͕+49Ͱ͸ͳ͘ී௨ͷ)5.- l ࠓճఔ౓ͷ΋ͷͰ͋Ε͹໰୊ͳ͔͕ͬͨɺ ෳࡶͳ΋ͷΛ΍Ζ͏ͱ͢Δͱ +49Λॻ͖ͨ͘ͳ͖ͬͯͦ͏ l ReactDOMServer.renderToStaticMarkup(element)で )5.-จࣈྻΛੜ੒ͯ͠͠·͑͹؆୯ʹग़དྷͦ͏
https://zenn.dev/otsukayuhi/articles/e52651b4e2c5ae7c4a17 export function getHtml(parsedReq: ParsedRequest) { const { text, theme, md, fontSize } = parsedReq; return `<!DOCTYPE html> <html> <meta charset="utf-8"> <title>Generated Image</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> ${getCss(theme, fontSize)} </style> <body> <div> <div class="spacer"> <div class="heading">${emojify( md ? marked(text) : sanitizeHtml(text) )} </div> </div> </body> </html>`; }

ଞͷਓ͕࡞ͬͨWFSDFMPHJNBHFΛ࢖ͬͨ΍ͭ (JU)VC4PDJBMJGZ(JU)VC༻ͷ0(1Λ࡞ͬͯ͘ΕΔ܅ https://socialify.git.ci/

·ͱΊ l WFSDFMPHJNBHFΛ࢖ͬͯϒϩάͷ0(1Λࣗಈੜ੒ l WFSDFMʹ؆୯σϓϩΠͰ͖ΔͷͰݸਓͩͱ͔ͳΓ༗༻ l ϋϚΓͲ͜Ζ͚ͩ͸஫ҙ͠·͠ΐ͏

vercel/og-imageを使ったブログOGPの簡単自動生成 / Generate OGP easily using vercel og-image

vercel/og-imageを使ったブログOGPの簡単自動生成 / Generate OGP easily using vercel og-image

ぷらす

More Decks by ぷらす

Other Decks in Programming

Featured

Transcript

WFSDFMPHJNBHFΛ࢖ͬͨ ϒϩά0(1ͷ؆୯ࣗಈੜ੒ -5 /BPLJ,JTIJ !QBTT

͸͡Ίʹ ࠓ೔͸͋Γ͕ͱ͏͍͟͝·͢

IUUQTCMPHQBTTDPN ΀Β͢ͷϒϩά

΀Β͢ͷϒϩά ٕज़ωλ΍ͦͷଞॾʑΛॻࣗ͘࡞ϒϩά l (JU)VCQBTTCMPH l ੩తαΠτδΣωϨʔλ)VHP l σβΠϯ͸طଘͷ΋ͷʹେྔͷύονΛ౰ͯͯΔ l ϗεςΟϯά7FSDFM

l 5XJUUFS΍͸ͯϒ্Ͱදࣔ l ΠϯϓϨογϣϯ΁ͷӨڹେ l ࢹೝੑͷ֦େ l ΫϦοΫྖҬͷ֦େ ը૾Λݸผʹ༻ҙ͍ͨ͠ʂ ϒϩάͷ0(1

ࠓ·Ͱͷ0(1ӡ༻ l هࣄΛॻͨ͘ͼʹ(*.1Ͱը૾Λ࡞੒ l ςϯϓϨʔτ΋ϦϙδτϦʹஔ͍ͱ͍ͨ l ͦͷը૾Λࣗ෼ͰDPNNJU ͦΕͰ΋ྑ͍ͬͪΌྑ͍͕໘౗

Ͳ͏ʹ͔ͯ͠0(1Λࣗಈੜ੒͍ͨ͠ʂ l όοΫΤϯυͷهࣄͰը૾Λ࢖͏͜ͱ͸ك l جຊ͸λΠτϧͷΈͷ0(1Λ࡞੒ ΋͠΍ࣗಈͰੜ੒Ͱ͖ΔͷͰ͸ʁ

طଘͷੜ੒ख๏ ࠨIUUQTTQFBLFSEFDLDPNTDILUKNGJSFCBTFEFPTIPVRJOHPHQTIFOHDIFOH ӈIUUQTTQFBLFSEFDLDPNEPSB ੜ஀-5ͷఆ൪ωλ

طଘͷੜ੒ख๏ l 'JSFCBTF $MPVE'VODUJPOT l ͓खܰ CZͨ͡· l /FYUKT 443

ୈࡾͷબ୒ࢶ WFSDFMPHJNBHF https://github.com/vercel/og-image

WFSDFMPHJNBHFͷಛ௃ l 63ɾΫΤϦύϥϝʔλΛม͑Δ͜ͱͰੜ੒ը૾ΛมԽ l ϒϩάͷλΠτϧΛૹΕ͹0, l WFSDFMͰ؆୯σϓϩΠʂ l $ͰσϓϩΠࣗಈԽΛؤுΜͳͯ͘΋0, l

WFSDFMPHJNBHFͷσϓϩΠ جຊ͸3&"%.&௨Γʹ΍Ε͹0, WFSDFMPHJNBHFΛϑΥʔΫ WFSDFMKTPOΛฤू )5.-$44Λ͍ͬͯ͡σβΠϯΛมߋ WFSDFMʹσϓϩΠ

࣮ࡍͷྫ IUUQTPHJNBHFQBTTDPNBQJW$BEEZͰH31$ͷϦΫΤετΛϦόʔεϓϩΩγ͢ΔQOH

ؾΛ͚ͭΔϙΠϯτ l WFSDFMʹ೔ຊޠϑΥϯτ͕ͳ͍ l ͲΒ܅΋ݴͬͯͨɻ8FCϑΥϯτ͔ຒΊࠐΈͰରԠ l ࠷ॳۭനͷ0(1Λੜ੒ͯ͠͠·ͬͨ

ؾΛ͚ͭΔϙΠϯτ l σϑΥϧτͷ$BDIF$POUSPM͕೥ l ۭനͷ0(1͕5XJUUFSʹΩϟογϡ͞Εɺ5XJUUFS7BMJEBUPSΛ࢖ͬͯ΋ 0(1͕ߋ৽͞Εͳ͍ l 63-ʹόʔδϣϯQSFGJYΛ෇༩ͯ͠ରԠ l IUUQTPHJNBHFQBTTDPNBQJW$BEEZͰH31$ͷϦΫΤετΛϦόʔεϓϩΩ

ਓʹΑͬͯ͸ؾʹͳΔϙΠϯτ l ੜ੒ը૾ͷϚʔΫΞοϓ͕+49Ͱ͸ͳ͘ී௨ͷ)5.- l ࠓճఔ౓ͷ΋ͷͰ͋Ε͹໰୊ͳ͔͕ͬͨɺ ෳࡶͳ΋ͷΛ΍Ζ͏ͱ͢Δͱ +49Λॻ͖ͨ͘ͳ͖ͬͯͦ͏ l ReactDOMServer.renderToStaticMarkup(element)で )5.-จࣈྻΛੜ੒ͯ͠͠·͑͹؆୯ʹग़དྷͦ͏

ଞͷਓ͕࡞ͬͨWFSDFMPHJNBHFΛ࢖ͬͨ΍ͭ (JU)VC4PDJBMJGZ(JU)VC༻ͷ0(1Λ࡞ͬͯ͘ΕΔ܅ https://socialify.git.ci/

·ͱΊ l WFSDFMPHJNBHFΛ࢖ͬͯϒϩάͷ0(1Λࣗಈੜ੒ l WFSDFMʹ؆୯σϓϩΠͰ͖ΔͷͰݸਓͩͱ͔ͳΓ༗༻ l ϋϚΓͲ͜Ζ͚ͩ͸஫ҙ͠·͠ΐ͏