DEV Community

loading...
Cover image for [Unresolved] Does anyone know how to make SPA work with SEO meta tags?

[Unresolved] Does anyone know how to make SPA work with SEO meta tags?

patarapolw profile image Pacharapol Withayasakpunt ・1 min read

I specifically mean SERP on Google, Facebook link previews, and Twitter previews.

The related packages are Vue Meta, React Helmet.

Or JavaScript rendered meta tags.

react-seo-fails

Isn't it infuriating to see a lot of "Web site created using create-react-app"? Even non-SEO-expert novice webdevs shouldn't fall into this trap...

Discussion (7)

pic
Editor guide
Collapse
pchauhan13 profile image
Prashant Singh Chauhan

Yes, if you need to show data on any social media posts from the link directly then you will have to either use the prerendering services or use Server Side rendering. Otherwise, the social sharing will not work.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt Author

prerendering services

I know that that is prerender-spa-plugin, but still, it is problematic for asyncData, especially for APIs. Nuxt.js solves this. But sometimes I want to use simply Vue CLI.

Collapse
pchauhan13 profile image
Prashant Singh Chauhan

Yes, Nuxt.js will solve it but other than using server side rendering in vue, vue cli won't be able to do much for you.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt Author

the prerendering services or use Server Side rendering

Can you please give an example on how do this in any backend, when the frontend is an SPA?

Collapse
blueboy6 profile image
BlueBoy6

SPA's sites are not compatible with seo sadly. However you can try to do something with a NodeJS and the react functions like rendertostring and hydrate but it's a lead, i already tried and doesn't work..

Collapse
ahmedx10 profile image
Mobeen Ahmad

This video may help you :
youtu.be/pwHdFPEX4NA

Collapse
patarapolw profile image
Pacharapol Withayasakpunt Author • Edited

Close enough. But the tutorial doesn't tell how to pull from GraphQL / REST API / async, i.e. use Vue CLI to emulate Gridsome.

I prefer REST API, anyway; which is not the case for Gridsome / Gatsby.

Nuxt.js has its own set of problems, if you want SSG.