Laravel InertiaJS SEO workaround

2 min readJan 28, 2021

I’ve published a new approach that does not require Vue Meta package.

I noticed an issue(#45) raise on Github regarding server-side rendering and SEO.
According to the official documentation of InertiaJS, server-side rendering is not supported at the moment. However, there is a way to work around it!

0. Packages Installation

First thing first, you need to install 2 packages.

vue-meta (npm/yarn)
butschster/meta-tags (composer)

vue-meta will handle metadata at frontend while butscher/meta-tags is for the backend.

npm install -D vue-meta # OR yarn add vue-meta -D
composer require butschster/meta-tags

1. Setup

Backend: Add {!! Meta::toHtml() !!}} inside the <head> tag of your app.blade.php
Frontend: Use vue-meta globally.

// app.js
import VueMeta from 'vue-meta';Vue.use(VueMeta);

2. Server-side Rendering

In my use case, I wanted to add metadata at my legal pages(privacy policy, terms of service, etc.) that are rendered by InertiaJS.
There are routes like:
1. /legal/privacy
2. /legal/terms
Which are all controlled by LegalController.php

Modify code section at LegalController.php

protected $meta;// use Butschster\Head\Contracts\MetaTags\MetaInterfacepublic function __construct(MetaInterface $meta)
{
    $this->meta = $meta
}// Render Inertia Page at /legal/privacy
public function showPrivacy(Request $request)
{
    // ...    $this->meta
        ->setTitle('Privacy Policy - Rentrar')
        ->setDescription('Rentrar’s Privacy Policy describes how Rentrar collects, uses, and shares your personal data. Please take a moment to familiarize yourself with our privacy practices.');    // ...
}

This will allow metadata rendered by the server and feed to SEO crawlers and bots.

3. Client-side Rendering

If you use <inertia-link> to let users navigate around at the frontend, you will notice that on the first load, all metadata including title and description are rendered properly by browser; but when you try to click on other <inertia-link> to navigate, the <title> remain unchanged.

You need vue-meta to handle this.
Add metaInfo() at ./Pages/Legal/Privacy.vue

export default {
    components: {
        LegalLayout
    }
    metaInfo() {
        return {
            title: "Rentrar - Privacy Policy",
            meta: [
                {
                    name: "description",
                    content: "..."
                }
            ]
        }
    }
}

4. Done!

Run your npm script and you are all set!
Of course, there are a bunch of better ways to manage and serve the static string content, this article is only explaining my way to workaround the SEO issue. Feel free to suggest your solution at https://github.com/inertiajs/inertia-laravel/issues/45

Have a nice day and stay safe!
😷

Lui Yong Sheng