Schema org appears in serve but not in build #42

FlorentinLedy · 2023-03-12T17:01:01Z

Hello everyone,
I'm sorry to bother you but I've been stuck on a problem for several days.

I am on Vue 3 and I am using composition API to build schema org. I also use vue router for different page, so several different vue have different schema.
My problem is that when I use npm run serve I can see the org schema generated code appear but when I do npm run build and access the website the org schema code does not appear.

Here is what I see in the code when I use npm run serve:

<body>

    <noscript>
      <strong>We're sorry but app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app" data-v-app="">..................</div>
    <!-- built files will be auto injected -->
  

<script type="application/ld+json">{

  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://www.fly-serv.com/#identity",
      "@type": "Organization",
      "name": "Fly-Serv",
      "url": "https://www.fly-serv.com",
      "logo": {
        "@id": "https://www.fly-serv.com/#logo"
      },
      "sameAs": [
        "https://twitter.com/FlyServ_Hosting",
        "https://www.facebook.com/flyservfr",
        "https://www.instagram.com/flyserv_fr/"
      ]
    },
    {
      "@id": "https://www.fly-serv.com/gmod/#product",
      "@type": "Product",
      "description": "Besoin d'un serveur Garry's Mod de qualité à bas prix ? Découvrez nos offres d'hébergement et de location de serveurs Gmod, DarkRP, Murder, Sandbox et plus encore ! Livraison instantanée, protection anti-DDoS, support rapide et sécurité garantie.",
      "mpn": "serveur-gmod",
      "name": "Serveur Gmod",
      "sku": "serveur-gmod",
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.6",
        "reviewCount": "5",
        "ratingCount": "116"
      },
      "author": {
        "@type": "Organization",
        "name": "Fly-Serv"
      },
      "brand": {
        "@type": "Thing",
        "name": "Serveur Gmod"
      },
      "image": [
        "https://www.fly-serv.com/og-game/gmod.png"
      ],
      "mainEntityOfPage": {
        "@id": "https://www.fly-serv.com/gmod/#webpage"
      },
      "offer": {
        "lowPrice": "2.99",
        "highPrice": "22.99",
        "priceCurrency": "EUR",
        "offerCount": "6",
        "availability": "InStock",
        "url": "https://www.fly-serv.com/gmod"
      },
      "review": {
        "@type": "Rating",
        "reviewRating": {
          "@type": "Rating",
          "bestRating": "5",
          "worstRating": 1,
          "ratingValue": "4.6"
        }
      }
    },
    {
      "@id": "https://www.fly-serv.com/gmod/#webpage",
      "@type": "WebPage",
      "description": "Besoin d'un serveur Garry's Mod de qualité à bas prix ? Découvrez nos offres d'hébergement et de location de serveurs Gmod, DarkRP, Murder, Sandbox et plus encore ! Livraison instantanée, protection anti-DDoS, support rapide et sécurité garantie.",
      "name": "Hébergement et location de serveur Gmod - Bas prix et haute qualité | Fly-Serv",
      "url": "https://www.fly-serv.com/gmod",
      "about": {
        "@id": "https://www.fly-serv.com/#identity"
      },
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://www.fly-serv.com/gmod"
          ]
        }
      ],
      "primaryImageOfPage": {
        "@id": "https://www.fly-serv.com/#logo"
      }
    },
    {
      "@id": "https://www.fly-serv.com/#logo",
      "@type": "ImageObject",
      "caption": "Fly-Serv",
      "contentUrl": "https://www.fly-serv.com/logo.png",
      "url": "https://www.fly-serv.com/logo.png"
    }
  ]
}</script></body>

This is what I get on the build version:

<body>

    <noscript>
      <strong>We're sorry but app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app" data-v-app="">..................</div>
</body>

I still searched with CTRL+F if the keyword "schema" appears but this is not the case so the schema is not found at the level of the build version.

Here is my vue.config.js :

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: ''
})

Here is my main.js :

import { createApp } from 'vue'
import App from './App.vue'
import VueAnimateOnScroll from 'vue3-animate-onscroll';
import 'animate.css';
import * as Bootstrap from 'bootstrap';
import "bootstrap/dist/css/bootstrap.min.css";
import router from '@/router'
import { createHead } from "@vueuse/head"
import { SchemaOrgUnheadPlugin } from '@vueuse/schema-org';

const app = createApp(App)
const head = createHead()
head.use(SchemaOrgUnheadPlugin({
  // config
  host: 'https://www.fly-serv.com',
}, () => {
  const route = router.currentRoute.value
  return {
    path: route.path,
    ...route.meta,
  }
}))
app.use(router)
app.use(VueAnimateOnScroll)
app.use(Bootstrap)
app.use(head)
app.mount('#app')

Here is an example of a vue :

<template>
    <bannerProductComponent 
        product_name="Gmod" 
        product_img="products/gmod.webp"
        product_price="2.99"
    >
    </bannerProductComponent>
    <offersProductComponent 
        product_name="Gmod" 
        :offers="offers"
        product_icon="products_icon/gmod.png"
        />
    <panelComponent/>
    <infoGameProductComponent
        infogame_title="..."
        infogame_subtitle="..."
        infogame_desc="..."
        
    />
    <infoCompanyProductComponent
        infocompany_title="..."
        infocompany_subtitle="...."
        infocompany_desc="...."
        />
    <faqProductComponent :faqs_content="faq"/>
    <othersGameProductComponent/>
</template>
  
<script>
import bannerProductComponent from '@/components/bannerProductComponent.vue'
import offersProductComponent from '@/components/offersProductComponent.vue'
import panelComponent from '@/components/panelComponent.vue'
import infoGameProductComponent from '@/components/infoGameProductComponent.vue'
import infoCompanyProductComponent from '@/components/infoCompanyProductComponent.vue'
import faqProductComponent from '@/components/faqProductComponent.vue'
import othersGameProductComponent from '@/components/othersGameProductComponent.vue'
import { useHead } from '@vueuse/head'
import { defineOrganization, defineWebPage, useSchemaOrg, defineProduct } from '@unhead/schema-org'

export default {
    name: 'productGmod',
    components: {
        bannerProductComponent,
        offersProductComponent,
        panelComponent,
        infoGameProductComponent,
        infoCompanyProductComponent,
        faqProductComponent,
        othersGameProductComponent,
    },
    data: () => ({
        ..............
    }),
    setup () {
        useSchemaOrg([
            defineOrganization({
                name: 'Fly-Serv',
                logo: '/logo.png',
                sameAs: [
                    "https://twitter.com/FlyServ_Hosting",
                    "https://www.facebook.com/flyservfr",
                    "https://www.instagram.com/flyserv_fr/"
                ]
            }),
            defineProduct({
                name: 'Serveur Gmod',
                description: "Besoin d'un serveur Garry's Mod de qualité à bas prix ? Découvrez nos offres d'hébergement et de location de serveurs Gmod, DarkRP, Murder, Sandbox et plus encore ! Livraison instantanée, protection anti-DDoS, support rapide et sécurité garantie.",
                sku: "serveur-gmod",
                mpn: "serveur-gmod",
                image: [
                    'https://www.fly-serv.com/og-game/gmod.png'
                ],
                brand: {
                    "@type": "Thing",
                    name: "Serveur Gmod"
                },
                review: {
                    "@type": "Rating",
                    reviewRating: {
                        "@type": "Rating",
                        ratingValue: "4.6",
                        bestRating: "5"
                    },
                },
                aggregateRating: {
                    "@type": "AggregateRating",
                    ratingValue: "4.6",
                    reviewCount: "5",
                    ratingCount: "116",
                },
                author: {
                    "@type": "Organization",
                    name: "Fly-Serv"
                },
                offer: {
                    lowPrice: '2.99',
                    highPrice: '22.99',
                    priceCurrency: 'EUR',
                    offerCount: '6',
                    availability: 'InStock',
                    url: "https://www.fly-serv.com/gmod"
                },
            }),
            defineWebPage(),
        ]),
        useHead({
            .......
        })
    },
}
</script>

<style>
</style>

And here is my App.vue :

<template>
	<headerComponent></headerComponent>
	<router-view></router-view>
	<footerComponent></footerComponent>
  <cookieConsentComponent></cookieConsentComponent>
</template>

<script>
import footerComponent from './components/footerComponent.vue'
import headerComponent from './components/headerComponent.vue'
import cookieConsentComponent from './components/cookieConsentComponent.vue'

export default {
  components: { 
    footerComponent,
    headerComponent,
    cookieConsentComponent,
},
  name: 'App',
}
</script>

I don't really understand why the serve version benefits from the org schema but not why the build version doesn't.
I would really appreciate any help on this as I can't seem to find any solutions.

Thank you in advance for your help ! :)

harlan-zw · 2023-03-13T13:17:26Z

Hey @FlorentinLedy

Would you mind sharing a bit more about your app? Are you SSR'ing? It's not clear from the code you provided.

If so, how have you set up the head SSR?

FlorentinLedy · 2023-03-13T13:28:37Z

Hey @FlorentinLedy

Would you mind sharing a bit more about your app? Are you SSR'ing? It's not clear from the code you provided.

If so, how have you set up the head SSR?

Hey @harlan-zw
I don't think I use SSR, the problem probably comes from here... I'm a beginner, do you have an article or documentation that I could follow to integrate schema-org on my Vue3 project in a sustainable way and not only when I do an npm run serve?

FlorentinLedy · 2023-03-13T13:30:54Z

Hey @FlorentinLedy
Would you mind sharing a bit more about your app? Are you SSR'ing? It's not clear from the code you provided.
If so, how have you set up the head SSR?

Hey @harlan-zw I don't think I use SSR, the problem probably comes from here... I'm a beginner, do you have an article or documentation that I could follow to integrate schema-org on my Vue3 project in a sustainable way and not only when I do an npm run serve?

I would like to point out that my application is a SPA and therefore is it possible to use schema org other than in SSR?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Schema org appears in serve but not in build #42

Schema org appears in serve but not in build #42

FlorentinLedy commented Mar 12, 2023 •

edited by harlan-zw

harlan-zw commented Mar 13, 2023

FlorentinLedy commented Mar 13, 2023 •

edited

FlorentinLedy commented Mar 13, 2023

Schema org appears in serve but not in build #42

Schema org appears in serve but not in build #42

Comments

FlorentinLedy commented Mar 12, 2023 • edited by harlan-zw

harlan-zw commented Mar 13, 2023

FlorentinLedy commented Mar 13, 2023 • edited

FlorentinLedy commented Mar 13, 2023

FlorentinLedy commented Mar 12, 2023 •

edited by harlan-zw

FlorentinLedy commented Mar 13, 2023 •

edited