Wasp•3mo ago

How to override the title, meta properties and description?

Hello, My app is practically finished but I just noticed that there seems to be no way to change the titles of the pages, the meta tags or the description as they are set once for the whole app. I mean, I understand that it is supposed to be a simple SaaS app but relying on Astro for adding simple pages (legal notices, one-page doc) is way overkill and, in my opinion, kills a lot of the simplicity of Wasp. So is it possible to override titles and description? Thank you.

5 Replies

MEE6•3mo ago

Wohooo @Hastur, you just became a Waspeteer level 1!

kapa.ai•3mo ago

Hi @Hastur. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can customize the title and add additional lines to the head of your Wasp app. This is done through the app type declaration in your Wasp code. Each Wasp project can have only one app type declaration, and it is used to configure your app and its components. To change the title of your app, which appears in the browser tab, next to the favicon, you can change the title field of your app declaration. Here is an example:

app myApp {  
 wasp: {  
 version: "^0.13.0"  
 },  
 title: "BookFace"  
}

app myApp {  
 wasp: {  
 version: "^0.13.0"  
 },  
 title: "BookFace"  
}

If you want to add additional style sheets, scripts, or meta tags to your app, you can do so by adding them to the head field of your app declaration. Here is an example of adding extra style sheets, scripts, and meta tags:

app myApp {  
 wasp: {  
 version: "^0.13.0"  
 },  
 title: "My App",  
 head: [ // optional  
 "<link rel=\"stylesheet\" href=\"<https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\"> />",  
 "<script src=\"<https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js\"></script>",>  
 "<meta name=\"viewport\" content=\"minimum-scale=1, initial-scale=1, width=device-width\" />"  
 ]  
}

app myApp {  
 wasp: {  
 version: "^0.13.0"  
 },  
 title: "My App",  
 head: [ // optional  
 "<link rel=\"stylesheet\" href=\"<https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\"> />",  
 "<script src=\"<https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js\"></script>",>  
 "<meta name=\"viewport\" content=\"minimum-scale=1, initial-scale=1, width=device-width\" />"  
 ]  
}

For more details on each of the fields, you can check out the API Reference (https://wasp-lang.dev/docs/project/customizing-app#api-reference). As for SEO, there is an open issue on GitHub discussing the addition of an "SEO" section in the Wasp docs. This would explain the state of SEO in Wasp, how to set meta tags for the landing page via head, and future plans for SEO in Wasp. You can follow the progress of this issue here (https://github.com/wasp-lang/wasp/issues/1910). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Hastur, 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•3mo ago

@martinsos Do you mind taking this one? I think you're more familiar

martinsos•3mo ago

@Hastur sorry for slow response on this one! You are absolutely right, we are yet missing support for SSR, as we are focusing a bit more on the business apps at the moment, but we will be adding it 100%. Issue for it: https://github.com/wasp-lang/wasp/issues/911 . And I agree Astro is not a solution, we suggest it really for blog management, not for static content inside the Wasp app itself. There are two things you can do right now: - app.head in main.wasp -> you can configure global <head> this way, but not per page - You can use a solution like https://github.com/staylor/react-helmet-async to configure head per page, dynamically from React. This will work for crawlers that execute JS, but not for those those that only look at the first response.

HasturOP•3mo ago

Thank you @martinsos for the reply. No worries for the delay. Indeed, for now, react-helmet-async is the go-to solution I guess.

Gaming

Programming

How to override the title, meta properties and description?