とある個人開発 PWA の SEO 奮戦記

Mangarel というコミック新刊情報アプリを PWA で出したんですが、そのままではびっくりするくらい Google に登録されず、いろいろ苦労した話です。PWA というより SPA 特有の話が多いかも。
https://mangarel.com/

Transcript

1. ͷ
   SEO
   ฃઓه
   େԬ༝Ղ
   ݸਓ։ൃɹɹɹ
   ͱ͋Δɹɹɹ
   

   View Slide

2. Who am I ?
   何やってる人？
   ʢ͓·͑୭΍ͶΜ ʣ
   େԬ༝Ղ !PVLBZVLB
   ແ৬ͱಉਓ࡞Ոͷ͍͋ͩͰ͢ɻडୗ΋
   ৗற΋΍ΒͣʹͲΕ͚ͩੜ͖ΒΕΔ͔
   νϟϨϯδதͰ͢ɻ
   3FBDUͱ5ZQF4DSJQUͰ͢ɻ
   એݴత6*ສࡀɺ઴ਐత੩తܕ෇͚
   ສࡀʂ
   好きな技術は？
   

   View Slide

3. Works
   ʢ࡞ͬͯΔ΋ͷʣ
   3FBDUͱ5ZQF4DSJQUͷಉਓࢽͰ͢ɻ
   ݱࡏγϦʔζͰλΠτϧग़͍ͯͯɺྦྷ
   ܭͰ ෦΄ͲചΕͯ·͢ɻ
   ఱ࠽ഽͷઌഐͱɺ෼໺ҧ͍Ͱೖ͖ͬͯ
   ͕ͨΜ͹Γ԰ͷޙഐͪΌΜͱͷձ࿩ܶ
   Ͱ3FBDUʹΑΔ࠷৽ͷϞμϯϑϩϯ
   τΤϯυ։ൃ͕Θ͔Γ΍ֶ͘͢΂Δͱ
   ޷ධͰ͢ɻ
   IUUQTPVLBZVLBCPPUIQN
   

   View Slide

4. Mangarel
   ʢ.BOHB
   
   3FMFBTF
   ͰϚϯΨϨϧʣ
   ࠓճͷ࿩ͷ୊ࡐͱͳΔɺݸਓ։ൃͷΞϓϦͰ
   ͢ɻʮॻళͷ৽ץίʔφʔత69Λఏڙ͢Δ
   ίϛοΫε৘ใΞϓϦʯͱ͍͏ςʔϚͷ΋
   ͱɺ3FBDU
   ͱ
   'JSFCBTF
   Ͱ։ൃ͍ͯ͠Δ
   18"Ͱ͢ɻ
   ී௨ʹ
   "1*
   ͰखʹೖΔ৘ใΛ౰ͨΓલʹ੔ཧ
   ͠ɺࡢࠓͷ
   6*
   τϨϯυʹଇΓී௨ʹ࢖͍΍
   ͘͢͠ɺΤϯδχΞతʹࠓͷී௨ͷٕज़Ͱߏ
   ੒͢Δͱ͍͏ɺʮී௨ʯΛͱ͜ͱΜੵΈॏͶ
   ͍ͯ͘͜ͱΛ։ൃํ਑ʹ͍ͯ͠·͢ɻ
   IUUQTNBOHBSFMDPN
   

   View Slide

5. Google knows…
   ʢ(PPHMF
   ઌੜɺ஌Βͳ͍ͬͯΑʣ
   ٕज़ॻయʹग़ͨ͠ʰΓ͋Ϋτʂ'JSFCBTFฤʱͷα
   ϯϓϧΞϓϦͱͯͦ͠ͷલ೔ͷ݄೔ʹϦϦʔε
   ͨ͠.BOHBSFMͰ͕͢ɺϲ݄ͨͬͯ΋(PPHMFݕ
   ࡧʹҾ͔͔ͬΔͷ͸Θ͔ͣ݅ͷΈɻ͔࣮͠͠ࡍʹ
   ͸ສ݅Ҏ্ͷϖʔδ͕ଘࡏ͍ͯ͠·ͨ͠ɻ
   ʮ࠷ۙͷ(PPHMFCPU͸ͪΌΜͱ+BWB4DSJQUΛղ
   ऍͯ͠ΠϯσοΫεͯ͘͠ΕΔʯͱฉ͍ͯͨͷʹ࿩
   ͕͕ͪ͏ʂԿͱ͔ͤͶ͹ʂͱɺ͜͜ʹདྷͯΑ͏΍͘
   ةػײΛ๊͘Α͏ʹɻ
   ʲ౰ॳͷϖʔδߏ੒ʳ
   
   TFBSDI
   TJHOJO
   CPPLTʢ໿ ʣ
   DPNJDTʢ໿ ʣ
   

   View Slide

6. Problems
   ʢ໰୊఺ʣ
   ᶃϖʔδͦͷ΋ͷ͕ΠϯσοΫε͞Εͳ͍
   w ࣮ࡍʹ͸ສ݅Ҏ্ͷϖʔδ͕͋Δͷʹɺϖʔδ͔͠(PPHMFʹೝࣝ͞Ε͍ͯͳ͍
   ᶄλΠτϧ΍ৄࡉ͕ݸผʹදࣔ͞Εͳ͍
   w τοϓϖʔδҎ֎ͷϖʔδ΋ɺτοϓϖʔδͱશ͘ಉ͡λΠτϧͱৄࡉ
   ᶅίϯςϯπ͕ϨϯμϦϯά͞Εͳ͍
   w +BWB4DSJQUͰඳ͍ࣸͯ͠Δ෦෼Λ(PPHMFCPU͕ղऍͰ͖͍ͯͳ͍ͨΊɺ͔ͦ͜Β
   ϦϯΫΛͨͲͬͯ΋Β͑ͳ͍
   

   View Slide

7. ϖʔδͦͷ΋ͷ͕ΠϯσοΫε͞Εͳ͍
   ղܾͷͨΊʹ΍ͬͨ͜ͱ
   ᶃ
   

   View Slide

8. Sitemap
   ʢαΠτϚοϓʣ
   $MPVE'VODUJPOTͰαΠτϚοϓΛ
   ฦ͢)551ؔ਺Λ࡞Γɺ(PPHMF
   4FBSDI$POTPMFʹొ࿥ͨ͠ɻ
   ૹ৴ʹ੒ޭɺʮαΠτϚοϓΠϯσο
   Ϋε͸ਖ਼ৗʹॲཧ͞Ε·ͨ͠ʯͱද
   ࣔ͞Εɺ͜ΕͰͻͱ҆৺ͱࢥΘΕͨ
   ͕ʜʜɻ
   

   View Slide

9. Exclusion
   ʢআ֎ʣ
   ೝࣝ͸͞ΕΔͷʹɺʮΠϯσοΫε
   ະొ࿥ʯͱআ֎͞ΕΔ೔ʑ͕ଓ͘ɻ
   ͍Ζ͍Ζௐ΂ͨ݁Ռɺ63-ΛαΠτ
   ϚοϓͰૹ৴͚ͨͩ͠Ͱଞͷϖʔδ͔
   ΒͷϦϯΫ͕΄ͱΜͲͳ͚Ε͹ɺ͜
   ͷΑ͏ͳঢ়ଶʹͳΔͱͷ͜ͱɻ
   IUUQTXXXTV[VLJLFOJDIJDPNCMPH
   EJTDPWFSFEDVSSFOUMZOPUJOEFYFEQBHFT
   NBZTIPXJODPWFSBHFSFQPSUXIFOPOMZ
   MJOLFEJOTJUFNBQ
   

   View Slide

10. Revenge
    ʢϦϕϯδʣ
    ʮΧςΰϦʔผࠓചΕ͍ͯΔ৽ץʯ
    ϖʔδ΍ʮϨʔϕϧผ৽ணίϛοΫ
    εʯϖʔδΛ࡞੒͠ɺ஍ಓʹ಺෦Ϧ
    ϯΫΛ૿΍͍ͯ͠Δɻ
    ݁Ռɺ೔ʑগͣͭ͠Ͱ͸͋Δ͕ొ࿥
    ͞ΕΔϖʔδ͕૿͍͑ͯΔɻ
    ˣ
    

    View Slide

11. λΠτϧ΍ৄࡉ͕ݸผʹදࣔ͞Εͳ͍
    ղܾͷͨΊʹ΍ͬͨ͜ͱ
    ᶄ
    

    View Slide

12. React Helmet
    ʢZBSOBEESFBDUIFMNFUʣ
    ಈతʹ)5.-ϔομΛ্ॻ͖͢Δͨ
    Ίͷ3FBDU༻ϥΠϒϥϦɻ͜ΕΛ
    ࢖ͬͯݸผͷϔομΛॻ͖׵͑ɺϒϥ
    ΢β্͔Β͸มΘͬͨΑ͏ʹݟ͑ͨ
    ͕ɺ(PPHMFʹλΠτϧͱͯ͠ొ࿥͞
    ΕΔͷ͸OPTDSJQUTͷதͷI
    ݻఆλάͷத਎ɻ
    ͨͩʮࠓചΕ͍ͯΔ৽ץʯϖʔδͰ
    ͸)FMNFUͰॻ͖׵͑ͨλΠτϧͩ
    ͚͕ೝࣝ͞Εৄࡉ͸มΘΒͣɺͱ͍͏
    Α͘Θ͔Βͳ͍ঢ়گɻ
    

    View Slide

13. Cloud Functions ʹΑΔϔομͷಈతॻ͖׵͑
    Ϗϧυͨ͠JOEFYIUNMΛ
    )PTUJOHͷϩʔΧϧʹஔ͖ɺϔομ
    Λಈతʹॻ͖׵͑ͯͦͷத਎Λฦ
    ͢)551ؔ਺Λ࡞੒ɺ)PTUJOHͷ
    SFXSJUFTػೳͰ೚ҙͷ63-ʹ
    CPU͕௚ʹΞΫηεʹདྷͨͱ͖ʹͦ
    Ε͕ൃಈ͢ΔΑ͏ʹͨ͠ɻ
    pSFCBTFKTPO
    GVODUJPOTSFQMBDF.FUB#PPLUT
    VTDFOUSBM
    ϦʔδϣϯͷΈ
    

    View Slide

14. ݁Ռɺগͣͭ͠ద੾ͳλΠτϧͱৄ
    ࡉʹஔ͖׵ΘΓͭͭ͋Δɻ
    ͍ͭͰʹ0(1ʹ΋ରԠ͠ɺ4/4
    γΣΞͨ͠ࡍʹݟӫ͕͑͢ΔΑ͏ʹ
    ͨ͠ɻ
    ͍ͭͰʹ
    0(1
    ʹ΋ରԠ
    

    View Slide

15. ίϯςϯπ͕ϨϯμϦϯά͞Εͳ͍
    ղܾͷͨΊʹ΍ͬͨ͜ͱ
    ᶅ
    

    View Slide

16. Google can’t help it
    ʢ(PPHMF͸ͦΕΛզຫͰ͖ͳ͍ʣ
    4FBSDI$POTPMFͷʮ63-Λςε
    τʯΛࢼ͢ͱɺऔಘϦετ͕௕͍ϖʔ
    δ͸్தͰϨϯμϦϯάΛଧͪ੾ΒΕ
    ͍ͯͨɻ
    ݅ͷϦετͷϖʔδ͸ӡ͕ྑ͚Ε͹
    ϨϯμϦϯά͕੒ޭ͍ͯ͠Δ͕ɺ݅
    ͷϖʔδ͸ݢฒΈશ໓ͱ͍ͬͨ۩߹ɻ
    ˠ
    

    View Slide

17. Tried but useless
    ʢ΍ͬͯΈ͚ͨͲແବͩͬͨ͜ͱʣ
    ϩʔμʔΛճ͢લʹϥοϓཁૉʹ
    BSJBCVTZlUSVFzΛઃఆ͠ɺσʔλ
    ͷऔಘ͕׬ྃͨ͠Βͦͷ஋ΛGBMTF
    ʹมߋ͢ΔΑ͏ʹ͢Δɻ
    ˣ
    (PPHMF%FWFMPQFSTʮίϯςϯπͷ
    ඇදࣔͱߋ৽ʯʹ͋ͬͨͷͰ΍ͬͯ
    Έ͕ͨɺϨϯμϦϯάʹਐల͸ͳ
    ͔ͬͨɻͨͩΞΫηγϏϦςΟධՁ
    ʹ͸ͭͳ͕Δ͔΋ɻ
    ݹ͍هࣄʹ͸ೖΕͨ΄͏͕͍͍ͱ
    ͋ͬͨͷͰSFBDUBQQQPMZpMMΛೖ
    ΕͯΈͨɻ
    ˣ
    ΍ͬͺΓঢ়گ͸վળ͠ͳ͔ͬͨͷͰ
    ΞϯΠϯετʔϧͨ͠ɻ(PPHMFCPU
    ͸ެশ$ISPNFɺ͍ͭઌ೔͸ৗʹ
    ࠷৽൛૬౰ʹͳΔͱΞφ΢ϯε͕
    ͋ͬͨͷͰ૝ఆϢʔβʔʹ*&͕͋Δ
    ৔߹Ҏ֎͸͢Ͱʹҙຯ͕ͳͦ͞͏ɻ
    

    View Slide

18. Slow or not slow, that is a question
    ʢ஗͍͔஗͘ͳ͍͔ɺͦΕ͕໰୊ͩʣ
    4FBSDI$POTPMFͷঢ়گ΍ωοτͷهࣄΛؑΈͯɺશମͷද͕ࣔ࣌ؒʙ
    ඵ͋ͨΓͱ͍͏ͷ͕ੜ໋ઢͱࢥΘΕΔɻ
    ͜ΕΛඵະຬʹ཈͑Δͱ͍͏ͷΛ౰໘ͷ໨ඪʹ͢Δɻ
    

    View Slide

19. Tree Shaking
    ʢγΣΠΫγΣΠΫɺπϦʔͳڳ૽͗ʣ
    5SFF4IBLJOHͱ͸࣮ߦ͞Εͳ͍ίʔυΛ࡟আͯ͠όϯυϧαΠζΛॖখ
    ͢Δ͜ͱɻ8FCQBDLʹ΋ͦͷػೳ͕͋Δͱͷ͜ͱ͕ͩͬͨɺ͋·Γੑೳ
    ͕ྑ͘ͳ͍Β͍͠ͷͰɺ໌ࣔతʹΠϯϙʔτͰ͖Δ΋ͷ͸ͦ͏͢Δ΂͖ɻ
    TPVSDFNBQFYQMPSFSͰੜ੒ͨ͠ιʔεϚοϓ
    JNQPSU\GPS&BDI^GSPNbMPEBTI`ɹˠɹJNQPSUGPS&BDIGSPNbMPEBTIGPS&BDI`
    JNQPSU\$BSE^GSPNTFNBOUJDVJSFBDU
    JNQPSU$BSEGSPNTFNBOUJDVJSFBDUEJTUDPNNPOKTWJFXT$BSE
    ˣ
    

    View Slide

20. Code Splitting
    ʢίʔυͷ෼ׂޙ෷͍ʣ
    Ұ౓ʹ͢΂ͯͷίʔυΛಡΈࠐΉͷͰ
    ͸ͳ͘ɺॳճͷϨϯμϦϯάʹඞཁͳ
    ίϯϙʔωϯτҎ֎͸੾Γ཭͠ɺඞཁ
    ʹͳ͔ͬͯΒಡΈࠐΉΑ͏ʹ͢Δ͜ͱ
    Ͱ࠷ॳͷಡΈࠐΈΛૣ͘͢Δɻ
    3FBDU3PVUFSͱͷ߹Θٕ͕ͤ3FBDU
    ͷެࣜυΩϡϝϯτͰ঺հ͞Ε͍ͯΔ
    ͷͰɺͦΕΛ࢖͏ɻ
    IUUQTKBSFBDUKTPSHEPDTDPEF
    TQMJUUJOHIUNMSPVUFCBTFEDPEFTQMJUUJOH
    

    View Slide

21. Result
    ʢͦͷ݁Ռʣ
    
    ˣ
    ˣ
    

    View Slide

22. Current rating
    ʢ.BOHBSFMαΠτݱࡏͷධՁʣ
    

    View Slide

23. SEO life goes on…
    ʢԶͨͪͷઓ͍͸͜Ε͔Βͩʣ
    ʲࠓޙ΍Γ͍ͨ͜ͱʳ
    +40/-%ʹΑΔߏ଄Խσʔλͷ
    ఏڙ
    344഑৴
    ʢഇΕͯΔ͚Ͳ΍Βͳ͍ΑΓ͸Ϛγ ʣ
    4FSWJDF8PSLFSͷ/BWJHBUJPO
    1SFMPBE
    4FNBOUJD6*ͷ5IFNJOHػೳΛ
    ࢖ͬͯະ࢖༻$44Λ࡟ݮ͢Δ
    'JSFTUPSFͷߴස౓ΫΤϦʔΛ)551
    ؔ਺Խ͠ɺ$%/΍4FSWJDF8PSLFS
    ͷΩϟογϡ͕ޮ͘Α͏ʹ͢Δ
    ແݶεΫϩʔϧ΍ը૾ͷ஗ԆಡΈࠐΈΛɺ
    (PPHMFਪ঑ͷΫϩʔϥϒϧ͔ͭ
    *OUFSTFDUJPO0WTFSWFSΛ࢖༻ͨ͠΋ͷʹ
    ͢Δ
    IUUQTDSPMMTBNQMFBQQTQPUDPNJUFNT
    

    View Slide