Comments (16)
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 }}">
from inertia-laravel.
@connecteev All good! Glad you got the answers you needed. 💪
from inertia-laravel.
Totally, we mention this in the docs here: https://inertiajs.com/server-side-rendering 👍
from inertia-laravel.
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
from inertia-laravel.
I published the implementation details here
Thanks, I'll read it in incognito mode. I'm out of free stories
from inertia-laravel.
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
from inertia-laravel.
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.
from inertia-laravel.
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. 🤷♂
from inertia-laravel.
@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!
from inertia-laravel.
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
from inertia-laravel.
@reinink , My bad I had forgotten about that part of the docs. Thank you for your support and good work
from inertia-laravel.
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.
from inertia-laravel.
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.
from inertia-laravel.
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:
from inertia-laravel.
I published the implementation details here
from inertia-laravel.
A new approach to use with <Head>
https://luiyongsheng.medium.com/laravel-inertiajs-seo-workaround-late-2021-a1356bed6d29
from inertia-laravel.
Related Issues (20)
- redirection to /dashboard after login does not work HOT 1
- Prevent a webpage from navigating away HOT 1
- Release notes for 1.0 could make it more clear that "Fix URL generation (#592)" is a breaking change HOT 5
- Ziggy2.0 and Laravel11 and Breeze for Inertia + React, TypeScript and SSR starter kit throws error on initial setting HOT 2
- assertInertia() fails when testing Inertia visits HOT 1
- Inertia components/hooks wrapped with redux Provider stopped working HOT 2
- client-side validation libraries HOT 1
- SSR high CPU usage HOT 1
- Serve Connection Reset HOT 1
- Default Layout HOT 1
- adding to HandleInertiaRequests->share array no longer works in version 1.2.0 HOT 5
- Running inertia:start-ssr continuosly fails with message 'Node.js v18.19.0' HOT 2
- Popups instead of redirects due to the first response to API request is randomly returned as "200 text/html" HOT 1
- Partial reload behaviour change in 1.1.0 causes lazy attributes not to be reloaded correctly HOT 2
- PreserveScroll not working without PreserveState for inertia form HOT 1
- How to update favicon, meta tags like descripiotn, keywords, openGraph(og) etc. HOT 1
- Using inertia component inside blade file HOT 1
- inertia returning encoded html in output for data-page HOT 5
- Problem with URL generation HOT 2
- SSR Not Rendering Content After Changing Default Port HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from inertia-laravel.