From fc64719bb841545da12ceadafaa4805928b01736 Mon Sep 17 00:00:00 2001
From: Emma Alexia Triphora <emma@modrinth.com>
Date: Fri, 22 Sep 2023 12:45:03 -0400
Subject: [PATCH] SEO cleanup (#1367)

* SEO/Metadata cleanup

May split rules changes into its own PR

* Revert rules/terms changes as they are now on a separate branch

* Update [searchProjectType].vue

* Update terms.vue
---
 layouts/default.vue                     |  29 +++++-
 nuxt.config.ts                          |  22 -----
 pages/[type]/[id].vue                   |  52 +++++-----
 pages/[type]/[id]/changelog.vue         |  19 ++--
 pages/[type]/[id]/gallery.vue           | 121 ++++++++++--------------
 pages/[type]/[id]/index.vue             |   2 -
 pages/[type]/[id]/settings/license.vue  |   1 -
 pages/[type]/[id]/version/[version].vue |  41 ++++----
 pages/[type]/[id]/versions.vue          |  29 +++---
 pages/app.vue                           |  20 ++--
 pages/dashboard.vue                     |   1 -
 pages/dashboard/analytics.vue           |   1 -
 pages/dashboard/follows.vue             |   1 -
 pages/dashboard/reports.vue             |   1 -
 pages/legal.vue                         |  22 +++--
 pages/legal/ccpa.vue                    |  39 ++------
 pages/legal/cmp-info.vue                |  39 ++------
 pages/legal/cmp.vue                     |  39 ++------
 pages/legal/copyright.vue               |  39 ++------
 pages/legal/privacy.vue                 |  39 ++------
 pages/legal/rules.vue                   |  39 ++------
 pages/legal/security.vue                |  39 ++------
 pages/legal/terms.vue                   |  39 ++------
 pages/moderation.vue                    |   1 -
 pages/moderation/reports.vue            |   1 -
 pages/search/[searchProjectType].vue    |  32 +++----
 pages/settings.vue                      |   2 -
 pages/settings/index.vue                |   1 -
 pages/user/[id].vue                     |  23 ++---
 29 files changed, 261 insertions(+), 473 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 4ae2ad02..b474b1af 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -391,7 +391,6 @@ const config = useRuntimeConfig()
 const route = useRoute()
 const link = config.public.siteUrl + route.path.replace(/\/+$/, '')
 useHead({
-  meta: [{ name: 'og:url', content: link }],
   link: [
     {
       rel: 'canonical',
@@ -400,6 +399,34 @@ useHead({
   ],
 })
 
+const description =
+  'Download Minecraft mods, plugins, datapacks, shaders, resourcepacks, and modpacks on Modrinth. ' +
+  'Discover and publish projects on Modrinth with a modern, easy to use interface and API.'
+
+useSeoMeta({
+  title: 'Modrinth',
+  description,
+  publisher: 'Rinth, Inc.',
+  themeColor: [
+    { color: '#1bd96a', media: '(prefers-color-scheme:no-preference)' },
+    { color: '#1bd96a', media: '(prefers-color-scheme:dark)' },
+    { color: '#00af5c', media: '(prefers-color-scheme:light)' },
+  ],
+  colorScheme: 'dark light',
+
+  // OpenGraph
+  ogTitle: 'Modrinth',
+  ogSiteName: 'Modrinth',
+  ogDescription: description,
+  ogType: 'website',
+  ogImage: 'https://cdn.modrinth.com/modrinth-new.png',
+  ogUrl: link,
+
+  // Twitter
+  twitterCard: 'summary',
+  twitterSite: '@modrinth',
+})
+
 let developerModeCounter = 0
 
 function developerModeIncrement() {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index b163cc14..d1162404 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -22,25 +22,6 @@ const favicons = {
   '(prefers-color-scheme:dark)': '/favicon.ico',
 }
 
-const meta = {
-  description:
-    'Download Minecraft mods, plugins, datapacks, shaders, resourcepacks, and modpacks on Modrinth. Discover and publish projects on Modrinth with a modern, easy to use interface and API.',
-  publisher: 'Rinth, Inc.',
-  'apple-mobile-web-app-title': 'Modrinth',
-  'theme-color': '#1bd96a',
-  'color-scheme': 'dark light',
-  // OpenGraph
-  'og:title': 'Modrinth',
-  'og:site_name': 'Modrinth',
-  'og:description': 'An open source modding platform',
-  'og:type': 'website',
-  'og:url': 'https://modrinth.com',
-  'og:image': 'https://cdn.modrinth.com/modrinth-new.png?',
-  // Twitter
-  'twitter:card': 'summary',
-  'twitter:site': '@modrinth',
-}
-
 /**
  * Tags of locales that are auto-discovered besides the default locale.
  *
@@ -70,9 +51,6 @@ export default defineNuxtConfig({
         lang: 'en',
       },
       title: 'Modrinth',
-      meta: Object.entries(meta).map(([name, content]): object => {
-        return { name, content }
-      }),
       link: [
         // The type is necessary because the linter can't always compare this very nested/complex type on itself
         ...preloadedFonts.map((font): object => {
diff --git a/pages/[type]/[id].vue b/pages/[type]/[id].vue
index c9accfa3..c978a889 100644
--- a/pages/[type]/[id].vue
+++ b/pages/[type]/[id].vue
@@ -125,31 +125,6 @@
     </div>
   </div>
   <div v-else>
-    <Head>
-      <Title> {{ project.title }} - Minecraft {{ projectTypeDisplay }} </Title>
-      <Meta name="og:title" :content="`${project.title} - Minecraft ${projectTypeDisplay}`" />
-      <Meta
-        name="description"
-        :content="`${project.description} - Download the Minecraft ${projectTypeDisplay} ${
-          project.title
-        } by ${members.find((x) => x.role === 'Owner').user.username} on Modrinth`"
-      />
-      <Meta
-        name="apple-mobile-web-app-title"
-        :content="`${project.title} - Minecraft ${projectTypeDisplay}`"
-      />
-      <Meta name="og:description" :content="project.description" />
-      <Meta
-        name="og:image"
-        :content="project.icon_url ? project.icon_url : 'https://cdn.modrinth.com/placeholder.png'"
-      />
-      <Meta
-        name="robots"
-        :content="
-          project.status === 'approved' || project.status === 'archived' ? 'all' : 'noindex'
-        "
-      />
-    </Head>
     <Modal ref="modalLicense" :header="project.license.name ? project.license.name : 'License'">
       <div class="modal-license">
         <div class="markdown-body" v-html="renderString(licenseText)" />
@@ -878,11 +853,6 @@ featuredVersions.value.sort((a, b) => {
   return gameVersions.indexOf(aLatest) - gameVersions.indexOf(bLatest)
 })
 
-const projectTypeDisplay = computed(() =>
-  data.$formatProjectType(
-    data.$getProjectTypeForDisplay(project.value.project_type, project.value.loaders)
-  )
-)
 const licenseIdDisplay = computed(() => {
   const id = project.value.license.id
 
@@ -896,6 +866,28 @@ const licenseIdDisplay = computed(() => {
 })
 const featuredGalleryImage = computed(() => project.value.gallery.find((img) => img.featured))
 
+const projectTypeDisplay = data.$formatProjectType(
+  data.$getProjectTypeForDisplay(project.value.project_type, project.value.loaders)
+)
+const title = `${project.value.title} - Minecraft ${projectTypeDisplay}`
+const description = `${project.value.description} - Download the Minecraft ${projectTypeDisplay} ${
+  project.value.title
+} by ${members.value.find((x) => x.role === 'Owner').user.username} on Modrinth`
+
+if (!route.name.startsWith('type-id-settings')) {
+  useSeoMeta({
+    title,
+    description,
+    ogTitle: title,
+    ogDescription: project.value.description,
+    ogImage: project.value.icon_url ?? 'https://cdn.modrinth.com/placeholder.png',
+    robots:
+      project.value.status === 'approved' || project.value.status === 'archived'
+        ? 'all'
+        : 'noindex',
+  })
+}
+
 async function resetProject() {
   const newProject = await useBaseFetch(`project/${project.value.id}`)
 
diff --git a/pages/[type]/[id]/changelog.vue b/pages/[type]/[id]/changelog.vue
index 1373ec7e..5f8706b1 100644
--- a/pages/[type]/[id]/changelog.vue
+++ b/pages/[type]/[id]/changelog.vue
@@ -1,12 +1,5 @@
 <template>
   <div class="content">
-    <Head>
-      <Title> {{ project.title }} - Changelog </Title>
-      <Meta name="og:title" :content="`${props.project.title} - Changelog`" />
-      <Meta name="description" :content="metaDescription" />
-      <Meta name="apple-mobile-web-app-title" :content="`${props.project.title} - Changelog`" />
-      <Meta name="og:description" :content="metaDescription" />
-    </Head>
     <VersionFilterControl :versions="props.versions" />
     <Pagination
       :page="currentPage"
@@ -100,9 +93,15 @@ const props = defineProps({
   },
 })
 
-const metaDescription = computed(
-  () => `View the changelog of ${props.project.title}'s ${props.versions.length} versions.`
-)
+const title = `${props.project.title} - Changelog`
+const description = `View the changelog of ${props.project.title}'s ${props.versions.length} versions.`
+
+useSeoMeta({
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description,
+})
 
 const route = useRoute()
 const currentPage = ref(Number(route.query.p ?? 1))
diff --git a/pages/[type]/[id]/gallery.vue b/pages/[type]/[id]/gallery.vue
index 9838f4b1..b9db22d9 100644
--- a/pages/[type]/[id]/gallery.vue
+++ b/pages/[type]/[id]/gallery.vue
@@ -1,12 +1,5 @@
 <template>
   <div>
-    <Head>
-      <Title>{{ project.title }} - Gallery</Title>
-      <Meta name="og:title" :content="`${project.title} - Gallery`" />
-      <Meta name="description" :content="metaDescription" />
-      <Meta name="apple-mobile-web-app-title" :content="`${project.title} - Gallery`" />
-      <Meta name="og:description" :contcent="metaDescription" />
-    </Head>
     <Modal
       v-if="currentMember"
       ref="modal_edit_item"
@@ -102,7 +95,7 @@
         </button>
         <div class="button-group">
           <button class="iconified-button" @click="$refs.modal_edit_item.hide()">
-            <CrossIcon />
+            <XIcon />
             Cancel
           </button>
           <button
@@ -165,7 +158,7 @@
           <div class="controls">
             <div class="buttons">
               <button class="close circle-button" @click="expandedGalleryItem = null">
-                <CrossIcon aria-hidden="true" />
+                <XIcon aria-hidden="true" />
               </button>
               <a
                 class="open circle-button"
@@ -276,66 +269,58 @@
   </div>
 </template>
 
+<script setup>
+import {
+  PlusIcon,
+  CalendarIcon,
+  EditIcon,
+  TrashIcon,
+  SaveIcon,
+  StarIcon,
+  XIcon,
+  RightArrowIcon,
+  LeftArrowIcon,
+  ExternalIcon,
+  ExpandIcon,
+  ContractIcon,
+  UploadIcon,
+  InfoIcon,
+  ImageIcon,
+  TransferIcon,
+  ModalConfirm,
+  Modal,
+  FileInput,
+  DropArea,
+} from 'omorphia'
+
+const props = defineProps({
+  project: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  currentMember: {
+    type: Object,
+    default() {
+      return null
+    },
+  },
+})
+
+const title = `${props.project.title} - Gallery`
+const description = `View ${props.project.gallery.length} images of ${props.project.title} on Modrinth.`
+
+useSeoMeta({
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description,
+})
+</script>
+
 <script>
-import PlusIcon from '~/assets/images/utils/plus.svg'
-import CalendarIcon from '~/assets/images/utils/calendar.svg'
-import TrashIcon from '~/assets/images/utils/trash.svg'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import RightArrowIcon from '~/assets/images/utils/right-arrow.svg'
-import LeftArrowIcon from '~/assets/images/utils/left-arrow.svg'
-import EditIcon from '~/assets/images/utils/edit.svg'
-import SaveIcon from '~/assets/images/utils/save.svg'
-import ExternalIcon from '~/assets/images/utils/external.svg'
-import ExpandIcon from '~/assets/images/utils/expand.svg'
-import ContractIcon from '~/assets/images/utils/contract.svg'
-import StarIcon from '~/assets/images/utils/star.svg'
-import UploadIcon from '~/assets/images/utils/upload.svg'
-import InfoIcon from '~/assets/images/utils/info.svg'
-import ImageIcon from '~/assets/images/utils/image.svg'
-import TransferIcon from '~/assets/images/utils/transfer.svg'
-
-import FileInput from '~/components/ui/FileInput.vue'
-import DropArea from '~/components/ui/DropArea.vue'
-import ModalConfirm from '~/components/ui/ModalConfirm.vue'
-import Modal from '~/components/ui/Modal.vue'
-
 export default defineNuxtComponent({
-  components: {
-    CalendarIcon,
-    PlusIcon,
-    EditIcon,
-    TrashIcon,
-    SaveIcon,
-    StarIcon,
-    CrossIcon,
-    RightArrowIcon,
-    LeftArrowIcon,
-    ExternalIcon,
-    ExpandIcon,
-    ContractIcon,
-    UploadIcon,
-    InfoIcon,
-    ImageIcon,
-    TransferIcon,
-    ModalConfirm,
-    Modal,
-    FileInput,
-    DropArea,
-  },
-  props: {
-    project: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-    currentMember: {
-      type: Object,
-      default() {
-        return null
-      },
-    },
-  },
   data() {
     return {
       expandedGalleryItem: null,
@@ -352,8 +337,6 @@ export default defineNuxtComponent({
       editFile: null,
       previewImage: null,
       shouldPreventActions: false,
-
-      metaDescription: `View ${this.project.gallery.length} images of ${this.project.title} on Modrinth.`,
     }
   },
   computed: {
diff --git a/pages/[type]/[id]/index.vue b/pages/[type]/[id]/index.vue
index 48e2b82c..5e369546 100644
--- a/pages/[type]/[id]/index.vue
+++ b/pages/[type]/[id]/index.vue
@@ -17,5 +17,3 @@ export default defineNuxtComponent({
   methods: { renderHighlightedString },
 })
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/pages/[type]/[id]/settings/license.vue b/pages/[type]/[id]/settings/license.vue
index 0cd346f2..ecca6bb3 100644
--- a/pages/[type]/[id]/settings/license.vue
+++ b/pages/[type]/[id]/settings/license.vue
@@ -294,4 +294,3 @@ export default defineNuxtComponent({
   },
 })
 </script>
-<style lang="scss" scoped></style>
diff --git a/pages/[type]/[id]/version/[version].vue b/pages/[type]/[id]/version/[version].vue
index 14a64731..0b29cad5 100644
--- a/pages/[type]/[id]/version/[version].vue
+++ b/pages/[type]/[id]/version/[version].vue
@@ -1,12 +1,5 @@
 <template>
   <div v-if="version" class="version-page">
-    <Head>
-      <Title>{{ metaTitle }}</Title>
-      <Meta name="og:title" :content="metaTitle" />
-      <Meta name="description" :content="metaDescription" />
-      <Meta name="apple-mobile-web-app-title" :content="metaDescription" />
-      <Meta name="og:description" :content="metaDescription" />
-    </Head>
     <ModalConfirm
       v-if="currentMember"
       ref="modal_confirm"
@@ -894,6 +887,27 @@ export default defineNuxtComponent({
 
     oldFileTypes = version.files.map((x) => fileTypes.find((y) => y.value === x.file_type))
 
+    const title = computed(
+      () => `${isCreating ? 'Create Version' : version.name} - ${props.project.title}`
+    )
+    const description = computed(
+      () =>
+        `Download ${props.project.title} ${
+          version.version_number
+        } on Modrinth. Supports ${data.$formatVersion(version.game_versions)} ${version.loaders
+          .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+          .join(' & ')}. Published on ${data
+          .$dayjs(version.date_published)
+          .format('MMM D, YYYY')}. ${version.downloads} downloads.`
+    )
+
+    useSeoMeta({
+      title,
+      description,
+      ogTitle: title,
+      ogDescription: description,
+    })
+
     const order = ['required', 'optional', 'incompatible', 'embedded']
 
     return {
@@ -908,19 +922,6 @@ export default defineNuxtComponent({
       alternateFile: ref(alternateFile),
       replaceFile: ref(replaceFile),
 
-      metaTitle: computed(
-        () => `${isCreating ? 'Create Version' : version.name} - ${props.project.title}`
-      ),
-      metaDescription: computed(
-        () =>
-          `Download ${props.project.title} ${
-            version.version_number
-          } on Modrinth. Supports ${data.$formatVersion(version.game_versions)} ${version.loaders
-            .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
-            .join(' & ')}. Published on ${data
-            .$dayjs(version.date_published)
-            .format('MMM D, YYYY')}. ${version.downloads} downloads.`
-      ),
       deps: computed(() =>
         version.dependencies.sort(
           (a, b) => order.indexOf(a.dependency_type) - order.indexOf(b.dependency_type)
diff --git a/pages/[type]/[id]/versions.vue b/pages/[type]/[id]/versions.vue
index f97d2987..6a064c9f 100644
--- a/pages/[type]/[id]/versions.vue
+++ b/pages/[type]/[id]/versions.vue
@@ -1,12 +1,5 @@
 <template>
   <div class="content">
-    <Head>
-      <Title> {{ project.title }} - Versions </Title>
-      <Meta name="og:title" :content="`${project.title} - Versions`" />
-      <Meta name="description" :content="metaDescription" />
-      <Meta name="apple-mobile-web-app-title" :content="`${project.title} - Versions`" />
-      <Meta name="og:description" :content="metaDescription" />
-    </Head>
     <div v-if="currentMember" class="card header-buttons">
       <FileInput
         :max-size="524288000"
@@ -142,14 +135,20 @@ const props = defineProps({
 })
 
 const data = useNuxtApp()
-const metaDescription = computed(
-  () =>
-    `Download and browse ${props.versions.length} ${
-      props.project.title
-    } versions. ${data.$formatNumber(props.project.downloads)} total downloads. Last updated ${data
-      .$dayjs(props.project.updated)
-      .format('MMM D, YYYY')}.`
-)
+
+const title = `${props.project.title} - Versions`
+const description = `Download and browse ${props.versions.length} ${
+  props.project.title
+} versions. ${data.$formatNumber(props.project.downloads)} total downloads. Last updated ${data
+  .$dayjs(props.project.updated)
+  .format('MMM D, YYYY')}.`
+
+useSeoMeta({
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description,
+})
 
 const route = useRoute()
 const currentPage = ref(Number(route.query.p ?? 1))
diff --git a/pages/app.vue b/pages/app.vue
index 1940e500..144c1fb7 100644
--- a/pages/app.vue
+++ b/pages/app.vue
@@ -38,9 +38,7 @@ const rows = shallowRef([
 const { data: launcherUpdates } = await useAsyncData('launcherUpdates', () =>
   $fetch('https://launcher-files.modrinth.com/updates.json')
 )
-console.log(launcherUpdates)
 
-console.log(launcherUpdates.value)
 macLinks.appleSilicon = launcherUpdates.value.platforms['darwin-aarch64'].install_urls[0]
 macLinks.intel = launcherUpdates.value.platforms['darwin-x86_64'].install_urls[0]
 windowsLink.value = launcherUpdates.value.platforms['windows-x86_64'].install_urls[0]
@@ -99,19 +97,15 @@ const scrollToSection = () => {
   })
 }
 
-useHead({
-  title: 'Download the Modrinth App!',
-  meta: [{ name: 'The Modrinth App', content: 'An open source mod launcher unlike any other.' }],
-})
+const title = 'Download the Modrinth App!'
+const description =
+  'The Modrinth App is a unique, open source launcher that allows you to play your favorite mods, and keep them up to date, all in one neat little package.'
 
 useSeoMeta({
-  title: 'The Modrinth App',
-  ogTitle: 'The Modrinth App',
-  description: 'Download the Modrinth App for Windows, Mac, and Linux.',
-  ogDescription:
-    'The Modrinth App is a unique, open source launcher that allows you to play your favorite mods, and keep them up to date, all in one neat little package.',
-  ogImage: 'https://cdn.modrinth.com/modrinth-new.png?',
-  twitterCard: 'summary',
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description,
 })
 </script>
 
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index f26f60ba..b213c9fa 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -49,4 +49,3 @@ definePageMeta({
 
 const route = useRoute()
 </script>
-<style lang="scss" scoped></style>
diff --git a/pages/dashboard/analytics.vue b/pages/dashboard/analytics.vue
index caa96b0a..346e6fa8 100644
--- a/pages/dashboard/analytics.vue
+++ b/pages/dashboard/analytics.vue
@@ -15,4 +15,3 @@ export default defineNuxtComponent({
   },
 })
 </script>
-<style lang="scss" scoped></style>
diff --git a/pages/dashboard/follows.vue b/pages/dashboard/follows.vue
index 8ea56571..42233069 100644
--- a/pages/dashboard/follows.vue
+++ b/pages/dashboard/follows.vue
@@ -48,4 +48,3 @@ definePageMeta({
   middleware: 'auth',
 })
 </script>
-<style lang="scss" scoped></style>
diff --git a/pages/dashboard/reports.vue b/pages/dashboard/reports.vue
index 4eb96745..22718de4 100644
--- a/pages/dashboard/reports.vue
+++ b/pages/dashboard/reports.vue
@@ -14,4 +14,3 @@ useHead({
   title: 'Active reports - Modrinth',
 })
 </script>
-<style lang="scss" scoped></style>
diff --git a/pages/legal.vue b/pages/legal.vue
index 95082120..31526f53 100644
--- a/pages/legal.vue
+++ b/pages/legal.vue
@@ -7,21 +7,25 @@
           <NavStackItem link="/legal/terms" label="Terms and Conditions">
             <HeartHandshakeIcon />
           </NavStackItem>
+          <NavStackItem link="/legal/rules" label="Content Rules">
+            <ScaleIcon />
+          </NavStackItem>
+          <NavStackItem link="/legal/copyright" label="Copyright Policy">
+            <CopyrightIcon />
+          </NavStackItem>
+          <NavStackItem link="/legal/security" label="Security Notice">
+            <ShieldIcon />
+          </NavStackItem>
+
+          <h3>Privacy</h3>
           <NavStackItem link="/legal/privacy" label="Privacy Policy">
             <LockIcon />
           </NavStackItem>
           <NavStackItem link="/legal/ccpa" label="California Privacy Notice">
             <InfoIcon />
           </NavStackItem>
-          <NavStackItem link="/legal/rules" label="Content Rules">
-            <ScaleIcon />
-          </NavStackItem>
-          <NavStackItem link="/legal/security" label="Security Notice">
-            <ShieldIcon />
-          </NavStackItem>
-          <NavStackItem link="/legal/copyright" label="Copyright Policy">
-            <CopyrightIcon />
-          </NavStackItem>
+
+          <h3>Rewards Program</h3>
           <NavStackItem link="/legal/cmp" label="Rewards Program Terms">
             <CurrencyIcon />
           </NavStackItem>
diff --git a/pages/legal/ccpa.vue b/pages/legal/ccpa.vue
index d3e4228d..31054a47 100644
--- a/pages/legal/ccpa.vue
+++ b/pages/legal/ccpa.vue
@@ -451,35 +451,14 @@
   </div>
 </template>
 
-<script>
-export default defineNuxtComponent({
-  head: {
-    title: 'California Privacy Notice - Modrinth',
-    meta: [
-      {
-        hid: 'description',
-        name: 'description',
-        content:
-          'The California privacy notice of Modrinth, an open source modding platform focused on Minecraft.',
-      },
-      {
-        hid: 'apple-mobile-web-app-title',
-        name: 'apple-mobile-web-app-title',
-        content: 'California Privacy Notice',
-      },
-      {
-        hid: 'og:title',
-        name: 'og:title',
-        content: 'California Privacy Notice',
-      },
-      {
-        hid: 'og:url',
-        name: 'og:url',
-        content: 'https://modrinth.com/legal/ccpa',
-      },
-    ],
-  },
+<script setup>
+const description =
+  'The California Privacy Notice of Modrinth, an open source modding platform focused on Minecraft.'
+
+useSeoMeta({
+  title: 'California Privacy Notice - Modrinth',
+  description,
+  ogTitle: 'California Privacy Notice',
+  ogDescription: description,
 })
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/pages/legal/cmp-info.vue b/pages/legal/cmp-info.vue
index 36394a32..1ff11dde 100644
--- a/pages/legal/cmp-info.vue
+++ b/pages/legal/cmp-info.vue
@@ -88,37 +88,14 @@
   </div>
 </template>
 
-<script>
-export default defineNuxtComponent({
-  name: 'CmpInfo',
+<script setup>
+const description =
+  'Information about the Rewards Program of Modrinth, an open source modding platform focused on Minecraft.'
 
-  head: {
-    title: 'Rewards Program Information - Modrinth',
-    meta: [
-      {
-        hid: 'description',
-        name: 'description',
-        content:
-          'The rewards program information of Modrinth, an open source modding platform focused on Minecraft.',
-      },
-      {
-        hid: 'apple-mobile-web-app-title',
-        name: 'apple-mobile-web-app-title',
-        content: 'Rewards Program Information',
-      },
-      {
-        hid: 'og:title',
-        name: 'og:title',
-        content: 'Rewards Program Information',
-      },
-      {
-        hid: 'og:url',
-        name: 'og:url',
-        content: 'https://modrinth.com/legal/cmp-info',
-      },
-    ],
-  },
+useSeoMeta({
+  title: 'Rewards Program Information - Modrinth',
+  description,
+  ogTitle: 'Rewards Program Information',
+  ogDescription: description,
 })
 </script>
-
-<style scoped></style>
diff --git a/pages/legal/cmp.vue b/pages/legal/cmp.vue
index ea504fde..ed532019 100644
--- a/pages/legal/cmp.vue
+++ b/pages/legal/cmp.vue
@@ -63,35 +63,14 @@
   </div>
 </template>
 
-<script>
-export default defineNuxtComponent({
-  head: {
-    title: 'Rewards Program Terms - Modrinth',
-    meta: [
-      {
-        hid: 'description',
-        name: 'description',
-        content:
-          'The rewards program terms of Modrinth, an open source modding platform focused on Minecraft.',
-      },
-      {
-        hid: 'apple-mobile-web-app-title',
-        name: 'apple-mobile-web-app-title',
-        content: 'Rewards Program Terms',
-      },
-      {
-        hid: 'og:title',
-        name: 'og:title',
-        content: 'Rewards Program Terms',
-      },
-      {
-        hid: 'og:url',
-        name: 'og:url',
-        content: 'https://modrinth.com/legal/cmp',
-      },
-    ],
-  },
+<script setup>
+const description =
+  'The Rewards Program Terms of Modrinth, an open source modding platform focused on Minecraft.'
+
+useSeoMeta({
+  title: 'Rewards Program Terms - Modrinth',
+  description,
+  ogTitle: 'Rewards Program Terms',
+  ogDescription: description,
 })
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/pages/legal/copyright.vue b/pages/legal/copyright.vue
index 4d3785f8..9910ed8b 100644
--- a/pages/legal/copyright.vue
+++ b/pages/legal/copyright.vue
@@ -101,35 +101,14 @@
   </div>
 </template>
 
-<script>
-export default defineNuxtComponent({
-  head: {
-    title: 'Copyright - Modrinth',
-    meta: [
-      {
-        hid: 'description',
-        name: 'description',
-        content:
-          'The Copyright Policy of Modrinth, an open source modding platform focused on Minecraft.',
-      },
-      {
-        hid: 'apple-mobile-web-app-title',
-        name: 'apple-mobile-web-app-title',
-        content: 'Copyright Policy',
-      },
-      {
-        hid: 'og:title',
-        name: 'og:title',
-        content: 'Copyright Policy',
-      },
-      {
-        hid: 'og:url',
-        name: 'og:url',
-        content: 'https://modrinth.com/legal/copyright',
-      },
-    ],
-  },
+<script setup>
+const description =
+  'The Copyright Policy of Modrinth, an open source modding platform focused on Minecraft.'
+
+useSeoMeta({
+  title: 'Copyright Policy - Modrinth',
+  description,
+  ogTitle: 'Copyright Policy',
+  ogDescription: description,
 })
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/pages/legal/privacy.vue b/pages/legal/privacy.vue
index 07272ceb..2ec08f45 100644
--- a/pages/legal/privacy.vue
+++ b/pages/legal/privacy.vue
@@ -308,35 +308,14 @@
   </div>
 </template>
 
-<script>
-export default defineNuxtComponent({
-  head: {
-    title: 'Privacy - Modrinth',
-    meta: [
-      {
-        hid: 'description',
-        name: 'description',
-        content:
-          'The Privacy Policy of Modrinth, an open source modding platform focused on Minecraft.',
-      },
-      {
-        hid: 'apple-mobile-web-app-title',
-        name: 'apple-mobile-web-app-title',
-        content: 'Privacy Policy',
-      },
-      {
-        hid: 'og:title',
-        name: 'og:title',
-        content: 'Privacy Policy',
-      },
-      {
-        hid: 'og:url',
-        name: 'og:url',
-        content: 'https://modrinth.com/legal/privacy',
-      },
-    ],
-  },
+<script setup>
+const description =
+  'The Privacy Policy of Modrinth, an open source modding platform focused on Minecraft.'
+
+useSeoMeta({
+  title: 'Privacy Policy - Modrinth',
+  description,
+  ogTitle: 'Privacy Policy',
+  ogDescription: description,
 })
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/pages/legal/rules.vue b/pages/legal/rules.vue
index dde99914..e4f9d943 100644
--- a/pages/legal/rules.vue
+++ b/pages/legal/rules.vue
@@ -134,35 +134,14 @@
   </div>
 </template>
 
-<script>
-export default defineNuxtComponent({
-  head: {
-    title: 'Rules - Modrinth',
-    meta: [
-      {
-        hid: 'description',
-        name: 'description',
-        content:
-          'The Content Rules of Modrinth, an open source modding platform focused on Minecraft.',
-      },
-      {
-        hid: 'apple-mobile-web-app-title',
-        name: 'apple-mobile-web-app-title',
-        content: 'Content Rules',
-      },
-      {
-        hid: 'og:title',
-        name: 'og:title',
-        content: 'Content Rules',
-      },
-      {
-        hid: 'og:url',
-        name: 'og:url',
-        content: 'https://modrinth.com/legal/rules',
-      },
-    ],
-  },
+<script setup>
+const description =
+  'The Content Rules of Modrinth, an open source modding platform focused on Minecraft.'
+
+useSeoMeta({
+  title: 'Content Rules - Modrinth',
+  description,
+  ogTitle: 'Content Rules',
+  ogDescription: description,
 })
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/pages/legal/security.vue b/pages/legal/security.vue
index 577f5b1c..94c4ee33 100644
--- a/pages/legal/security.vue
+++ b/pages/legal/security.vue
@@ -52,35 +52,14 @@
   </div>
 </template>
 
-<script>
-export default defineNuxtComponent({
-  head: {
-    title: 'Security Notice - Modrinth',
-    meta: [
-      {
-        hid: 'description',
-        name: 'description',
-        content:
-          'The Security Notice of Modrinth, an open source modding platform focused on Minecraft.',
-      },
-      {
-        hid: 'apple-mobile-web-app-title',
-        name: 'apple-mobile-web-app-title',
-        content: 'Security Notice',
-      },
-      {
-        hid: 'og:title',
-        name: 'og:title',
-        content: 'Security Notice',
-      },
-      {
-        hid: 'og:url',
-        name: 'og:url',
-        content: 'https://modrinth.com/legal/security',
-      },
-    ],
-  },
+<script setup>
+const description =
+  'The Security Notice of Modrinth, an open source modding platform focused on Minecraft.'
+
+useSeoMeta({
+  title: 'Security Notice - Modrinth',
+  description,
+  ogTitle: 'Security Notice',
+  ogDescription: description,
 })
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/pages/legal/terms.vue b/pages/legal/terms.vue
index bbe4d3e2..e6443629 100644
--- a/pages/legal/terms.vue
+++ b/pages/legal/terms.vue
@@ -583,35 +583,14 @@
   </div>
 </template>
 
-<script>
-export default defineNuxtComponent({
-  head: {
-    title: 'Terms - Modrinth',
-    meta: [
-      {
-        hid: 'description',
-        name: 'description',
-        content:
-          'The Terms and Conditions of Modrinth, an open source modding platform focused on Minecraft.',
-      },
-      {
-        hid: 'apple-mobile-web-app-title',
-        name: 'apple-mobile-web-app-title',
-        content: 'Terms and Conditions',
-      },
-      {
-        hid: 'og:title',
-        name: 'og:title',
-        content: 'Terms and Conditions',
-      },
-      {
-        hid: 'og:url',
-        name: 'og:url',
-        content: 'https://modrinth.com/legal/terms',
-      },
-    ],
-  },
+<script setup>
+const description =
+  'The Terms of Use of Modrinth, an open source modding platform focused on Minecraft.'
+
+useSeoMeta({
+  title: 'Terms of Use - Modrinth',
+  description,
+  ogTitle: 'Terms of Use',
+  ogDescription: description,
 })
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/pages/moderation.vue b/pages/moderation.vue
index 3cf2b478..82c547a9 100644
--- a/pages/moderation.vue
+++ b/pages/moderation.vue
@@ -37,4 +37,3 @@ definePageMeta({
   middleware: 'auth',
 })
 </script>
-<style lang="scss" scoped></style>
diff --git a/pages/moderation/reports.vue b/pages/moderation/reports.vue
index 44c9d454..67c07649 100644
--- a/pages/moderation/reports.vue
+++ b/pages/moderation/reports.vue
@@ -14,4 +14,3 @@ useHead({
   title: 'Reports - Modrinth',
 })
 </script>
-<style lang="scss" scoped></style>
diff --git a/pages/search/[searchProjectType].vue b/pages/search/[searchProjectType].vue
index d6c1bc86..9da784bd 100644
--- a/pages/search/[searchProjectType].vue
+++ b/pages/search/[searchProjectType].vue
@@ -7,17 +7,7 @@
     }"
   >
     <Head>
-      <Title>Search {{ $formatProjectType(projectType.display) }}s - Modrinth</Title>
-      <Meta
-        name="og:title"
-        :content="`Search ${$formatProjectType(projectType.display)}s ${query ? '| ' + query : ''}`"
-      />
-      <Meta name="description" :content="metaDescription" />
-      <Meta
-        name="apple-mobile-web-app-title"
-        :content="`Search ${$formatProjectType(projectType.display)}s`"
-      />
-      <Meta name="og:description" :content="metaDescription" />
+      <Title>Search {{ projectType.display }}s - Modrinth</Title>
     </Head>
     <aside
       :class="{
@@ -371,14 +361,20 @@ const maxResults = ref(20)
 const currentPage = ref(1)
 const projectType = ref({ id: 'mod', display: 'mod', actual: 'mod' })
 
-const metaDescription = computed(
-  () =>
-    `Search and browse thousands of Minecraft ${data.$formatProjectType(
-      projectType.value.display
-    )}s on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft ${data.$formatProjectType(
-      projectType.value.display
-    )}s.`
+const ogTitle = computed(
+  () => `Search ${projectType.value.display}s${query.value ? ' | ' + query.value : ''}`
 )
+const description = computed(
+  () =>
+    `Search and browse thousands of Minecraft ${projectType.value.display}s on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft ${projectType.value.display}s.`
+)
+
+useSeoMeta({
+  description,
+  ogTitle,
+  ogDescription: description,
+})
+
 if (route.query.q) {
   query.value = route.query.q
 }
diff --git a/pages/settings.vue b/pages/settings.vue
index 90a9dc25..79a16486 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -48,5 +48,3 @@ const route = useRoute()
 const auth = await useAuth()
 const isStaging = useRuntimeConfig().public.siteUrl !== 'https://modrinth.com'
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 2ba2bfcd..ad632d4a 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -177,4 +177,3 @@ export default defineNuxtComponent({
   },
 })
 </script>
-<style lang="scss" scoped></style>
diff --git a/pages/user/[id].vue b/pages/user/[id].vue
index f2f5f0cf..1bc694ad 100644
--- a/pages/user/[id].vue
+++ b/pages/user/[id].vue
@@ -1,17 +1,5 @@
 <template>
   <div v-if="user">
-    <Head>
-      <Title>{{ user.username + ' - Modrinth' }}</Title>
-      <Meta name="og:title" :content="user.username" />
-      <Meta name="description" :content="metaDescription" />
-      <Meta name="og:type" content="website" />
-      <Meta name="apple-mobile-web-app-title" :content="metaDescription" />
-      <Meta name="og:description" :content="metaDescription" />
-      <Meta
-        name="og:image"
-        :content="user.avatar_url ? user.avatar_url : 'https://cdn.modrinth.com/placeholder.png'"
-      />
-    </Head>
     <ModalCreation ref="modal_creation" />
     <ModalReport ref="modal_report" :item-id="user.id" item-type="user" />
     <div class="user-header-wrapper">
@@ -420,7 +408,8 @@ if (user.value.username !== route.params.id) {
   await navigateTo(`/user/${user.value.username}`, { redirectCode: 301 })
 }
 
-const metaDescription = ref(
+const title = `${user.value.username} - Modrinth`
+const description = ref(
   user.value.bio
     ? `${formatMessage(messages.profileMetaDescriptionWithBio, {
         bio: user.value.bio,
@@ -429,6 +418,14 @@ const metaDescription = ref(
     : `${formatMessage(messages.profileMetaDescription, { username: user.value.username })}`
 )
 
+useSeoMeta({
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description,
+  ogImage: user.value.avatar_url ?? 'https://cdn.modrinth.com/placeholder.png',
+})
+
 const projectTypes = computed(() => {
   const obj = {}