Hello friends Is there any guide to make inertia.js app seo friendly with all meta desc og twitter

githubtagh commented 4 years ago

Hello friends Is there any guide to make inertia.js app seo friendly with all meta desc og twitter For noob developers stp by step and how to config it

ScottyRobinson commented 4 years ago

Hello friends Is there any guide to make inertia.js app seo friendly with all meta desc og twitter For noob developers stp by step and how to config it

You could just do it client-side? If you're using Vue, you could use Vue Meta.

claudiodekker commented 4 years ago

Hi,

Theoretically, there's two parts to implementing this. First, and definitely the most important parts, is to render the tags as part of your Laravel Blade view:

<html>
<head>
<title>Title of your content here</title>
<meta name="description" content="Description of your content here" />

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Title of your content here" />
<meta property="og:description" content="Description of your content here" />
<meta property="og:url" content="https://example.com/yourcontent.html" />
<meta property="og:image" content="https://example.com/yourimage.jpg" />
<meta property="og:site_name" content="The name of your site" />

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Title of your content here"/>
<meta name="twitter:description" content="Description of your content here"/>
<meta name="twitter:site" content="@yourusername"/>
<meta name="twitter:image"content="https://example.com/yourimage.jpg"/>
<meta name="twitter:creator" content="@yourusername"/>
</head>
<body>
    @inertia
</body>
</html>

To keep things simple, I've only included the tags relevant to your request. Basically, the twitter:-prefixed meta tags are those for Twitter, whereas the og:-prefixed ones are for OpenGraph, which basically means Facebook and might include some others. While these social tags don't have a direct impact on your SEO rating, the other two (title & description) do.

Since a normal browser visit (as well as SEO bots, Twitter & Facebook sharing etc.) make regular full-page browser requests (meaning, a page with with no special Inertia headers or data), it's important to make sure that these meta-tags are always there. For this reason, I suggest that you add them to your Blade Template, similar to the example above.

While I did say that these tags don't have a direct impact on your SEO rating, and because this 100% covers the 'sharing' part (where the functionality of these tags becomes relevant), you could argue that this is all you need to do.

However, if you do specifically care about the very small possibility that these tags become relevant for SEO later, then we'll need to do a bit more. The reason for this, is because Google (and possibly other bots) are able to crawl Single Page Apps these days.

What this means, is that if we change our page using an Inertia Request, the meta-tags will be outdated, because we've only set them initially using blade. To solve this, we'll need to manually 'update' the tags once the page itself changes.

In this comment, I've outlined why this is happens, as well as a couple of possible approaches to solving this (in VueJS), one of which (like @ScottyRobinson already suggested above) is using vue-meta. However, if you decide to go for one of the DIY-solutions instead, you'll need a bit more than just being able to update document.title. As such, here's a direct example of how you could these (slightly more complex) meta-tags:

mounted() {
    document.querySelector('meta[name="twitter:title"]').setAttribute('content', 'Welcome to my Inertia App!');
    document.querySelector('meta[property="og:title"]').setAttribute('content', 'Welcome to my Inertia App!');
}

Finally, to test these tags, you can go to the Twitter Card Validator, as well as to the Facebook Sharing Debugger. Do keep in mind that your changes will need to be publicly reachable / deployed.

Good luck!

reinink commented 4 years ago

You might also want to check out this page, which has some recommendations on how to do server-side rendering. In short though, Inertia.js does not currently support server-side rendering.

chongkan commented 7 months ago

I wanted to maintain the CSR/SPA nature of the stack, looked at the mentioned SSR docs but for inertia.js it seems there is no way to do SSR on certain pages only.

My DIY solution after researching for a while is as follows:

1) in app.blade.php

`` html

<meta name="description" content="{{ session('meta_description', 'Default Description') }}">
<meta property="og:title" content="{{ session('meta_title', 'Default Title') }}">
<meta property="og:description" content="{{ session('meta_description', 'Default Description') }}">
<meta property="og:image" content="{{ session('meta_image', 'Default Image URL') }}">
<meta property="og:url" content="{{ session('meta_url', 'Default URL') }}">
<!-- Add more OG tags as needed -->
@routes
@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
@inertiaHead

`` 2) in your controllers or routes, set the session vars before rendering the Inertia view.

schnetzi commented 5 months ago

For anyone getting here from google looking for the same answer as me 🙈 . You can pass view data to the app blade template: https://inertiajs.com/responses. Then there is no need for using the session for that.

jjdreba commented 2 months ago

For anyone getting here from google looking for the same answer as me 🙈 . You can pass view data to the app blade template: https://inertiajs.com/responses. Then there is no need for using the session for that.

abolsute legend thanks. I skimmed trough the inertia docs but did not find it initially

inertiajs / inertia-laravel

Hello friends Is there any guide to make inertia.js app seo friendly with all meta desc og twitter #125