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
2.2k
バックエンドで頑張る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 iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
1k
20240710_HR SUCCESS SUMMIT 2024_テーマセッション「エンジニア採用2.0」登壇資料(株式会社TVer_香坂)
techtver
PRO
0
79
採用応募者の個人情報保護の取扱いについて_株式会社TVer
techtver
PRO
0
520
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
12k
成長し続けるTVerサービスを支える オブザーバビリティとカスタマーサポート
techtver
PRO
5
5.6k
Change Tracking でデプロイを記録してパフォーマンスへの影響を分析しやすくしよう
techtver
PRO
1
250
採用人事の立場で行う採用広報・技術広報の裏側 〜TVerがエンジニア採用を本格化するために継続し続けたこと〜
techtver
PRO
2
740
株式会社TVer 会社紹介資料
techtver
PRO
9
89k
採用人事の立場から、採用広報の立ち上げや技術広報の促進をしている話
techtver
PRO
0
1.2k
Other Decks in Technology
See All in Technology
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
280
roppongirb_20250911
igaiga
1
240
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
380
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
240
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
230
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
880
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
310
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Being A Developer After 40
akosma
90
590k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Invisible Side of Design
smashingmag
301
51k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Code Review Best Practice
trishagee
71
19k
Why Our Code Smells
bkeepers
PRO
339
57k
Navigating Team Friction
lara
189
15k
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/