Wasp•3mo ago

Page & Route specific metadata

Hey guys, currently the <meta /> tags are defined in the main.wasp file. Is there a way to define these metadata (eg. title and description) separately for each route dynamically? Thanks!

3 Replies

kapa.ai•3mo ago

Hi @N. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, there is a way to set metadata dynamically for each route. While Wasp doesn't currently support this natively, you can use a library like react-helmet or its maintained fork react-helmet-async to set head directly from React. This allows you to set metadata such as title and description dynamically based on the current route. Here is an example of how you might use it:

import { Helmet } from 'react-helmet-async';

const MyPage = () => (
  <div>
    <Helmet>
      <title>My Title</title>
      <meta name="description" content="My description" />
    </Helmet>
    {/* rest of your page */}
  </div>
);

import { Helmet } from 'react-helmet-async';

const MyPage = () => (
  <div>
    <Helmet>
      <title>My Title</title>
      <meta name="description" content="My description" />
    </Helmet>
    {/* rest of your page */}
  </div>
);

In this example, the title and description meta tag will be set dynamically when MyPage is rendered. To set it in just one place, you can use Wasp's rootComponent feature (https://wasp-lang.dev/docs/project/client-config#defining-a-common-layout). Please note that this is done dynamically through React, instead of Wasp injecting it statically. This should work fine for most use cases, but there might be some edge cases where static injection is preferred. For more information, you can refer to the discussion (https://discord.com/channels/686873244791210014/1209467473389297684) on the Wasp Discord server. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @N, 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?

NOP•3mo ago

Good bot

miho•3mo ago

Looks good! @martinsos related to https://github.com/wasp-lang/wasp/issues/1910

GitHub

Add "SEO" section in our docs · Issue #1910 · wasp-lang/wasp

Explain the state of SEO in Wasp, explain how they can set the meta tags for the landing page right now via head, and say also what we are planning for the future. Related convo: https://discord.co...

Gaming

Programming

Page & Route specific metadata