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

2023/11/15
Media-JAWS【第14回】
https://media-jaws.doorkeeper.jp/events/164378

Transcript

1. όοΫΤϯυͰؤுΔSEO/OGPରࡦ גࣜձࣾ TVer / ҏ౻ ૱ଡ 2023/11/15 Media-JAWS ୈ14ճ
2. ࣗݾ঺հ • ҏ౻૱ଡ(@sou_world) • גࣜձࣾTVer αʔϏεϓϩμΫτຊ෦ Τ ϯδχΞϦϯάλεΫ • ೖࣾͯ͠Ұ೥൒͘Β͍ • झຯ͸Իָ(DTM)ͱͨ·ʹήʔϜ • ॳΊͯͷొஃ
3. ΞδΣϯμ • TVerʹ͍ͭͯ • TVerͷSEOͷ՝୊ • SEOରࡦʹ͍ͭͯ • TVerͷOGPͷ՝୊ • OGPରԠʹ͍ͭͯ • ·ͱΊ
4. ΞδΣϯμ • TVerʹ͍ͭͯ • TVerͷSEOͷ՝୊ • SEOରࡦʹ͍ͭͯ • TVerͷOGPͷ՝୊ • OGPରԠʹ͍ͭͯ • ·ͱΊ
13. ΞδΣϯμ • TVerʹ͍ͭͯ • TVerͷSEOͷ՝୊ • SEOରࡦʹ͍ͭͯ • TVerͷOGPͷ՝୊ • OGPରԠʹ͍ͭͯ • ·ͱΊ
14. TVerͷSEOͷ՝୊ ϦχϡʔΞϧͰൃੜͨ͠՝୊ 1. TVer͕ΠϯσοΫε͞Εͳ͍໰୊ 2. metaλά͕ෆ׬શͳ໰୊
15. TVerͷSEOͷ՝୊ ϦχϡʔΞϧͰൃੜͨ͠՝୊ 1. TVer͕ΠϯσοΫε͞Εͳ͍໰୊ ◦ WebΞϓϦͷ࠷దԽ͕ߦΘΕ͍ͯͳ͍ ▪ SPA࠾༻ʹΑΔॳظඳըίετͷ૿Ճ ◦ GoogleSearchConsole౳ͷςετ΋ෆ߹֨ ◦ Ϋϩʔϥʔ͕८ճͯ͠΋ΠϯσοΫεొ࿥❌ ▪ ݕࡧ্Ґʹग़ͯ͜ͳ͍
16. TVerͷSEOͷ՝୊ ϦχϡʔΞϧͰൃੜͨ͠՝୊ 2. metaλά͕ෆ׬શͳ໰୊ ◦ ͲͷϖʔδͰ΋શͯಉҰͷmetaλάΛ࢖༻ ◦ ϒϥ΢βʹ֤ϖʔδͷ໾ׂΛ఻ୡͰ͖ͳ͍ ◦ ൪૊໊Ͱݕࡧͯ͠΋͏·͘දࣔ͞Εͳ͍ ▪ ্Ґʹग़ͨͱͯ͠΋ϖʔδ಺༰͕ਖ਼֬ʹ఻ΘΒͳ͍ ▪ ͦ΋ͦ΋্Ґʹग़ͯ͜ͳ͍͚ΕͲ......
17. TVerͷSEOͷ՝୊ ݕࡧදࣔճ਺໿70% ˍ ΫϦοΫ਺໿50%μ΢ϯ
18. TVerͷSEOͷ՝୊ ૣٸͳରԠ͕ඞཁ!!!
19. ΞδΣϯμ • TVerʹ͍ͭͯ • TVerͷSEOͷ՝୊ • SEOରࡦʹ͍ͭͯ • TVerͷOGPͷ՝୊ • OGPରԠʹ͍ͭͯ • ·ͱΊ
20. SEOରࡦʹ͍ͭͯ ΰʔϧͱ੍໿ • ΰʔϧ ◦ Ϋϩʔϥʔ८ճ࣌ʹΠϯσοΫεొ࿥͞ΕΔ͜ͱ ◦ ൪૊໊ͳͲͰݕࡧ্ҐʹTVer͕ग़ͯ͘Δ͜ͱ • ੍໿ ◦ ୹ظؒͰղܾ͍ͨ͠(େମ1ʙ2ϲ݄) ◦ όοΫΤϯυͷϦιʔεͷΈͰղܾ͢Δ͜ͱ ▪ Webϑϩϯτ͸·ͩ಺੡ԽͰ͖͍ͯͳ͍ɾɾɾ
21. SEOରࡦʹ͍ͭͯ WebϑϩϯτͰ࠷దԽ͢Δʹ͸ • αʔόʔαΠυϨϯμϦϯά(SSR) • ελςΟοΫαΠτδΣωϨʔγϣϯ(SSG)
22. SEOରࡦʹ͍ͭͯ WebϑϩϯτͰ࠷దԽ͢Δʹ͸ • αʔόʔαΠυϨϯμϦϯά(SSR) ◦ ϦΫΤετ࣌ʹαʔόଆͰಈతͳ৘ใΛඳը ▪ SPA͸ΫϥΠΞϯτଆͰશͯඳը ▪ සൟʹมߋ͞ΕͨΓɺύʔιφϥΠζΛ͢ΔಈతͳWebα Πτʹ࠷ద ◦ ϑϩϯτΤϯυʹखΛೖΕͳ͍ͱ͍͚ͳ͍ ◦ ࠓճ͸࢖͑ͳ͍
23. SEOରࡦʹ͍ͭͯ WebϑϩϯτͰ࠷దԽ͢Δʹ͸ • ελςΟοΫαΠτδΣωϨʔγϣϯ(SSG) ◦ Ϗϧυ࣌ʹ੩తHTMLΛ࡞੒ ▪ ϢʔβϦΫΤετ࣌ʹ͸ܾ·ͬͨHTMLΛฦ͢͜ͱ͕Ͱ͖Δɻඳը ίετ͕ͱͯ΋͍ܰɻ ▪ ϒϩά΍υΩϡϝϯταΠτͳͲͷසൟͳߋ৽ͷͳ͍WebαΠτʹ ࠷ద ◦ ࣅͨΑ͏ͳ͜ͱΛόοΫΤϯυͰͰ͖ͦ͏ ▪ GoͰ֤ϖʔδͷ੩తHTMLΛ࡞Γ͍ͨ
24. SEOରࡦʹ͍ͭͯ ੩తHTMLʹΑΔSEOରࡦ 1. ؆қతͳΫϩʔϥʔͷ࣮૷ 2. Ϋϩʔϥʔ൑ఆͱΞΫηε੍ޚ
25. SEOରࡦʹ͍ͭͯ ੩తHTMLΛੜ੒͢Δ 1. ؆қతͳΫϩʔϥʔͷ࣮૷ ◦ TVerͷ֤ϖʔδΛ८ճ ▪ ඳը͕׬ྃͨ͠ϖʔδΛHTMLͰऔಘ ▪ HTMLΛՃ޻ͯ͠S3΁ ◦ ECSλεΫͰఆظ࣮ߦ ◦ ࣮૷͸Go
26. SEOରࡦʹ͍ͭͯ
27. SEOରࡦʹ͍ͭͯ HTMLͷऔಘͱฤू 1. ର৅ͷϖʔδ΁ΞΫηε͠HTMLΛऔಘ 2. औಘͨ͠HTMLΛ੩తղੳͯ͠ฤू 3. ฤूͨ͠HTMLΛS3΁Ξοϓϩʔυ
28. SEOରࡦʹ͍ͭͯ HTMLͷऔಘͱฤू 1. ର৅ͷϖʔδ΁ΞΫηε͠HTMLΛऔಘ ◦ ChromeͷDevToolsΛར༻ ▪ github.com/chromedp ◦ ର৅ϖʔδͷURL͸ࣄલʹܾΊͰ༻ҙ ▪ DB͔Βऔ͖ͬͯͨΓϋʔυίʔσΟϯάͨ͠Γ...... ◦ ඳը͕ऴΘΔ·Ͱ଴ͭඞཁ͋Γ ▪ ΞΫηεͯ͠਺ඵSleep💤 ◦ ݁ߏటष͍......
29. SEOରࡦʹ͍ͭͯ HTMLͷऔಘͱฤू 2. औಘͨ͠HTMLΛ੩తղੳͯ͠ฤू ◦ औಘͨ͠HTML͸Ճ޻͢Δඞཁ͕͋Δ ▪ metaλάͷ࠷దԽ ▪ ෆཁͳjsͷ࡟আ ◦ ੩తղੳͯ͠τϥόʔε ▪ https://techblog.tver.co.jp/entry/s-ito/intro-go-html-parser- package
30. SEOରࡦʹ͍ͭͯ HTMLͷऔಘͱฤू 3. ฤूͨ͠HTMLΛS3΁Ξοϓϩʔυ ◦ ΫϩʔϥʔͱϢʔβΞΫηεͰৼΓ෼͚ ▪ Ϋϩʔϥʔ൑ఆ͞Εͨ΋ͷ͸HTMLΛݟΔΑ͏ʹ
31. SEOରࡦʹ͍ͭͯ ੩తHTMLʹΑΔSEOରࡦ 2. Ϋϩʔϥʔ൑ఆͱΞΫηε੍ޚ ◦ CloudFront FunctionsΛར༻ ▪ Ϣʔβʹ͸SPAΛ,Ϋϩʔϥʔʹ͸ੜ੒ͨ͠੩త HTMLΛฦ͢
32. SEOରࡦʹ͍ͭͯ CloudFront Functions • Τοδϩέʔγϣϯ্Ͱ࣮ߦ ◦ Lambda@EdgeΑΓ Ϣʔβʔʹۙ ͍ • ϥϯλΠϜ͸JavaScript • ܰྔͷॲཧΛߦ͏ͷʹ࠷ద ◦ ࠓճ͸Ϋϩʔϥʔ൑ఆ/ɹɹɹɹɹɹɹɹɹɹɹɹɹURLม ߋʹར༻(ϏϡʔϫʔϦΫΤετ)
33. SEOରࡦʹ͍ͭͯ ݁Ռ • ੩తHTMLΛ࢖ͬͯॳظඳըίετΛ࡟ݮ ◦ ΠϯσοΫεొ࿥͞ΕΔΑ͏ʹͳͬͨ • metaλάΛਖ਼ͨ͘͠͠ ◦ ݕࡧ࣌ͷද͕ࣔਖ਼͘͠ͳͬͨ ݕࡧ࣌ͷදࣔճ਺΋ϦχϡʔΞϧલҎ্ʹʂʂ
34. SEOରࡦʹ͍ͭͯ ରԠ։࢝ ‼︎ ֓ͶରԠ׬ྃ ‼︎
35. ΞδΣϯμ • TVerʹ͍ͭͯ • TVerͷSEOͷ՝୊ • SEOରࡦʹ͍ͭͯ • TVerͷOGPͷ՝୊ • OGPରԠʹ͍ͭͯ • ·ͱΊ
36. TVerͷOGPͷ՝୊ ϦχϡʔΞϧ࣌ͷOGPରԠͱͦͷ՝୊ • OGPରԠ ◦ LP(ϥϯσΟϯάϖʔδ)Λ༻ҙͯ͠ରԠ ▪ SEOͷ՝୊ͱಉ༷ʹmetaλά͕ෆ׬શͩͬͨ • ՝୊ ◦ ຊདྷͷϖʔδͱLPͰURL͕ҟͳ͍ͬͯͨ ▪ Ϣʔβ͕ϦϯΫΛ௚઀ίϐϖ͢Δͱදࣔ❌ ▪ Ϣʔβମݧ͕ଛͳΘΕͨঢ়ଶ
37. TVerͷOGPͷ՝୊ SEOରࡦͷ࢓૊Έ͸࢖͑Δͷ͔ • ݁࿦͔Βݴ͑͹࢖͑͸ͨ͠ ◦ LPͰ͸ͳ͍URLͰ΋දࣔՄೳʹͳͬͨ ▪ SEOରࡦ࣌ʹmetaλάΛਖ਼ͨͨ͘͠͠Ί ◦ ࢑ఆରԠͱͯ͠͸े෼ͳঢ়ଶ ◦ 1ͭॏཁͳཁ݅Λຬͨͤͳ͔ͬͨ
38. TVerͷOGPͷ՝୊ ɹ ϦΞϧλΠϜੑʂʂʂ
39. TVerͷOGPͷ՝୊ OGPಛ༗ͷཁ݅ • ϦΞϧλΠϜੑ ◦ SNSࠂ஌͸଎౓΋ॏཁ ▪ SEOରࡦͷख๏Λྲྀ༻͢Δͱ਺෼ϥά͕ൃੜ ▪ OGPରԠͰ͸͜ͷϥάΛڐ༰ͨ͘͠ͳ͍ ◦ LPͰ͸͜ͷཁ݅͸ຬ͍ͨͯͨ͠
40. TVerͷOGPͷ՝୊ OGPಛ༗ͷཁ݅ • ϦΞϧλΠϜੑ ◦ SNSࠂ஌͸଎౓΋ॏཁ ▪ SEOରࡦͷख๏Λྲྀ༻͢Δͱ਺෼ϥά͕ൃੜ ▪ OGPରԠͰ͸͜ͷϥάΛڐ༰ͨ͘͠ͳ͍ ◦ LPͰ͸͜ͷཁ݅͸ຬ͍ͨͯͨ͠ LPΛ࢖ΘͣʹϦΞϧλΠϜੑΛ୲อ͍ͨ͠ʂ
41. ΞδΣϯμ • TVerʹ͍ͭͯ • TVerͷSEOͷ՝୊ • SEOରࡦʹ͍ͭͯ • TVerͷOGPͷ՝୊ • OGPରԠʹ͍ͭͯ • ·ͱΊ
42. OGPରԠʹ͍ͭͯ ϦΞϧλΠϜੑ୲อͷͨΊʹ 1. OGP༻ͷHTMLΛฦ͢APIΛ༻ҙ 2. Lambda@Edgeܦ༝ͰAPIΛୟ͍ͯHTMLΛฦ͢
43. OGPରԠʹ͍ͭͯ ϦΞϧλΠϜੑ୲อͷͨΊʹ 1. OGP༻ͷHTMLΛฦ͢APIΛ༻ҙ ◦ OGPʹඞཁͳ৘ใΛ٧ΊࠐΜͩ࠷খݶͷHTML ◦ ϦΞϧλΠϜੑΛ୲อ ◦ OGP BotͷΞΫηε࣌ʹ͜ͷ৘ใΛฦͤΕ͹ྑ͍ ▪ Lambda@Edge/CloudFront FunctionsͰରԠ
44. OGPରԠʹ͍ͭͯ ϦΞϧλΠϜੑ୲อͷͨΊʹ 2. Lambda@Edgeܦ༝ͰAPIΛୟ͍ͯHTMLΛฦ͢ ◦ ΦϦδϯϦΫΤετͰಛఆURLͰAPIΛୟ͘Α͏ʹ ▪ Ωϟογϡ΋ར༻ ▪ ΤϥʔϋϯυϦϯά΋ਖ਼͘͠ ◦ OGP Bot൑ఆ͸CloudFront FunctionsΛར༻ ▪ SEOରࡦͱಉ༷
45. OGPରԠʹ͍ͭͯ LambdaˏEdge • ϦʔδϣϯΤοδͰ࣮ߦ • ϥϯλΠϜ͸Node.js/Python • CloudFront Functionsʹൺ΂ͯ؇੍͍ݶ ◦ ൺֱతॏ͍ॲཧʹରͯ͠༏Ґ ◦ ࠓճ͸APIΛୟ͍ͯϨεϙϯεΛੜ੒͢Δͷʹར༻
46. OGPରԠʹ͍ͭͯ
47. OGPରԠʹ͍ͭͯ ͍ͭͰʹΩϟογϡઓུ • max-ageͰҰఆظؒΩϟογϡ • stale-if-errorͰαʔόෆௐͷࡍͷΩϟογϡར༻ • stale-while-revalidate͸ࠓճ͸ݟૹΓ ◦ Ϩεϙϯεͷ઱౓Λ༏ઌ ◦ ΞΫηε͕ͦ΋ͦ΋ͦ͜·Ͱͳ͍ ◦ APIαʔόଆͰ΋ෛՙରࡦΛ͍ͯ͠Δ
48. OGPରԠʹ͍ͭͯ ݁Ռ • Lambda@EdgeͰϦΞϧλΠϜੑΛ୲อ ◦ ެ։͔Β஗Ԇͳ͘SNSࠂ஌Ͱ͖ΔΑ͏ʹͳͬͨ • CloudFront FunctionsͰBot൑ఆͱৼΓ෼͚ ◦ ֤ϖʔδͱಉ͡URLͰγΣΞͰ͖ΔΑ͏ʹͳͬͨ LPͳ͠Ͱ஗Ԇͳ͘γΣΞͰ͖ΔΑ͏ʹͳͬͨʂʂ
49. ΞδΣϯμ • TVerʹ͍ͭͯ • TVerͷSEOͷ՝୊ • SEOରࡦʹ͍ͭͯ • TVerͷOGPͷ՝୊ • OGPରԠʹ͍ͭͯ • ·ͱΊ
50. ·ͱΊ SEOରࡦ • ؆қతͳΫϩʔϥʔΛ࣮૷ • ࣮ࡍʹTVer΁८ճͯ͠੩తHTMLΛੜ੒ • ֤ࣾͷΫϩʔϥʔ͸੩తHTMLΛݟΔΑ͏ʹ ◦ CloudFront FunctionsΛར༻ • ΠϯσοΫεొ࿥͞Εݕࡧ݁Ռදࣔ΋ղܾͰ͖ͨ ◦ ϦχϡʔΞϧલҎ্ͷঢ়ଶʹͳͬͨ
51. ·ͱΊ OGPରԠ • ֤OGP༻metaλάΛਖ਼͘͠ฦ͢APIΛ༻ҙ • ֤ࣾͷOGP Bot͸͜ͷAPI͔ΒฦΔHTMLΛར༻ ◦ CloudFront FunctionsͰOGP Bot൑ఆ ◦ Lambda@EdgeͰAPIΛୟ͍ͯHTMLฦ٫ • ֤ϖʔδͱಉURLͰϦΞϧλΠϜͳ৘ใΛฦͤͨ ◦ LPͳͯ͘΋ྑ͍ঢ়گʹͳͬͨ ◦ SNSͰͷϢʔβମݧ͕޲্ͨ͠
52. ·ͱΊ ࠓޙ • LP͕ແͯ͘΋ྑ͍ঢ়ଶʹ ◦ Ұ෦·ͩLPΛར༻͍ͯ͠Δ ◦ LPͷURLͰͷաڈ෼ͷγΣΞ΁ͷରԠ • վमίετͷ࡟ݮ ◦ metaλάͷจݴมߋͳͲվमίετ͕݁ߏߴ͍ ▪ ಛʹSEOରࡦͷ੩తHTML͸ॻ͖ग़͠ͳ͓͞ͳ͍ͱ͍͚ͳ ͍
53. ·ͱΊ ͓·͚ • 2023/10 X(چTwitter)ͷOGPͰ࢓༷มߋ ◦ ৭ʑදࣔͷ࢓༷͕มΘͬͨ ◦ ࠓޙmetaλάͷมߋ΋͋Δ͔΋͠Εͳ͍ ◦ 😇😇😇
54. https://tver.co.jp/recruit/