Home / Snippets / Laravel Inertia SEO Optimisation Component
Laravel Inertia SEO Optimisation Component cover

Laravel Inertia SEO Optimisation Component


1 year ago


In this snippet, you will learn the way to enhance your SEO for your Laravel Inertia project.

Step 1: Define AppHead Component for Laravel Livewire

This step will require you to create a new component and it will be called "AppHead.vue" and you can place it within the "components" directory.
<script setup>
import {Head} from "@inertiajs/inertia-vue3";

export default {
    props: {
        pageTitle: String,
        url: String,
        description: String,
        cover: String,

        <title>{{ pageTitle }}</title>

        <meta :content="pageTitle" name="title"/>
        <meta :content="description" name="description"/>

        <meta content="website" property="og:type"/>
        <meta :content="url" property="og:url"/>
        <meta :content="pageTitle" property="og:title"/>
        <meta :content="description" property="og:description"/>
        <meta v-if="cover" :content="cover" property="og:image">

        <meta content="summary_large_image" property="twitter:card"/>
        <meta :content="url" property="twitter:url"/>
        <meta :content="pageTitle" property="twitter:title"/>
        <meta :content="description" property="twitter:description"/>
        <meta v-if="cover" :content="cover" property="twitter:image">

This is very important to note that all of the following meta attributes must be within the "Head" tag imported from the "inertia-vue3".
import {Head} from "@inertiajs/inertia-vue3";

It's also important to define the props which will accept pageTitle, url, description and cover.
export default {
    props: {
        pageTitle: String,
        url: String,
        description: String,
        cover: String,

Step 2: Call the Component from your Individual Inertia Pages

This is straight forward and all you need is to import the component and then reference it in the template syntax.
    description="Your long description here"
    pageTitle="Page Title here"
Do note that you will need this on all your pages to get all the SEO benefits. Hope this help, cheers!
notion avatar

Ahmad Aziz

Week-end developer currently experimenting with web, mobile, and all things programming.






Support Us

If you like our tutorial, support us by being our Patreon or buy us some coffee ☕️

Post Tutorials

Learn trending tutorials for ReactJs, React Native, VueJS, NextJs, Laravel, Tailwind CSS, and Flutter development.
View Tutorials

Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your web projects
View Components

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this