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.1k
バックエンドで頑張る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
3
1.4k
Change Tracking でデプロイを記録してパフォーマンスへの影響を分析しやすくしよう
techtver
PRO
1
81
採用人事の立場で行う採用広報・技術広報の裏側 〜TVerがエンジニア採用を本格化するために継続し続けたこと〜
techtver
PRO
2
470
株式会社TVer 会社紹介資料
techtver
PRO
8
42k
採用人事の立場から、採用広報の立ち上げや技術広報の促進をしている話
techtver
PRO
0
720
iOSエンジニア不在でもサービスを改善したい!配信サービスのiOSアプリにおける オブザーバビリティの導入と改善
techtver
PRO
0
2.1k
配信サービスを作るなら視聴者の体験も可視化してみませんか?
techtver
PRO
2
2.2k
TVer の月間ユニークブラウザ数 2700 万のサービスを支える統合ログ基盤の開発
techtver
PRO
0
1.8k
TVerにおけるインターネット配信の視聴体験とパフォーマンス安定化への取り組み
techtver
PRO
0
1.6k
Other Decks in Technology
See All in Technology
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
720
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
エンジニア向け会社紹介資料
caddi_eng
14
220k
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Become a Pro
speakerdeck
PRO
15
4.8k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
It's Worth the Effort
3n
181
27k
We Have a Design System, Now What?
morganepeng
46
7k
Docker and Python
trallard
37
2.9k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Bash Introduction
62gerente
607
210k
A designer walks into a library…
pauljervisheath
201
24k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
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/