Share
Embed
Slide 1
Slide 1 text
αʔόϨεΞʔΩςΫνϟ + SPAͰ
SSRͳ͠ͷSEOରࡦͨ͠
2017/10/10
ng-japan meetup 2017 Autumn
@matsnow
Slide 2
Slide 2 text
ࣗݾհ
• ϕωοηi-ΩϟϦΞॴଐ
• ৽نαʔϏεͷ։ൃϦʔμʔ
• αʔόɺϑϩϯτɺΠϯϑϥͱϑϧελοΫͰͬͯ·͢
• Angularྺ 7ϲ݄͙Β͍
໊લɿMasayuki Matsuo (@matsnow)
Slide 3
Slide 3 text
ΞδΣϯμ
• ࡞͍ͬͯΔαʔϏεͷ֓ཁ
• αʔϏεͰ͍ͬͯΔSEOରࡦ
• JavaScriptΛղऍ͠ͳ͍ΫϩʔϥͷOGPରԠ
Slide 4
Slide 4 text
࡞͍ͬͯΔαʔϏε
DODAΩϟϯύε
ֶੜ͚ͷLinkedInΈ͍ͨͳαʔϏε
https://campus.doda.jp/
Slide 5
Slide 5 text
γεςϜߏͷ֓ཁ
AWS
αʔόϨε ΞʔΩςΫνϟ
Single Page Application(SPA)
Amazon
DynamoDB
AWS
Lambda
Amazon
S3
Amazon
CloudFront
Angular4
Amazon
Cognito
Slide 6
Slide 6 text
ϦϦʔεޙʹൃ֮
Slide 7
Slide 7 text
ϦϦʔεޙʹؾ͍ͮͨ
• GoogleSearchConsoleΛݟΔͱɺશϖʔδͰTDK
(TitleɺDescriptionɺKeyword)͕ඃ͍ͬͯΔɻ
ɹɹɹɹߟ͑ΕԿͯ͠ͳ͍ͷͰͨΓલ
• αʔόϨεͳͷͰSSRͰ͖ͳ͍ɻ(ઈରͰͳ͍͚Ͳ)
• Ͳ͏͠Α͏͔ɻɻɻ
Slide 8
Slide 8 text
ͦ͜ͰMetaΫϥε (άάͬͯग़͖ͯͨ)
Slide 9
Slide 9 text
MetaΫϥεͱ
• Angular 4.0ͰՃ
• metaλάΛॻ͖͑ΒΕΔɻ = TDKΛݕࡧΫϩʔϥʹ
ೝࣝͤ͞Δ͜ͱ͕Ͱ͖Δɻ
Slide 10
Slide 10 text
࣮ࡍͲ͏ͳΔ͔ (1)
• GoogleSearchConsoleͷ݁Ռ
Τϥʔผͷ݅Ͱ͢
Slide 11
Slide 11 text
࣮ࡍͲ͏ͳΔ͔ (2)
• siteԋࢉࢠͰνΣοΫ ਖ਼͘͠ΠϯσοΫε͞Ε͍ͯΔ
Slide 12
Slide 12 text
ͱ͜Ζ͕৽ͨͳ͕
Slide 13
Slide 13 text
͞ΒͳΔ
• FacebookͱTwitterͰγΣΞ͞Εͨ࣌ʹmetaΫϥεͰมߋͨ͠༰
͕ແࢹ͞Εͯɺindex.htmlͷOGPλά͕ө͞Εͯ͠·͏ɻ
औಘͨ͠63-ͱ
ΧϊχΧϧ63-͕ҧ͏
%FTDSJQUJPOมΘͬͯ
ͳ͍ɻ
FacebookͷγΣΞσόοΨʔͷ݁Ռ
https://developers.facebook.com/tools/debug/
Slide 14
Slide 14 text
͞ΒͳΔ
• FacebookTwitterͷΫϩʔϥJavaScriptΛ
ղऍͯ͘͠Εͳ͍ɻ
Angular͕ಈ͍ͯͳΜ΅ͷ
metaΫϥεͰରॲͰ͖ͳ͍ɻ
Slide 15
Slide 15 text
Ͳ͏ͬͯରॲ͔ͨ͠
Slide 16
Slide 16 text
JavaScriptΛղऍ͠ͳ͍Ϋϩʔϥରࡦ
index.html
share/
index.html
/
• γΣΞ͍ͨ͠ύε͕ /share ͩͱͯ͠
SPAͷΤϯτϦϙΠϯτ
OGPઐ༻ͷ੩తHTML
։ൃऀଆͷ͔Γ͢͞ͷͨΊʹSPAͷύεͱ
߹ΘͤΔϑΝΠϧஔʹͯ͠·͢ɻ
(࣮ࡍͷͱ͜Ζ /share/ Ҏ֎Ͱྑ͍Ͱ͢)
Slide 17
Slide 17 text
JavaScriptΛղऍ͠ͳ͍Ϋϩʔϥରࡦ
• bodyλάͳ͠ͷOGPઐ༻੩తHTML
5XJUUFS'BDFCPPLͷΫϩʔϥʹ
ಡ·͍ͤͨ0(1λά
ॏෳϖʔδѻ͍͞Εͳ͍ͨΊ
ͷ$BOPOJDBMλά
ຊདྷͷ41"ͷύεʹඈͨ͢Ίͷ
ϦμΠϨΫτॲཧ
(PPHMF"OBMZUJDT༻ʹϦϑΝϥΛ༩
Slide 18
Slide 18 text
JavaScriptΛղऍ͠ͳ͍Ϋϩʔϥରࡦ
(/index.html)/share
/share/index.html
TwitterFBͷΫϩʔϥ͕ݟΔํɻ
TweetϘλϯͳͲͰγΣΞ͞ΕΔͷͬͪ͜ɻ
302 Redirect
࣮ࡍʹϢʔβ͕ݟΔํɻ
Slide 19
Slide 19 text
αʔϏε໊ͱؔͳ͍୯ޠͰݕࡧ্͔ͯ͠ΒݕࡧॱҐ͕൪
Slide 20
Slide 20 text
मਖ਼ͯ͠Έͨ݁Ռ
Twitter
Facebook
OGP͕ө͞ΕͯΔʂ
Slide 21
Slide 21 text
·ͱΊ
• SSR͠ͳͯ͘SEOରࡦͰ͖ΔΑɻ
• αʔόϨεͰେৎɻ
• ͦΕҎ֎ͷతͰΓ͍ͨͳΒผɻ
• OGP(SNSγΣΞ)ͷରॲͰ͖ΔΑɻ
Slide 22
Slide 22 text
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ