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/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))