fix: og image alts

Author: harlan-zw

app/app.vue

@@ -128,7 +128,7 @@ if (import.meta.client) {
 
 // title and description will be inferred
 // this will be overridden by upstream pages that use different templates
-defineOgImage('Page.takumi')
+defineOgImage('Page.takumi', {}, { alt: 'npmx — a fast, modern browser for the npm registry' })
 </script>
 
 <template>

app/components/global/BlogPostWrapper.vue

@@ -27,11 +27,15 @@ useHead({
   ],
 })
 
-defineOgImage('BlogPost.takumi', {
-  title: props.frontmatter.title,
-  authors: post.value?.authors ?? [],
-  date: props.frontmatter.date,
-})
+defineOgImage(
+  'BlogPost.takumi',
+  {
+    title: props.frontmatter.title,
+    authors: post.value?.authors ?? [],
+    date: props.frontmatter.date,
+  },
+  { alt: `Blog post: ${props.frontmatter.title}` },
+)
 
 const slug = computed(() => props.frontmatter.slug)
 

app/pages/about.vue

@@ -15,10 +15,14 @@ useSeoMeta({
   twitterDescription: () => $t('about.meta_description'),
 })
 
-defineOgImage('Page.takumi', {
-  title: () => `${$t('about.title')}`,
-  description: 'a fast, modern browser for the npm registry',
-})
+defineOgImage(
+  'Page.takumi',
+  {
+    title: () => `${$t('about.title')}`,
+    description: 'a fast, modern browser for the npm registry',
+  },
+  { alt: () => `${$t('about.title')} — npmx` },
+)
 
 const pmLinks = {
   npm: 'https://www.npmjs.com/',

app/pages/accessibility.vue

@@ -8,10 +8,14 @@ useSeoMeta({
   description: () => $t('a11y.welcome', { app: 'npmx' }),
 })
 
-defineOgImage('Page.takumi', {
-  title: () => $t('a11y.title'),
-  description: () => $t('a11y.welcome', { app: 'npmx' }),
-})
+defineOgImage(
+  'Page.takumi',
+  {
+    title: () => $t('a11y.title'),
+    description: () => $t('a11y.welcome', { app: 'npmx' }),
+  },
+  { alt: () => `${$t('a11y.title')} — npmx` },
+)
 
 const router = useRouter()
 const canGoBack = useCanGoBack()

app/pages/index.vue

@@ -19,7 +19,7 @@ useSeoMeta({
   twitterDescription: () => $t('seo.home.description'),
 })
 
-defineOgImage('Splash.takumi')
+defineOgImage('Splash.takumi', {}, { alt: () => $t('seo.home.description') })
 </script>
 
 <template>

app/pages/org/[org].vue

@@ -139,10 +139,14 @@ useSeoMeta({
   twitterDescription: () => `npm packages published by the ${orgName.value} organization`,
 })
 
-defineOgImage('Page.takumi', {
-  title: () => `@${orgName.value}`,
-  description: () => (packageCount.value ? `${packageCount.value} packages` : 'npm organization'),
-})
+defineOgImage(
+  'Page.takumi',
+  {
+    title: () => `@${orgName.value}`,
+    description: () => (packageCount.value ? `${packageCount.value} packages` : 'npm organization'),
+  },
+  { alt: () => `@${orgName.value} npm organization on npmx` },
+)
 </script>
 
 <template>

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

@@ -312,7 +312,15 @@ defineOgImage(
     version: () => version.value,
     variant: 'code-tree',
   },
-  [{ key: 'og' }, { key: 'whatsapp', width: 800, height: 800 }],
+  [
+    { key: 'og', alt: () => `Source code file tree for ${packageName.value}@${version.value}` },
+    {
+      key: 'whatsapp',
+      width: 800,
+      height: 800,
+      alt: () => `Source code file tree for ${packageName.value}@${version.value}`,
+    },
+  ],
 )
 </script>
 

app/pages/package-docs/[...path].vue

@@ -125,7 +125,15 @@ defineOgImage(
     version: () => resolvedVersion.value,
     variant: 'function-tree',
   },
-  [{ key: 'og' }, { key: 'whatsapp', width: 800, height: 800 }],
+  [
+    { key: 'og', alt: () => `API documentation for ${packageName.value}` },
+    {
+      key: 'whatsapp',
+      width: 800,
+      height: 800,
+      alt: () => `API documentation for ${packageName.value}`,
+    },
+  ],
 )
 
 const showLoading = computed(

app/pages/package/[[org]]/[name].vue

@@ -42,7 +42,15 @@ defineOgImage(
     version: () => requestedVersion.value,
     variant: 'download-chart',
   },
-  [{ key: 'og' }, { key: 'whatsapp', width: 800, height: 800 }],
+  [
+    { key: 'og', alt: () => `npm package ${packageName.value} download chart and stats` },
+    {
+      key: 'whatsapp',
+      width: 800,
+      height: 800,
+      alt: () => `npm package ${packageName.value} download chart and stats`,
+    },
+  ],
 )
 
 if (import.meta.server) {

app/pages/pds.vue

@@ -13,10 +13,14 @@ useSeoMeta({
   twitterDescription: () => $t('pds.meta_description'),
 })
 
-defineOgImage('Page.takumi', {
-  title: 'npmx.social',
-  description: 'The official PDS for the npmx community.',
-})
+defineOgImage(
+  'Page.takumi',
+  {
+    title: 'npmx.social',
+    description: 'The official PDS for the npmx community.',
+  },
+  { alt: 'npmx.social — the official PDS for the npmx community' },
+)
 
 const brokenImages = ref(new Set<string>())