サーバレスアーキテクチャ + SPAで SSRなしのSEO対策した話

5695b2cac969a2d2204e727c82cbde1d?s=47 matsnow
October 10, 2017

サーバレスアーキテクチャ + SPAで SSRなしのSEO対策した話

2017/10/10のng-japan meetup 2017 AutumnのLT枠で発表した時のスライド。(若干手を加えています)
リリースしたサービスで、サーバサイドレンダリングせずにSEOとOGPの対策をした時のノウハウの共有。

5695b2cac969a2d2204e727c82cbde1d?s=128

matsnow

October 10, 2017
Tweet

Transcript

  1. αʔόϨεΞʔΩςΫνϟ + SPAͰ SSRͳ͠ͷSEOରࡦͨ͠࿩ 2017/10/10 ng-japan meetup 2017 Autumn @matsnow

  2. ࣗݾ঺հ • ϕωοηi-ΩϟϦΞॴଐ • ৽نαʔϏεͷ։ൃϦʔμʔ • αʔόɺϑϩϯτɺΠϯϑϥͱϑϧελοΫͰ΍ͬͯ·͢ • Angularྺ 7ϲ݄͙Β͍

    ໊લɿMasayuki Matsuo (@matsnow)
  3. ΞδΣϯμ • ࡞͍ͬͯΔαʔϏεͷ֓ཁ • αʔϏεͰ΍͍ͬͯΔSEOରࡦ • JavaScriptΛղऍ͠ͳ͍Ϋϩʔϥ΁ͷOGPରԠ

  4. ࡞͍ͬͯΔαʔϏε DODAΩϟϯύε ֶੜ޲͚ͷLinkedInΈ͍ͨͳαʔϏε https://campus.doda.jp/

  5. γεςϜߏ੒ͷ֓ཁ AWS αʔόϨε ΞʔΩςΫνϟ Single Page Application(SPA) Amazon
 DynamoDB AWS

    Lambda Amazon
 S3 Amazon CloudFront Angular4 Amazon
 Cognito
  6. ϦϦʔε௚ޙʹ໰୊ൃ֮

  7. ϦϦʔε௚ޙʹؾ͍ͮͨ໰୊ • GoogleSearchConsoleΛݟΔͱɺશϖʔδͰTDK (TitleɺDescriptionɺKeyword)͕ඃ͍ͬͯΔɻ ɹɹɹɹߟ͑Ε͹Կ΋ͯ͠ͳ͍ͷͰ౰ͨΓલ • αʔόϨεͳͷͰSSRͰ͖ͳ͍ɻ(ઈରͰ͸ͳ͍͚Ͳ) • Ͳ͏͠Α͏͔ɻɻɻ

  8. ͦ͜ͰMetaΫϥε (άάͬͯग़͖ͯͨ)

  9. MetaΫϥεͱ͸ • Angular 4.0Ͱ௥Ճ • metaλάΛॻ͖׵͑ΒΕΔɻ = TDKΛݕࡧΫϩʔϥʹ ೝࣝͤ͞Δ͜ͱ͕Ͱ͖Δɻ

  10. ࣮ࡍͲ͏ͳΔ͔ (1) • GoogleSearchConsoleͷ݁Ռ Τϥʔ͸ผͷ݅Ͱ͢

  11. ࣮ࡍͲ͏ͳΔ͔ (2) • siteԋࢉࢠͰνΣοΫ ਖ਼͘͠ΠϯσοΫε͞Ε͍ͯΔ

  12. ͱ͜Ζ͕৽ͨͳ໰୊͕

  13. ͞ΒͳΔ໰୊ • FacebookͱTwitterͰγΣΞ͞Εͨ࣌ʹmetaΫϥεͰมߋͨ͠಺༰ ͕ແࢹ͞Εͯɺindex.htmlͷOGPλά͕൓ө͞Εͯ͠·͏ɻ औಘͨ͠63-ͱ ΧϊχΧϧ63-͕ҧ͏ %FTDSJQUJPOมΘͬͯ ͳ͍ɻ FacebookͷγΣΞσόοΨʔͷ݁Ռ https://developers.facebook.com/tools/debug/

  14. ͞ΒͳΔ໰୊ • Facebook΍TwitterͷΫϩʔϥ͸JavaScriptΛ ղऍͯ͘͠Εͳ͍ɻ Angular͕ಈ͍ͯͳΜ΅ͷ metaΫϥεͰ͸ରॲͰ͖ͳ͍ɻ

  15. Ͳ͏΍ͬͯରॲ͔ͨ͠

  16. JavaScriptΛղऍ͠ͳ͍Ϋϩʔϥରࡦ index.html share/ index.html / • γΣΞ͍ͨ͠ύε͕ /share ͩͱͯ͠ SPAͷΤϯτϦϙΠϯτ

    OGPઐ༻ͷ੩తHTML ։ൃऀଆͷ෼͔Γ΍͢͞ͷͨΊʹSPAͷύεͱ ߹ΘͤΔϑΝΠϧ഑ஔʹͯ͠·͢ɻ (࣮ࡍͷͱ͜Ζ /share/ Ҏ֎Ͱ΋ྑ͍Ͱ͢)
  17. JavaScriptΛղऍ͠ͳ͍Ϋϩʔϥରࡦ • bodyλάͳ͠ͷOGPઐ༻੩తHTML 5XJUUFS΍'BDFCPPLͷΫϩʔϥʹ ಡ·͍ͤͨ0(1λά ॏෳϖʔδѻ͍͞Εͳ͍ͨΊ ͷ$BOPOJDBMλά ຊདྷͷ41"ͷύεʹඈ͹ͨ͢Ίͷ ϦμΠϨΫτॲཧ (PPHMF"OBMZUJDT༻ʹϦϑΝϥΛ෇༩

  18. JavaScriptΛղऍ͠ͳ͍Ϋϩʔϥରࡦ (/index.html)/share /share/index.html Twitter΍FBͷΫϩʔϥ͕ݟΔํɻ TweetϘλϯͳͲͰγΣΞ͞ΕΔͷ͸ͬͪ͜ɻ 302 Redirect ࣮ࡍʹϢʔβ͕ݟΔํɻ

  19. αʔϏε໊ͱؔ܎ͳ͍୯ޠͰݕࡧ্͔ͯ͠ΒݕࡧॱҐ͕൪໨

  20. मਖ਼ͯ͠Έͨ݁Ռ Twitter Facebook OGP͕൓ө͞ΕͯΔʂ

  21. ·ͱΊ • SSR͠ͳͯ͘΋SEOରࡦ͸Ͱ͖ΔΑɻ • αʔόϨεͰ΋େৎ෉ɻ • ͦΕҎ֎ͷ໨తͰ΍Γ͍ͨͳΒ࿩͸ผɻ • OGP(SNSγΣΞ)΁ͷରॲ΋Ͱ͖ΔΑɻ

  22. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ