Dynamic SEO Meta Tags with i18n in Wasp?
Currently, the SEO meta information for WASP is statically configured in main.wasp. However, I've integrated internationalization (i18n) into my project. Is there a way to make the meta information change dynamically based on the selected language?
4 Replies
Hi @Elliot_bai. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Currently, Wasp does not support dynamic SEO meta tags (such as title, description, og:image, etc.) directly in main.wasp based on runtime variables like the selected language for i18n. The meta information in main.wasp is static and cannot be changed dynamically according to the user's language or other runtime context.
However, there is a suggested workaround: you can use a React-based solution such as react-helmet-async to set meta tags dynamically from within your React components. This allows you to update meta tags based on the current language or any other runtime state. You can integrate this into your app by using Wasp’s rootComponent feature, which lets you define a common layout or wrapper for your app, and then manage meta tags dynamically from there. Note that this approach sets meta tags on the client side, not statically at build time or on the server, which may have implications for SEO depending on how search engines process your site.
Here’s a summary of the current state and workaround:
- No native Wasp support for dynamic meta tags in main.wasp.
- Use react-helmet-async in your React components to set meta tags dynamically based on i18n or other runtime state.
- Integrate via Wasp’s rootComponent for a centralized solution.
- This is a known limitation, and there are plans to improve configurability in the future, but no timeline is available yet.
References:
- Discord: Setting Environment-specific Values in main.wasp File
- Wasp Docs: rootComponent
- Github Issue: Dynamic config in main.wasp
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Elliot_bai, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
Hey @Elliot_bai, I'm guesing that different user can configure different languages on the same build (i.e., the i18n is not build specific).
If that's the case, Wasp unfortunatley doesn't provide a native mechanism for doing this. You'll either have to do it through JavaScript or use some kind of fancy meta tag that can "read" a browser env var (I don't think those exist but would like to be proven wrong).
We want to explore this use case, so please suggest how you'd like it handled (or how you know other frameworks do it) and we'll create an issue.
Thank you for your attention to this issue. Currently, I see that if I want to set SEO meta information, I can only do it in a single language in main.wasp. However, I have already implemented multi-language support in Wasp, and users can switch languages to browse the entire site. But the SEO information provided to search engines on the pages is still only in one language. I hope to be able to set different SEO meta information for different language versions of the pages.
No no, I get that 😄
But how would you accomplish that, and how do other frameworks do it (if you know)? I'm not well versed in this so I'm looking for inspiration
Although this is great too, if you don't know the implementation details of how its done, I'll create an issue with these high-level goals
Also, I'm curious as to how you implemented i18n (because that's also something we want to support natively). Was it a hassle?