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

@@ -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 });
 };

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 });
 };

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 });
 };

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.',
 			},
 		},
 	];