Posts Learn Components Snippets Categories Tags Tools About
/

Laravel Inertia SEO Optimisation Component

Get to know the way to enhance your Laravel Inertia application by implemnting Search Engine Optimisation (SEO) and get more traffic for your website

Created on Jul 25, 2022

40 views

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";
</script>

<script>
export default {
    props: {
        pageTitle: String,
        url: String,
        description: String,
        cover: String,
    },
};
</script>

<template>
    <Head>
        <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">
    </Head>
</template>

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.
<AppHead
    description="Your long description here"
    pageTitle="Page Title here"
    :url="route('pages.home')"
/>
Do note that you will need this on all your pages to get all the SEO benefits. Hope this help, cheers!

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

Load comments for Laravel Inertia SEO Optimisation Component

)