Improve page metadata

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',

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

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' })

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>

pages/enterprise.vue

@@ -99,7 +99,7 @@
         </div>
         <div class="flex flex-col justify-center md:pr-8 xl:pr-0 lg:max-w-lg">
           <div class="max-w-xl">
-            <p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-primary uppercase rounded-full bg-teal-accent-400">
+            <p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-primary uppercase">
               We Make It Work
             </p>
             <h2 class="text-2xl font-medium mb-4">
@@ -122,7 +122,7 @@
       <div class="bg-slate-100 dark:bg-slate-900">
         <div class="px-4 py-8 lg:py-12 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
           <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
-            <p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-primary uppercase rounded-full bg-teal-accent-400">
+            <p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-primary uppercase">
               Our Solutions
             </p>
             <h2 class="text-2xl font-medium mb-4">
@@ -243,7 +243,7 @@
       class="px-4 pb-10 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24"
     >
       <div class="max-w-xl mb-6 md:mx-auto sm:text-center lg:max-w-2xl">
-        <p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-primary uppercase rounded-full bg-teal-accent-400">
+        <p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-primary uppercase">
           Contact Us
         </p>
         <h2 class="text-2xl font-medium">
@@ -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>

pages/help.vue

@@ -2,7 +2,7 @@
   <section class="body-font">
     <div class="px-4 pt-8 mx-auto md:max-w-full lg:max-w-screen-xl">
       <div class="flex flex-col text-center w-full mb-12">
-        <h2 class="text-xs text-primary tracking-widest font-medium title-font mb-1">
+        <h2 class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-primary uppercase">
           Help Resources
         </h2>
         <h1 class="text-3xl font-medium title-font mb-4">
@@ -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>

pages/imprint.vue

@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Imprint' + ' – manjaro.org',
+  title: 'Imprint',
 })
 
 const route = useRoute()

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>

pages/mailing-lists.vue

@@ -65,6 +65,6 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Mailing Lists' + ' – manjaro.org',
+  title: 'Mailing Lists',
 })
 </script>

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>

pages/news/index.vue

@@ -44,31 +44,20 @@
 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) => {
   return path + '/' + file
 }
 
-const props = defineProps({ pageNumber: { type: Number, required: true } })
-const postsPerPage = 10
-
-const allPostsCountResponse = await useAsyncData('news-items-all',
-  () => queryContent('/news').count())
-
-const allPostsCount = allPostsCountResponse.data.value!
-const totalPages = Math.ceil(allPostsCount / postsPerPage)
-
-if (props.pageNumber < 1 || props.pageNumber > totalPages) {
-  showError({ statusCode: 404, statusMessage: 'Page Not Found', fatal: true })
-}
-
-const { data } = await useAsyncData(`news-items-list-${props.pageNumber}`, () =>
+const { data } = await useAsyncData('news-items-list', () =>
   queryContent('/news')
     .sort({ date: -1 })
-    .skip((props.pageNumber - 1) * postsPerPage)
-    .limit(postsPerPage)
     .find(),
 )
 </script>

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>

pages/privacy-policy.vue

@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Privacy Policy' + ' – manjaro.org',
+  title: 'Privacy Policy',
 })
 
 const route = useRoute()

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', {

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', {

pages/products/index.vue

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

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)

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)

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