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

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

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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ