NOT SO BAD なブログ

FJUG#3でLTさせてもらってきました！

前回#2に続いての参加で、今回は思い切ってLT枠に突っ込ませてもらいました。 150人の前でのLTは初めてでしたが、緊張で死ぬかと思いました。

発表したスライドにちょっとした説明やその後の検証結果を追記して、ブログに残しておこうと思います。* * *

LT内容

https://speakerdeck.com/tomomichi/ogpdui-ying-moukoreteiinsiyanaitesuka2018zan-ding-ban

3行で要約

• Riot.js/Firebaseでサービスをリニューアルしたら、Googleにインデックスされなくなって困りました
• SSRとか大変なのは避けたかったので、Functionsでmetaタグだけ差し替えたんだけどいいですよね？
• それだけだとクロールされないので、Functionsで超お手軽にRSSフィードとsitemapを配信する方法も試してみましたよ。

一言でいうと、Functions最高ー。

背景的な話

このコンテンツは、こちらの記事の追記のような位置付けです。

サイトリニューアルで出てきたSEO問題を、できるだけ楽して解決できないかとがんばった記録になっております。

エクスキューズ

これでいいんじゃないですかとか適当なこと言ってますが、会社でこんなことしてたら怒られるかもしれないので気をつけてください。

「SSRまではいらないけど、ある程度metaを動的にコントロールしたい」っていう欲求は結構理解できる。特に趣味プロでバックにfirebase 、みたいなシチュと割と相性良さそうなイメージだ #fjug

— Yosuke Kurami (@Quramy) 2018年4月2日

温度感としては、@Quramyさんが書いてくださってるのがほんとにその通りって感じじゃないかと。

スライドにも書いてますが、とはいえGoogleBotにちゃんと認識されてるならそもそもこんなことしたくなかったわけで。。

あくまでインデックスされなくて困ってて、でもSSRまでしたくなくて、っていうひとつの事例としてお楽しみください。 （パフォーマンス改善のためにSSR、とかって文脈ではない）

同じようなシチュエーションの人の助けになればうれしいです。

以下、やったこと３つをそれぞれ少しだけ追加説明していきます。

① Functionsでmetaタグだけレンダリング

要するに、SPAでエンドポイントになるindex.htmlをそのまま返すんじゃなくて、functionsをかませてmetaタグだけ書き換えてから返すという、SMR（Serverside Metatag Rendering）です。聞いたことないけど。

けっこう探しても事例がなくて不安だったんですが、Lambdaでやってるという話を聞くと安心感があります。

同じようなコンテキストでAWS Lambdaで動的にmetaレンダリングしてます、みたいな話を以前に聞いたことあるし、function 利用してmetaもそんなに悪手では無い気と思ってる #fjug

— Yosuke Kurami (@Quramy) 2018年4月2日

全体的に@Quramyさんのコメントに救われてる。。

このやり方で懸念になるのはFunctionsの使用量とパフォーマンスなわけですが、FunctionsのレスポンスはCDNにキャッシュできるというのが、意外と知られていなかったりしますよね（ぼくが知らなかっただけですがw）

Cloud Functions による動的コンテンツの配信  |  Firebase

CDNから返してくれればFunctionsはトリガーされずに済むので、アクセスが増えてもそこまで使用量は増えない、はず。

とはいえまだ実運用で大量のアクセスさばいて大丈夫でした、という経験があるわけではないので、ご利用は自己責任でお願いします。 blazeプランは料金上限を設定できないって、結構こわいですね。

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

metaタグレンダリングでbotに認識されるようになりましたが、クロールしてもらえないと意味がありません。 というわけでRSSフィードとsitemapを極小労力で用意してみます。

まずはRSSフィードですが、これもFunctionsを使って、/feedにアクセスが来たらfirestoreから最新のデータを取ってXMLで返すようにしました。

簡単すぎて、node-rssが便利だったことくらいしか特に言うことがない。。

しかし猛烈にお手軽なので、とりあえずやっといて損はないんじゃないでしょうか。 これこそ更新は1日数回でいいと思うので、長めにキャッシュして節約したいところです。

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

最後にsitemapの作成。たぶん過去最高に頭わるそうなsitemapのハックです。

ということは、スプレッドシートにURL一覧作ってCSV形式で公開すると、それがvalidなsitemapのURLになってしまうと。

さらに更新は、さっきのRSSのフィード更新をトリガーに、IFTTTでシートに自動追記。 ついにコードを1行も書くことすらなく、自動更新されるsitemapをお手軽に作ることができました。

sitemapの管理って地味にめんどくさいので、ミニマムでやるなら意外とおすすめです。 機会があればぜひ試してみてください。

まとめ

という感じでLTをしてきたのですが、調べて実装終えたのが発表ぎりぎりだったので、結果の検証までできてませんでした。

実装から数日経ってどうなったかというと、、

いい感じ。

もちろんfunctionsも無料枠で収まるペースです。よかったよかった。