Wasp•7d ago

How to make SEO tags different for different pages?

I am wondering how we can make the main.wasp file more context aware? I see my meta titles and descriptions are the same on all of my pages. I recognize we can't change that on a page by page basis, but is there a way to set certain pages to noindex so we aren't penalized for say our login, terms page, etc. having the same meta tags? wasp version is 0.18.0 Thank you!

6 Replies

kapa.ai•7d ago

Hi @rachelslurs. 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 setting SEO meta tags (like title, description, or robots/noindex) on a per-page basis directly in the main.wasp file. The meta tags you define in the app's head property in main.wasp are applied globally to all pages, which is why you see the same meta titles and descriptions everywhere. There is no built-in way to make main.wasp context-aware or dynamic for different pages at this time. However, there are a couple of workarounds and future directions: 1. Dynamic Meta Tags via React:
You can use a React library such as react-helmet-async to set meta tags dynamically within your React components. This allows you to specify different meta tags (including <meta name="robots" content="noindex">) for each page. You can set this up in your page components, and if you want to apply it globally, you can use Wasp’s rootComponent feature to wrap your app and manage meta tags from there. Note that this approach sets meta tags at runtime, not statically at build time, which may have some SEO implications, but for most use cases, it works well enough for search engines like Google that execute JavaScript. 2. No Native Per-Page Support Yet:
The Wasp team is aware of this limitation and there are open issues and discussions about improving SEO support, including per-page meta tags and better SSR/SSG support in the future. For now, the only way to add meta tags globally is via the app.head property in main.wasp, and there is no built-in way to set noindex or other tags for specific pages only. This is a known gap and is being tracked for future improvements Add "SEO" section in our docs, Figure out our plan for SSR / SSG, also SEO, Setting Environment-specific Values in main.wasp File. Summary:
- You cannot set per-page meta tags or noindex directly in main.wasp as of Wasp 0.18.0. - Use a React-based solution like react-helmet-async in your page components as a workaround. - Native support for per-page SEO tags is planned but not yet available. If you need an example of how to use react-helmet-async in a Wasp page, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @rachelslurs, 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?

rachelslursOP•7d ago

@kapa.ai Can you give me an example of using react-helmet-async say for the signup page? https://github.com/wasp-lang/open-saas/blob/main/template/app/src/auth/SignupPage.tsx

GitHub

open-saas/template/app/src/auth/SignupPage.tsx at main · wasp-lang...

A free, open-source SaaS app starter for React & Node.js with superpowers. Full-featured. Community-driven. - wasp-lang/open-saas

kapa.ai•7d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the provided knowledge sources do not contain an example of using react-helmet-async (or react-helmet) in a Wasp signup page, nor do they document the exact integration steps for this library within a Wasp project. The sources do mention that using react-helmet-async is a possible workaround for setting per-page meta tags, but they do not provide a code sample or detailed instructions for implementation in the context of a Wasp app or specifically for the signup page Setting Environment-specific Values in main.wasp File. If you need further guidance, you may want to consult the official react-helmet-async documentation or ask in the Wasp community for a concrete example. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @rachelslurs, 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?

NEROX•6d ago

Hey @rachelslurs see this:

//LoginPage.tsx
import { Link as WaspRouterLink, routes } from 'wasp/client/router';
import { LoginForm } from 'wasp/client/auth';
import { AuthPageLayout } from './AuthPageLayout';
import { authAppearance } from './authConfig';
import { Helmet } from 'react-helmet-async';


export default function Login() {
  return (
    <>
      <Helmet>
        <title>Login</title>
        <meta name="robots" content="noindex" />
        <meta name="description" content="Login to your account" />
      </Helmet>
      <AuthPageLayout>
        <LoginForm appearance={authAppearance} />   
      </AuthPageLayout>
    </>
  );
}

//LoginPage.tsx
import { Link as WaspRouterLink, routes } from 'wasp/client/router';
import { LoginForm } from 'wasp/client/auth';
import { AuthPageLayout } from './AuthPageLayout';
import { authAppearance } from './authConfig';
import { Helmet } from 'react-helmet-async';


export default function Login() {
  return (
    <>
      <Helmet>
        <title>Login</title>
        <meta name="robots" content="noindex" />
        <meta name="description" content="Login to your account" />
      </Helmet>
      <AuthPageLayout>
        <LoginForm appearance={authAppearance} />   
      </AuthPageLayout>
    </>
  );
}

Could you try?

rachelslursOP•6d ago

Yes! I'll report back on how it goes. Thank you!

miho•4d ago

@rachelslurs let us know if we can still help

Gaming

Programming

How to make SEO tags different for different pages?

Did you find this page helpful?