schema-org
schema-org copied to clipboard
vueuse
Schema org appears in serve but not in build
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 ! :)
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 @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?
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?