Inertiajs Meta Tag preview is not working in third party site #1113

hlaporthein · 2022-02-27T05:10:13Z

hlaporthein
Feb 27, 2022

I am using Inertia js with Vue 3 and Laravel. Everthing is working fine except meta. I could view meta tag in source code on browser, meta tag is injected through inertia.js but when I share twitter or facebook, preview image or description is not working.

Below is the code I created custom meta component to reusable Meta.vue file

<template>
      <Head>
         <title>{{title}}</title>
         <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="shortcut icon" :href="favicon" type="image/x-icon">
         <link rel="icon" :href="favicon" type="image/x-icon">
         <meta name="title" :content="title">
         <meta name="description" :content="description">
         <meta property="og:type" content="website">
         <meta property="og:url" :content="link">
         <meta property="og:title" :content="title">
         <meta property="og:description" :content="description">
         <meta property="og:image" :content="image">
         <meta property="twitter:card" content="summary_large_image">
         <meta property="twitter:url" :content="link">
         <meta property="twitter:title" :content="title">
         <meta property="twitter:description" :content="description">
         <meta property="twitter:image" :content="image">       
         <slot />  
      </Head>
</template>

<script>
import { Head } from '@inertiajs/inertia-vue3'
import {SEO} from '@/Utilities/Constant';
import {seoImageUrl, faviconUrl} from '@/Utilities/CommonFunctions';

export default {
   components: {
      Head
   },
   props: {
      title: {
         type: String,
         default: SEO.title
      },
      description: {
         type: String,
         default: SEO.description
      },
      image: {
         type: String,
         default: seoImageUrl()
      },
      link: {
         type: String,
         default: SEO.link
      }
   },
   setup(props) {
      const favicon = faviconUrl();

      return {
         favicon
      }
   }
}
</script>

When I insert Meta.vue file in pages in vue like below

<template>
   <Meta title="Home page" description="Home description" image="https://res.cloudinary.com/hlaporthein/image/upload/v1629887904/images/seo/hlaporthein_maikzu.png"  />
   <app>

      <div class="container-fluid">
              <h1>Hello World</h1>
      </div>


      
   </app>
</template>

<script>
import { Link } from '@inertiajs/inertia-vue3';
import App from '@/Layouts/App';
import { reactive, ref } from 'vue';
import Meta from '@/Components/Meta/Meta';


export default {
    components: {
       Meta,
      Link,
      App
    },

}
</script>

The above code is working fine, meta tag is available in browser source but when I share link in facebook or twitter... meta title, image and description is not showing. What am I missing? I setup as documentation said. I also check sample Ping CRM , it is not working either. Please let me know how should I debug or inspect to work

ajnsn · 2022-02-27T07:13:03Z

ajnsn
Feb 27, 2022

#952 (comment)

1 reply

adgower Mar 2, 2022

I have tried this same concept using SSR, and I can't get valet share https://cards-dev.twitter.com/validator to show my card? Any tips?

sarozpradhan64 · 2022-10-05T04:09:48Z

sarozpradhan64
Oct 5, 2022

having similar issue, used meta tags but facebook debugger cannot identify the inertia head meta tags.

0 replies

shaikhfoysal · 2024-11-23T05:55:45Z

shaikhfoysal
Nov 23, 2024

I have the same issue. Somebody told me if you can make ssr then it will work on vue inertia. But it is not working. Thanks

0 replies

kicker10BOG · 2025-06-28T18:15:38Z

kicker10BOG
Jun 28, 2025

This is still an issue in at least Discord, Groupme, and Facebook. Can we expect this to ever be fixed?

2 replies

hlaporthein Jun 29, 2025
Author

This is the issues I opened. I forgot to mention the solution. Use SSR for inertia @ajnsn . That would fixed.

kicker10BOG Jun 29, 2025

I actually found another way. You can access the props in blade using $page['props'] so I set the tags using blade and added inertia to each tag. But then they disappear when Inertia loads, so you also have also set them in Inertia. Here's an example of a tag in blade.

<meta inertia property="title" content="{{ (isset($page['props']['metaTitle']) ? $page['props']['metaTitle'] . ' | ' : '') . config('app.name', 'Site Name') }}" />

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Inertiajs Meta Tag preview is not working in third party site #1113

Uh oh!

{{title}}

Uh oh!

Replies: 4 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Inertiajs Meta Tag preview is not working in third party site #1113

Uh oh!

hlaporthein Feb 27, 2022

Replies: 4 comments · 3 replies

Uh oh!

ajnsn Feb 27, 2022

Uh oh!

adgower Mar 2, 2022

Uh oh!

sarozpradhan64 Oct 5, 2022

Uh oh!

shaikhfoysal Nov 23, 2024

Uh oh!

kicker10BOG Jun 28, 2025

Uh oh!

hlaporthein Jun 29, 2025 Author

Uh oh!

kicker10BOG Jun 29, 2025

hlaporthein
Feb 27, 2022

Replies: 4 comments 3 replies

ajnsn
Feb 27, 2022

sarozpradhan64
Oct 5, 2022

shaikhfoysal
Nov 23, 2024

kicker10BOG
Jun 28, 2025

hlaporthein Jun 29, 2025
Author