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

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

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

7306d1333cb52f957f87017d175daa43?s=128

Yuka O’oka

November 20, 2019
Tweet

Transcript

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

  2. Who am I ? 何やってる人? ʢ͓·͑୭΍ͶΜ ʣ େԬ༝Ղ !PVLBZVLB ແ৬ͱಉਓ࡞Ոͷ͍͋ͩͰ͢ɻडୗ΋

    ৗற΋΍ΒͣʹͲΕ͚ͩੜ͖ΒΕΔ͔ νϟϨϯδதͰ͢ɻ 3FBDUͱ5ZQF4DSJQUͰ͢ɻ એݴత6*ສࡀɺ઴ਐత੩తܕ෇͚ ສࡀʂ 好きな技術は?
  3. Works ʢ࡞ͬͯΔ΋ͷʣ 3FBDUͱ5ZQF4DSJQUͷಉਓࢽͰ͢ɻ ݱࡏγϦʔζͰλΠτϧग़͍ͯͯɺྦྷ ܭͰ ෦΄ͲചΕͯ·͢ɻ ఱ࠽ഽͷઌഐͱɺ෼໺ҧ͍Ͱೖ͖ͬͯ ͕ͨΜ͹Γ԰ͷޙഐͪΌΜͱͷձ࿩ܶ Ͱ3FBDUʹΑΔ࠷৽ͷϞμϯϑϩϯ τΤϯυ։ൃ͕Θ͔Γ΍ֶ͘͢΂Δͱ

    ޷ධͰ͢ɻ IUUQTPVLBZVLBCPPUIQN
  4. Mangarel ʢ.BOHB  3FMFBTF ͰϚϯΨϨϧʣ ࠓճͷ࿩ͷ୊ࡐͱͳΔɺݸਓ։ൃͷΞϓϦͰ ͢ɻʮॻళͷ৽ץίʔφʔత69Λఏڙ͢Δ ίϛοΫε৘ใΞϓϦʯͱ͍͏ςʔϚͷ΋ ͱɺ3FBDU ͱ

    'JSFCBTF Ͱ։ൃ͍ͯ͠Δ 18"Ͱ͢ɻ ී௨ʹ "1* ͰखʹೖΔ৘ใΛ౰ͨΓલʹ੔ཧ ͠ɺࡢࠓͷ 6* τϨϯυʹଇΓී௨ʹ࢖͍΍ ͘͢͠ɺΤϯδχΞతʹࠓͷී௨ͷٕज़Ͱߏ ੒͢Δͱ͍͏ɺʮී௨ʯΛͱ͜ͱΜੵΈॏͶ ͍ͯ͘͜ͱΛ։ൃํ਑ʹ͍ͯ͠·͢ɻ IUUQTNBOHBSFMDPN
  5. Google knows… ʢ(PPHMF ઌੜɺ஌Βͳ͍ͬͯΑʣ ٕज़ॻయʹग़ͨ͠ʰΓ͋Ϋτʂ'JSFCBTFฤʱͷα ϯϓϧΞϓϦͱͯͦ͠ͷલ೔ͷ݄೔ʹϦϦʔε ͨ͠.BOHBSFMͰ͕͢ɺϲ݄ͨͬͯ΋(PPHMFݕ ࡧʹҾ͔͔ͬΔͷ͸Θ͔ͣ݅ͷΈɻ͔࣮͠͠ࡍʹ ͸ສ݅Ҏ্ͷϖʔδ͕ଘࡏ͍ͯ͠·ͨ͠ɻ ʮ࠷ۙͷ(PPHMFCPU͸ͪΌΜͱ+BWB4DSJQUΛղ

    ऍͯ͠ΠϯσοΫεͯ͘͠ΕΔʯͱฉ͍ͯͨͷʹ࿩ ͕͕ͪ͏ʂԿͱ͔ͤͶ͹ʂͱɺ͜͜ʹདྷͯΑ͏΍͘ ةػײΛ๊͘Α͏ʹɻ ʲ౰ॳͷϖʔδߏ੒ʳ  TFBSDI TJHOJO CPPLTʢ໿ ʣ DPNJDTʢ໿ ʣ
  6. Problems ʢ໰୊఺ʣ ᶃϖʔδͦͷ΋ͷ͕ΠϯσοΫε͞Εͳ͍ w ࣮ࡍʹ͸ສ݅Ҏ্ͷϖʔδ͕͋Δͷʹɺϖʔδ͔͠(PPHMFʹೝࣝ͞Ε͍ͯͳ͍ ᶄλΠτϧ΍ৄࡉ͕ݸผʹදࣔ͞Εͳ͍ w τοϓϖʔδҎ֎ͷϖʔδ΋ɺτοϓϖʔδͱશ͘ಉ͡λΠτϧͱৄࡉ ᶅίϯςϯπ͕ϨϯμϦϯά͞Εͳ͍ w

    +BWB4DSJQUͰඳ͍ࣸͯ͠Δ෦෼Λ(PPHMFCPU͕ղऍͰ͖͍ͯͳ͍ͨΊɺ͔ͦ͜Β ϦϯΫΛͨͲͬͯ΋Β͑ͳ͍
  7. ϖʔδͦͷ΋ͷ͕ΠϯσοΫε͞Εͳ͍ ղܾͷͨΊʹ΍ͬͨ͜ͱ ᶃ

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

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

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

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

  12. React Helmet ʢZBSOBEESFBDUIFMNFUʣ ಈతʹ)5.-ϔομΛ্ॻ͖͢Δͨ Ίͷ3FBDU༻ϥΠϒϥϦɻ͜ΕΛ ࢖ͬͯݸผͷϔομΛॻ͖׵͑ɺϒϥ ΢β্͔Β͸มΘͬͨΑ͏ʹݟ͑ͨ ͕ɺ(PPHMFʹλΠτϧͱͯ͠ొ࿥͞ ΕΔͷ͸OPTDSJQUTͷதͷI ݻఆλάͷத਎ɻ

    ͨͩʮࠓചΕ͍ͯΔ৽ץʯϖʔδͰ ͸)FMNFUͰॻ͖׵͑ͨλΠτϧͩ ͚͕ೝࣝ͞Εৄࡉ͸มΘΒͣɺͱ͍͏ Α͘Θ͔Βͳ͍ঢ়گɻ
  13. Cloud Functions ʹΑΔϔομͷಈతॻ͖׵͑ Ϗϧυͨ͠JOEFYIUNMΛ )PTUJOHͷϩʔΧϧʹஔ͖ɺϔομ Λಈతʹॻ͖׵͑ͯͦͷத਎Λฦ ͢)551ؔ਺Λ࡞੒ɺ)PTUJOHͷ SFXSJUFTػೳͰ೚ҙͷ63-ʹ CPU͕௚ʹΞΫηεʹདྷͨͱ͖ʹͦ Ε͕ൃಈ͢ΔΑ͏ʹͨ͠ɻ

    pSFCBTFKTPO GVODUJPOTSFQMBDF.FUB#PPLUT VTDFOUSBM ϦʔδϣϯͷΈ
  14. ݁Ռɺগͣͭ͠ద੾ͳλΠτϧͱৄ ࡉʹஔ͖׵ΘΓͭͭ͋Δɻ ͍ͭͰʹ0(1ʹ΋ରԠ͠ɺ4/4 γΣΞͨ͠ࡍʹݟӫ͕͑͢ΔΑ͏ʹ ͨ͠ɻ ͍ͭͰʹ 0(1 ʹ΋ରԠ

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

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

    ϨϯμϦϯά͕੒ޭ͍ͯ͠Δ͕ɺ݅ ͷϖʔδ͸ݢฒΈશ໓ͱ͍ͬͨ۩߹ɻ ˠ
  17. Tried but useless ʢ΍ͬͯΈ͚ͨͲແବͩͬͨ͜ͱʣ ϩʔμʔΛճ͢લʹϥοϓཁૉʹ BSJBCVTZlUSVFzΛઃఆ͠ɺσʔλ ͷऔಘ͕׬ྃͨ͠Βͦͷ஋ΛGBMTF ʹมߋ͢ΔΑ͏ʹ͢Δɻ ˣ (PPHMF%FWFMPQFSTʮίϯςϯπͷ

    ඇදࣔͱߋ৽ʯʹ͋ͬͨͷͰ΍ͬͯ Έ͕ͨɺϨϯμϦϯάʹਐల͸ͳ ͔ͬͨɻͨͩΞΫηγϏϦςΟධՁ ʹ͸ͭͳ͕Δ͔΋ɻ ݹ͍هࣄʹ͸ೖΕͨ΄͏͕͍͍ͱ ͋ͬͨͷͰSFBDUBQQQPMZpMMΛೖ ΕͯΈͨɻ ˣ ΍ͬͺΓঢ়گ͸վળ͠ͳ͔ͬͨͷͰ ΞϯΠϯετʔϧͨ͠ɻ(PPHMFCPU ͸ެশ$ISPNFɺ͍ͭઌ೔͸ৗʹ ࠷৽൛૬౰ʹͳΔͱΞφ΢ϯε͕ ͋ͬͨͷͰ૝ఆϢʔβʔʹ*&͕͋Δ ৔߹Ҏ֎͸͢Ͱʹҙຯ͕ͳͦ͞͏ɻ
  18. Slow or not slow, that is a question ʢ஗͍͔஗͘ͳ͍͔ɺͦΕ͕໰୊ͩʣ 4FBSDI$POTPMFͷঢ়گ΍ωοτͷهࣄΛؑΈͯɺશମͷද͕ࣔ࣌ؒʙ

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

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

    ͷͰɺͦΕΛ࢖͏ɻ IUUQTKBSFBDUKTPSHEPDTDPEF TQMJUUJOHIUNMSPVUFCBTFEDPEFTQMJUUJOH
  21. Result ʢͦͷ݁Ռʣ  ˣ ˣ

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

  23. SEO life goes on… ʢԶͨͪͷઓ͍͸͜Ε͔Βͩʣ ʲࠓޙ΍Γ͍ͨ͜ͱʳ +40/-%ʹΑΔߏ଄Խσʔλͷ ఏڙ 344഑৴ ʢഇΕͯΔ͚Ͳ΍Βͳ͍ΑΓ͸Ϛγ

    ʣ 4FSWJDF8PSLFSͷ/BWJHBUJPO 1SFMPBE 4FNBOUJD6*ͷ5IFNJOHػೳΛ ࢖ͬͯະ࢖༻$44Λ࡟ݮ͢Δ 'JSFTUPSFͷߴස౓ΫΤϦʔΛ)551 ؔ਺Խ͠ɺ$%/΍4FSWJDF8PSLFS ͷΩϟογϡ͕ޮ͘Α͏ʹ͢Δ ແݶεΫϩʔϧ΍ը૾ͷ஗ԆಡΈࠐΈΛɺ (PPHMFਪ঑ͷΫϩʔϥϒϧ͔ͭ *OUFSTFDUJPO0WTFSWFSΛ࢖༻ͨ͠΋ͷʹ ͢Δ IUUQTDSPMMTBNQMFBQQTQPUDPNJUFNT