Meta tags like a PRO — Remix Series
Using meta function in Remix
Remix is a new full stack framework, very powerful (for me).
One of important feature of this framework is that by default Remix expose a meta function in every routes.
Hi Devs, I’m Daniele Carta and I’m a Frontend Developer.
Let’s image to have a route “/about”. We want to add the meta tags for this page. See together how to implement a meta function.
In this example we have declared a const “meta” that is a function that return a json with the meta tags.
Remix under the hood will change the json in the real meta tags, like this:
Remix, can be used the server-side rendering, for this reason if you try to see the source of your page (with the devTools by Chrome) you can see directly the meta tags.
So, this feature is very very powerful because by default you can change the meta tags without other library and without write a new code.
In the previous example we have seen a “static” data for the meta tags.
Now, if we want to pass a dynamic data?
As you can see in the meta function you can pass the data (from the loader function) and you can get the params from the current route.
Conclusion
Remix is very powerful so remember to use all feature and remember to declare the meta tags in every routes.
Thanks for reading the article, I hope it was useful for you!
Feel free to follow me on:
Coming soon
- Meta tags like a PRO — Remix Series
- How to debug a Remix App — Remix Series
- How to fetch data — Remix Series (coming soon)
- Routing like a PRO — Remix Series (coming soon)
