Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

No schema generated in a Vue SPA without Vue Router #44

Open
innocenzi opened this issue Apr 12, 2023 · 1 comment
Open

No schema generated in a Vue SPA without Vue Router #44

innocenzi opened this issue Apr 12, 2023 · 1 comment

Comments

@innocenzi
Copy link

innocenzi commented Apr 12, 2023 •
edited

Hey, so I'm not sure the fact that we don't use Vue Router is the actual problem, but we're trying to implement schema-org in a Hybridly app (a server-driven SPA), but the schema never gets generated.

@vueuse/head works perfectly fine, and my understanding is that schema-org uses it under the hood, so I'm wondering if this has something to do with the router.

This is how we register the plugin:

const url = useProperty('security.url')
const head = createHead({
	titleTemplate: (title) => title ? `myLittlePlane - ${title}` : 'myLittlePlane',
})

head.use(SchemaOrgUnheadPlugin({
	title: 'myLittlePlane - European aircraft broker',
	description: 'Bringing reliable information, we represent clients looking to value, buy, sell, or trade their business jets.',
	host: import.meta.env.APP_URL,
	image: '/favicon/image.png',
},
() => ({
	url: url.value,
	path: new URL(url.value).pathname,
})))

The <SchemaOrgDebug /> is totally empty, nothing in it. The tag is nowhere to be seen, neither in <head> or at the bottom of <body>. Any idea?

Notes:

  • useProperty('security.url') is a ref that returns the current page's URL
  • Hybridly's router has event we could listen on if this is needed
  • useHead and useSeoMeta work properly everywhere
@innocenzi
Copy link
Author

It seems like if I use useHead directly, I do get my graph generated:

useHead({
	script: [
		{
			type: 'application/ld+json',
			id: 'schema-org-graph',
			key: 'schema-org-graph',
			// @ts-expect-error runtime type
			nodes: [
				defineOrganization({
					name: seo.sitename,
					logo: seo.logo,
					address: seo.address,
				}),
				defineWebSite({
					name: seo.sitename,
					description: seo.description,
					inLanguage: seo.language,
					url: import.meta.env.APP_URL,
				}),
			],
		},
	],
}, { mode: 'all' })

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@innocenzi