feat: set metadata for all pages

This improves SEO and social metadata for all pages. We use a title template to reduce code duplication.
manjaro · Jun 30, 2024 · d5b5425 · d5b5425
1 parent c6b7ba3
commit d5b5425
Show file tree

Hide file tree

Showing 19 changed files with 85 additions and 20 deletions.
diff --git a/app.vue b/app.vue
@@ -7,8 +7,10 @@
 </template>
 
 <script setup lang="ts">
-useSeoMeta({
-  title: 'Manjaro – The Linux for People and Organizations',
+useHead({
+  titleTemplate: '%s – Manjaro',
+})
+useServerSeoMeta({
   ogTitle: 'Manjaro Linux Official',
   description: 'This page provides an overview of Manjaro Linux, an open source operating system designed for ease of use. Learn about its features, installation, and support options. Get the most out of Manjaro Linux with the latest news, downloads, and tips from our helpful community.',
   ogImage: 'https://manjaro.org/meta-image.jpg',

diff --git a/pages/contribute.vue b/pages/contribute.vue
@@ -8,7 +8,11 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Contribute' + ' – manjaro.org',
+  title: 'Contribute',
+})
+useServerSeoMeta({
+  ogTitle: 'Contribute to Manjaro',
+  description: 'Learn ways how you can help the Manjaro Linux project.',
 })
 
 const route = useRoute()

diff --git a/pages/donate.vue b/pages/donate.vue
@@ -87,7 +87,11 @@
 import { ref } from 'vue'
 
 useHead({
-  title: 'Donate' + ' – manjaro.org',
+  title: 'Donate',
+})
+useServerSeoMeta({
+  ogTitle: 'Donate to Manjaro',
+  description: 'Help the Manjaro project with a financial contribution.',
 })
 
 const arch = defineModel({ type: String, default: 'x86' })

diff --git a/pages/dpp.vue b/pages/dpp.vue
@@ -314,6 +314,10 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Device Partner Program' + ' – manjaro.org',
+  title: 'Device Partner Program',
+})
+useServerSeoMeta({
+  ogTitle: 'Manjaro Device Partner Program',
+  description: 'Design and market your hardware device together with Manjaro.',
 })
 </script>
diff --git a/pages/enterprise.vue b/pages/enterprise.vue
@@ -263,7 +263,7 @@
           </div>
           <div class="px-6 py-8 border border-t-0 dark:border-gray-700 rounded-b sm:px-8">
             <p class="mb-5">
-              Reach out to discuss your needs and how we can help your buisness to make effective use of Manjaro Linux and other open-source software.
+              Reach out to discuss your needs and how we can help your business to make effective use of Manjaro Linux and other open-source software.
             </p>
             <div class="flex justify-center gap-4">
               <button
@@ -296,6 +296,10 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Enterprise Services' + ' – manjaro.org',
+  title: 'Enterprise Services',
+})
+useServerSeoMeta({
+  ogTitle: 'Manjaro Enterprise Services',
+  description: 'The Manjaro company supports businesses with the setup and management of their Manjaro Linux systems.',
 })
 </script>
diff --git a/pages/help.vue b/pages/help.vue
@@ -146,6 +146,10 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Help' + ' – manjaro.org',
+  title: 'Help',
+})
+useServerSeoMeta({
+  ogTitle: 'Manjaro Help Resources',
+  description: 'Get help for your Manjaro install through various free resources.',
 })
 </script>
diff --git a/pages/imprint.vue b/pages/imprint.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Imprint' + ' – manjaro.org',
+  title: 'Imprint',
 })
 
 const route = useRoute()

diff --git a/pages/index.vue b/pages/index.vue
@@ -93,3 +93,10 @@
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+useHead({
+  title: 'Manjaro – The Linux for People and Organizations',
+  titleTemplate: '',
+})
+</script>
diff --git a/pages/mailing-lists.vue b/pages/mailing-lists.vue
@@ -65,6 +65,6 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Mailing Lists' + ' – manjaro.org',
+  title: 'Mailing Lists',
 })
 </script>
diff --git a/pages/news/[year]/[title].vue b/pages/news/[year]/[title].vue
@@ -129,11 +129,19 @@ if (!data.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page Not Found', fatal: true })
 }
 
-const imgPath = route.path + '/' + data.value.image
+const imgPath = route.path.replace(/\/$/, '') + '/' + data.value.image
 const author = getAuthors(data.value.authors)[0]
 const authorPicture = getAuthorPicture(data.value.authors[0])
 
 useHead({
   title: data.value.title + ' | Manjaro News',
+  titleTemplate: '',
+})
+useServerSeoMeta({
+  ogTitle: data.value.title,
+  description: data.value.description,
+  ogImage: 'https://manjaro.org' + imgPath,
+  twitterCard: 'summary_large_image',
+  twitterImage: 'https://manjaro.org' + imgPath,
 })
 </script>
diff --git a/pages/news/index.vue b/pages/news/index.vue
@@ -44,7 +44,11 @@
 import { useTimeAgo } from '@vueuse/core'
 
 useHead({
-  title: 'News' + ' – manjaro.org',
+  title: 'News',
+})
+useServerSeoMeta({
+  ogTitle: 'Manjaro News',
+  description: 'Articles about development and organization of the Manjaro project.',
 })
 
 const getImagePath = (path: string, file: string) => {

diff --git a/pages/partners.vue b/pages/partners.vue
@@ -105,6 +105,10 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Partners' + ' – manjaro.org',
+  title: 'Partners',
+})
+useServerSeoMeta({
+  ogTitle: 'Manjaro Partners',
+  description: 'Esteemed companies that partnered up and support the Manjaro project.',
 })
 </script>
diff --git a/pages/privacy-policy.vue b/pages/privacy-policy.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Privacy Policy' + ' – manjaro.org',
+  title: 'Privacy Policy',
 })
 
 const route = useRoute()

diff --git a/pages/products/download/arm.vue b/pages/products/download/arm.vue
@@ -68,7 +68,11 @@
 import desktops from '~/assets/desktops.json'
 
 useHead({
-  title: 'Download ARM' + ' – manjaro.org',
+  title: 'Download ARM',
+})
+useServerSeoMeta({
+  ogTitle: 'Manjaro ARM Image Downloads',
+  description: 'Choose from major Linux Desktop environments to run Manjaro on a multitude of ARM devices.',
 })
 
 const { data } = await useFetch('https://gitlab.manjaro.org/api/v4/projects/12597/repository/files/file-info.json/raw', {

diff --git a/pages/products/download/x86.vue b/pages/products/download/x86.vue
@@ -57,7 +57,11 @@
 import desktops from '~/assets/desktops.json'
 
 useHead({
-  title: 'Download' + ' – manjaro.org',
+  title: 'Download X86',
+})
+useServerSeoMeta({
+  ogTitle: 'Manjaro Image Downloads',
+  description: 'Choose from major Linux Desktop environments to run Manjaro on your computer.',
 })
 
 const { data } = await useFetch('https://gitlab.manjaro.org/api/v4/projects/12597/repository/files/file-info.json/raw', {

diff --git a/pages/products/index.vue b/pages/products/index.vue
@@ -159,7 +159,11 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Products' + ' – manjaro.org',
+  title: 'Products',
+})
+useServerSeoMeta({
+  ogTitle: 'Get Manjaro',
+  description: 'Buy a device with Manjaro Linux or download an image to install it on your current device.',
 })
 
 const { data: devices } = await useAsyncData('/products/devices',

diff --git a/pages/team/former.vue b/pages/team/former.vue
@@ -35,7 +35,11 @@
 import team from '~/assets/team/former.json'
 
 useHead({
-  title: 'Former Team Members' + ' – manjaro.org',
+  title: 'Former Team Members',
+})
+useServerSeoMeta({
+  ogTitle: 'Former Manjaro Team Members',
+  description: 'A list of awesome people who were part of the Manjaro Team in the past.',
 })
 
 const sortedTeam = team.sort((a, b) => a.pos - b.pos)

diff --git a/pages/team/index.vue b/pages/team/index.vue
@@ -35,7 +35,11 @@
 import team from '~/assets/team/current.json'
 
 useHead({
-  title: 'Team' + ' – manjaro.org',
+  title: 'Team',
+})
+useServerSeoMeta({
+  ogTitle: 'The Manjaro Team',
+  description: 'Get to know the people behind Manjaro.',
 })
 
 const sortedTeam = team.sort((a, b) => a.pos - b.pos)

diff --git a/pages/terms-of-use.vue b/pages/terms-of-use.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Terms of Use' + ' – manjaro.org',
+  title: 'Terms of Use',
 })
 
 const route = useRoute()