SEO issue . Twitter or facebook cannot recognise meta tags
I need different meta tags for the pages so that they are currently recognised as cards and shared properly on twitter or facebook. Both of the platforms don't identity proper card information .
This is the example page
https://dappermark.com/page-curations/3ef6c26c-28e5-4092-a5ef-36f8bc4e2cb9
Facebook complains missing og:image property , which infact exists and same with twitter.
Facebookx says it sees below information only , while when the above link is inspected in browser it has many more meta property
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<meta property="og:type" content="website">
<title>DapperMark</title>
<script type="module" crossorigin src="/assets/index-BV2qfFnk.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-YFTCFr2B.css">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
18 Replies
Hi @p4j4r5. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I can offer some insights and suggestions regarding your SEO issue with meta tags for Twitter and Facebook.
The problem you're experiencing is related to the inability of social media platforms to recognize the meta tags on your page, specifically the og:image property. This is a common issue when dealing with Single Page Applications (SPAs) like those created with Wasp, which is based on Vite and React.
Currently, Wasp doesn't have built-in support for server-side rendering (SSR) or static site generation (SSG), which can make it challenging for social media crawlers to properly read meta tags. However, there are a few approaches you can consider:
1. Use the
head property in main.wasp:
Wasp allows you to add static meta tags in the head property of the main.wasp file. This is mentioned in the Open SaaS template. However, this method is limited to static tags and doesn't allow for dynamic content based on different pages.
2. Use a React-based solution:
As suggested by a Wasp team member in a Discord conversation, you can use a library like react-helmet or its maintained fork react-helmet-async. This allows you to set head tags directly from React components. You can combine this with Wasp's rootComponent feature to set it in one place for your entire app.
Here's an example of how you might use it:
3. Consider a separate solution for landing pages:
As discussed in another Discord conversation, some developers choose to use a different technology for their landing pages or public-facing content that requires good SEO. Options include Next.js or Astro, which provide better out-of-the-box support for SEO and static content generation.
It's worth noting that the Wasp team is aware of this limitation and has plans to improve SEO support in the future. There's an open GitHub issue tracking this: Figure out our plan for SSR / SSG, also SEO.
For now, the react-helmet approach might be your best bet for adding dynamic meta tags to your Wasp application. If SEO is crucial for your project, you might want to consider using a separate technology for your public-facing pages until Wasp implements better SEO support.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @p4j4r5, 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?I need this page rendered from the server data I have and blog solution isn't feasible.
I am using react-helmet-async
@NEROX do you have any tips on this topic? š
https://www.linkedin.com/post-inspector
Is a good tool, it says
Warning Add an og:description tag to the page to have control over the content's description on LinkedIn.
Warning Add an og:image tag to the page to have control over the content's image on LinkedIn.
Are you using open-saas template and astro or something else?
Post Inspector
Get insights into how your content shows up on LinkedIn with Post Inspector.
Hi I am using Open Saas Template and using helmet to add custom content tags
Yeah linkendin.com inspector is also complaining same as facebook. I do have image tags as you can see in the html source. here is the snapshot for the quick look
https://github.com/nfl/react-helmet
This react helmet?
I don't think the library is maintained anymore + https://github.com/nfl/react-helmet/issues/707
GitHub
GitHub - nfl/react-helmet: A document head manager for React
A document head manager for React. Contribute to nfl/react-helmet development by creating an account on GitHub.
GitHub
React Helmet Meta descriptions are not updated on Google Search Ā· I...
Hi all, I implemented React Helmet on my static React website that is hosted on Netlify and the titles have changed successfully so that when the user is on /contact, the title is "Let's T...
So it seems I need to rely on server side rendering.
I have the data in markdown which I would want to display as pages. This issue of not able to have proper meta tags, is holding me back on SEO optimisation.
On a different option, can have another server say in next JS, be able to use the authentication. Idea is to have page rendered via nextjs, but one of the API ( which gives full content) be visible only if authenticated.
Let's see what @miho can say here, he's a lot more knowledgeable than I am š
@NEROX shared his setup that worked for him (I maybe wrong, maybe it's not the same problem): https://ptb.discord.com/channels/686873244791210014/1308427203641344031/1308447631344799745
From what I've been testing, I've only been able to use the meta image I've defined in the head of
main.wasp
The og images do not work with helmet async.
The solution is SSR (or maybe React V19 which allows to add SEO tags directly when Wasp supports it).Right so it is same issue I am facing.. I want to add meta tags for each of the page and different to what is in main.wasp
@kapa.ai is there a wasp github issue that addresses meta tags for each route or page rather than just in the app.head property?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Yes, there is a GitHub issue that addresses the need for meta tags for individual routes or pages in Wasp, rather than just using the app.head property. The issue is titled "Add 'SEO' section in our docs" and can be found here:
Add "SEO" section in our docs
This issue acknowledges the current limitations of SEO in Wasp and plans to explain how users can set meta tags for individual pages. The issue description mentions:
1. Explaining the current state of SEO in Wasp
2. Describing how to set meta tags for the landing page using the
head property
3. Outlining future plans for SEO improvements
While this issue doesn't directly implement the feature, it recognizes the need for better documentation and future improvements regarding page-specific meta tags.
It's worth noting that this issue is related to another one that discusses the broader topic of server-side rendering (SSR) and static site generation (SSG):
Figure out our plan for SSR / SSG, also SEO
These issues indicate that the Wasp team is aware of the limitations in the current SEO capabilities and is planning to address them in future updates. For now, the workaround of using React-based solutions like react-helmet, as mentioned in the previous answer, remains the most flexible option for setting page-specific meta tags in Wasp applications.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Vinny (@Wasp), 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?Iām not sure of any other options at the moment. Check out what the bot mentioned above regarding open issues .
Maybe @martinsos knows more about this topic.
Yup https://github.com/wasp-lang/wasp/issues/1910 is a good read with all th elinks from it, specifically usage of react-helmet-async
I have tested but It doesn't work @martinsos . The image is set from the header of
main.wasp not from the helmet-async of the pageMy bad I haven't read the whole convo here!
Ok, I wasn't aware that helmet-async doesn't work in that case.
Actually let's try to be systematic here. @NEROX , I remember you said some time ago that you had good success with react-helmet-async, for meta tags, right? Is that still correct?
On the other hand, you say now that it doesn't work for the opengraph (og) images -> so is that a "special" case of when it doesn't work, or does it also not work for other meta tags then?
The question is also, why doesn't it work? Because the parsers that parse opengraph images don't wait for JS to render?
As for solutions -> yeah, React 19 might already solve it for us, if not, then SSR is the way to go. We will be adding both to Wasp in the upcoming time, but I can't promise exactly when yet.