Handling meta tags for sites that care about Server-side-rendering and SEO about inertia-laravel

[reinink]

Hey there! Thanks for your interest in Inertia. From the readme:

Accessing data in root template

There are situations where you may want to access your prop data in your root Blade template. For example, you may want to add a meta description tag, Twitter card meta tags, or Facebook Open Graph meta tags. These props are available via the $page variable.

<meta name="twitter:title" content="{{ $page['props']['event']->title }}">

Sometimes you may even want to provide data that will not be sent to your JavaScript component. You can do this using the withViewData() method.

return Inertia::render('Event', ['event' => $event])->withViewData(['meta' => $event->meta]);

You can then access this variable like a regular Blade variable.

<meta name="description" content="{{ $meta }}">

[reinink]

@connecteev All good! Glad you got the answers you needed. 💪

[reinink]

Totally, we mention this in the docs here: https://inertiajs.com/server-side-rendering 👍

[StanleyMasinde]

Set title at Controller

This will be rendered server-side

If you use inertia-link to let users navigate around at frontend, you may also need to do this:

This would be very helpful

[StanleyMasinde]

I published the implementation details here

Thanks, I'll read it in incognito mode. I'm out of free stories

[luismabenitez]

following this thread.
What about if we want to use a $page.props as a title? just an example:
metaInfo: { title: this.meta_title },

always return an undefined data.

I'm using a prop to manage translations for the title.

cc @reinink

[connecteev]

Thanks @reinink I'm a bit confused by this response ^^^ and the one you replied to a few days ago over email (below). There you said:

If SEO is important, than Inertia.js probably isn't the right choice. Inertia.js is more intended for web apps and admin control panels where SEO isn't an issue.

Inertia.js is different than Nuxt in that you don't need to create an API. You simply have one code base, with controllers and server-side routing. However, the big win is that Inertia.js allows you to build an entirely JavaScript based SPA front-end.

I think if I was building an app that had SEO concerns, I'd probably just stick with Blade views, and then drop in Vue components where extra functionality is needed.

Zooming out a bit, I keep coming back to, can Inertiajs be used for SSR? Can I ditch Nuxt -> Laravel APIs and just go with InertiaJs+Laravel? SEO is hugely important for my app....and if I can get away with a pure Laravel approach, Intertiajs would simplify my tech stack if it can support SSR.

[reinink]

Which parts of what I said are you confused about?

I feel like I am being pretty clear that Inertia doesn't do SSR right now, and that if SEO is a concern for you, it may not be the right choice, at this time.

Yes, it would be great if it did SSR out of the box, but that's going to take time and effort to research, test and implement. It's on our long-term roadmap to look at more closely, but it isn't a priority for the framework at this time.

My answer above specifically just shows you how to set meta tags. However, that still doesn't make it SEO-friendly. The content is still all within JavaScript, which search engines may, or may not read properly.

Sorry I cannot be more helpful. 🤷‍♂

[connecteev]

@reinink Sorry, I didn't mean to come off as complain-y or ungrateful!

Thanks for your detailed responses and thanks for the work you are doing. It means a lot...I was just genuinely confused, but your last answer clarifies it and makes it crystal!

I do need SSR so I (unfortunately) can't use inertia right now. If that roadmap changes, you can color me VERY interested. In the meantime, thanks again...and inertia will be my top choice for a SPA app!

[StanleyMasinde]

I know the issue is closed, but I came across this service that I know might help in SEO of inertia apps.

Prerendering
This is can be achieved by using middleware in your application that tells if the user is real of a web crawler like Google bot. If it is a crawler, we send it the pre-rendered HTML for Easy SEO.

Check it out this service prerender.io.
I hope it helps someone

[StanleyMasinde]

@reinink , My bad I had forgotten about that part of the docs. Thank you for your support and good work

[luiyongsheng]

Suggestion:
You may try the combination of butschster/meta-tags and vue-meta package.

vue-meta will handle the meta info changes when user navigating at frontend dynamically.

butschster/meta-tags will help on SEO when crawlers crawl your website.

[StanleyMasinde]

Suggestion:
You may try the combination of butschster/meta-tags and vue-meta package.

vue-meta will handle the meta info changes when user navigating at frontend dynamically.

butschster/meta-tags will help on SEO when crawlers crawl your website.

How would that work 🤔. Do you have some kind of demo?

I still think that inertia is not for you if you care much about SEO. I use it in Dashboards.

[luiyongsheng]

Set title at Controller

This will be rendered server-side

If you use inertia-link to let users navigate around at frontend, you may also need to do this:

[luiyongsheng]

I published the implementation details here

[luiyongsheng]

A new approach to use with <Head> https://luiyongsheng.medium.com/laravel-inertiajs-seo-workaround-late-2021-a1356bed6d29