![Cover image for [Unresolved] Does anyone know how to make SPA work with SEO meta tags?](https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fymjsyq1u00re3ti98t54.png)
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.
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...
Top comments (7)
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.
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.
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.
Can you please give an example on how do this in any backend, when the frontend is an SPA?
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..
This video may help you :
youtu.be/pwHdFPEX4NA
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.