Fix og:url tags on gallery pages

tidaltheory · Dec 10, 2023 · 277c5be · 277c5be
1 parent 1472d1b
commit 277c5be
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 4 deletions.
diff --git a/www/src/routes/photos/[slug]/+page.server.js b/www/src/routes/photos/[slug]/+page.server.js
@@ -11,6 +11,7 @@ export const load = async ({ params }) => {
 		/** @todo Get optimal OG image height and include .height() */
 		post.coverImage = urlFor(post.coverImage)
 			.width(1200)
+			.height(630)
 			.format('jpg')
 			.url()
 
@@ -32,7 +33,7 @@ export const load = async ({ params }) => {
 			return image
 		})
 
-		return { post }
+		return { post, slug: params.slug }
 	}
 
 	throw error(404, 'Not found.')

diff --git a/www/src/routes/photos/[slug]/+page.svelte b/www/src/routes/photos/[slug]/+page.svelte
@@ -5,4 +5,4 @@ import Item from '../item.svelte'
 export let data
 </script>
 
-<Item {data} />
+<Item {data} slug={data.slug} />
diff --git a/www/src/routes/photos/item.svelte b/www/src/routes/photos/item.svelte
@@ -11,6 +11,9 @@ import TextLede from '$lib/components/text-lede.svelte'
 /** @type {'screen-shots' | undefined} */
 export let collection = undefined
 
+/** @type {string} */
+export let slug
+
 /** @type {import('./[slug]/$types').PageData} */
 export let data
 $: ({ post } = data)
@@ -27,6 +30,8 @@ $: ({
 
 if (collection === 'screen-shots') fullTitle += ' — Screen Shots'
 
+let url = ['https://tidaltheory.io/photos', collection, slug].join('/')
+
 let isCarouselOpen = false
 let initialIndex = 0
 
@@ -49,6 +54,7 @@ function handleCloseCarousel() {
 	<meta name="twitter:card" content="summary_large_card" />
 	<meta property="og:title" content="{fullTitle} — Tidal Theory" />
 	<meta property="og:description" content={ledeClean} />
+	<meta property="og:url" content="{url}/" />
 	<meta property="og:image" content={coverImage} />
 </svelte:head>
 

diff --git a/www/src/routes/photos/screen-shots/[slug]/+page.server.js b/www/src/routes/photos/screen-shots/[slug]/+page.server.js
@@ -11,6 +11,7 @@ export const load = async ({ params }) => {
 		/** @todo Get optimal OG image height and include .height() */
 		post.coverImage = urlFor(post.coverImage)
 			.width(1200)
+			.height(630)
 			.format('jpg')
 			.url()
 
@@ -32,7 +33,7 @@ export const load = async ({ params }) => {
 			return image
 		})
 
-		return { post }
+		return { post, slug: params.slug }
 	}
 
 	throw error(404, 'Not found.')

diff --git a/www/src/routes/photos/screen-shots/[slug]/+page.svelte b/www/src/routes/photos/screen-shots/[slug]/+page.svelte
@@ -5,4 +5,4 @@ import Item from '../../item.svelte'
 export let data
 </script>
 
-<Item {data} collection="screen-shots" />
+<Item {data} collection="screen-shots" slug={data.slug} />