Web Development
Tips and Tricks

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

by Antoni Putra, Fullstack Web Developer

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:


<!DOCTYPE html>
<html lang="en">
    <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"/>

        <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') }}">
    <div class="flex flex-col min-h-screen">
        <header>Awesome Header</header>
        <main class="flex-grow">
            {{ $slot }}
        <footer>Beautiful Footer</footer>

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:


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


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


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


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

That's all.

About the Author:

Antoni, a full-stack web developer, finds joy in working with Laravel and Javascript.


The information provided in this article is based on the author's knowledge and experience as of the publication date. Technology and tools may have evolved since then. Always refer to the official documentation for the latest instructions and updates.