In this snippet, you will learn the way to enhance your SEO for your Laravel Inertia project.
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.
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!
Leave a reply