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
FirebaseでSPAするときのSEO/OGP対応もうこれでいいんじゃないですか20...
Search
o_tomomichi
April 02, 2018
Programming
1
7.6k
FirebaseでSPAするときのSEO/OGP対応もうこれでいいんじゃないですか2018暫定版
o_tomomichi
April 02, 2018
Tweet
Share
More Decks by o_tomomichi
See All by o_tomomichi
個人開発からのんびり育てる意識低いWebサービス開発の話 / Easy going web development
tomomichi
0
2k
個人開発を支える何も作らない技術 / No Devs No Bugs
tomomichi
3
1.1k
Herokuの無料プランで月間100万PVをさばく(さばかない)話
tomomichi
3
8.8k
Other Decks in Programming
See All in Programming
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
560
AI Ramen Fight
yusukebe
0
110
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
150
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
150
TypeScriptでDXを上げろ! Hono編
yusukebe
3
870
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
680
MCPで実現できる、Webサービス利用体験について
syumai
7
2k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
460
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
600
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
210
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
480
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
710
How to Ace a Technical Interview
jacobian
278
23k
How to train your dragon (web standard)
notwaldorf
96
6.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Statistics for Hackers
jakevdp
799
220k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Automating Front-end Workflow
addyosmani
1370
200k
Music & Morning Musume
bryan
46
6.7k
How GitHub (no longer) Works
holman
314
140k
Transcript
FirebaseでSPAするときの SEO/OGP対応 もうこれで いいんじゃないですか 2018暫定版
自己紹介 • なんちゃってWebエンジニア • ぼっちWebサービス開発 • NOT SO BAD, LLC.
おおにし @kame_f_no7
簡単・便利なトーナメント表作成サービス
課題感
THE TOURNAMENTの話
うれしみ つらみ 無料枠が大きい 認証が簡単すぎ Functionsが便利すぎ まだ障害も多い 管理画面が弱い バックアップできない 初回表示が重い SEOが弱くなった
SPAのSEO/OGPあるある • Googleにインデックスされない • SNSシェアにOGPが反映されない botの進化で解決したのでは…?
None
ダメでした\(^o^)/ ※使用するフレームワークなどにもよるようです。
対応策
こういうのがありますよね • SSR • プリレンダリング • metaタグだけ入ったhtmlを返す ◦ botにだけ別ページ表示 ◦
URLを分けてリダイレクト
今回の方針としては • シンプルで対応工数少ないの希望 • SEOペナルティは避けたい • パフォーマンス改善は目をつぶる
やったこと 1. Functionsでindexのmetaタグ差替 2. FunctionsでRSSフィード配信 3. スプレッドシートでsitemap公開
① Functionsで index.htmlの metaタグ差し替え
firebase.json
None
事例見かけないので不安。 なにか罠あります?
心配になるところ • Functions使いすぎるのでは? • パフォーマンス落ちるのでは?
心配ポイント①:Functions使いすぎ問題 でもFunctionsのレスポンスは CDNにキャッシュできる
None
• コンテンツ部分は結局クライアント側で レンダリングしてる(のでキャッシュされ ない) • キャッシュしてるのはガワだけなので、 保存期間長くしてもよさそう 心配ポイント①:Functions使いすぎ問題
心配ポイント②:パフォーマンス問題 中央値:200~300ms
まぁいいか \(^o^)/
② Functionsで 超お手軽にRSSフィード配信
/feed でxml形式のRSSフィードを出力する
Firestoreから最新のコンテンツn件をxmlで返す
キャッシュは長めがハッピー
None
めっちゃ簡単 \(^o^)/
③ スプレッドシートで 超お手軽にsitemap配信
クロールしてもらうために sitemapも用意しないと。。 でも面倒くさい
• XMLじゃなくて改行テキストでOK →実はCSV形式でもOK • 外部ドメインに置いてもOK • スプレッドシートはCSV形式で公開でき る あまり知られてないsitemapの話
つまり?
いつからこれがsitemapではないと錯覚していた…?
None
robots.txt
更新はどうするの?
None
RSSが更新されたら自動でシートに追記
実際クロールされるの?
来すぎてquota超えた(先にblazeにしましょう)
まとめ
改めて、やったこと再掲 1. Functionsでindexのmetaタグ差替 2. FunctionsでRSSフィード配信 3. スプレッドシートでsitemap公開
Functions最高 \(^o^)/
CM
FirestoreのGUI管理アプリ作りかけです https://notsobad-jp.github.io/sequelFIRE/
Thank you.