Add proper meta to tag share page

src/app/(static)/t/[tag]/page.tsx

@@ -2,8 +2,7 @@ import { getPhotosCached } from '@/cache';
 import SiteGrid from '@/components/SiteGrid';
 import PhotoGrid from '@/photo/PhotoGrid';
 import { getUniqueTags } from '@/services/postgres';
-import { absolutePathForTag, absolutePathForTagImage } from '@/site/paths';
-import { descriptionForTaggedPhotos, titleForTag } from '@/tag';
+import { generateMetaForTag } from '@/tag';
 import TagHeader from '@/tag/TagHeader';
 import { Metadata } from 'next';
 
@@ -23,10 +22,12 @@ export async function generateMetadata({
 }: TagProps): Promise<Metadata> {
   const photos = await getPhotosCached({ tag });
 
-  const url = absolutePathForTag(tag);
-  const title = titleForTag(tag, photos);
-  const description = descriptionForTaggedPhotos(photos, true);
-  const images = absolutePathForTagImage(tag);
+  const {
+    url,
+    title,
+    description,
+    images,
+  } = generateMetaForTag(tag, photos);
 
   return {
     title,

src/app/(static)/t/[tag]/share/page.tsx

@@ -2,8 +2,14 @@ import { getPhotosCached } from '@/cache';
 import SiteGrid from '@/components/SiteGrid';
 import PhotoGrid from '@/photo/PhotoGrid';
 import { getUniqueTags } from '@/services/postgres';
+import { generateMetaForTag } from '@/tag';
 import TagHeader from '@/tag/TagHeader';
 import TagShareModal from '@/tag/TagShareModal';
+import { Metadata } from 'next';
+
+interface TagProps {
+  params: { tag: string }
+}
 
 export async function generateStaticParams() {
   const tags = await getUniqueTags();
@@ -12,6 +18,35 @@ export async function generateStaticParams() {
   }));
 }
 
+export async function generateMetadata({
+  params: { tag },
+}: TagProps): Promise<Metadata> {
+  const photos = await getPhotosCached({ tag });
+
+  const {
+    url,
+    title,
+    description,
+    images,
+  } = generateMetaForTag(tag, photos);
+
+  return {
+    title,
+    openGraph: {
+      title,
+      description,
+      images,
+      url,
+    },
+    twitter: {
+      images,
+      description,
+      card: 'summary_large_image',
+    },
+    description,
+  };
+}
+
 export default async function Share({
   params: { tag },
 }: {

src/tag/index.ts

@@ -1,4 +1,5 @@
 import { Photo, dateRangeForPhotos } from '@/photo';
+import { absolutePathForTag, absolutePathForTagImage } from '@/site/paths';
 import { capitalizeWords } from '@/utility/string';
 
 const labelForPhotos = (photos: Photo[]) =>
@@ -16,3 +17,10 @@ export const descriptionForTaggedPhotos = (
   dateBased
     ? dateRangeForPhotos(photos).description.toUpperCase()
     : `${photos.length} Tagged ${labelForPhotos(photos)}`;
+
+export const generateMetaForTag = (tag: string, photos: Photo[]) => ({
+  url: absolutePathForTag(tag),
+  title: titleForTag(tag, photos),
+  description: descriptionForTaggedPhotos(photos, true),
+  images: absolutePathForTagImage(tag),
+});