Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

TVer Inc.
November 20, 2023

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

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

TVer Inc.

November 20, 2023
Tweet

More Decks by TVer Inc.

Other Decks in Technology

Transcript

  1. όοΫΤϯυͰؤுΔSEO/OGPରࡦ
    גࣜձࣾ TVer / ҏ౻ ૱ଡ


    2023/11/15 Media-JAWS ୈ14ճ

    View full-size slide

  2. ࣗݾ঺հ
    ● ҏ౻૱ଡ(@sou_world)


    ● גࣜձࣾTVer αʔϏεϓϩμΫτຊ෦ Τ
    ϯδχΞϦϯάλεΫ


    ● ೖࣾͯ͠Ұ೥൒͘Β͍


    ● झຯ͸Իָ(DTM)ͱͨ·ʹήʔϜ


    ● ॳΊͯͷొஃ

    View full-size slide

  3. ΞδΣϯμ
    ● TVerʹ͍ͭͯ


    ● TVerͷSEOͷ՝୊


    ● SEOରࡦʹ͍ͭͯ


    ● TVerͷOGPͷ՝୊


    ● OGPରԠʹ͍ͭͯ


    ● ·ͱΊ

    View full-size slide

  4. ΞδΣϯμ
    ● TVerʹ͍ͭͯ


    ● TVerͷSEOͷ՝୊


    ● SEOରࡦʹ͍ͭͯ


    ● TVerͷOGPͷ՝୊


    ● OGPରԠʹ͍ͭͯ


    ● ·ͱΊ

    View full-size slide

  5. ΞδΣϯμ
    ● TVerʹ͍ͭͯ


    ● TVerͷSEOͷ՝୊


    ● SEOରࡦʹ͍ͭͯ


    ● TVerͷOGPͷ՝୊


    ● OGPରԠʹ͍ͭͯ


    ● ·ͱΊ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. ΞδΣϯμ
    ● TVerʹ͍ͭͯ


    ● TVerͷSEOͷ՝୊


    ● SEOରࡦʹ͍ͭͯ


    ● TVerͷOGPͷ՝୊


    ● OGPରԠʹ͍ͭͯ


    ● ·ͱΊ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. SEOରࡦʹ͍ͭͯ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. SEOରࡦʹ͍ͭͯ
    ରԠ։࢝
    ‼︎
    ֓ͶରԠ׬ྃ
    ‼︎

    View full-size slide

  27. ΞδΣϯμ
    ● TVerʹ͍ͭͯ


    ● TVerͷSEOͷ՝୊


    ● SEOରࡦʹ͍ͭͯ


    ● TVerͷOGPͷ՝୊


    ● OGPରԠʹ͍ͭͯ


    ● ·ͱΊ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. ΞδΣϯμ
    ● TVerʹ͍ͭͯ


    ● TVerͷSEOͷ՝୊


    ● SEOରࡦʹ͍ͭͯ


    ● TVerͷOGPͷ՝୊


    ● OGPରԠʹ͍ͭͯ


    ● ·ͱΊ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. OGPରԠʹ͍ͭͯ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. ΞδΣϯμ
    ● TVerʹ͍ͭͯ


    ● TVerͷSEOͷ՝୊


    ● SEOରࡦʹ͍ͭͯ


    ● TVerͷOGPͷ՝୊


    ● OGPରԠʹ͍ͭͯ


    ● ·ͱΊ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide