From 3327b83a5a5597697886b2395448515dbcdfe30d Mon Sep 17 00:00:00 2001
From: ToBinio <tobias.frischmann@proton.me>
Date: Thu, 30 Apr 2026 09:17:36 +0200
Subject: [PATCH] try to slightly improve seo

---
 app/components/chart/Table.vue     |  6 ++---
 app/composables/useExplanations.ts | 21 +++++++++++++----
 app/pages/charts.vue               | 37 +++++++++++-------------------
 3 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/app/components/chart/Table.vue b/app/components/chart/Table.vue
index 156bd99..f31535f 100644
--- a/app/components/chart/Table.vue
+++ b/app/components/chart/Table.vue
@@ -3,7 +3,7 @@
 
 	const props = defineProps<{
 		data: StatExport | undefined;
-		explanation: string | undefined;
+		title: string | undefined;
 	}>();
 
 	const groups = computed(() => {
@@ -13,8 +13,8 @@
 </script>
 
 <template>
-	<table>
-		<caption v-if="explanation" v-html="explanation"></caption>
+	<table class="sr-only block">
+		<caption v-if="title" v-html="title"></caption>
 		<thead>
 			<tr>
 				<th>Label</th>
diff --git a/app/composables/useExplanations.ts b/app/composables/useExplanations.ts
index 87bae15..6d09dcc 100644
--- a/app/composables/useExplanations.ts
+++ b/app/composables/useExplanations.ts
@@ -1,9 +1,22 @@
 import { firstLetterUpperCase } from "~~/shared/utils/text";
 
-export function useExplanations(
-	type: string,
-	stat: string,
-): string | undefined {
+export function useExplanations(projectType: Ref<string>, stat: Ref<string>) {
+	const explanation = computed(() => {
+		return getExplanations(projectType.value, stat.value);
+	});
+
+	const title = computed(() => {
+		return `Modrinth Statistics - ${firstLetterUpperCase(projectType.value)} ${firstLetterUpperCase(stat.value)}`;
+	});
+
+	const description = computed(() => {
+		return `See all Statistics about Modrinth - ${firstLetterUpperCase(projectType.value)} ${firstLetterUpperCase(stat.value)}`;
+	});
+
+	return { explanation, title, description };
+}
+
+function getExplanations(type: string, stat: string): string | undefined {
 	switch (type.toLowerCase()) {
 		case "mod":
 		case "plugin":
diff --git a/app/pages/charts.vue b/app/pages/charts.vue
index 0809921..0a8a8b2 100644
--- a/app/pages/charts.vue
+++ b/app/pages/charts.vue
@@ -9,18 +9,6 @@
 	import { useTracking } from "~/composables/useTracking";
 	import { useTypeCategory } from "~/composables/useTypeCategory";
 	import { useVersionRange } from "~/composables/useVersionRange";
-	import { firstLetterUpperCase } from "~~/shared/utils/text";
-
-	const title = ref("Modrinth Statistics");
-
-	useHead({
-		title: title,
-	});
-
-	useSeoMeta({
-		description: "See all Statistics about Modrinth",
-		ogDescription: "See all Statistics about Modrinth",
-	});
 
 	useTracking();
 
@@ -30,14 +18,6 @@
 	const { isGlobalStats, isProjectStats, isRevenueStats } =
 		useTypeCategory(projectType);
 
-	watch(
-		[projectType, stat],
-		() => {
-			title.value = `Modrinth Statistics - ${firstLetterUpperCase(projectType.value)} ${firstLetterUpperCase(stat.value)}`;
-		},
-		{ immediate: true },
-	);
-
 	const versionGroup = useFilterItem("version_group", "major");
 
 	const time = useFilterItem("time", "all");
@@ -117,8 +97,18 @@
 		if (!isFetching.value) lazyIsGroupData.value = isGroupData.value;
 	});
 
-	const explanation = computed(() => {
-		return useExplanations(projectType.value, stat.value);
+	const { explanation, title, description } = useExplanations(
+		projectType,
+		stat,
+	);
+
+	useHead({
+		title: title,
+	});
+
+	useSeoMeta({
+		description: description,
+		ogDescription: description,
 	});
 
 	const sideBarOpen = ref(false);
@@ -230,7 +220,7 @@
 			>
 				<ChartBarChart v-if="lazyIsGroupData" :data="data" />
 				<ChartLineChart v-else :data="data" />
-				<ChartTable class="hidden" :data="data" :explanation="explanation" />
+				<ChartTable :data="data" :title="title" />
 			</div>
 			<Explanation v-if="explanation" :explanation="explanation" />
 
@@ -243,3 +233,4 @@
 		</div>
 	</div>
 </template>
+/>
-- 
2.51.2