Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

blacknet's avatar

Laravel+inertiajs + vue Seo friendly setup

Hi expert team,

I'm looking for guidance on the best practices to make my Inertia.js app SEO-friendly. Currently, SEO tools are not detecting essential metadata such as the page title and description in my app.

Here's a component I created to manage page metadata:

<template>
  <Head>
    
    <title>{{ props.title }}</title>
    <meta name="description" :content="props.description" head-key="description" />
    <meta name="keywords" :content="props.keywords" head-key="keywords" />
    <link rel="canonical" :href="pageUrl" head-key="canonical" />

 
    <meta property="og:title" :content="props.title" head-key="og:title" />
    <meta property="og:description" :content="props.description" head-key="og:description" />
    <meta property="og:image" :content="imageUrl" head-key="og:image" />
    <meta property="og:url" :content="pageUrl" head-key="og:url" />
    <meta property="og:type" :content="props.type" head-key="og:type" />


    <meta name="twitter:card" content="summary_large_image" head-key="twitter:card" />
    <meta name="twitter:title" :content="props.title" head-key="twitter:title" />
    <meta name="twitter:description" :content="props.description" head-key="twitter:description" />
    <meta name="twitter:image" :content="imageUrl" head-key="twitter:image" />
  </Head>
</template>
0 likes
4 replies
Tray2's avatar

The tools probably doesn't run the js of your site, it looks for the html. So you probably need to handle that with php and not js, if you want it dynamic.

1 like
Tray2's avatar

@blacknet What I mean is that the application that reads the meta tags from your page doesn't execute any javascript to render the page, to that application your page doesn't have any meta tags since you generate then with javascript.

JussiMannisto's avatar

You can't render the OG tags client-side with Vue. You have to render them server-side so that they're in the initial HTML body.

You have two choices here: either add them in the blade file (app.blade.php by default), or switch to server-side rendering. Adding them to the blade file is easier, if a bit awkward.

1 like

Please or to participate in this conversation.