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
2023-09-22 12:45:03 -04:00
parent bd4da4f365
commit fc64719bb8
29 changed files with 261 additions and 473 deletions
--- 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() {
--- 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 => {
--- 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}`)

--- 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))
--- 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: {
--- 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>
--- 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>
--- 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)
--- 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))
--- 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>

--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -49,4 +49,3 @@ definePageMeta({

 const route = useRoute()
 </script>
-<style lang="scss" scoped></style>
--- a/pages/dashboard/analytics.vue
+++ b/pages/dashboard/analytics.vue
@@ -15,4 +15,3 @@ export default defineNuxtComponent({
  },
 })
 </script>
-<style lang="scss" scoped></style>
--- a/pages/dashboard/follows.vue
+++ b/pages/dashboard/follows.vue
@@ -48,4 +48,3 @@ definePageMeta({
  middleware: 'auth',
 })
 </script>
-<style lang="scss" scoped></style>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- a/pages/moderation.vue
+++ b/pages/moderation.vue
@@ -37,4 +37,3 @@ definePageMeta({
  middleware: 'auth',
 })
 </script>
-<style lang="scss" scoped></style>
--- a/pages/moderation/reports.vue
+++ b/pages/moderation/reports.vue
@@ -14,4 +14,3 @@ useHead({
  title: 'Reports - Modrinth',
 })
 </script>
-<style lang="scss" scoped></style>
--- 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
 }
--- 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>
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -177,4 +177,3 @@ export default defineNuxtComponent({
  },
 })
 </script>
-<style lang="scss" scoped></style>
--- 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 = {}