From 51af24ded4b7570f63bfe5861342e73b5bb94790 Mon Sep 17 00:00:00 2001
From: Ayu <hello@ayuhito.com>
Date: Thu, 18 Apr 2024 19:45:51 +0100
Subject: [PATCH] fix(website): improve meta descriptions (#969)

* fix(website): improve meta descriptions

* fix: add variable typefaces to desc

* fix: cdn title
---
 website/app/routes/fonts.$id._index.tsx  | 20 ++++++++++++++++++--
 website/app/routes/fonts.$id.cdn.tsx     | 22 +++++++++++++++++++---
 website/app/routes/fonts.$id.install.tsx | 22 +++++++++++++++++++---
 website/app/utils/meta.ts                |  8 ++++----
 4 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/website/app/routes/fonts.$id._index.tsx b/website/app/routes/fonts.$id._index.tsx
index 3f545c9376..af5e770f3a 100644
--- a/website/app/routes/fonts.$id._index.tsx
+++ b/website/app/routes/fonts.$id._index.tsx
@@ -155,13 +155,29 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
 	});
 };
 
+const generateDescription = (metadata: Metadata) => {
+	const { family, category, weights, styles, variable } = metadata;
+	const weightDesc =
+		weights.length > 1
+			? `weights ranging from ${weights[0]} to ${weights.at(-1)}`
+			: `a single weight of ${weights[0]}`;
+
+	const italicDesc = styles.includes('italic')
+		? ' including italic variants'
+		: '';
+
+	const variableDesc = variable ? 'variable ' : '';
+
+	return `The ${family} ${variableDesc}font family is a versatile ${category} web typeface offering ${weightDesc}${italicDesc} for free. Download and self-host via an NPM package for performance and privacy, enhancing your website's typography and user experience.`;
+};
+
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	const title = data?.metadata.family
 		? `${data.metadata.family} | Fontsource`
 		: 'Fontsource';
 
-	const description = data?.metadata.family
-		? `Download and self-host the ${data.metadata.family} font in a neatly bundled NPM package.`
+	const description = data?.metadata
+		? generateDescription(data.metadata)
 		: undefined;
 	return ogMeta({ title, description });
 };
diff --git a/website/app/routes/fonts.$id.cdn.tsx b/website/app/routes/fonts.$id.cdn.tsx
index 2a632073e6..67aab81aa6 100644
--- a/website/app/routes/fonts.$id.cdn.tsx
+++ b/website/app/routes/fonts.$id.cdn.tsx
@@ -38,13 +38,29 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
 	});
 };
 
+const generateDescription = (metadata: Metadata) => {
+	const { family, category, weights, styles, variable } = metadata;
+	const weightDesc =
+		weights.length > 1
+			? `weights ranging from ${weights[0]} to ${weights.at(-1)}`
+			: `a single weight of ${weights[0]}`;
+
+	const italicDesc = styles.includes('italic')
+		? ' including italic variants'
+		: '';
+
+	const variableDesc = variable ? 'variable ' : '';
+
+	return `The ${family} ${variableDesc}font family is a versatile ${category} web typeface offering ${weightDesc}${italicDesc} for free. Hosted on a privacy-friendly CDN that is free to use and simple to integrate into your website.`;
+};
+
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	const title = data?.metadata.family
-		? `${data.metadata.family} | Fontsource`
+		? `${data.metadata.family} | CDN | Fontsource`
 		: undefined;
 
-	const description = data?.metadata.family
-		? `Download and self-host the ${data.metadata.family} font in a neatly bundled NPM package.`
+	const description = data?.metadata
+		? generateDescription(data.metadata)
 		: undefined;
 	return ogMeta({ title, description });
 };
diff --git a/website/app/routes/fonts.$id.install.tsx b/website/app/routes/fonts.$id.install.tsx
index 05c3ef69ab..b5e9af9454 100644
--- a/website/app/routes/fonts.$id.install.tsx
+++ b/website/app/routes/fonts.$id.install.tsx
@@ -38,13 +38,29 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
 	});
 };
 
+const generateDescription = (metadata: Metadata) => {
+	const { family, category, weights, styles, variable } = metadata;
+	const weightDesc =
+		weights.length > 1
+			? `weights ranging from ${weights[0]} to ${weights.at(-1)}`
+			: `a single weight of ${weights[0]}`;
+
+	const italicDesc = styles.includes('italic')
+		? ' including italic variants'
+		: '';
+
+	const variableDesc = variable ? 'variable ' : '';
+
+	return `The ${family} ${variableDesc}font family is a versatile ${category} web typeface offering ${weightDesc}${italicDesc} for free. Download and self-host via an NPM package for performance and privacy, enhancing your website's typography and user experience.`;
+};
+
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	const title = data?.metadata.family
-		? `${data.metadata.family} | Fontsource`
+		? `${data.metadata.family} | Install | Fontsource`
 		: undefined;
 
-	const description = data?.metadata.family
-		? `Download and self-host the ${data.metadata.family} font in a neatly bundled package.`
+	const description = data?.metadata
+		? generateDescription(data.metadata)
 		: undefined;
 	return ogMeta({ title, description });
 };
diff --git a/website/app/utils/meta.ts b/website/app/utils/meta.ts
index cc7c82db82..46a3ad8df0 100644
--- a/website/app/utils/meta.ts
+++ b/website/app/utils/meta.ts
@@ -14,7 +14,7 @@ export const ogMeta = ({ title, description }: OGMeta): MetaDescriptor[] => {
 			name: 'description',
 			content:
 				description ??
-				'Download and self-host Open Source fonts in neatly bundled NPM packages.',
+				'Download and self-host 1500+ open-source fonts in neatly bundled NPM packages. Access a comprehensive library of web typefaces for free.',
 		},
 		{
 			property: 'og:title',
@@ -24,7 +24,7 @@ export const ogMeta = ({ title, description }: OGMeta): MetaDescriptor[] => {
 			property: 'og:description',
 			content:
 				description ??
-				'Download and self-host Open Source fonts in neatly bundled NPM packages.',
+				'Download and self-host 1500+ open-source fonts in neatly bundled NPM packages. Access a comprehensive library of web typefaces for free.',
 		},
 		{
 			property: 'og:image',
@@ -54,7 +54,7 @@ export const ogMeta = ({ title, description }: OGMeta): MetaDescriptor[] => {
 			name: 'twitter:description',
 			content:
 				description ??
-				'Download and self-host Open Source fonts in neatly bundled NPM packages.',
+				'Download and self-host 1500+ open-source fonts in neatly bundled NPM packages. Access a comprehensive library of web typefaces for free.',
 		},
 		{
 			name: 'twitter:image',
@@ -76,7 +76,7 @@ export const ogMeta = ({ title, description }: OGMeta): MetaDescriptor[] => {
 				url: 'https://fontsource.org',
 				name: 'Fontsource',
 				description:
-					'Download and self-host Open Source fonts in neatly bundled NPM packages.',
+					'Download and self-host 1500+ open-source fonts in neatly bundled NPM packages. Access a comprehensive library of web typefaces for free.',
 			},
 		},
 	];