バックエンドで頑張るSEO/OGP対策

by TVer Inc.

Embed

Start on current slide

Slide 1

Slide 1 text

όοΫΤϯυͰؤுΔSEO/OGPରࡦ גࣜձࣾ TVer / ҏ౻ ૱ଡ 2023/11/15 Media-JAWS ୈ14ճ

Slide 2

Slide 2 text

ࣗݾ঺հ ● ҏ౻૱ଡ(@sou_world) ● גࣜձࣾTVer αʔϏεϓϩμΫτຊ෦ Τ ϯδχΞϦϯάλεΫ ● ೖࣾͯ͠Ұ೥൒͘Β͍ ● झຯ͸Իָ(DTM)ͱͨ·ʹήʔϜ ● ॳΊͯͷొஃ

Slide 3

Slide 3 text

ΞδΣϯμ ● TVerʹ͍ͭͯ ● TVerͷSEOͷ՝୊ ● SEOରࡦʹ͍ͭͯ ● TVerͷOGPͷ՝୊ ● OGPରԠʹ͍ͭͯ ● ·ͱΊ

Slide 4

Slide 4 text

ΞδΣϯμ ● TVerʹ͍ͭͯ ● TVerͷSEOͷ՝୊ ● SEOରࡦʹ͍ͭͯ ● TVerͷOGPͷ՝୊ ● OGPରԠʹ͍ͭͯ ● ·ͱΊ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

ΞδΣϯμ ● TVerʹ͍ͭͯ ● TVerͷSEOͷ՝୊ ● SEOରࡦʹ͍ͭͯ ● TVerͷOGPͷ՝୊ ● OGPରԠʹ͍ͭͯ ● ·ͱΊ

Slide 14

Slide 14 text

TVerͷSEOͷ՝୊ ϦχϡʔΞϧͰൃੜͨ͠՝୊ 1. TVer͕ΠϯσοΫε͞Εͳ͍໰୊ 2. metaλά͕ෆ׬શͳ໰୊

Slide 15

Slide 15 text

TVerͷSEOͷ՝୊ ϦχϡʔΞϧͰൃੜͨ͠՝୊ 1. TVer͕ΠϯσοΫε͞Εͳ͍໰୊ ○ WebΞϓϦͷ࠷దԽ͕ߦΘΕ͍ͯͳ͍ ■ SPA࠾༻ʹΑΔॳظඳըίετͷ૿Ճ ○ GoogleSearchConsole౳ͷςετ΋ෆ߹֨ ○ Ϋϩʔϥʔ͕८ճͯ͠΋ΠϯσοΫεొ࿥❌ ■ ݕࡧ্Ґʹग़ͯ͜ͳ͍

Slide 16

Slide 16 text

TVerͷSEOͷ՝୊ ϦχϡʔΞϧͰൃੜͨ͠՝୊ 2. metaλά͕ෆ׬શͳ໰୊ ○ ͲͷϖʔδͰ΋શͯಉҰͷmetaλάΛ࢖༻ ○ ϒϥ΢βʹ֤ϖʔδͷ໾ׂΛ఻ୡͰ͖ͳ͍ ○ ൪૊໊Ͱݕࡧͯ͠΋͏·͘දࣔ͞Εͳ͍ ■ ্Ґʹग़ͨͱͯ͠΋ϖʔδ಺༰͕ਖ਼֬ʹ఻ΘΒͳ͍ ■ ͦ΋ͦ΋্Ґʹग़ͯ͜ͳ͍͚ΕͲ......

Slide 17

Slide 17 text

TVerͷSEOͷ՝୊ ݕࡧදࣔճ਺໿70% ˍ ΫϦοΫ਺໿50%μ΢ϯ

Slide 18

Slide 18 text

TVerͷSEOͷ՝୊ ૣٸͳରԠ͕ඞཁ!!!

Slide 19

Slide 19 text

ΞδΣϯμ ● TVerʹ͍ͭͯ ● TVerͷSEOͷ՝୊ ● SEOରࡦʹ͍ͭͯ ● TVerͷOGPͷ՝୊ ● OGPରԠʹ͍ͭͯ ● ·ͱΊ

Slide 20

Slide 20 text

SEOରࡦʹ͍ͭͯ ΰʔϧͱ੍໿ ● ΰʔϧ ○ Ϋϩʔϥʔ८ճ࣌ʹΠϯσοΫεొ࿥͞ΕΔ͜ͱ ○ ൪૊໊ͳͲͰݕࡧ্ҐʹTVer͕ग़ͯ͘Δ͜ͱ ● ੍໿ ○ ୹ظؒͰղܾ͍ͨ͠(େମ1ʙ2ϲ݄) ○ όοΫΤϯυͷϦιʔεͷΈͰղܾ͢Δ͜ͱ ■ Webϑϩϯτ͸·ͩ಺੡ԽͰ͖͍ͯͳ͍ɾɾɾ

Slide 21

Slide 21 text

SEOରࡦʹ͍ͭͯ WebϑϩϯτͰ࠷దԽ͢Δʹ͸ ● αʔόʔαΠυϨϯμϦϯά(SSR) ● ελςΟοΫαΠτδΣωϨʔγϣϯ(SSG)

Slide 22

Slide 22 text

SEOରࡦʹ͍ͭͯ WebϑϩϯτͰ࠷దԽ͢Δʹ͸ ● αʔόʔαΠυϨϯμϦϯά(SSR) ○ ϦΫΤετ࣌ʹαʔόଆͰಈతͳ৘ใΛඳը ■ SPA͸ΫϥΠΞϯτଆͰશͯඳը ■ සൟʹมߋ͞ΕͨΓɺύʔιφϥΠζΛ͢ΔಈతͳWebα Πτʹ࠷ద ○ ϑϩϯτΤϯυʹखΛೖΕͳ͍ͱ͍͚ͳ͍ ○ ࠓճ͸࢖͑ͳ͍

Slide 23

Slide 23 text

SEOରࡦʹ͍ͭͯ WebϑϩϯτͰ࠷దԽ͢Δʹ͸ ● ελςΟοΫαΠτδΣωϨʔγϣϯ(SSG) ○ Ϗϧυ࣌ʹ੩తHTMLΛ࡞੒ ■ ϢʔβϦΫΤετ࣌ʹ͸ܾ·ͬͨHTMLΛฦ͢͜ͱ͕Ͱ͖Δɻඳը ίετ͕ͱͯ΋͍ܰɻ ■ ϒϩά΍υΩϡϝϯταΠτͳͲͷසൟͳߋ৽ͷͳ͍WebαΠτʹ ࠷ద ○ ࣅͨΑ͏ͳ͜ͱΛόοΫΤϯυͰͰ͖ͦ͏ ■ GoͰ֤ϖʔδͷ੩తHTMLΛ࡞Γ͍ͨ

Slide 24

Slide 24 text

SEOରࡦʹ͍ͭͯ ੩తHTMLʹΑΔSEOରࡦ 1. ؆қతͳΫϩʔϥʔͷ࣮૷ 2. Ϋϩʔϥʔ൑ఆͱΞΫηε੍ޚ

Slide 25

Slide 25 text

SEOରࡦʹ͍ͭͯ ੩తHTMLΛੜ੒͢Δ 1. ؆қతͳΫϩʔϥʔͷ࣮૷ ○ TVerͷ֤ϖʔδΛ८ճ ■ ඳը͕׬ྃͨ͠ϖʔδΛHTMLͰऔಘ ■ HTMLΛՃ޻ͯ͠S3΁ ○ ECSλεΫͰఆظ࣮ߦ ○ ࣮૷͸Go

Slide 26

Slide 26 text

SEOରࡦʹ͍ͭͯ

Slide 27

Slide 27 text

SEOରࡦʹ͍ͭͯ HTMLͷऔಘͱฤू 1. ର৅ͷϖʔδ΁ΞΫηε͠HTMLΛऔಘ 2. औಘͨ͠HTMLΛ੩తղੳͯ͠ฤू 3. ฤूͨ͠HTMLΛS3΁Ξοϓϩʔυ

Slide 28

Slide 28 text

SEOରࡦʹ͍ͭͯ HTMLͷऔಘͱฤू 1. ର৅ͷϖʔδ΁ΞΫηε͠HTMLΛऔಘ ○ ChromeͷDevToolsΛར༻ ■ github.com/chromedp ○ ର৅ϖʔδͷURL͸ࣄલʹܾΊͰ༻ҙ ■ DB͔Βऔ͖ͬͯͨΓϋʔυίʔσΟϯάͨ͠Γ...... ○ ඳը͕ऴΘΔ·Ͱ଴ͭඞཁ͋Γ ■ ΞΫηεͯ͠਺ඵSleep💤 ○ ݁ߏటष͍......

Slide 29

Slide 29 text

SEOରࡦʹ͍ͭͯ HTMLͷऔಘͱฤू 2. औಘͨ͠HTMLΛ੩తղੳͯ͠ฤू ○ औಘͨ͠HTML͸Ճ޻͢Δඞཁ͕͋Δ ■ metaλάͷ࠷దԽ ■ ෆཁͳjsͷ࡟আ ○ ੩తղੳͯ͠τϥόʔε ■ https://techblog.tver.co.jp/entry/s-ito/intro-go-html-parser- package

Slide 30

Slide 30 text

SEOରࡦʹ͍ͭͯ HTMLͷऔಘͱฤू 3. ฤूͨ͠HTMLΛS3΁Ξοϓϩʔυ ○ ΫϩʔϥʔͱϢʔβΞΫηεͰৼΓ෼͚ ■ Ϋϩʔϥʔ൑ఆ͞Εͨ΋ͷ͸HTMLΛݟΔΑ͏ʹ

Slide 31

Slide 31 text

SEOରࡦʹ͍ͭͯ ੩తHTMLʹΑΔSEOରࡦ 2. Ϋϩʔϥʔ൑ఆͱΞΫηε੍ޚ ○ CloudFront FunctionsΛར༻ ■ Ϣʔβʹ͸SPAΛ,Ϋϩʔϥʔʹ͸ੜ੒ͨ͠੩త HTMLΛฦ͢

Slide 32

Slide 32 text

SEOରࡦʹ͍ͭͯ CloudFront Functions ● Τοδϩέʔγϣϯ্Ͱ࣮ߦ ○ Lambda@EdgeΑΓ Ϣʔβʔʹۙ ͍ ● ϥϯλΠϜ͸JavaScript ● ܰྔͷॲཧΛߦ͏ͷʹ࠷ద ○ ࠓճ͸Ϋϩʔϥʔ൑ఆ/ɹɹɹɹɹɹɹɹɹɹɹɹɹURLม ߋʹར༻(ϏϡʔϫʔϦΫΤετ)

Slide 33

Slide 33 text

SEOରࡦʹ͍ͭͯ ݁Ռ ● ੩తHTMLΛ࢖ͬͯॳظඳըίετΛ࡟ݮ ○ ΠϯσοΫεొ࿥͞ΕΔΑ͏ʹͳͬͨ ● metaλάΛਖ਼ͨ͘͠͠ ○ ݕࡧ࣌ͷද͕ࣔਖ਼͘͠ͳͬͨ ݕࡧ࣌ͷදࣔճ਺΋ϦχϡʔΞϧલҎ্ʹʂʂ

Slide 34

Slide 34 text

SEOରࡦʹ͍ͭͯ ରԠ։࢝ ‼︎ ֓ͶରԠ׬ྃ ‼︎

Slide 35

Slide 35 text

ΞδΣϯμ ● TVerʹ͍ͭͯ ● TVerͷSEOͷ՝୊ ● SEOରࡦʹ͍ͭͯ ● TVerͷOGPͷ՝୊ ● OGPରԠʹ͍ͭͯ ● ·ͱΊ

Slide 36

Slide 36 text

TVerͷOGPͷ՝୊ ϦχϡʔΞϧ࣌ͷOGPରԠͱͦͷ՝୊ ● OGPରԠ ○ LP(ϥϯσΟϯάϖʔδ)Λ༻ҙͯ͠ରԠ ■ SEOͷ՝୊ͱಉ༷ʹmetaλά͕ෆ׬શͩͬͨ ● ՝୊ ○ ຊདྷͷϖʔδͱLPͰURL͕ҟͳ͍ͬͯͨ ■ Ϣʔβ͕ϦϯΫΛ௚઀ίϐϖ͢Δͱදࣔ❌ ■ Ϣʔβମݧ͕ଛͳΘΕͨঢ়ଶ

Slide 37

Slide 37 text

TVerͷOGPͷ՝୊ SEOରࡦͷ࢓૊Έ͸࢖͑Δͷ͔ ● ݁࿦͔Βݴ͑͹࢖͑͸ͨ͠ ○ LPͰ͸ͳ͍URLͰ΋දࣔՄೳʹͳͬͨ ■ SEOରࡦ࣌ʹmetaλάΛਖ਼ͨͨ͘͠͠Ί ○ ࢑ఆରԠͱͯ͠͸े෼ͳঢ়ଶ ○ 1ͭॏཁͳཁ݅Λຬͨͤͳ͔ͬͨ

Slide 38

Slide 38 text

TVerͷOGPͷ՝୊ ɹ ϦΞϧλΠϜੑʂʂʂ

Slide 39

Slide 39 text

TVerͷOGPͷ՝୊ OGPಛ༗ͷཁ݅ ● ϦΞϧλΠϜੑ ○ SNSࠂ஌͸଎౓΋ॏཁ ■ SEOରࡦͷख๏Λྲྀ༻͢Δͱ਺෼ϥά͕ൃੜ ■ OGPରԠͰ͸͜ͷϥάΛڐ༰ͨ͘͠ͳ͍ ○ LPͰ͸͜ͷཁ݅͸ຬ͍ͨͯͨ͠

Slide 40

Slide 40 text

TVerͷOGPͷ՝୊ OGPಛ༗ͷཁ݅ ● ϦΞϧλΠϜੑ ○ SNSࠂ஌͸଎౓΋ॏཁ ■ SEOରࡦͷख๏Λྲྀ༻͢Δͱ਺෼ϥά͕ൃੜ ■ OGPରԠͰ͸͜ͷϥάΛڐ༰ͨ͘͠ͳ͍ ○ LPͰ͸͜ͷཁ݅͸ຬ͍ͨͯͨ͠ LPΛ࢖ΘͣʹϦΞϧλΠϜੑΛ୲อ͍ͨ͠ʂ

Slide 41

Slide 41 text

ΞδΣϯμ ● TVerʹ͍ͭͯ ● TVerͷSEOͷ՝୊ ● SEOରࡦʹ͍ͭͯ ● TVerͷOGPͷ՝୊ ● OGPରԠʹ͍ͭͯ ● ·ͱΊ

Slide 42

Slide 42 text

OGPରԠʹ͍ͭͯ ϦΞϧλΠϜੑ୲อͷͨΊʹ 1. OGP༻ͷHTMLΛฦ͢APIΛ༻ҙ 2. Lambda@Edgeܦ༝ͰAPIΛୟ͍ͯHTMLΛฦ͢

Slide 43

Slide 43 text

OGPରԠʹ͍ͭͯ ϦΞϧλΠϜੑ୲อͷͨΊʹ 1. OGP༻ͷHTMLΛฦ͢APIΛ༻ҙ ○ OGPʹඞཁͳ৘ใΛ٧ΊࠐΜͩ࠷খݶͷHTML ○ ϦΞϧλΠϜੑΛ୲อ ○ OGP BotͷΞΫηε࣌ʹ͜ͷ৘ใΛฦͤΕ͹ྑ͍ ■ Lambda@Edge/CloudFront FunctionsͰରԠ

Slide 44

Slide 44 text

OGPରԠʹ͍ͭͯ ϦΞϧλΠϜੑ୲อͷͨΊʹ 2. Lambda@Edgeܦ༝ͰAPIΛୟ͍ͯHTMLΛฦ͢ ○ ΦϦδϯϦΫΤετͰಛఆURLͰAPIΛୟ͘Α͏ʹ ■ Ωϟογϡ΋ར༻ ■ ΤϥʔϋϯυϦϯά΋ਖ਼͘͠ ○ OGP Bot൑ఆ͸CloudFront FunctionsΛར༻ ■ SEOରࡦͱಉ༷

Slide 45

Slide 45 text

OGPରԠʹ͍ͭͯ LambdaˏEdge ● ϦʔδϣϯΤοδͰ࣮ߦ ● ϥϯλΠϜ͸Node.js/Python ● CloudFront Functionsʹൺ΂ͯ؇੍͍ݶ ○ ൺֱతॏ͍ॲཧʹରͯ͠༏Ґ ○ ࠓճ͸APIΛୟ͍ͯϨεϙϯεΛੜ੒͢Δͷʹར༻

Slide 46

Slide 46 text

OGPରԠʹ͍ͭͯ

Slide 47

Slide 47 text

OGPରԠʹ͍ͭͯ ͍ͭͰʹΩϟογϡઓུ ● max-ageͰҰఆظؒΩϟογϡ ● stale-if-errorͰαʔόෆௐͷࡍͷΩϟογϡར༻ ● stale-while-revalidate͸ࠓճ͸ݟૹΓ ○ Ϩεϙϯεͷ઱౓Λ༏ઌ ○ ΞΫηε͕ͦ΋ͦ΋ͦ͜·Ͱͳ͍ ○ APIαʔόଆͰ΋ෛՙରࡦΛ͍ͯ͠Δ

Slide 48

Slide 48 text

OGPରԠʹ͍ͭͯ ݁Ռ ● Lambda@EdgeͰϦΞϧλΠϜੑΛ୲อ ○ ެ։͔Β஗Ԇͳ͘SNSࠂ஌Ͱ͖ΔΑ͏ʹͳͬͨ ● CloudFront FunctionsͰBot൑ఆͱৼΓ෼͚ ○ ֤ϖʔδͱಉ͡URLͰγΣΞͰ͖ΔΑ͏ʹͳͬͨ LPͳ͠Ͱ஗Ԇͳ͘γΣΞͰ͖ΔΑ͏ʹͳͬͨʂʂ

Slide 49

Slide 49 text

ΞδΣϯμ ● TVerʹ͍ͭͯ ● TVerͷSEOͷ՝୊ ● SEOରࡦʹ͍ͭͯ ● TVerͷOGPͷ՝୊ ● OGPରԠʹ͍ͭͯ ● ·ͱΊ

Slide 50

Slide 50 text

·ͱΊ SEOରࡦ ● ؆қతͳΫϩʔϥʔΛ࣮૷ ● ࣮ࡍʹTVer΁८ճͯ͠੩తHTMLΛੜ੒ ● ֤ࣾͷΫϩʔϥʔ͸੩తHTMLΛݟΔΑ͏ʹ ○ CloudFront FunctionsΛར༻ ● ΠϯσοΫεొ࿥͞Εݕࡧ݁Ռදࣔ΋ղܾͰ͖ͨ ○ ϦχϡʔΞϧલҎ্ͷঢ়ଶʹͳͬͨ

Slide 51

Slide 51 text

·ͱΊ OGPରԠ ● ֤OGP༻metaλάΛਖ਼͘͠ฦ͢APIΛ༻ҙ ● ֤ࣾͷOGP Bot͸͜ͷAPI͔ΒฦΔHTMLΛར༻ ○ CloudFront FunctionsͰOGP Bot൑ఆ ○ Lambda@EdgeͰAPIΛୟ͍ͯHTMLฦ٫ ● ֤ϖʔδͱಉURLͰϦΞϧλΠϜͳ৘ใΛฦͤͨ ○ LPͳͯ͘΋ྑ͍ঢ়گʹͳͬͨ ○ SNSͰͷϢʔβମݧ͕޲্ͨ͠

Slide 52

Slide 52 text

·ͱΊ ࠓޙ ● LP͕ແͯ͘΋ྑ͍ঢ়ଶʹ ○ Ұ෦·ͩLPΛར༻͍ͯ͠Δ ○ LPͷURLͰͷաڈ෼ͷγΣΞ΁ͷରԠ ● վमίετͷ࡟ݮ ○ metaλάͷจݴมߋͳͲվमίετ͕݁ߏߴ͍ ■ ಛʹSEOରࡦͷ੩తHTML͸ॻ͖ग़͠ͳ͓͞ͳ͍ͱ͍͚ͳ ͍

Slide 53

Slide 53 text

·ͱΊ ͓·͚ ● 2023/10 X(چTwitter)ͷOGPͰ࢓༷มߋ ○ ৭ʑදࣔͷ࢓༷͕มΘͬͨ ○ ࠓޙmetaλάͷมߋ΋͋Δ͔΋͠Εͳ͍ ○ 😇😇😇

Slide 54

Slide 54 text

https://tver.co.jp/recruit/