Tweet
Tweet

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

͞ΒͳΔ໰୊ • Facebook΍TwitterͷΫϩʔϥ͸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 Twitter΍FBͷΫϩʔϥ͕ݟΔํɻ 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

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