Laravel InertiaJS SEO workaround Late-2021
No Vue Meta way
I published an article about InertiaJS SEO workaround in early 2021 and quickly gain some traction in the community.
This article is like a 2.0 version of the previous approach as the latest version of InertiaJS now supports features like <Head> .
You are encouraged to read the previous article first.
0x0: Rethink SEO
Most of the crawlers, bots, spiders, whatever that scrape data from your website today still do not support Javascript.
In short, using the Laravel butschster/meta-tags package and inject
{!! Meta::toHtml() !!}in your root view blade file is already sufficient to serve search engine bots well.
According to my experience in several projects, most of the time, the main job of vue-meta in my previous workaround is just only to change the title of the browser when navigating between pages using InertiaJS.
Looking at the new <Head> feature, I decided to abandon vue-meta .
0x1: Prepare your data to serve
As I mentioned, I only need the backend to pass back the title, therefore I modified the share() function in HandleInertiaRequest.php middleware to always pass back the title content whenever an Inertia Request comes in.
To check whether the data sharing is working properly, you can open Vue DevTools in your browser and look for something like this:
0x2: Server-side rendering
In order to use the <Head> feature, you need to add an extra inertia attribute to the <title> tag. So you need to modify the {!! Meta::toHtml() !!} into something like this:
{!! str_replace('<title>','<title inertia>', Meta::toHtml()) !!}0x3: Client-side rendering
Assuming you are using Vue 3, you can import and use the <Head> component like this:
<template>
<Head :title="$page.props.title"/>
<!-- ... -->
</template>
<script>
import { Head } from '@inertiajs/inertia-vue3';export default {
components: {
Head,
}
}
</script>
0x4: Done!
Test using view-source and navigate between pages using InertiaJS <Link> component to check whether the title changed properly.
I understand that the way to extract the title is not elegant enough, hopefully, the package maintainer can come out with a feature that better supports this.
If you have or currently using a better approach, feel free to comment!
Thank you.
