Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
バックエンドで頑張るSEO/OGP対策
Search
TVer Inc.
PRO
November 20, 2023
Technology
0
1.3k
バックエンドで頑張るSEO/OGP対策
2023/11/15
Media-JAWS【第14回】
https://media-jaws.doorkeeper.jp/events/164378
TVer Inc.
PRO
November 20, 2023
Tweet
Share
More Decks by TVer Inc.
See All by TVer Inc.
採用応募者の個人情報保護の取扱いについて_株式会社TVer
techtver
PRO
0
130
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
2.8k
成長し続けるTVerサービスを支える オブザーバビリティとカスタマーサポート
techtver
PRO
3
4.5k
Change Tracking でデプロイを記録してパフォーマンスへの影響を分析しやすくしよう
techtver
PRO
1
140
採用人事の立場で行う採用広報・技術広報の裏側 〜TVerがエンジニア採用を本格化するために継続し続けたこと〜
techtver
PRO
2
570
株式会社TVer 会社紹介資料
techtver
PRO
9
55k
採用人事の立場から、採用広報の立ち上げや技術広報の促進をしている話
techtver
PRO
0
900
iOSエンジニア不在でもサービスを改善したい!配信サービスのiOSアプリにおける オブザーバビリティの導入と改善
techtver
PRO
0
2.6k
配信サービスを作るなら視聴者の体験も可視化してみませんか?
techtver
PRO
2
2.4k
Other Decks in Technology
See All in Technology
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
3
200
第1回 国土交通省 データコンペ参加者向け勉強会③- Snowflake x estie編 -
estie
0
130
組織成長を加速させるオンボーディングの取り組み
sudoakiy
2
120
Amazon Personalizeのレコメンドシステム構築、実際何するの?〜大体10分で具体的なイメージをつかむ〜
kniino
1
100
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
120
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
380
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.3k
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
230
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
110
複雑なState管理からの脱却
sansantech
PRO
1
140
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Thoughts on Productivity
jonyablonski
67
4.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How to Ace a Technical Interview
jacobian
276
23k
Faster Mobile Websites
deanohume
305
30k
The Language of Interfaces
destraynor
154
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Designing the Hi-DPI Web
ddemaree
280
34k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Transcript
όοΫΤϯυͰؤுΔSEO/OGPରࡦ גࣜձࣾ TVer / ҏ౻ ૱ଡ 2023/11/15 Media-JAWS ୈ14ճ
ࣗݾհ • ҏ౻૱ଡ(@sou_world) • גࣜձࣾTVer αʔϏεϓϩμΫτຊ෦ Τ ϯδχΞϦϯάλεΫ • ೖࣾͯ͠Ұ͘Β͍
• झຯԻָ(DTM)ͱͨ·ʹήʔϜ • ॳΊͯͷొஃ
ΞδΣϯμ • TVerʹ͍ͭͯ • TVerͷSEOͷ՝ • SEOରࡦʹ͍ͭͯ • TVerͷOGPͷ՝ •
OGPରԠʹ͍ͭͯ • ·ͱΊ
ΞδΣϯμ • TVerʹ͍ͭͯ • TVerͷSEOͷ՝ • SEOରࡦʹ͍ͭͯ • TVerͷOGPͷ՝ •
OGPରԠʹ͍ͭͯ • ·ͱΊ
None
None
None
None
None
None
None
None
ΞδΣϯμ • TVerʹ͍ͭͯ • TVerͷSEOͷ՝ • SEOରࡦʹ͍ͭͯ • TVerͷOGPͷ՝ •
OGPରԠʹ͍ͭͯ • ·ͱΊ
TVerͷSEOͷ՝ ϦχϡʔΞϧͰൃੜͨ͠՝ 1. TVer͕ΠϯσοΫε͞Εͳ͍ 2. metaλά͕ෆશͳ
TVerͷSEOͷ՝ ϦχϡʔΞϧͰൃੜͨ͠՝ 1. TVer͕ΠϯσοΫε͞Εͳ͍ ◦ WebΞϓϦͷ࠷దԽ͕ߦΘΕ͍ͯͳ͍ ▪ SPA࠾༻ʹΑΔॳظඳըίετͷ૿Ճ ◦ GoogleSearchConsoleͷςετෆ߹֨
◦ Ϋϩʔϥʔ͕८ճͯ͠ΠϯσοΫεొ❌ ▪ ݕࡧ্Ґʹग़ͯ͜ͳ͍
TVerͷSEOͷ՝ ϦχϡʔΞϧͰൃੜͨ͠՝ 2. metaλά͕ෆશͳ ◦ ͲͷϖʔδͰશͯಉҰͷmetaλάΛ༻ ◦ ϒϥβʹ֤ϖʔδͷׂΛୡͰ͖ͳ͍ ◦ ൪໊Ͱݕࡧͯ͠͏·͘දࣔ͞Εͳ͍
▪ ্Ґʹग़ͨͱͯ͠ϖʔδ༰͕ਖ਼֬ʹΘΒͳ͍ ▪ ্ͦͦҐʹग़ͯ͜ͳ͍͚ΕͲ......
TVerͷSEOͷ՝ ݕࡧදࣔճ70% ˍ ΫϦοΫ50%μϯ
TVerͷSEOͷ՝ ૣٸͳରԠ͕ඞཁ!!!
ΞδΣϯμ • TVerʹ͍ͭͯ • TVerͷSEOͷ՝ • SEOରࡦʹ͍ͭͯ • TVerͷOGPͷ՝ •
OGPରԠʹ͍ͭͯ • ·ͱΊ
SEOରࡦʹ͍ͭͯ ΰʔϧͱ੍ • ΰʔϧ ◦ Ϋϩʔϥʔ८ճ࣌ʹΠϯσοΫεొ͞ΕΔ͜ͱ ◦ ൪໊ͳͲͰݕࡧ্ҐʹTVer͕ग़ͯ͘Δ͜ͱ • ੍
◦ ظؒͰղܾ͍ͨ͠(େମ1ʙ2ϲ݄) ◦ όοΫΤϯυͷϦιʔεͷΈͰղܾ͢Δ͜ͱ ▪ Webϑϩϯτ·ͩԽͰ͖͍ͯͳ͍ɾɾɾ
SEOରࡦʹ͍ͭͯ WebϑϩϯτͰ࠷దԽ͢Δʹ • αʔόʔαΠυϨϯμϦϯά(SSR) • ελςΟοΫαΠτδΣωϨʔγϣϯ(SSG)
SEOରࡦʹ͍ͭͯ WebϑϩϯτͰ࠷దԽ͢Δʹ • αʔόʔαΠυϨϯμϦϯά(SSR) ◦ ϦΫΤετ࣌ʹαʔόଆͰಈతͳใΛඳը ▪ SPAΫϥΠΞϯτଆͰશͯඳը ▪ සൟʹมߋ͞ΕͨΓɺύʔιφϥΠζΛ͢ΔಈతͳWebα
Πτʹ࠷ద ◦ ϑϩϯτΤϯυʹखΛೖΕͳ͍ͱ͍͚ͳ͍ ◦ ࠓճ͑ͳ͍
SEOରࡦʹ͍ͭͯ WebϑϩϯτͰ࠷దԽ͢Δʹ • ελςΟοΫαΠτδΣωϨʔγϣϯ(SSG) ◦ Ϗϧυ࣌ʹ੩తHTMLΛ࡞ ▪ ϢʔβϦΫΤετ࣌ʹܾ·ͬͨHTMLΛฦ͢͜ͱ͕Ͱ͖Δɻඳը ίετ͕ͱ͍ͯܰɻ ▪
ϒϩάυΩϡϝϯταΠτͳͲͷසൟͳߋ৽ͷͳ͍WebαΠτʹ ࠷ద ◦ ࣅͨΑ͏ͳ͜ͱΛόοΫΤϯυͰͰ͖ͦ͏ ▪ GoͰ֤ϖʔδͷ੩తHTMLΛ࡞Γ͍ͨ
SEOରࡦʹ͍ͭͯ ੩తHTMLʹΑΔSEOରࡦ 1. ؆қతͳΫϩʔϥʔͷ࣮ 2. ΫϩʔϥʔఆͱΞΫηε੍ޚ
SEOରࡦʹ͍ͭͯ ੩తHTMLΛੜ͢Δ 1. ؆қతͳΫϩʔϥʔͷ࣮ ◦ TVerͷ֤ϖʔδΛ८ճ ▪ ඳը͕ྃͨ͠ϖʔδΛHTMLͰऔಘ ▪ HTMLΛՃͯ͠S3
◦ ECSλεΫͰఆظ࣮ߦ ◦ ࣮Go
SEOରࡦʹ͍ͭͯ
SEOରࡦʹ͍ͭͯ HTMLͷऔಘͱฤू 1. ରͷϖʔδΞΫηε͠HTMLΛऔಘ 2. औಘͨ͠HTMLΛ੩తղੳͯ͠ฤू 3. ฤूͨ͠HTMLΛS3Ξοϓϩʔυ
SEOରࡦʹ͍ͭͯ HTMLͷऔಘͱฤू 1. ରͷϖʔδΞΫηε͠HTMLΛऔಘ ◦ ChromeͷDevToolsΛར༻ ▪ github.com/chromedp ◦ ରϖʔδͷURLࣄલʹܾΊͰ༻ҙ
▪ DB͔Βऔ͖ͬͯͨΓϋʔυίʔσΟϯάͨ͠Γ...... ◦ ඳը͕ऴΘΔ·Ͱͭඞཁ͋Γ ▪ ΞΫηεͯ͠ඵSleep💤 ◦ ݁ߏటष͍......
SEOରࡦʹ͍ͭͯ HTMLͷऔಘͱฤू 2. औಘͨ͠HTMLΛ੩తղੳͯ͠ฤू ◦ औಘͨ͠HTMLՃ͢Δඞཁ͕͋Δ ▪ metaλάͷ࠷దԽ ▪ ෆཁͳjsͷআ
◦ ੩తղੳͯ͠τϥόʔε ▪ https://techblog.tver.co.jp/entry/s-ito/intro-go-html-parser- package
SEOରࡦʹ͍ͭͯ HTMLͷऔಘͱฤू 3. ฤूͨ͠HTMLΛS3Ξοϓϩʔυ ◦ ΫϩʔϥʔͱϢʔβΞΫηεͰৼΓ͚ ▪ Ϋϩʔϥʔఆ͞ΕͨͷHTMLΛݟΔΑ͏ʹ
SEOରࡦʹ͍ͭͯ ੩తHTMLʹΑΔSEOରࡦ 2. ΫϩʔϥʔఆͱΞΫηε੍ޚ ◦ CloudFront FunctionsΛར༻ ▪ ϢʔβʹSPAΛ,Ϋϩʔϥʔʹੜͨ͠੩త HTMLΛฦ͢
SEOରࡦʹ͍ͭͯ CloudFront Functions • Τοδϩέʔγϣϯ্Ͱ࣮ߦ ◦ Lambda@EdgeΑΓ Ϣʔβʔʹۙ ͍ •
ϥϯλΠϜJavaScript • ܰྔͷॲཧΛߦ͏ͷʹ࠷ద ◦ ࠓճΫϩʔϥʔఆ/ɹɹɹɹɹɹɹɹɹɹɹɹɹURLม ߋʹར༻(ϏϡʔϫʔϦΫΤετ)
SEOରࡦʹ͍ͭͯ ݁Ռ • ੩తHTMLΛͬͯॳظඳըίετΛݮ ◦ ΠϯσοΫεొ͞ΕΔΑ͏ʹͳͬͨ • metaλάΛਖ਼ͨ͘͠͠ ◦ ݕࡧ࣌ͷද͕ࣔਖ਼͘͠ͳͬͨ
ݕࡧ࣌ͷදࣔճϦχϡʔΞϧલҎ্ʹʂʂ
SEOରࡦʹ͍ͭͯ ରԠ։࢝ ‼︎ ֓ͶରԠྃ ‼︎
ΞδΣϯμ • TVerʹ͍ͭͯ • TVerͷSEOͷ՝ • SEOରࡦʹ͍ͭͯ • TVerͷOGPͷ՝ •
OGPରԠʹ͍ͭͯ • ·ͱΊ
TVerͷOGPͷ՝ ϦχϡʔΞϧ࣌ͷOGPରԠͱͦͷ՝ • OGPରԠ ◦ LP(ϥϯσΟϯάϖʔδ)Λ༻ҙͯ͠ରԠ ▪ SEOͷ՝ͱಉ༷ʹmetaλά͕ෆશͩͬͨ • ՝
◦ ຊདྷͷϖʔδͱLPͰURL͕ҟͳ͍ͬͯͨ ▪ Ϣʔβ͕ϦϯΫΛίϐϖ͢Δͱදࣔ❌ ▪ Ϣʔβମݧ͕ଛͳΘΕͨঢ়ଶ
TVerͷOGPͷ՝ SEOରࡦͷΈ͑Δͷ͔ • ͔݁Βݴ͑͑ͨ͠ ◦ LPͰͳ͍URLͰදࣔՄೳʹͳͬͨ ▪ SEOରࡦ࣌ʹmetaλάΛਖ਼ͨͨ͘͠͠Ί ◦ ఆରԠͱͯ͠ेͳঢ়ଶ
◦ 1ͭॏཁͳཁ݅Λຬͨͤͳ͔ͬͨ
TVerͷOGPͷ՝ ɹ ϦΞϧλΠϜੑʂʂʂ
TVerͷOGPͷ՝ OGPಛ༗ͷཁ݅ • ϦΞϧλΠϜੑ ◦ SNSࠂॏཁ ▪ SEOରࡦͷख๏Λྲྀ༻͢Δͱϥά͕ൃੜ ▪ OGPରԠͰ͜ͷϥάΛڐ༰ͨ͘͠ͳ͍
◦ LPͰ͜ͷཁ݅ຬ͍ͨͯͨ͠
TVerͷOGPͷ՝ OGPಛ༗ͷཁ݅ • ϦΞϧλΠϜੑ ◦ SNSࠂॏཁ ▪ SEOରࡦͷख๏Λྲྀ༻͢Δͱϥά͕ൃੜ ▪ OGPରԠͰ͜ͷϥάΛڐ༰ͨ͘͠ͳ͍
◦ LPͰ͜ͷཁ݅ຬ͍ͨͯͨ͠ LPΛΘͣʹϦΞϧλΠϜੑΛ୲อ͍ͨ͠ʂ
ΞδΣϯμ • TVerʹ͍ͭͯ • TVerͷSEOͷ՝ • SEOରࡦʹ͍ͭͯ • TVerͷOGPͷ՝ •
OGPରԠʹ͍ͭͯ • ·ͱΊ
OGPରԠʹ͍ͭͯ ϦΞϧλΠϜੑ୲อͷͨΊʹ 1. OGP༻ͷHTMLΛฦ͢APIΛ༻ҙ 2. Lambda@Edgeܦ༝ͰAPIΛୟ͍ͯHTMLΛฦ͢
OGPରԠʹ͍ͭͯ ϦΞϧλΠϜੑ୲อͷͨΊʹ 1. OGP༻ͷHTMLΛฦ͢APIΛ༻ҙ ◦ OGPʹඞཁͳใΛ٧ΊࠐΜͩ࠷খݶͷHTML ◦ ϦΞϧλΠϜੑΛ୲อ ◦ OGP
BotͷΞΫηε࣌ʹ͜ͷใΛฦͤΕྑ͍ ▪ Lambda@Edge/CloudFront FunctionsͰରԠ
OGPରԠʹ͍ͭͯ ϦΞϧλΠϜੑ୲อͷͨΊʹ 2. Lambda@Edgeܦ༝ͰAPIΛୟ͍ͯHTMLΛฦ͢ ◦ ΦϦδϯϦΫΤετͰಛఆURLͰAPIΛୟ͘Α͏ʹ ▪ Ωϟογϡར༻ ▪ ΤϥʔϋϯυϦϯάਖ਼͘͠
◦ OGP BotఆCloudFront FunctionsΛར༻ ▪ SEOରࡦͱಉ༷
OGPରԠʹ͍ͭͯ LambdaˏEdge • ϦʔδϣϯΤοδͰ࣮ߦ • ϥϯλΠϜNode.js/Python • CloudFront Functionsʹൺͯ؇੍͍ݶ ◦
ൺֱతॏ͍ॲཧʹରͯ͠༏Ґ ◦ ࠓճAPIΛୟ͍ͯϨεϙϯεΛੜ͢Δͷʹར༻
OGPରԠʹ͍ͭͯ
OGPରԠʹ͍ͭͯ ͍ͭͰʹΩϟογϡઓུ • max-ageͰҰఆظؒΩϟογϡ • stale-if-errorͰαʔόෆௐͷࡍͷΩϟογϡར༻ • stale-while-revalidateࠓճݟૹΓ ◦ ϨεϙϯεͷΛ༏ઌ
◦ ΞΫηε͕ͦͦͦ͜·Ͱͳ͍ ◦ APIαʔόଆͰෛՙରࡦΛ͍ͯ͠Δ
OGPରԠʹ͍ͭͯ ݁Ռ • Lambda@EdgeͰϦΞϧλΠϜੑΛ୲อ ◦ ެ։͔ΒԆͳ͘SNSࠂͰ͖ΔΑ͏ʹͳͬͨ • CloudFront FunctionsͰBotఆͱৼΓ͚ ◦
֤ϖʔδͱಉ͡URLͰγΣΞͰ͖ΔΑ͏ʹͳͬͨ LPͳ͠ͰԆͳ͘γΣΞͰ͖ΔΑ͏ʹͳͬͨʂʂ
ΞδΣϯμ • TVerʹ͍ͭͯ • TVerͷSEOͷ՝ • SEOରࡦʹ͍ͭͯ • TVerͷOGPͷ՝ •
OGPରԠʹ͍ͭͯ • ·ͱΊ
·ͱΊ SEOରࡦ • ؆қతͳΫϩʔϥʔΛ࣮ • ࣮ࡍʹTVer८ճͯ͠੩తHTMLΛੜ • ֤ࣾͷΫϩʔϥʔ੩తHTMLΛݟΔΑ͏ʹ ◦ CloudFront
FunctionsΛར༻ • ΠϯσοΫεొ͞Εݕࡧ݁ՌදࣔղܾͰ͖ͨ ◦ ϦχϡʔΞϧલҎ্ͷঢ়ଶʹͳͬͨ
·ͱΊ OGPରԠ • ֤OGP༻metaλάΛਖ਼͘͠ฦ͢APIΛ༻ҙ • ֤ࣾͷOGP Bot͜ͷAPI͔ΒฦΔHTMLΛར༻ ◦ CloudFront FunctionsͰOGP
Botఆ ◦ Lambda@EdgeͰAPIΛୟ͍ͯHTMLฦ٫ • ֤ϖʔδͱಉURLͰϦΞϧλΠϜͳใΛฦͤͨ ◦ LPͳͯ͘ྑ͍ঢ়گʹͳͬͨ ◦ SNSͰͷϢʔβମݧ্͕ͨ͠
·ͱΊ ࠓޙ • LP͕ແͯ͘ྑ͍ঢ়ଶʹ ◦ Ұ෦·ͩLPΛར༻͍ͯ͠Δ ◦ LPͷURLͰͷաڈͷγΣΞͷରԠ • վमίετͷݮ
◦ metaλάͷจݴมߋͳͲվमίετ͕݁ߏߴ͍ ▪ ಛʹSEOରࡦͷ੩తHTMLॻ͖ग़͠ͳ͓͞ͳ͍ͱ͍͚ͳ ͍
·ͱΊ ͓·͚ • 2023/10 X(چTwitter)ͷOGPͰ༷มߋ ◦ ৭ʑදࣔͷ༷͕มΘͬͨ ◦ ࠓޙmetaλάͷมߋ͋Δ͔͠Εͳ͍ ◦
😇😇😇
https://tver.co.jp/recruit/