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の進化で解決したのでは…？

8. None

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

16. None

17. 事例見かけないので不安。 なにか罠あります？

18. 心配になるところ • Functions使いすぎるのでは？ • パフォーマンス落ちるのでは？

19. 心配ポイント①：Functions使いすぎ問題 でもFunctionsのレスポンスは CDNにキャッシュできる

20. None

21. • コンテンツ部分は結局クライアント側で レンダリングしてる（のでキャッシュされ ない） • キャッシュしてるのはガワだけなので、 保存期間長くしてもよさそう 心配ポイント①：Functions使いすぎ問題

22. 心配ポイント②：パフォーマンス問題 中央値：200~300ms

23. まぁいいか ＼(^o^)／

24. ② Functionsで 超お手軽にRSSフィード配信

25. /feed でxml形式のRSSフィードを出力する

26. Firestoreから最新のコンテンツn件をxmlで返す

27. キャッシュは長めがハッピー

28. None

29. めっちゃ簡単 ＼(^o^)／

30. ③ スプレッドシートで 超お手軽にsitemap配信

31. クロールしてもらうために sitemapも用意しないと。。 でも面倒くさい

32. • XMLじゃなくて改行テキストでOK →実はCSV形式でもOK • 外部ドメインに置いてもOK • スプレッドシートはCSV形式で公開でき る あまり知られてないsitemapの話

33. つまり？

34. いつからこれがsitemapではないと錯覚していた…？

35. None

36. robots.txt

37. 更新はどうするの？

38. None

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.