search

inertiajs / inertia-laravel

The Laravel adapter for Inertia.js.
https://inertiajs.com
MIT License
2.08k stars 234 forks source link

Handling meta tags for sites that care about Server-side-rendering and SEO #45

Closed connecteev closed 5 years ago

connecteev commented 5 years ago

Installing pingcrm and viewing the source for any of the pages (contacts, organizations, etc does not show any meta tag content for SEO in the <head> element.

I also found this PR here: https://github.com/inertiajs/inertia-laravel/pull/8 but it's unclear to me how to do this.

I want to be able to support the following SEO tags if the source is viewed, so that the search engine crawler sees the tags when it indexes the page.

If this is indeed supported, possible to update https://github.com/inertiajs/pingcrm with an example? These are the SEO tags I am considering (comprehensive list, but picking just one, like should suffice for demo purposes)

    <title></title>

    <link rel="canonical" href="" />

    <meta name="robots" content="index, follow" />
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="last-updated" content="2019-07-24 00:43:07 UTC">
    <meta name="environment" content="production">
    <meta name="user-signed-in" content="">
    <meta property="og:type" content="" />
    <meta property="og:url" content="" />
    <meta property="og:title" content="" />
    <meta property="og:description" content="" />
    <meta property="og:site_name" content="" />
    <meta name="twitter:site" content="">
    <meta name="twitter:creator" content="">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:card" content="">
    <meta name="twitter:widgets:new-embed-design" content="on">

    <meta property="og:image" content="" />
    <meta name="twitter:image:src" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-title" content="">
    <meta name="application-name" content="">
    <meta property="fb:pages" content="" />
    <meta name="theme-color" content="#000000" />
reinink commented 5 years ago

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 }}">
connecteev commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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!

reinink commented 5 years ago

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

StanleyMasinde commented 4 years ago

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

reinink commented 4 years ago

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

StanleyMasinde commented 4 years ago

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

luiyongsheng commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Set title at Controller image

This will be rendered server-side image

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

StanleyMasinde commented 3 years ago

Set title at Controller image

This will be rendered server-side image

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

This would be very helpful

luiyongsheng commented 3 years ago

I published the implementation details here

StanleyMasinde commented 3 years ago

I published the implementation details here

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

luismabenitez commented 3 years ago

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

luiyongsheng commented 3 years ago

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