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.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 iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
860
20240710_HR SUCCESS SUMMIT 2024_テーマセッション「エンジニア採用2.0」登壇資料(株式会社TVer_香坂)
techtver
PRO
0
60
採用応募者の個人情報保護の取扱いについて_株式会社TVer
techtver
PRO
0
420
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
11k
成長し続けるTVerサービスを支える オブザーバビリティとカスタマーサポート
techtver
PRO
5
5.5k
Change Tracking でデプロイを記録してパフォーマンスへの影響を分析しやすくしよう
techtver
PRO
1
230
採用人事の立場で行う採用広報・技術広報の裏側 〜TVerがエンジニア採用を本格化するために継続し続けたこと〜
techtver
PRO
2
710
株式会社TVer 会社紹介資料
techtver
PRO
9
83k
採用人事の立場から、採用広報の立ち上げや技術広報の促進をしている話
techtver
PRO
0
1.1k
Other Decks in Technology
See All in Technology
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
490
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
4
2.6k
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
350
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
140
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
120
Lambda Web Adapterについて自分なりに理解してみた
smt7174
3
110
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
750
エンジニア向け技術スタック情報
kauche
1
260
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
69
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Automating Front-end Workflow
addyosmani
1370
200k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Practical Orchestrator
shlominoach
188
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
4 Signs Your Business is Dying
shpigford
184
22k
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/