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

Laravel Inertia SEO Optimisation Component

714

1 year ago

0 comments

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!
notion avatar

Ahmad Aziz

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

Topics:

Frontend

Resource

Average

Average

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