Level 1
@zerosandones If you are moving interia consider react + nextjs . because depends an seo it is very helpful. and also next-seo - consider this package for SEO related improvement and features
Jan 8, 2024
16
Level 3
Inertia and SEO
Hello!
I have been working on an app where SEO is essential. I have been using Livewire, which is great--but due to issues that arise from conflicts with using some libraries like flowbite (e.g, component not refreshing after adding wire:ignore because livewire makes a flow bite component to act bad), I am looking to switch to Inertia with vue or react, but I am a bit concerned about SEO.
Is it worth using inertia if one is building an app that depends on SEO? If yes, how does one go about it?
Thanks.
Level 3
@dhanar98 Thanks for your response. Is there any documentation on using Laravel + Inertia + React (Next's)? Just curious about the installation and routing. Any tutorials/blog on this will be great.
I also haven't used Svelte in the past, but I want to try it out. So if there is any way to use inertia and one of these SPA frameworks to build an SEO friendly app, I'd really appreciate it.
P.S: Never worked with Inertia in the past, but I am very excited to, after reading about it. Kudos to the creator(s)!
UPDATE: I have seen that Inertia now has SSR support, and I have found a udemy course, so I'll go ahead and learn from that.
Thanks all!
1 like
Level 35
You can set Inertia up with server side rendering, which is supposed to help with SEO. I am in the process of building an app like that now, but it's too early for me to say how much it affects SEO. Perhaps someone who has an SSR Inertia app in production can share their experience?
4 likes
Level 3
@Ben Taylor True. I think the creator of Laracasts said that they are using inertia under the hood, so I am wondering if they'd be kind enough to share their implementations of SEO.
Level 5
Hi @ben taylor
How was your experience? I'm in the process of building an app where SEO is important. Should I just stick to Blade or consider inertia?
Level 80
@zerosandones If SEO is a concern then I would stick to server-side rendering instead of Inertia.
Even with SSR, you’re still requiring your visitors to download a large amount of JavaScript to render your pages. One signal for SEO is page loading times. Pages load faster if they don’t have to download a load of JavaScript, or hydrate a load of props into components rendered client-side.
3 likes
Level 3
@martinbean Thanks for your input on this. I was watching a video/tutorial where the creator of laracasts mentioned that this app is using inertia under the hood. I think the app is fairly optimized for SEO, and I pray he makes a video on this.
I like the idea of using blade, but some functionalities that requires JS will then need one to make API requests (Maybe I'll just look into this, but trying to avoid it ATM), and I wish livewire didn't have the issues I was experiencing.
Anyhow, thanks.
Level 58
Inertia.js is a framework that allows you to create single-page applications (SPAs) without much of the complexity that comes with modern frontend frameworks. However, SPAs are not inherently SEO-friendly because search engines may have difficulty indexing JavaScript-generated content.
That said, it is possible to make an Inertia.js application SEO-friendly by implementing server-side rendering (SSR) or using a pre-rendering service. Here are a few strategies you can consider:
-
Server-Side Rendering (SSR): SSR is a technique where the initial page content is generated on the server and sent to the client as HTML. This allows search engines to crawl and index the content effectively. You can use SSR with Inertia.js by integrating it with a Node.js server or using a framework like Nuxt.js (for Vue) or Next.js (for React) that supports SSR out of the box.
-
Static Site Generation (SSG): If your application's content does not change frequently, you can pre-render your pages at build time. This means generating static HTML files for each page which can be served directly. This is also SEO-friendly as the content is already available as HTML.
-
Dynamic Rendering: Dynamic rendering is a workaround for serving SEO-friendly content to search engines while keeping the SPA experience for users. It involves detecting search engine crawlers and serving them a server-rendered page while serving the regular SPA to users. This can be achieved using services like Rendertron.
-
Pre-rendering Services: If you don't want to implement SSR or SSG, you can use pre-rendering services like Prerender.io. These services will generate static HTML versions of your pages and serve them to search engines.
-
Meta Tags and SSR: When using SSR, ensure that you dynamically update the meta tags for each page to reflect the content of that page. This is crucial for SEO as it helps search engines understand what the page is about.
-
Structured Data: Use structured data (like JSON-LD) to provide search engines with explicit information about the content on your pages. This can help improve your content's visibility in search results.
Here's an example of how you might dynamically update meta tags in a Vue component when using SSR:
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
</template>
<script>
export default {
head() {
return {
title: this.title,
meta: [
{
hid: 'description',
name: 'description',
content: this.description
}
]
}
},
data() {
return {
title: 'Page Title',
description: 'Page description here...'
}
}
}
</script>
In conclusion, Inertia.js can be used for building SEO-friendly applications, but it requires additional considerations like SSR, SSG, or pre-rendering services. Choose the strategy that best fits your application's needs and resources.
Level 3
And out of curiosity, is there a reason why Laravel doesn't just support Nuxt/Next also in the starter pack, like they do with React and Vue
1 like
Level 1
@zerosAndOnes My guess is that there is not much to do to support those in Laravel. There would be nuxt/next app in a separate repo and Laravel as an API framework. What would you expect to be pre-configured on Laravel side?
Level 3
@ivangretsky I was just thinking making it easy to share sessions/state, but most importantly sessions. This way, I think authentication will be easier and safer? :D
Level 1
@zerosAndOnes I am not really into this yet, but I think that Laravel Passport is the default way to authenticate API access for Laravel. And it is all about tokens not sessions in this case.
Level 3
@ivangretsky I have some experience with API BE and frameworks like Nuxt, and I think Laravel recommends Sanctum. I might just go this direction, in case I have to build a mobile app in the future :D. Thanks!
Level 1
@zerosAndOnes The least amount of frameworks and technologies you include in your stack the better. Complexities you never suspected will arise. I built a Laravel API, sescured with Cookie auth/sessions via Sanctum and then a NextJS front-end with SSR. Honestly the entire process was quite horrible, getting NextJS to correctly maintain the Cookies between server and client side rendering was a pain, setting headers manually etc. IMO Javascript and SSR is just the wrong approach. It feels like we've gone full circle, PHP rendered things server side in the first place. I was hesitant of Livewire in the beggining but i've seen the light, front-end hydration with as-standard SSR, seems like a no brainer to me!
Level 7
Interesting take! I think those are good words of wisdom although the complexity you discuss I think would have been handled for you if you'd chosen React, Vue or Svelte. Laravel has starter kits for each of those, and they handle all the connection between through FE/BE for you automatically through Inertia.
Level 1
Yeah, Inertia can still work for SEO if handled correctly. For better results, you could also visit here: https://mycompanysite.com/pasadena-seo/ for SEO services that focus on site structure, local visibility and optimization to help your app rank higher in search results.
Please or to participate in this conversation.