Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 ● なんちゃってWebエンジニア ● ぼっちWebサービス開発 ● NOT SO BAD, LLC. おおにし @kame_f_no7

Slide 3

Slide 3 text

簡単・便利なトーナメント表作成サービス

Slide 4

Slide 4 text

課題感

Slide 5

Slide 5 text

THE TOURNAMENTの話

Slide 6

Slide 6 text

うれしみ つらみ 無料枠が大きい 認証が簡単すぎ Functionsが便利すぎ まだ障害も多い 管理画面が弱い バックアップできない 初回表示が重い SEOが弱くなった

Slide 7

Slide 7 text

SPAのSEO/OGPあるある ● Googleにインデックスされない ● SNSシェアにOGPが反映されない botの進化で解決したのでは…？

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

ダメでした＼(^o^)／ ※使用するフレームワークなどにもよるようです。

Slide 10

Slide 10 text

対応策

Slide 11

Slide 11 text

こういうのがありますよね ● SSR ● プリレンダリング ● metaタグだけ入ったhtmlを返す ○ botにだけ別ページ表示 ○ URLを分けてリダイレクト

Slide 12

Slide 12 text

今回の方針としては ● シンプルで対応工数少ないの希望 ● SEOペナルティは避けたい ● パフォーマンス改善は目をつぶる

Slide 13

Slide 13 text

やったこと 1. Functionsでindexのmetaタグ差替 2. FunctionsでRSSフィード配信 3. スプレッドシートでsitemap公開

Slide 14

Slide 14 text

① Functionsで index.htmlの metaタグ差し替え

Slide 15

Slide 15 text

firebase.json

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

つまり？

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

robots.txt

Slide 37

Slide 37 text

更新はどうするの？

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

RSSが更新されたら自動でシートに追記

Slide 40

Slide 40 text

実際クロールされるの？

Slide 41

Slide 41 text

来すぎてquota超えた（先にblazeにしましょう）

Slide 42

Slide 42 text

まとめ

Slide 43

Slide 43 text

改めて、やったこと再掲 1. Functionsでindexのmetaタグ差替 2. FunctionsでRSSフィード配信 3. スプレッドシートでsitemap公開

Slide 44

Slide 44 text

Functions最高 ＼(^o^)／

Slide 45

Slide 45 text

CM

Slide 46

Slide 46 text

FirestoreのGUI管理アプリ作りかけです https://notsobad-jp.github.io/sequelFIRE/

Slide 47

Slide 47 text

Thank you.