Skip to content
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 twitter logo github logo ・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...

twitter logo DISCUSS (7)
Discussion
markdown guide
 

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.

 

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.

 

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.

 

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?

 

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

 
 

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.

Classic DEV Post from Jul 26 '19

🎩 JavaScript Enhanced Scss mixins! 🎩 concepts explained

In the next post we are going to explore CSS @apply to supercharge what we talk about here....

Pacharapol Withayasakpunt profile image
Currently interested in TypeScript, Vue, Kotlin and Python. Looking forward to learning DevOps, though.