Wasp-lang•3d ago

Doing SEO with Wasp

Hi Kapa, I just deployed my app and I am an SEO expert and I want to be able to control everything. Meta title, meta description, json ld, index/noindex, follow/nofollow, robots.txt, sitemap.xml, breadcumbs. Give me all the information you can gather regarding everything I have told you. Give me github threads, issues, etc... I need to know as much as possible all my SEO possibilities (both now and in the future). Remember that I am an SEO expert and it does me no good to just change a title or subtitle. If you do it right you will get the boss to give you a 200€ bonus.

16 Replies

kapa.ai•3d ago

Hi @NEROX. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, I can provide you with the information you need about SEO in Wasp. Currently, Wasp allows you to set static meta tags in the head section of the main.wasp file. This can be used to set tags like og:image, og:url, etc. Here is an example from the Wasp documentation:

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\" />"  
 ]  
}

(Source: Wasp Docs (https://wasp-lang.dev/docs/project/customizing-app)) However, dynamic assignment of these values based on the environment is not currently supported directly within the main.wasp file (source (https://discord.com/channels/686873244791210014/1209467473389297684)). There is an open issue on GitHub about adding an "SEO" section in the Wasp docs, which would explain the state of SEO in Wasp, how to set meta tags for the landing page, and future plans for SEO in Wasp (source (https://github.com/wasp-lang/wasp/issues/1910)). There is also an open issue about figuring out the plan for SSR/SSG and SEO. One of the comments in this issue mentions that while SSR is good for SEO, very good SEO can also be achieved without SSR, just by allowing users to set meta tags per page (source (https://github.com/wasp-lang/wasp/issues/911)). As for the future, there are plans to add more SEO support in Wasp. This includes possibly adding support for SSR or a simpler mechanism (tags) for SEO (source (https://discord.com/channels/686873244791210014/1219684155072184440)). Please note that as of now, Wasp doesn't support all the SEO features you mentioned like json ld, index/noindex, follow/nofollow, robots.txt, sitemap.xml, breadcrumbs. However, the Wasp team is actively working on improving the framework and adding new features, so it's possible that more advanced SEO features will be added in the future. I hope this information helps! If you have any more questions, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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•3d ago

@kapa.ai this is a page.tsx:

import { Helmet } from 'react-helmet';
return (
    <div>
      <Helmet>
        <title>My Landing Page Title</title>
        <meta name="description" content="This is the meta description for the landing page" />
        <meta property="og:title" content="My Landing Page Title" />
        <meta property="og:description" content="This is the Open Graph description" />
        <meta name="twitter:card" content="summary_large_image" />
      </Helmet>
      /more code...

Why doesn't this work? when I inspect the client I don't see this in the source code.

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The code you've shared uses react-helmet, a library that allows you to manage changes to the document head. However, it's important to note that react-helmet operates on the client-side and doesn't support server-side rendering (SSR) out of the box. This means that while the changes you make with react-helmet will be visible in the DOM after the JavaScript has loaded and run on the client-side, they won't be present in the initial server response. This can be problematic for SEO, as search engine crawlers may not execute or fully support JavaScript, and therefore might not see the changes made by react-helmet. This is likely why you're not seeing the changes when you inspect the source code. In a Discord thread (https://discord.com/channels/686873244791210014/1209467473389297684), a community member suggested using react-helmet-async as a workaround, which is a fork of react-helmet that supports SSR. However, this would only work if your application supports SSR, which is not currently the case with Wasp. The Wasp team is aware of the limitations regarding SEO and is planning to add more SEO support in the future, possibly including SSR or a simpler mechanism for setting meta tags per page (source (https://github.com/wasp-lang/wasp/issues/911)). For now, you might need to consider other strategies for SEO, such as pre-rendering or using a service that can render JavaScript for crawlers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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•3d ago

@kapa.ai give me comands to install correctly https://github.com/staylor/react-helmet-async in my wsl ubuntu, I'm already with the console in the Wasp Root folder

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To install react-helmet-async in your Wasp project, you can follow these steps: 1. First, navigate to the ext/ directory in your Wasp project root:

cd ext

cd ext

2. Then, install react-helmet-async using npm:

npm install react-helmet-async

npm install react-helmet-async

This will add react-helmet-async to the node_modules directory inside ext/ and it will be available for use in your Wasp project. Please note that while react-helmet-async supports server-side rendering, Wasp currently does not. This means that while you can use react-helmet-async to manage changes to the document head, these changes will only be visible after the JavaScript has loaded and run on the client-side, and they won't be present in the initial server response. This can be problematic for SEO, as search engine crawlers may not execute or fully support JavaScript. The Wasp team is planning to add more SEO support in the future, possibly including server-side rendering (source (https://github.com/wasp-lang/wasp/issues/911)). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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•3d ago

@kapa.ai give me the reverse comand (to unistall this) npm install react-helmet-async

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To uninstall react-helmet-async from your Wasp project, you can use the following command:

npm uninstall react-helmet-async

npm uninstall react-helmet-async

This command should be run from the ext/ directory in your Wasp project root, the same place where you installed the package. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

martinsos•3d ago

Haha going all in with kapa I see :D. Regarding the SEO, you can set stuff in "head" in main.wasp under "app", but that is for the whole app, and there is no way to statically set head for a specific page, except for the react-helmet-async, which does it dynamically though, so that is ok if crawlers wait for dynamic rendering of the page to finish instead of conusming only the very first round of HTML that arrives. For static support per pages we need to add support for SSR, which we will be adding, but we don't have it yet.

NEROX•3d ago

Yes! haha I'm already looking at the possibilities, I'm going to try to get react-helmet-async working. In my case my purpose is to manage the meta of each page: https://toograded.com/sgpa-calculator: - Title: SGPA Calculator - Description: Calculate your SGPA Online Free https://toograded.com/cgpa-calculator: - Title: CGPA Calculator - Description: Calculate your CGPA Online Free Etc... Regarding the fact that today is SPA, I have seen many things in these years of SEO, so I think it is a minor problem (maybe I'm wrong, now I'll check). On the other hand I have been talking with Claude and a solution he has proposed me is to pre-render the html only for Crawlers requests. I don't know if this has already been proposed but I find it very interesting because in WordPress (I come from that world), the LiteSpeed cache plugin had an option (similar to this and quite curious) which was GuestOptimization. The summary of that function was that (as in WP everything is html and then themes and styles are applied (with the 7895823 js files....) which makes it lose performance in PageSpeed tests, this generated only the html without anything else for the crawlers (giving +99 in PageSpeed, although the preview looks ugly).

martinsos•3d ago

That is interesting, so it renders HTML just for crawlers if they come -> how does it know they are cralwers though? Btw we have yet to get our SEO story up to shape, so any advice is useful. Here is GH issue where we are tracking some ideas in this direction: https://github.com/wasp-lang/wasp/issues/911 -> i also added link to this discord convo.

GitHub

Figure out our plan for RSC / SSR / SSG, also SEO · Issue #911 · wa...

Things to explore: How does Next.js do it? React can apparently render to a string. This is probably the key to doing SSR. https://vite-plugin-ssr.com/ -> or https://vike.dev/, seems to be its s...

NEROX•2d ago

how does it know they are cralwers though?

As I see in the LiteSpeed Docs, with the Guest Mode User Agents:

"The user agents listed in this box will always be served a cacheable landing page via Guest Mode, for every visit as long as Guest Mode is enabled. Use this setting for page speed scoring bots and other automated visitors that don't require personalized content. We've prepopulated the setting with known bots, but you can add or remove user agents as you wish."

martinsos•2d ago

all right so user-agent header in the HTTP request is the one that identifies them then if I am correct

NEROX•2d ago

🔄 Update: Used react-helmet-async in my pages, created a simple robots.txt and created a sitemap.xml based on my 5 public URLs from main.wasp (all done with Cursor). Now I have: https://toograded.com/sitemap.xml https://toograded.com/robots.txt I have already registered the domain in GSC and Bing Webmaster Tools, the sitemap has been accepted and the URLs have been detected. :wizardboi: Magic things of the SEO World: 1️⃣ To my surprise (considering that it is a completely new domain that I deployed yesterday and only now have I registered it in the indexing tools), I found that the Google robot has already visited it and with good reception ;) first cap 2️⃣ The thing is that the Crawler came this morning, so at that point I didn't even have a helmet-asyc on any page (magic thing of the SEO world:wizardboi: ) second cap 3️⃣ Also, a good thing is that the Google Crawler crawled that page perfectly third cap

NEROX•2d ago

Things are going great so far Martin!

NEROX•2d ago

Another point: The schema markup with helmet-asyc works perfect! https://validator.schema.org/#url=http%3A%2F%2Ftoograded.com%2Fsgpa-calculator Edit: Ignore screenshot (old), check link to check current status (updated)

NEROX•3h ago

🔁 Update: react-helmet-async is really the next-seo (https://github.com/garmeeh/next-seo) but for react!!!!! At the moment I love him At this point I don't care if it is SPA or not (each thing has its own url, title, description, jsonld etc...). Ps: This project of mine could be a flagship SEO project for Wasp. I didn't create that page and those calculators just for the sake of it. ;)

Gaming

Programming

Doing SEO with Wasp