JSON LD Structured Data (#52)

* fix alt type issue

* add public logo

* schema org module

* json-ld first pass

* playwright not needed

* add person schema to team page

* tweak resource schema

* fix catchall route schema

* fix image url

* add author url to resource page

---------

Co-authored-by: rijkvanzanten <[email protected]>

app.vue

@@ -27,6 +27,21 @@ useServerHead({
 		},
 	],
 });
+
+useSchemaOrg([
+	defineOrganization({
+		name: 'Directus',
+		logo: '/images/logo-dark.svg',
+		sameAs: [
+			'https://hub.docker.com/r/directus/directus',
+			'https://twitter.com/directus',
+			'https://github.com/directus',
+			'https://www.youtube.com/c/DirectusVideos',
+			'https://www.linkedin.com/company/directus-io',
+			'https://www.npmjs.com/package/directus',
+		],
+	}),
+]);
 </script>
 
 <template>

components/Block/Accordion.vue

@@ -12,6 +12,13 @@ const { data: block } = useAsyncData(props.uuid, () =>
 		})
 	)
 );
+
+useSchemaOrg([
+	defineQuestion({
+		name: unref(block)?.title,
+		/* @TODO  Get the content of the first block to use as an answer */
+	}),
+]);
 </script>
 
 <template>

components/ResourcePage.vue

@@ -67,7 +67,7 @@ const { data: resource } = await useAsyncData(
 );
 
 if (!unref(resource)) {
-	throw createError({ statusCode: 404, statusMessage: 'resource Not Found', fatal: true });
+	throw createError({ statusCode: 404, statusMessage: 'Resource Not Found', fatal: true });
 }
 
 useHead({
@@ -100,6 +100,26 @@ const showFeaturedImage = computed(() => {
 	return true;
 });
 
+useSchemaOrg([
+	defineArticle({
+		headline: unref(resource)?.seo?.title ?? unref(resource)?.title ?? undefined,
+		image: unref(resource)?.image?.id
+			? `https://marketing.directus.app/assets/${unref(resource)?.image?.id}`
+			: undefined,
+		datePublished: unref(resource)?.date_published ?? undefined,
+		description: unref(resource)?.seo?.meta_description ?? unref(resource)?.summary ?? undefined,
+		author: [
+			{
+				name: unref(resource)?.author?.name ?? '',
+				url: unref(resource)?.author?.slug ? `https://directus.io/team/${unref(resource)?.author?.slug}` : undefined,
+				image: unref(resource)?.author?.image
+					? `https://marketing.directus.app/assets/${unref(resource)?.author?.image}`
+					: undefined,
+			},
+		],
+	}),
+]);
+
 const randIndex = (length: number) => Math.floor(Math.random() * length);
 
 const related = computed(() => {

nuxt.config.ts

@@ -64,6 +64,10 @@ export default defineNuxtConfig({
 		},
 	},
 
+	schemaOrg: {
+		host: 'https://directus.io',
+	},
+
 	typescript: {
 		typeCheck: true,
 	},
@@ -91,6 +95,7 @@ export default defineNuxtConfig({
 		'nuxt-simple-sitemap', // https://nuxtseo.com/sitemap/getting-started/how-it-works
 		'floating-vue/nuxt',
 		'@zadigetvoltaire/nuxt-gtm',
+		'nuxt-schema-org',
 	],
 
 	vite: {

package.json

@@ -23,6 +23,7 @@
 		"eslint-plugin-prettier": "4.2.1",
 		"eslint-plugin-vue": "9.14.1",
 		"nuxt": "3.6.5",
+		"nuxt-schema-org": "2.2.0",
 		"nuxt-simple-sitemap": "3.2.5",
 		"prettier": "2.8.8",
 		"sass": "1.64.1",

pages/[...permalink].vue

@@ -84,6 +84,14 @@ useServerSeoMeta({
 	ogTitle: computed(() => unref(page)?.seo?.title ?? unref(page)?.title ?? null),
 	ogDescription: computed(() => unref(page)?.seo?.meta_description ?? null),
 });
+
+useSchemaOrg([
+	defineWebPage({
+		url: `https://directus.io${path}`,
+		name: unref(page)?.seo?.title ?? unref(page)?.title ?? undefined,
+		description: unref(page)?.seo?.meta_description ?? undefined,
+	}),
+]);
 </script>
 
 <template>

pages/team/[slug].vue

@@ -62,6 +62,16 @@ useServerSeoMeta({
 	ogDescription: computed(() => unref(person)?.bio ?? null),
 });
 
+useSchemaOrg([
+	definePerson({
+		url: `https://directus.io/team/${unref(person)?.slug}`,
+		name: unref(person)?.name ?? undefined,
+		description: unref(person)?.bio ?? undefined,
+		image: unref(person)?.image?.id ? `https://marketing.directus.app/assets/${unref(person)?.image?.id}` : undefined,
+		sameAs: unref(person)?.links?.map((link: { services: string; url: string }) => link.url) ?? undefined,
+	}),
+]);
+
 const resources = computed(() =>
 	unref(person)?.resources?.sort((a, b) => (a.date_published! > b.date_published! ? -1 : 1))
 );