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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

Replies: 3 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

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

hlaporthein Feb 27, 2022

Replies: 3 comments · 1 reply

ajnsn Feb 27, 2022

adgower Mar 2, 2022

sarozpradhan64 Oct 5, 2022

shaikhfoysal Nov 23, 2024

hlaporthein
Feb 27, 2022

Replies: 3 comments 1 reply

ajnsn
Feb 27, 2022

sarozpradhan64
Oct 5, 2022

shaikhfoysal
Nov 23, 2024