Wasp•4w ago

Is it possible to set up tab title in wasp file? Or do we need to set it up directly with React?

I want to be able to optimize my SEO pages, and to change the logo / title of tab directely in page. Is it possible with wasp? Or do I need to set it up after the loading of the page with React tools?

2 Replies

kapa.ai•4w ago

Hi @Estelle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to set up the tab title directly in the Wasp file. Wasp provides a way to customize the app title, which appears in the browser tab, through the app declaration in the main.wasp file. Here's how you can set the tab title:

app todoApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "Your Custom Tab Title"
}

app todoApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "Your Custom Tab Title"
}

The title field in the app declaration sets the title that will appear in the browser tab Docs > Project > Customizing the App (https://wasp-lang.dev/docs/project/customizing-app). For more advanced SEO optimization, you can add additional meta tags in the head field of the app declaration:

app todoApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "Your Custom Tab Title",
  head: [
    "<meta name=\"description\" content=\"Your page description\" />",
    "<meta name=\"keywords\" content=\"your, keywords, here\" />"
  ]
}

app todoApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "Your Custom Tab Title",
  head: [
    "<meta name=\"description\" content=\"Your page description\" />",
    "<meta name=\"keywords\" content=\"your, keywords, here\" />"
  ]
}

This allows you to add SEO-related meta tags directly in the Wasp file Docs > Project > Customizing the App > API Reference Part 2 (https://wasp-lang.dev/docs/project/customizing-app#api-reference). However, it's important to note that currently, Wasp doesn't have built-in support for dynamically changing these values on a per-page basis or based on the environment. For more dynamic SEO optimization, you might need to use React-based solutions. For favicon support, there is an open issue to add this feature to Wasp in the future Github Issue: Add favicon support (https://github.com/wasp-lang/wasp/issues/9). If you need more dynamic control over SEO elements, you might want to consider using a React-based solution like react-helmet or react-helmet-async, as suggested in a Discord discussion Discord support thread: Setting Environment-specific Values in main.wasp File > Answers (https://discord.com/channels/686873244791210014/1209467473389297684). Wasp is aware of the need for better SEO support and is planning to address it in future updates Github Issue: Figure out our plan for SSR / SSG, also SEO > Comments (https://github.com/wasp-lang/wasp/issues/911). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Estelle, 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?

Filip•3w ago

Hey @Estelle, good question! If you want the same title for all pages, then Kapa's answer is correct. You can set it up from Wasp. If you want a different title on each page (or a different title when the user goes to a different tab, or anything fancy like that), then you'll have to do it from React. Hope that solves it, let me know 🙂

Gaming

Programming

Is it possible to set up tab title in wasp file? Or do we need to set it up directly with React?