chore: improve page metadata

src/app.d.ts

@@ -12,6 +12,8 @@ declare global {
 			meta?: {
 				title?: string;
 				description?: string;
+				url?: string;
+				image?: string;
 			};
 		}
 	}

src/routes/+layout.svelte

@@ -19,6 +19,24 @@
 	{#if page.data.meta?.description}
 		<meta name="description" content={page.data.meta.description} />
 	{/if}
+
+	{#if page.data.meta?.title}
+		<title>{page.data.meta.title}</title>
+		<meta property="og:title" content={page.data.meta.title} />
+	{/if}
+
+	{#if page.data.meta?.description}
+		<meta name="description" content={page.data.meta.description} />
+		<meta property="og:description" content={page.data.meta.description} />
+	{/if}
+
+	{#if page.data.meta?.image}
+		<meta property="og:image" content={page.data.meta.image} />
+	{/if}
+
+	{#if page.data.meta?.url}
+		<meta property="og:url" content={page.data.meta.url} />
+	{/if}
 </svelte:head>
 
 <div class="flex min-h-screen flex-col bg-base-200 font-mono *:w-full">

src/routes/awesome-privacy/[category]/+page.server.ts

@@ -4,7 +4,7 @@ import type { PageServerLoad } from './$types';
 
 import { awesomePrivacy } from '$lib/features/awesome-privacy/service';
 
-export const load: PageServerLoad = async ({ params }) => {
+export const load: PageServerLoad = async ({ params, url }) => {
 	const { category: categorySlug } = params;
 
 	const category = awesomePrivacy.getCategory({ categorySlug });
@@ -15,7 +15,9 @@ export const load: PageServerLoad = async ({ params }) => {
 
 	return {
 		meta: {
-			title: `${category.name} | 10xPrivacy`
+			title: `${category.name} | Awesome Privacy | 10xPrivacy`,
+			description: `Curated list of privacy-respecting software and services in the ${category.name} category.`,
+			url: url.href
 		},
 		categorySlug,
 		category

src/routes/awesome-privacy/[category]/[section]/+page.ts

@@ -6,7 +6,7 @@ import { awesomePrivacy } from '$lib/features/awesome-privacy/service';
 
 export const ssr = false;
 
-export const load: PageLoad = async ({ params }) => {
+export const load: PageLoad = async ({ params, url }) => {
 	const { category: categorySlug, section: sectionSlug } = params;
 
 	const section = awesomePrivacy.getSection({ categorySlug, sectionSlug });
@@ -17,8 +17,9 @@ export const load: PageLoad = async ({ params }) => {
 
 	return {
 		meta: {
-			title: `${section.name} | 10xPrivacy`,
-			description: section.intro
+			title: `${section.name} | ${awesomePrivacy.slugToName(categorySlug)} | Awesome Privacy| 10xPrivacy`,
+			description: section.intro,
+			url: url.href
 		},
 		categorySlug,
 		sectionSlug,

src/routes/awesome-privacy/[category]/[section]/[service]/+layout.server.ts

@@ -6,7 +6,7 @@ import { awesomePrivacy } from '$lib/features/awesome-privacy/service';
 
 export const ssr = false;
 
-export const load: LayoutServerLoad = async ({ params }) => {
+export const load: LayoutServerLoad = async ({ params, url }) => {
 	const { category: categorySlug, section: sectionSlug, service: serviceSlug } = params;
 
 	const section = awesomePrivacy.getSection({ categorySlug, sectionSlug });
@@ -27,8 +27,9 @@ export const load: LayoutServerLoad = async ({ params }) => {
 
 	return {
 		meta: {
-			title: `${service.name} | 10xPrivacy`,
-			description: service.description
+			title: `${service.name} | ${section.name} | ${awesomePrivacy.slugToName(categorySlug)} | Awesome Privacy | 10xPrivacy`,
+			description: service.description,
+			url: url.href
 		},
 		categorySlug,
 		sectionSlug,

src/routes/awesome-privacy/all/+page.server.ts

@@ -5,7 +5,8 @@ import { awesomePrivacy } from '$lib/features/awesome-privacy/service';
 export const load: PageServerLoad = () => {
 	return {
 		meta: {
-			title: 'All Categories | 10xPrivacy'
+			title: 'All Categories | Awesome Privacy | 10xPrivacy',
+			description: 'A curated guide to privacy-respecting software and services.'
 		},
 		categories: awesomePrivacy.getCategories()
 	};

src/routes/privacy-news/[slug]/+layout.server.ts

@@ -2,7 +2,7 @@ import { error } from '@sveltejs/kit';
 
 import type { LayoutServerLoad } from './$types';
 
-export const load: LayoutServerLoad = async ({ params, parent }) => {
+export const load: LayoutServerLoad = async ({ params, url, parent }) => {
 	const { promisedArticles } = await parent();
 
 	const articles = await promisedArticles;
@@ -15,8 +15,9 @@ export const load: LayoutServerLoad = async ({ params, parent }) => {
 
 	return {
 		meta: {
-			title: `${article.title} | 10xPrivacy`,
-			description: article.description
+			title: `${article.title} | Privacy News | 10xPrivacy`,
+			description: article.description,
+			url: url.href
 		},
 		article
 	};

src/routes/security/+page.server.ts

@@ -4,6 +4,11 @@ export const load: PageServerLoad = ({ locals, setHeaders }) => {
 	setHeaders({ 'Cache-Control': 'public, max-age=1800' });
 
 	return {
+		meta: {
+			title: 'Security | 10xPrivacy',
+			description:
+				'Transparency is cool, 10xPrivacy will allways be cool. Below are the security scores from Mozilla HTTP Observatory and the HTTP headers set on every response.'
+		},
 		headers: Object.entries(locals.securityHeaders).map(([name, value]) => ({ name, value }))
 	};
 };