Dealing with the meta seo tag and open graph in Livewire 3 Volt

At beginning I was thinking this is trivial task to do. However, after start working on it I figured it out it's tricky to solve.

The best solution as I see for this is using blade @section, @show, @endsection syntax. Take a look at this example below.

You have layout file like this:

layouts/default.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta charSet="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    @section('metatags')
        <title>{{ config('site.meta.default_title') }} | Coding Wisely</title>
        <link rel="canonical" href="{{ url('/') }}" />

        <meta name="description" content="{{ config('site.meta.description') }}">
        <meta name="keywords" content="{{ config('site.meta.keywords') }}">
        <meta property="og:title" content="{{ !empty($title) ? Str::finish($title, ' | Coding Wisely') : 'Coding Wisely' }}">
        <meta property="og:description" content="{{ config('site.meta.og:description') }}">
        <meta property="og:image" content="{{ asset('CodingWisely.png') }}">
        <meta property="og:url" content="{{ url('/') }}">
        <meta property="og:type" content="{{ config('site.meta.og:type') }}">
        <meta property="og:site_name" content="{{ config('site.meta.site_name') }}">

        <meta name="twitter:card" content="{{ asset('CodingWisely.png') }}">
        <meta name="twitter:title" content="{{ !empty($title) ? Str::finish($title, ' | Coding Wisely') : 'Coding Wisely' }}">
        <meta name="twitter:description" content="{{ config('site.meta.description') }}">
        <meta name="twitter:image" content="{{ asset('CodingWisely.png') }}">
    @show
</head>
<body>
    <div class="flex flex-col min-h-screen">
        <header>Awesome Header</header>
        <main class="flex-grow">
            {{ $slot }}
        </main>
        <footer>Beautiful Footer</footer>
    </div>
</body>
</html>

As you can see from the above layout code, you will see @section('metatags') that we can easily overwrite when needed.

Pay attention we are using @show as closing instead of @endsection.

Then, in another page that you need to change the metatags, all you have to do is simply:

pages/somewhere.blade.php

<?php
use function Livewire\Volt\{layout, title,state, mount};
use App\Models\Post;

layout('layouts.default');

state([ 'post' => null ]);
mount(function($slug) {
    $this->post = Post::query()
        ->whereSlug($slug)
        ->where('active', true)
        ->with(['categories', 'tags'])
        ->firstOrFail();
});
?>

@section('metatags')

    <title>{{ $post->title }} | Coding Wisely</title>
    <!-- Put other metatags specific for this page here -->
    <!-- ... -->

@endsection

<div class="flex flex-col mx-auto max-w-5xl ">
    ...
</div>

That's all.

Our offices

Follow us

Dealing with the meta seo tag and open graph in Livewire 3 Volt