このブログのmetaタグの生成周りをNext SEOに置き換えて、JSON-LDで記事の情報を出力するようにしてみました。今回はその覚書と雑感を書いてみます。

このブログはNext.jsで動かしていて、ブログなのでtitleやOGP周りのタグなんかも入れていました。

いたのですが、最近仕事でNext SEOを触ったのをきっかけに置き換えることにしました。

これまで

Next SEOについてはざっくり把握していたのですが、ライブラリを使うまでもないかと思いHeadなコンポーネントを作って値を入れていました。

別にこれでも良かったのですが、今後メンテしていくのが面倒だったというのが1つありました。
あまり触ることもないので気にすることも無いかなと思っていたのですが、Next SEOを触ってみて良さに気づき置き換えに至りました。

Next SEO

だいぶ書きましたが、Next SEOと言ってるのは garmeeh/next-seo のことを指しています。

結構長くある気がするパッケージで、今もしっかりメンテされてるように思います。

個人的に良いなと思った点は以下

1. 最低限DefaultSeoコンポーネントを設置してしまえば全ページ反映できるので手軽
2. JSON-LDもコンポーネントが用意されている

最低限DefaultSeoコンポーネントを設置してしまえば全ページ反映できるので手軽

DefaultSeoコンポーネントが用意されているので、これを _app.tsx なんかで入れておけば、全ページ追加されます。
実際は、ある程度各ページで設定することにはなると思いますがここで設定しておくと、全ページで反映されるのは実装していくときの心理的ハードルというかが下がるなと思いました。

また、DefaultSeoの内容をベースに各ページで設定した内容で上書きするような動作をするので、各ページでは必要に応じて追記するような使い方になります。
なので、og:imageなんかはDefaultSeoで設定しておくと楽そうですね。

JSON-LDもコンポーネントが用意されている

個人的に乗り換えを後押ししたのはこっちで、もともと機能として無いと思っていました。

JSON-LDについては普段そこまで活用できるシーンに出会わないのでそこまで頻繁に利用するわけでも無いのですが、ArticleやパンくずのJSON-LDくらいは設定したいよなと思っている派です。
ただ、実際のJSON-LDの中身を埋めようとすると割と書くのが面倒くさいようにも思っています…。

Next SEOで実装されている Article だと、必要な項目はPropsで表現されているし、なるべく書いたほうがいいと思いますが、OptionalなPropsも教えてくれるのでとりあえずそこは入れようという思考もできます。

また、基本的にはページを扱うコンポーネントで実装する事が多いと思いますが、下層なコンポーネントで実装しても head タグの中に移動して展開してくれるのも地味にありがたいです。

実装Tips

ちょっとしたメモ程度ですが、metaタグを実装する場合はそれ用のコンポーネントを用意し、ページなコンポーネントに置くような形を取っています。
こうすることで、一覧のような静的に書いていいようなものはそのまま中に、動的に変える必要があるものはそのコンポーネントのPropsで必要なものだけ露出するというような書き方もできるためです。
またGraphQLで書いている場合は、そのコンポーネント内でfragmentを書いて、queryに入れたり親コンポーネントからfilterして渡すようなこともできるので、このコンポーネントの切り方は気に入っています。

置き換えてみて

実際に置き換える時間はそこまでかかりませんでしたが、置き換えることで色々と考えることが減ったし、パッケージをアップデートしたらある程度記述が変わっても追従できると思うのでありがたいなと思っています。