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

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ରԠʹ͍ͭͯ • ·ͱΊ
5. None
6. None
7. None
8. None
9. None
10. None
11. None
12. None

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/