Update SEO shit

app/app.vue

@@ -1,83 +1,36 @@
 <script setup lang="ts">
 import '~/assets/css/main.css';
-
+import {
-const siteUrl = 'https://jaron.sh';
+    DEFAULT_DESCRIPTION,
-const personId = `${siteUrl}/#person`;
+    DEFAULT_IMAGE,
-const websiteId = `${siteUrl}/#website`;
+    DEFAULT_TITLE,
-const defaultImage = `${siteUrl}/favicon.png`;
+    SITE_NAME,
+    SITE_URL,
+    personSchema,
+    websiteSchema,
+} from '~/utils/site';
 
 const jsonLd = {
     '@context': 'https://schema.org',
     '@graph': [
+        websiteSchema(),
         {
-            '@type': 'WebSite',
+            ...personSchema(),
-            '@id': websiteId,
+            mainEntityOfPage: { '@id': `${SITE_URL}/#homepage` },
-            url: siteUrl,
-            name: 'Jaron Pate',
-            alternateName: 'jaron.sh',
-            description:
-                'Developer. Reformed Rust enjoyer, Golang padawan. Building producst in Austin, Texas.',
-            inLanguage: 'en-US',
-            about: { '@id': personId },
-            author: { '@id': personId },
-            publisher: { '@id': personId },
-            image: {
-                '@type': 'ImageObject',
-                '@id': `${siteUrl}/#website-image`,
-                url: defaultImage,
-                caption: 'Jaron Pate Logo',
-            },
-        },
-        {
-            '@type': 'Person',
-            '@id': personId,
-            name: 'Jaron Pate',
-            alternateName: 'jaronpate',
-            url: siteUrl,
-            email: 'mailto:yo@jp.wtf',
-            image: {
-                '@type': 'ImageObject',
-                '@id': `${siteUrl}/#person-image`,
-                url: defaultImage,
-                caption: 'Jaron Pate',
-            },
-            jobTitle: 'Software Engineer',
-            description:
-                'Developer. Reformed Rust enjoyer, Golang padawan. Building producst in Austin, Texas.',
-            disambiguatingDescription:
-                'Developer. Reformed Rust enjoyer, Golang padawan. Building producst in Austin, Texas.',
-            givenName: 'Jaron',
-            familyName: 'Pate',
-            knowsLanguage: 'en-US',
-            homeLocation: {
-                '@type': 'Place',
-                name: 'Austin, TX',
-                address: {
-                    '@type': 'PostalAddress',
-                    addressLocality: 'Austin',
-                    addressRegion: 'TX',
-                    addressCountry: 'US',
-                },
-            },
-            sameAs: [
-                'https://github.com/jaronpate',
-                'https://www.linkedin.com/in/jaronp/',
-            ],
-            knowsAbout: [
-                'Software engineering',
-                'Frontend development',
-                'Product engineering',
-                'Web applications',
-                'Developer tools',
-                'Golang',
-                'Rust',
-                'TypeScript',
-            ],
-            mainEntityOfPage: { '@id': websiteId },
         },
     ],
 };
 
+useSeoMeta({
+    ogSiteName: SITE_NAME,
+    ogImage: DEFAULT_IMAGE,
+    ogImageAlt: SITE_NAME,
+    twitterCard: 'summary',
+    twitterTitle: DEFAULT_TITLE,
+    twitterDescription: DEFAULT_DESCRIPTION,
+    twitterImage: DEFAULT_IMAGE,
+});
+
 useHead({
     link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }],
     script: [

app/pages/index.vue

@@ -5,19 +5,35 @@ let sectionsRevealed = false;
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import {
+    DEFAULT_DESCRIPTION,
+    DEFAULT_IMAGE,
+    DEFAULT_TITLE,
+    SITE_URL,
+    personId,
+    personSchema,
+    websiteId,
+} from '~/utils/site';
 
-const siteUrl = 'https://jaron.sh';
+const webpageId = `${SITE_URL}/#homepage`;
-const currentUrl = useRequestURL().href;
-const personId = `${siteUrl}/#person`;
-const websiteId = `${siteUrl}/#website`;
-const webpageId = `${siteUrl}/#homepage`;
 
 useSeoMeta({
-    title: "Hey, I'm Jaron.",
+    title: DEFAULT_TITLE,
-    ogTitle: "Hey, I'm Jaron.",
+    ogTitle: DEFAULT_TITLE,
-    description: 'Developer. Reformed Rust enjoyer, Golang padawan.',
+    description: DEFAULT_DESCRIPTION,
-    ogDescription: 'Developer. Reformed Rust enjoyer, Golang padawan.',
+    ogDescription: DEFAULT_DESCRIPTION,
-    ogUrl: currentUrl,
+    ogUrl: SITE_URL,
+    ogType: 'profile',
+    ogImage: DEFAULT_IMAGE,
+    ogImageAlt: DEFAULT_TITLE,
+    twitterCard: 'summary',
+    twitterTitle: DEFAULT_TITLE,
+    twitterDescription: DEFAULT_DESCRIPTION,
+    twitterImage: DEFAULT_IMAGE,
+});
+
+useHead({
+    link: [{ rel: 'canonical', href: SITE_URL }],
 });
 
 const titles = [
@@ -118,17 +134,18 @@ useHead({
                     {
                         '@type': 'ProfilePage',
                         '@id': webpageId,
-                        url: siteUrl,
+                        url: SITE_URL,
-                        name: "Hey, I'm Jaron.",
+                        name: DEFAULT_TITLE,
-                        description:
+                        description: DEFAULT_DESCRIPTION,
-                            'Developer. Reformed Rust enjoyer, Golang padawan.',
                         inLanguage: 'en-US',
                         isPartOf: { '@id': websiteId },
                         about: { '@id': personId },
-                        mainEntity: { '@id': personId },
+                        // Google requires mainEntity to be an inline Person with name —
+                        // a bare @id reference fails Rich Results validation.
+                        mainEntity: personSchema(),
                         primaryImageOfPage: {
                             '@type': 'ImageObject',
-                            url: `${siteUrl}/favicon.png`,
+                            url: DEFAULT_IMAGE,
                         },
                     },
                     {
@@ -155,12 +172,11 @@ useHead({
                             '@type': 'ListItem',
                             position: index + 1,
                             item: {
-                                '@type': 'SoftwareApplication',
+                                '@type': 'CreativeWork',
                                 name: project.title,
                                 description: project.description,
                                 url: project.href,
                                 author: { '@id': personId },
-                                applicationCategory: 'DeveloperApplication',
                             },
                         })),
                     },

app/pages/writing/[...slug].vue

@@ -1,12 +1,17 @@
 <script lang="ts" setup>
+import {
+    DEFAULT_IMAGE,
+    SITE_NAME,
+    SITE_URL,
+    personId,
+    websiteId,
+} from '~/utils/site';
+
 const route = useRoute();
-const siteUrl = 'https://jaron.sh';
+const articleUrl = `${SITE_URL}${route.path}`;
-const personId = `${siteUrl}/#person`;
-const websiteId = `${siteUrl}/#website`;
-const articleUrl = `${siteUrl}${route.path}`;
 const webpageId = `${articleUrl}#webpage`;
 const articleId = `${articleUrl}#article`;
-const blogId = `${siteUrl}/writing#blog`;
+const blogId = `${SITE_URL}/writing#blog`;
 const { data: page } = await useAsyncData(route.path, () => {
     return queryCollection('writing')
         .path(route.path.replace('/writing/', ''))
@@ -17,15 +22,29 @@ if (!page.value) {
     throw createError({ statusCode: 404, statusMessage: 'Page Not Found' });
 }
 
+const articleTitle = page.value.title;
+const articleDescription = page.value.description;
+
 useSeoMeta({
-    title: page.value?.title,
+    title: articleTitle,
-    ogTitle: page.value?.title,
+    ogTitle: articleTitle,
-    description: page.value?.description,
+    description: articleDescription,
-    ogDescription: page.value?.description,
+    ogDescription: articleDescription,
-    ogUrl: useRequestURL().href,
+    ogUrl: articleUrl,
+    ogType: 'article',
+    ogImage: DEFAULT_IMAGE,
+    ogImageAlt: articleTitle,
+    twitterCard: 'summary',
+    twitterTitle: articleTitle,
+    twitterDescription: articleDescription,
+    twitterImage: DEFAULT_IMAGE,
+    articlePublishedTime: new Date(page.value.date).toISOString(),
+    articleModifiedTime: new Date(page.value.date).toISOString(),
+    articleAuthor: [SITE_NAME],
 });
 
 useHead({
+    link: [{ rel: 'canonical', href: articleUrl }],
     script: [
         {
             key: 'json-ld-article',
@@ -37,8 +56,8 @@ useHead({
                         '@type': 'WebPage',
                         '@id': webpageId,
                         url: articleUrl,
-                        name: page.value.title,
+                        name: articleTitle,
-                        description: page.value.description,
+                        description: articleDescription,
                         inLanguage: 'en-US',
                         isPartOf: { '@id': websiteId },
                         breadcrumb: { '@id': `${articleUrl}#breadcrumb` },
@@ -47,30 +66,43 @@ useHead({
                     {
                         '@type': 'Blog',
                         '@id': blogId,
-                        url: `${siteUrl}/writing`,
+                        url: `${SITE_URL}/writing`,
                         name: 'Jaron Pate Writing',
                         inLanguage: 'en-US',
                         isPartOf: { '@id': websiteId },
-                        publisher: { '@id': personId },
+                        publisher: {
+                            '@type': 'Person',
+                            '@id': personId,
+                            name: SITE_NAME,
+                        },
                     },
                     {
                         '@type': 'BlogPosting',
                         '@id': articleId,
                         url: articleUrl,
-                        headline: page.value.title,
+                        headline: articleTitle,
-                        description: page.value.description,
+                        description: articleDescription,
                         datePublished: new Date(page.value.date).toISOString(),
                         dateModified: new Date(page.value.date).toISOString(),
                         image: {
                             '@type': 'ImageObject',
                             '@id': `${articleUrl}#article-image`,
-                            url: `${siteUrl}/favicon.png`,
+                            url: DEFAULT_IMAGE,
                         },
                         inLanguage: 'en-US',
                         isPartOf: { '@id': blogId },
                         mainEntityOfPage: { '@id': webpageId },
-                        author: { '@id': personId },
+                        author: {
-                        publisher: { '@id': personId },
+                            '@type': 'Person',
+                            '@id': personId,
+                            name: SITE_NAME,
+                            url: SITE_URL,
+                        },
+                        publisher: {
+                            '@type': 'Person',
+                            '@id': personId,
+                            name: SITE_NAME,
+                        },
                     },
                     {
                         '@type': 'BreadcrumbList',
@@ -80,18 +112,18 @@ useHead({
                                 '@type': 'ListItem',
                                 position: 1,
                                 name: 'Home',
-                                item: siteUrl,
+                                item: SITE_URL,
                             },
                             {
                                 '@type': 'ListItem',
                                 position: 2,
                                 name: 'Writing',
-                                item: `${siteUrl}/writing`,
+                                item: `${SITE_URL}/writing`,
                             },
                             {
                                 '@type': 'ListItem',
                                 position: 3,
-                                name: page.value.title,
+                                name: articleTitle,
                                 item: articleUrl,
                             },
                         ],

app/pages/writing/index.vue

@@ -1,28 +1,42 @@
 <script setup lang="ts">
+import {
+    DEFAULT_IMAGE,
+    SITE_NAME,
+    SITE_URL,
+    personId,
+    websiteId,
+} from '~/utils/site';
+
 // const { data: pages } = await useAsyncData('writing-pages', () =>
 //     queryCollection('writing').order('date', 'DESC').all(),
 // );
 
 const pages = ref([]);
 
-const siteUrl = 'https://jaron.sh';
+const writingUrl = `${SITE_URL}/writing`;
-const writingUrl = `${siteUrl}/writing`;
-const personId = `${siteUrl}/#person`;
-const websiteId = `${siteUrl}/#website`;
 const collectionId = `${writingUrl}#collection`;
 const blogId = `${writingUrl}#blog`;
+const writingTitle = 'Writing';
+const writingDescription =
+    "Thoughts I've had here and there. Maybe you'll find something helpful or interesting here.";
 
 useSeoMeta({
-    title: 'Writing',
+    title: writingTitle,
-    ogTitle: 'Writing',
+    ogTitle: writingTitle,
-    description:
+    description: writingDescription,
-        "Thoughts I've had here and there. Maybe you'll find something helpful or interesting here.",
+    ogDescription: writingDescription,
-    ogDescription:
+    ogUrl: writingUrl,
-        "Thoughts I've had here and there. Maybe you'll find something helpful or interesting here.",
+    ogType: 'website',
-    ogUrl: useRequestURL().href,
+    ogImage: DEFAULT_IMAGE,
+    ogImageAlt: writingTitle,
+    twitterCard: 'summary',
+    twitterTitle: writingTitle,
+    twitterDescription: writingDescription,
+    twitterImage: DEFAULT_IMAGE,
 });
 
 useHead({
+    link: [{ rel: 'canonical', href: writingUrl }],
     script: [
         {
             key: 'json-ld-writing',
@@ -34,12 +48,15 @@ useHead({
                         '@type': 'CollectionPage',
                         '@id': collectionId,
                         url: writingUrl,
-                        name: 'Writing',
+                        name: writingTitle,
-                        description:
+                        description: writingDescription,
-                            "Thoughts I've had here and there. Maybe you'll find something helpful or interesting here.",
                         inLanguage: 'en-US',
                         isPartOf: { '@id': websiteId },
-                        author: { '@id': personId },
+                        author: {
+                            '@type': 'Person',
+                            '@id': personId,
+                            name: SITE_NAME,
+                        },
                         mainEntity: { '@id': blogId },
                         breadcrumb: { '@id': `${collectionId}#breadcrumb` },
                     },
@@ -48,11 +65,14 @@ useHead({
                         '@id': blogId,
                         url: writingUrl,
                         name: 'Jaron Pate Writing',
-                        description:
+                        description: writingDescription,
-                            "Thoughts I've had here and there. Maybe you'll find something helpful or interesting here.",
                         inLanguage: 'en-US',
                         isPartOf: { '@id': websiteId },
-                        publisher: { '@id': personId },
+                        publisher: {
+                            '@type': 'Person',
+                            '@id': personId,
+                            name: SITE_NAME,
+                        },
                         blogPost: (pages.value ?? []).map((page) => ({
                             '@id': `${writingUrl}/${page.path}#article`,
                         })),
@@ -78,12 +98,12 @@ useHead({
                                 '@type': 'ListItem',
                                 position: 1,
                                 name: 'Home',
-                                item: siteUrl,
+                                item: SITE_URL,
                             },
                             {
                                 '@type': 'ListItem',
                                 position: 2,
-                                name: 'Writing',
+                                name: writingTitle,
                                 item: writingUrl,
                             },
                         ],

app/utils/site.ts

@@ -0,0 +1,79 @@
+export const SITE_URL = 'https://jaron.sh';
+export const SITE_NAME = 'Jaron Pate';
+export const SITE_HANDLE = 'jaronpate';
+
+export const DEFAULT_TITLE = "Hey, I'm Jaron.";
+export const DEFAULT_DESCRIPTION =
+    'Developer. Reformed Rust enjoyer, Golang padawan.';
+export const PERSON_DESCRIPTION =
+    'Developer. Reformed Rust enjoyer, Golang padawan. Building producst in Austin, Texas.';
+
+export const DEFAULT_IMAGE = `${SITE_URL}/favicon.png`;
+
+export const personId = `${SITE_URL}/#person`;
+export const websiteId = `${SITE_URL}/#website`;
+
+export const personSameAs = [
+    'https://github.com/jaronpate',
+    'https://www.linkedin.com/in/jaronp/',
+] as const;
+
+/** Person node Google expects inline on ProfilePage.mainEntity */
+export function personSchema() {
+    return {
+        '@type': 'Person' as const,
+        '@id': personId,
+        name: SITE_NAME,
+        alternateName: SITE_HANDLE,
+        url: SITE_URL,
+        email: 'yo@jp.wtf',
+        jobTitle: 'Software Engineer',
+        description: PERSON_DESCRIPTION,
+        disambiguatingDescription: PERSON_DESCRIPTION,
+        givenName: 'Jaron',
+        familyName: 'Pate',
+        knowsLanguage: 'en-US',
+        homeLocation: {
+            '@type': 'Place' as const,
+            name: 'Austin, TX',
+            address: {
+                '@type': 'PostalAddress' as const,
+                addressLocality: 'Austin',
+                addressRegion: 'TX',
+                addressCountry: 'US',
+            },
+        },
+        sameAs: [...personSameAs],
+        knowsAbout: [
+            'Software engineering',
+            'Frontend development',
+            'Product engineering',
+            'Web applications',
+            'Developer tools',
+            'Golang',
+            'Rust',
+            'TypeScript',
+        ],
+    };
+}
+
+export function websiteSchema() {
+    return {
+        '@type': 'WebSite' as const,
+        '@id': websiteId,
+        url: SITE_URL,
+        name: SITE_NAME,
+        alternateName: 'jaron.sh',
+        description: PERSON_DESCRIPTION,
+        inLanguage: 'en-US',
+        about: { '@id': personId },
+        author: { '@id': personId },
+        publisher: { '@id': personId },
+        image: {
+            '@type': 'ImageObject' as const,
+            '@id': `${SITE_URL}/#website-image`,
+            url: DEFAULT_IMAGE,
+            caption: 'Jaron Pate Logo',
+        },
+    };
+}

nuxt.config.ts

@@ -39,7 +39,8 @@ export default defineNuxtConfig({
             meta: [
                 {
                     name: 'description',
-                    content: 'Software Engineer by trade — tinkerer by nature.',
+                    content:
+                        'Developer. Reformed Rust enjoyer, Golang padawan.',
                 },
             ],
             link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }],