Wasp-lang•2mo 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.

24 Replies

kapa.ai•2mo 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?

NEROXOP•2mo 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•2mo 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?

NEROXOP•2mo 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•2mo 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?

NEROXOP•2mo ago

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

kapa.ai•2mo 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•2mo 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.

NEROXOP•2mo 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•2mo 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...

NEROXOP•2mo 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•2mo ago

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

NEROXOP•2mo 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

NEROXOP•2mo ago

Things are going great so far Martin!

NEROXOP•2mo 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)

NEROXOP•2mo 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. ;)

NEROXOP•2mo ago

"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."

Regarding everything we have talked about User Agents, rendering html only (and weird stuff...)👆 I consider it unnecessary we could discard that), the main concern was that if you inspect the page there is nothing (but the scrappers do run the js and load the page perfectly). @martinsos If for example I would like to contribute to OpenSaas (e.g. by simply adding Helmet to the landing page, with the needed stuff, comments, explanations) or for example improve the landing page loading times, small optimizations, etc...) could I do it?

martinsos•2mo ago

@NEROX this is awesome! We did want to work on SEO side of wasp, but didn't have time yet -> this helps a lot, that you tested stuff out and have shown that it works well! 1. Contributing to open-saas -> of course! I can't guarantee anything, but feel free to make a PR and we will give it a look, try to help getting it merged. If you are not sure if it makes sense, as a first step you can create an issue and present what you would like to do there, in a bit more details, so team can discuss it there with you, and then when it soudns like it will be good, you can go for PR - to reduce the risk of implementing the wrong thing. Up to you though. It soudns good to me at the moment, the idea, but more details would help for sure. 2. Since you know a lot about SEO, more than we do I believe, would you be up for helping us write a guide for SEO in/with Wasp? We started this effort here https://github.com/wasp-lang/wasp/issues/1910, but didn't get super far. If you would like to write a kind of a guide, that would help us a lot! You could explain a bit how to get good SEO in Wasp -> basically cover what you did yourself. An example app might also be awesome next to that! You could write this as a part of that Github issue, that would already help a lot, or you could go step further and make a PR that adds SEO page to Wasp docs.

GitHub

Issues · wasp-lang/wasp

The fastest way to develop full-stack web apps with React & Node.js. - Issues · wasp-lang/wasp

NEROXOP•4w ago

I did yesterday this, I'm not pretty sure if I need to write in X or Y format or something extra: https://github.com/wasp-lang/open-saas/pull/297

martinsos•4w ago

Awesome @NEROX and thanks -> I reviewed the PR, give it a look!

NEROXOP•4w ago

Recieved! Will do it, Ps: Semrush doesn't support js rendering :( Meanwhile:

Killshot•4w ago

Absolutely loving your efforts for SEO, i am near to project completion and gonna need to do as much SEO as i can for my project. Your inputs will help i am sure.

martinsos•4w ago

Ha nice, so it's a feature 😄 😛 But yeah, at the we will need to add SSR support to make sure all the crawlers read what they should, but still it is great to hear you got so far without it.

NEROXOP•4w ago

I'm glad to hear that. SEO is one of my main skills. What things do you think I could cover and document on my own (extra things, tips, etc...) regarding any doubts you or anyone else might have? P.S.: Since I discovered Wasp, I feel like a Swiss Army Knife because with a bit of help from Cursor, you can build Mini-SaaS super quickly. What I highlight about Wasp is this incredible Open Source community; it's what helped me build and deploy my first app without barely knowing how to code. Any knowledge I could share to keep supporting anyone after deployment on topics like SEO, blogging, conversion, email marketing, automation, workflows, CRMs, etc... I would do it with great pleasure. What I believe is that WASP/OpenSaas is targeted—or perhaps "targeted" isn't quite the word—it's more like the ideal audience, the buyer persona, consists of developers or even non-developers like me, who simply want to have their own project or their own SaaS. That's one of WASP's biggest strengths: offering a full-stack solution. A lot of these developers or WASP/OpenSaas users end up building and deploying their app, which is great, but they might not have the expertise in areas like SEO, blogging, conversion optimization, or marketing. I think I could provide valuable insights to help guide those who've deployed their app, offering support in areas like SEO, content creation, and marketing strategies. While I'm not claiming to ensure their SaaS will be successful, I believe sharing this kind of information could be really beneficial to help them continue growing after the deployment. The idea I'm proposing is that the user stays engaged with WASP in some way, so they can continue learning and implementing aspects of marketing. Honestly, I'm tired of seeing 40 ads on every platform of Shipfast, BuildAMicroSaas, etc... OpenSaaS should be the OpenAI of SaaS.

Gaming

Programming

Doing SEO with Wasp