Need help making site SEO friendly
Hey everyone! 👋
I am super pumped. I've been spending the last 6 months or so teaching myself Vue to build a project I am really excited about. 😃
The problem: I didn't think about SEO until now 🤯
I need help (to be pointed in the right direction) making my site SEO friendly. I've looked into Nuxt, but I don't think it solves for my use case.
To simplify, I have all my data stored in Airtable. I have 'Instructor' pages created for each 'Instructor' in my Airtable base. For example, 'www.example.com/instructor/1234' and 'www.example.com/instructor/5678'. I currently have hundreds of different 'Instructor' pages and will eventually have thousands, so hardcoding in routes is likely not feasible. I have Firebase set up for a cloud function currently, so I would be 100% open to using that to create a new function for some sort of server-side rendering or prerendering, I just have zero idea where to start/look.
🔭 2020 is looking like it will be a great year. 🧠
♻️Happy to swap services as well! I do paid advertising in my day job. ♻️
Edit: I decided to go the dynamic rendering route using Rendertron.. It should solve the problem for Googlebot, without needing to completely refactor. I will update once I implement with any news to close the loop.
Switching to Nuxt from existing Vue app is really easy. Generally it should not take more than a day.
Nuxt or another good static site generator is definitely the way to go! I am a react guy so I use Gatsby but I know there are good alternatives with Vue. Creating pages programmatically (with a slug like volkandkaya said) should not be a problem. Check the docs. That is such a common use case you will find this easily.
Alternatively, I know you can prerender your app with netlify but I have never really tried that functionality. If you try it, let us know how it feels.
Will do. I previously used Netlify for a past project and felt it was very clunky and hard for me to use—so I opted for Firebase Hosting for this one. I already built it without Nuxt from the ground up and don't want to restart so I will look more into Nuxt SSR to see if I can add it on top without starting over. If that does not work it looks like prerender.io could work? But it feels odd to pay for this service.
My experience with netlify is pure joy. You can use the cli, connect your GitHub repo (for continuous deployment) or simply drop your files in your admin UI. I can't think of more convenient ways to work.
That is not a criticism. I am just wondering if you explored it enough.
As for refactoring your code, I can't speak for nuxt but if I had to refactor a react app to Gatsby it would not take me too much time. Of course Gatsby if my everyday playground. I guess it depends what you want to learn next but if you are planning to make websites, my personal opinion is that learning to use a static site generator is the way to go.
In web dev its called a slug, so each instructor will each instructor will default to their first and last name or their company name.
You can allow them to edit that and store that value in the database. Then use that for the url so
'www.example.com/instructor/{slug}'
Yes, they all have their own slug currently. The issue is there is no static HTML files for the pages—all data is pulled from my database and the pages are dynamically generated.
Google can index dynamically generated pages.
I guess this article may be useful: https://vuejsdevelopers.com/2018/04/09/single-page-app-seo/
I know Google claims it does but in my experience that is not really the case.