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

Transcript

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

   View Slide

2. ͸͡Ίʹ
   ࠓ೔͸͋Γ͕ͱ͏͍͟͝·͢
   
   

   View Slide

3. IUUQTCMPHQBTTDPN
   ΀Β͢ͷϒϩά
   
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. ਓʹΑͬͯ͸ؾʹͳΔϙΠϯτ
    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 `
    
    
    Generated Image
    
    <br/>${getCss(theme, fontSize)}<br/>
    
    
    
    ${emojify(
    md ? marked(text) : sanitizeHtml(text)
    )}
    
    
    
    `;
    }
    

    View Slide

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

    View Slide

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

    View Slide