FirebaseでSPAするときのSEO/OGP対応もうこれでいいんじゃないですか2018暫定版

Transcript

1. FirebaseでSPAするときの SEO/OGP対応 もうこれで いいんじゃないですか 2018暫定版
2. 自己紹介 • なんちゃってWebエンジニア • ぼっちWebサービス開発 • NOT SO BAD, LLC. おおにし @kame_f_no7
3. 簡単・便利なトーナメント表作成サービス
4. 課題感
5. THE TOURNAMENTの話
6. うれしみ つらみ 無料枠が大きい 認証が簡単すぎ Functionsが便利すぎ まだ障害も多い 管理画面が弱い バックアップできない 初回表示が重い SEOが弱くなった
7. SPAのSEO/OGPあるある • Googleにインデックスされない • SNSシェアにOGPが反映されない botの進化で解決したのでは…？
9. ダメでした＼(^o^)／ ※使用するフレームワークなどにもよるようです。
10. 対応策
11. こういうのがありますよね • SSR • プリレンダリング • metaタグだけ入ったhtmlを返す ◦ botにだけ別ページ表示 ◦ URLを分けてリダイレクト
12. 今回の方針としては • シンプルで対応工数少ないの希望 • SEOペナルティは避けたい • パフォーマンス改善は目をつぶる
13. やったこと 1. Functionsでindexのmetaタグ差替 2. FunctionsでRSSフィード配信 3. スプレッドシートでsitemap公開
14. ① Functionsで index.htmlの metaタグ差し替え
15. firebase.json
17. 事例見かけないので不安。 なにか罠あります？
18. 心配になるところ • Functions使いすぎるのでは？ • パフォーマンス落ちるのでは？
19. 心配ポイント①：Functions使いすぎ問題 でもFunctionsのレスポンスは CDNにキャッシュできる
21. • コンテンツ部分は結局クライアント側で レンダリングしてる（のでキャッシュされ ない） • キャッシュしてるのはガワだけなので、 保存期間長くしてもよさそう 心配ポイント①：Functions使いすぎ問題
22. 心配ポイント②：パフォーマンス問題 中央値：200~300ms
23. まぁいいか ＼(^o^)／
24. ② Functionsで 超お手軽にRSSフィード配信
25. /feed でxml形式のRSSフィードを出力する
26. Firestoreから最新のコンテンツn件をxmlで返す
27. キャッシュは長めがハッピー
29. めっちゃ簡単 ＼(^o^)／
30. ③ スプレッドシートで 超お手軽にsitemap配信
31. クロールしてもらうために sitemapも用意しないと。。 でも面倒くさい
32. • XMLじゃなくて改行テキストでOK →実はCSV形式でもOK • 外部ドメインに置いてもOK • スプレッドシートはCSV形式で公開でき る あまり知られてないsitemapの話
33. つまり？
34. いつからこれがsitemapではないと錯覚していた…？
36. robots.txt
37. 更新はどうするの？
39. RSSが更新されたら自動でシートに追記
40. 実際クロールされるの？
41. 来すぎてquota超えた（先にblazeにしましょう）
42. まとめ
43. 改めて、やったこと再掲 1. Functionsでindexのmetaタグ差替 2. FunctionsでRSSフィード配信 3. スプレッドシートでsitemap公開
44. Functions最高 ＼(^o^)／
45. CM
46. FirestoreのGUI管理アプリ作りかけです https://notsobad-jp.github.io/sequelFIRE/
47. Thank you.