GatsbyJS (ridiculously fast and generic SEO compliant)

we’ve been working on a fairly large ecommerce project, a SPA built with Wappler, which will see the light of the day pretty soon (sneak peak here).

we’ve had severe problems with setting up Google Structured Data (JSON-LD) using native Wappler tools - we had to write custom JS to achieve that. (will share more on this in the coming weeks)

while researching on Javascript SEO, i stumbled upon GatsbyJS.
websites made with Gatsby (showcase here) are ridiculously fast and are full SEO complaint without requiring any JS intervention - so the likes of FB OpenGraph and Twitter Cards are supported on dynamic websites made with Gatsby - which is, to the best of my knowledge, is not currently possible on a SPA website made with Wappler.

now, all the technical stuff that is under the hood - i do not understand that at all!
but Gatsby websites have insane UX.
i guess sooner or later, we will see a visual builder for Gatsby.

the discussion I would like to open here is - how can we make similar websites with Wappler with what Wappler offers currently?
OR
how can Wappler be improved to be able to deliver such a performance which is also SEO compliant out of the box with not just Google, which can read through complex JS, but also the likes of FB OpenGraph which does not process JS.

maybe the answer is quite clear as day - but pardon me for not being technically adept enough to be able to see it - help/guidance appreciated.

1 Like

inviting @wappler_ambassadors, @George, @Teodor & @patrick for their thoughts please.

Hello @nshkrsh
Gatsby is a static site generator based on react :slight_smile: i don't think we have anything in common with it at all.
Also you mention the UX - but the design of the sites is not related to Gatsby itself ... same as for Wappler, you can make beautiful sites and you can also build bad-looking websites :slight_smile: and nothing really limits you, except your creativity.

There are tons of similar tools / static site generators like Hugo or Jekyl etc.

The sites built with Wappler are in no way having SEO issues ...
If you are referring to Facebook/Twitter not being able to render javascript code, that's a totally different thing there's nothing we can do about this. You can use php code for such cases, but that is not related to SEO.

2 Likes

Things I like about Gatsby.js:

GraphQL :slight_smile:

1 Like

there are multiple dynamic websites built with gatsby: https://www.shopflamingo.com/, https://labnol.org

by UX i meant the UX in terms of speed - how fast is switching between pages and content loads. obviously, the servers have a good role to play in it - but still the underlying framework contributes to it significantly as well.

Wappler websites certainly do not have SEO issues - it’s just that there are no native Wappler ways to config Structured Data - we had to use custom JS to do this - if there, am all ears to learn those.
also, there are no direct ways to manage simpler stuff like title and description tags natively in Wappler - we have to make manual changes in code view to achieve it - which is not very desirable for a visual builder - something to improve upon i believe.

but yeah, a Wappler SPA website not being compatible with the likes of FB OpenGraph is a problem in my understanding - which Gatsby seems to have solved. maybe Wappler can do nothing about it - but from a Wappler user perspective, it is something we’d like to have a solution for - again technical infeasibility is something i do not grasp very well - am just pushing the limits here for the greater good.
if someone else can work with that, why can’t Wappler?

and this is a site created in Wappler

Performance is a bit on the downside, partially because of external links to YouTube and partially because I have not applied GZip to the page which is a matter for the server and not the program.

3 Likes

Gatsby can only consume from data sources. It can't write to those sources. You still need a server component in order to do that securely which will add a layer of "slowness".

2 Likes