From e96cee0e2f5e7587d7918bdcc2df92fb200d42a1 Mon Sep 17 00:00:00 2001
From: Roman Gilg <romangg@manjaro.org>
Date: Sun, 30 Jun 2024 21:08:54 +0200
Subject: [PATCH] feat: set metadata for all pages

This improves SEO and social metadata for all pages. We use a title template to
reduce code duplication.
---
 app.vue                         |  6 ++++--
 pages/contribute.vue            |  6 +++++-
 pages/donate.vue                |  6 +++++-
 pages/dpp.vue                   |  6 +++++-
 pages/enterprise.vue            |  8 ++++++--
 pages/help.vue                  |  6 +++++-
 pages/imprint.vue               |  2 +-
 pages/index.vue                 |  7 +++++++
 pages/mailing-lists.vue         |  2 +-
 pages/news/[year]/[title].vue   | 10 +++++++++-
 pages/news/index.vue            |  6 +++++-
 pages/partners.vue              |  6 +++++-
 pages/privacy-policy.vue        |  2 +-
 pages/products/download/arm.vue |  6 +++++-
 pages/products/download/x86.vue |  6 +++++-
 pages/products/index.vue        |  6 +++++-
 pages/team/former.vue           |  6 +++++-
 pages/team/index.vue            |  6 +++++-
 pages/terms-of-use.vue          |  2 +-
 19 files changed, 85 insertions(+), 20 deletions(-)

diff --git a/app.vue b/app.vue
index e958adc..0a73f01 100644
--- 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
index d110fb2..35f1487 100644
--- 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
index b6574d9..046c4f3 100644
--- 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
index 8feee72..9c85a4c 100644
--- 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
index b0fcc91..5bea59c 100644
--- 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
index a947f0d..f75e68c 100644
--- 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
index f1e6113..3c0cf79 100644
--- 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
index 6c12970..8287511 100644
--- 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
index e8b2b30..19dd683 100644
--- 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
index f63b478..8089537 100644
--- 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',
+  twitterImage: 'https://manjaro.org' + imgPath,
 })
 </script>
diff --git a/pages/news/index.vue b/pages/news/index.vue
index 2975db8..83ef0dc 100644
--- 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
index 2fede6b..8513aa3 100644
--- 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
index 5801d83..f8ef18a 100644
--- 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
index a349eb9..214a6ae 100644
--- 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
index 65ee1bf..f89d20b 100644
--- 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
index 84474cf..b6b1bca 100644
--- 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
index 9347a82..a186eaf 100644
--- 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
index 007a6c4..114e06e 100644
--- 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
index 6d84b5b..ec24408 100644
--- 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()