How do you deal with Seo when using Vue with Laravel(SPA)

SEO in the context of Vue with Laravel can be a bit tricky, but it's definitely doable. When it comes to handling meta tags for your Vue app integrated with Laravel, you'll want to use server-side rendering (SSR) to ensure that search engines can crawl and index your content effectively. This helps maintain good SEO practices.As for experienced users, I'd recommend reaching out to the experts at Digital Marketing Agency Los Angeles. They have a wealth of knowledge and experience in the field, and they can provide you with valuable insights and guidance on optimizing your Vue and Laravel setup for SEO.

I'm use @unhead/vue package

I kinda evolved into a bit of a system for this problem. I needed not just SSR - but I needed a true unchanging meta title/description from first response to full takeover by vue on the client side for all pages that aren't requiring authentication.

So here's how it works (Using Laravel Jetstream in this example) - for any fellow keep it vue-ers:

First off is a ./config/metadata.php file:

<?php

$defaultTitle = 'Example.com - Examples for Devs';

$defaultDescription = 'Lorem ipsom dolar si amet.';

$suffixTitle = ' | ' . $defaultTitle;
$suffixBrand = ' | Example.com';
$suffixBrandLong = ' | example.com Examples for Devs';

return [
    'author' => 'Some Author',
    'defaults' => [
        'title' => $defaultTitle,
        'description' => $defaultDescription,
    ],
    'titles' => [
        'profile' => 'My Account Settings' . $suffixBrandLong,
        'auth' => [
            'login' => 'Login' . $suffixTitle,
            'logout' => 'Logout' . $suffixTitle,
            'register' => 'Register' . $suffixTitle,
            'confirmPassword' => 'Secure Area: Confirm My Password' . $suffixTitle,
            'forgotPassword' => 'Forgot My Password' . $suffixTitle,
            'resetPassword' => 'Reset My Password' . $suffixTitle,
            'twoFactorChallenge' => 'Two-factor Confirmation' . $suffixTitle,
            'verifyEmail' => 'Email Verification' . $suffixTitle,
        ],
        'dashboard' => 'My Dashboard' . $suffixTitle,
        'teams' => [
            'create' => 'Create Fight Crew' . $suffixTitle,
            'show' => 'Fight Crew Settings' . $suffixTitle,
        ],
    ],
    'descriptions' => [
        'profile' => $defaultDescription,
        'auth' => [
            'login' => $defaultDescription,
            'logout' => $defaultDescription,
            'register' => $defaultDescription,
            'confirmPassword' => $defaultDescription,
            'forgotPassword' => $defaultDescription,
            'resetPassword' => $defaultDescription,
            'twoFactorChallenge' => $defaultDescription,
            'verifyEmail' => $defaultDescription,
        ],
        'dashboard' => $defaultDescription,
        'teams' => [
            'create' => $defaultDescription,
            'show' => $defaultDescription,
        ],
    ],
    'facebook' => [
        'app' => [
            'id' => ''
        ],
        'image' => '',
        'type' => 'article',
    ],
    'twitter' => [
        'author' => '@some_user',
        'image' => '',
        'site' => '@some_user',
        'type' => 'summary',
    ],
];

Next up, is a custom Helper ./app/Helpers/Metadata.php class file:

<?php

namespace App\Helpers;

use Illuminate\Http\Request;

class Metadata
{
    // ORIG APPROACH REF: https://dev.to/hazzazbinfaiz/trick-to-make-laravel-inertia-seo-friendly-3h3j

    /**
     * The instance metadata descriptions
     */
    protected static $descriptions = '';

    /**
     * The instance metadata titles
     */
    protected static $titles = '';

    /**
     * Add metadata lines of markup to titles/descriptions
     */
    public static function addTitlesAndDescriptions(string $title, string $description): void
    {
        static::$titles = static::titleTag($title);

        static::$titles .= static::metaTag('twitter:title', $title);
        static::$titles .= static::metaTag('og:title', $title);

        static::$descriptions = static::metaTag('description', $description);
        static::$descriptions .= static::metaTag('twitter:description', $description);
        static::$descriptions .= static::metaTag('og:description', $description);
    }

    /**
     * Create a meta tag markup line of code
     */
    public static function metaTag(string $name, string $value): string
    {
        return '        <meta inertia head-key="' . $name . '" name="' . $name . '" content="' . $value . '" />' . PHP_EOL;
    }

    /**
     * Create a title tag markup line of code
     */
    public static function titleTag(string $value): string
    {
        return '<title inertia>' . $value . '</title>' . PHP_EOL;
    }

    /**
     * Render out all metadata as a string
     * Reset the rendered variables
     * Return the output lines of concatenated code
     */
    public static function render(): string
    {
        $output = static::$titles . static::$descriptions;

        static::destroy();

        return $output;
    }

    /**
     * Reset the class titles/descriptions
     */
    public static function destroy(): void
    {
        static::$titles = '';
        static::$descriptions = '';
    }

    /**
     * Reset the class titles/descriptions
     */
    public static function handleJetstreamInertiaRequests(Request $request): void
    {
        if ( $request->getRequestUri() === '/account-settings' )
        {
            Metadata::addTitlesAndDescriptions(
                config('metadata.titles.accountSettings'),
                config('metadata.descriptions.accountSettings')
            );
        }
        else if ( $request->getRequestUri() === '/login' )
        {
            Metadata::addTitlesAndDescriptions(
                config('metadata.titles.auth.login'),
                config('metadata.descriptions.auth.login')
            );
        }
        else if ( $request->getRequestUri() === '/logout' )
        {
            Metadata::addTitlesAndDescriptions(
                config('metadata.titles.auth.logout'),
                config('metadata.descriptions.auth.logout')
            );
        }
        else if ( $request->getRequestUri() === '/register' )
        {
            Metadata::addTitlesAndDescriptions(
                config('metadata.titles.auth.register'),
                config('metadata.descriptions.auth.register')
            );
        }
        else if ( $request->getRequestUri() === '/teams/create' )
        {
            Metadata::addTitlesAndDescriptions(
                config('metadata.titles.teams.create'),
                config('metadata.descriptions.teams.create')
            );
        }
        else if ( preg_match("/\/teams\/\d+/i", $request->getRequestUri()) )
        {
            Metadata::addTitlesAndDescriptions(
                config('metadata.titles.teams.show'),
                config('metadata.descriptions.teams.show')
            );
        }

    }

}

And with those pieces, we can hop over to the ./app/Http/Middleware/HandleInertiaRequests.php file, and update the share() method with our new stuff:

use App\Helpers\Metadata;

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request): array
    {
        Metadata::handleJetstreamInertiaRequests($request);

        return [
            ...parent::share($request),
            'ziggy' => fn () => [
                ...(new Ziggy)->toArray(),
                'location' => $request->url(),
            ],
            'metadata' => fn () => config('metadata'),
        ];
    }
}

Now moving on to a Controller for a page, here's a ./app/Http/Controllers/DashboardController.php class file:

use App\Helpers\Metadata;
use Inertia\Inertia;
use Inertia\Response;

class DashboardController extends Controller
{
    /**
     * Display the view.
     */
    public function index(): Response
    {
        Metadata::addTitlesAndDescriptions(
            config('metadata.titles.dashboard'),
            config('metadata.descriptions.dashboard')
        );

        return Inertia::render( 'Dashboard', [
           // "some_data" => "",
        ]);
    }
}

And nearing the finish line, the app's core blade base file then looks something like this:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Metadata Titles & Descriptions -->
        {!! \App\Helpers\Metadata::render() !!}

        <!-- Metadata Content Types -->
        <meta name="twitter:card" content="{{ config('metadata.twitter.type') }}" />
        <meta property="og:type" content="{{ config('metadata.facebook.type') }}" />

        <!-- Metadata Site Author -->
        <meta name="twitter:site" content="{{ config('metadata.twitter.site') }}" />

        <!-- Metadata URL -->
        <meta property="og:url" content="{{ url('') }}" />

        <!-- Metadata Identification -->
        <meta property="og:site_name" content="{{ config('app.name') }}" />
        <meta property="fb:admins" content="{{ config('metadata.facebook.app.id') }}" />

        <!-- more, and more, and more metadata here... -->
       
        <!-- Scripts -->
        @routes
        @vite(['resources/js/app.ts', "resources/js/Pages/{$page['component']}.vue"])
        @inertiaHead

    </head>

    <body>
        @inertia
    </body>

</html>

And last but not least, in a final Vue sense, it's a good idea to bake this common scenario into a layout component. So the Jetstream ./resources/js/Layouts/AppLayout.vue file might look like this:

<!-- ./resources/js/Layouts/AppLayout.vue -->

<script lang="ts">

    import { defineComponent } from 'vue'

    import HeadMetadata from '../Components/metadata/HeadMetadata.vue'

    export default defineComponent({

        components: {
            HeadMetadata,
        },

        props: {
            title: {
                type: String,
                default: '',
            },
            description: {
                type: String,
                default: '',
            },
        },

    })

</script>

<template>

    <div>

        <HeadMetadata
            :title="title"
            :description="description"
        />

        <div>

            <!-- Page Content -->
            <main>
                <slot />
            </main>

        </div>

    </div>

</template>

The above referenced ./resources/js/Components/metadata/HeadMetadata.vue file looks like this:

<script lang="ts">

    import { computed, defineComponent } from 'vue'
    import { usePage } from '@inertiajs/vue3'

    import { Head } from '@inertiajs/vue3'

    export default defineComponent({

        components: {
            Head,
        },

        props: {
            title: String,
            description: String,
        },

        setup (props) {

            const pageProps = computed( () => usePage().props )

            const computedTitle = computed( () => {
                return props.title ? props.title : pageProps.value.metadata.defaults.title
            })

            const computedDescription = computed( () => {
                return props.description ? props.description : pageProps.value.metadata.defaults.description
            })

            return {
                computedDescription,
                computedTitle,
                pageProps
            }
        },

    })

</script>

<template>

    <Head :title="computedTitle" :description="computedDescription">

        <title>{{ computedTitle }}</title>
        <meta head-key="twitter:title" name="twitter:title" :content="computedTitle" />
        <meta head-key="og:title" property="og:title" :content="computedTitle" />

        <meta head-key="description" name="description" :content="computedDescription" />
        <meta head-key="twitter:description" name="twitter:description" :content="computedDescription" />
        <meta head-key="og:description" property="og:description" :content="computedDescription" />

    </Head>

</template>

And to finally wrap everything together in a ./resources/js/Pages/Dashboard.vue page file, would look something like this:

<script setup lang="ts">

    import { computed } from 'vue'
    import { usePage } from '@inertiajs/vue3'

    import AppLayout from '../Layouts/AppLayout.vue'

    const pageProps = computed( () => usePage().props )

</script>

<template>

    <AppLayout
        :title="pageProps.metadata.titles.dashboard"
        :description="pageProps.metadata.descriptions.dashboard"
    >

        	<!-- Awesome app with smashing SEO goes here! -->

    </AppLayout>

</template>

Thank you for coming to my DEV talk. Hope this helps someone. Might add it into my VILT-DS lib, because once it's wired up, it's kinda awesome. In VILT-DS, I could just add it to the install scripts. Then this would be ready out of the box!

This approach pushes the SEO data down from the PHP side via the blade file, then matches the data in the client side via Vue via Inertia. What's cool is you can even process data, for a meta title with a specific name in it for example, then push that down as metadata from PHP like normal, but now modify the config in the response with a new one that overrides the value for the specifically named page in the config data that's normally just dumped down to the client from the HandleInertiaRequests injection of the metadata config earlier in the request.

So it's seamless SEO, even for dynamic db pages. It works with and without SSR, but obviously SSR is better as it sends down the correct markup before Vue takes over. SSR and this approach together though... are all the control I could ever need for a product or client.

But after putting all this here, it's way more involved than I realized. fml.