seo changes for meta tags

This commit is contained in:
survellow
2024-07-02 18:57:56 +02:00
parent 4396749142
commit a003ba736c
8 changed files with 856 additions and 28 deletions

View File

@@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html<!--app-html-attrs--> lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" sizes="32x32" /> <link rel="icon" href="/favicon.ico" sizes="32x32" />
@@ -13,9 +13,12 @@
/> />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTWKalender</title> <title>HTWKalender</title>
<!--app-head-tags-->
</head> </head>
<body> <body<!--app-body-attrs-->>
<div id="app"></div> <!--app-body-tags-open-->
<script type="module" src="/src/main.ts"></script> <div id="app"><!--app-html--></div>
<script type="module" src="/src/entry-client.ts"></script>
<!--app-body-tags-->
</body> </body>
</html> </html>

File diff suppressed because it is too large Load Diff

View File

@@ -4,8 +4,10 @@
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "node src/server",
"build": "vue-tsc && vite build", "build": "vue-tsc && npm run build:client && npm run build:server",
"build:client": "vite build --outDir dist/client",
"build:server": "vite build --outDir dist/server --ssr src/entry-server.ts",
"preview": "vite preview", "preview": "vite preview",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src", "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
"lint-no-fix": "eslint --ext .js,.vue --ignore-path .gitignore src", "lint-no-fix": "eslint --ext .js,.vue --ignore-path .gitignore src",
@@ -20,12 +22,16 @@
"@fullcalendar/vue3": "^6.1.11", "@fullcalendar/vue3": "^6.1.11",
"@tanstack/vue-query": "^5.28.9", "@tanstack/vue-query": "^5.28.9",
"@tanstack/vue-query-devtools": "^5.28.10", "@tanstack/vue-query-devtools": "^5.28.10",
"@unhead/ssr": "^1.9.14",
"@unhead/vue": "^1.9.10", "@unhead/vue": "^1.9.10",
"@vueuse/core": "^10.9.0", "@vueuse/core": "^10.9.0",
"compression": "^1.7.4",
"express": "^4.19.2",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"primeflex": "^3.3.1", "primeflex": "^3.3.1",
"primeicons": "^6.0.1", "primeicons": "^6.0.1",
"primevue": "^3.50.0", "primevue": "^3.50.0",
"sirv": "^2.0.4",
"source-sans": "^3.46.0", "source-sans": "^3.46.0",
"vue": "^3.4.11", "vue": "^3.4.11",
"vue-i18n": "^9.10.2", "vue-i18n": "^9.10.2",

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

@@ -19,7 +19,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
<script lang="ts" setup> <script lang="ts" setup>
import MenuBar from "./components/MenuBar.vue"; import MenuBar from "./components/MenuBar.vue";
import { RouteRecordName, RouterView, useRoute, useRouter } from "vue-router"; import { RouteRecordName, RouterView, useRoute, useRouter } from "vue-router";
import { useHead } from "@unhead/vue"; import { useHead, useServerSeoMeta } from "@unhead/vue";
import CalendarPreview from "./components/CalendarPreview.vue"; import CalendarPreview from "./components/CalendarPreview.vue";
import moduleStore from "./store/moduleStore.ts"; import moduleStore from "./store/moduleStore.ts";
import { computed, provide, ref } from "vue"; import { computed, provide, ref } from "vue";
@@ -48,6 +48,10 @@ const title = computed(() => route.meta.label?
`HTWKalender - ${t(String(route.meta.label))}`: `HTWKalender - ${t(String(route.meta.label))}`:
"HTWKalender" "HTWKalender"
); );
const description = computed(() => route.meta.description?
t(String(route.meta.description)):
t("description")
);
useHead({ useHead({
title: title, title: title,
@@ -55,17 +59,29 @@ useHead({
{ rel: "canonical", href: canonical}, { rel: "canonical", href: canonical},
], ],
meta: [ meta: [
{ { name: "description", content: description},
name: "description", { property: "og:description", content: description},
content: "Dein individueller Stundenplan mit Sportevents und Prüfungen. Finde kommende Veranstaltungen oder freie Räume zum Lernen und Arbeiten.",
},
{
name: "keywords",
content: "HTWK Leipzig, Stundenplan, iCal, freie Räume, Lerngruppen, Sport, Prüfungen",
}
] ]
}); });
useServerSeoMeta(
{
title: title,
description: description,
keywords: "HTWK Leipzig, Stundenplan, iCal, freie Räume, Lerngruppen, Sport, Prüfungen",
// openGraph
ogTitle: title,
ogDescription: description,
ogImage: `${baseUri}/img/banner-image.png`,
ogImageType: "image/png",
ogLocale: "de_DE",
ogUrl: canonical,
// twitter
twitterCard: "summary_large_image",
twitterSite: "@HTWKLeipzig",
}
);
const store = moduleStore(); const store = moduleStore();
const mobilePage = ref(true); const mobilePage = ref(true);
provide("mobilePage", mobilePage); provide("mobilePage", mobilePage);
@@ -75,12 +91,14 @@ const isDisabled = (routeName: RouteRecordName | null | undefined) => {
}; };
const updateMobile = () => { const updateMobile = () => {
if (import.meta.env.SSR) return;
mobilePage.value = window.innerWidth <= 992; mobilePage.value = window.innerWidth <= 992;
}; };
updateMobile(); updateMobile();
window.addEventListener("resize", updateMobile); if (!import.meta.env.SSR)
window.addEventListener("resize", updateMobile);
</script> </script>
<template> <template>

View File

@@ -6,6 +6,7 @@
"faq": "FAQ", "faq": "FAQ",
"imprint": "Impressum", "imprint": "Impressum",
"privacy": "Datenschutz", "privacy": "Datenschutz",
"description": "Dein individueller Stundenplan mit Sportevents und Prüfungen. Finde kommende Veranstaltungen oder freie Räume zum Lernen und Arbeiten.",
"english": "Englisch", "english": "Englisch",
"german": "Deutsch", "german": "Deutsch",
"courseSelection": { "courseSelection": {
@@ -22,6 +23,7 @@
"roomSchedule": "Raumbelegung", "roomSchedule": "Raumbelegung",
"headline": "Raumbelegung", "headline": "Raumbelegung",
"detail": "Bitte wähle einen Raum aus, um die Belegung einzusehen", "detail": "Bitte wähle einen Raum aus, um die Belegung einzusehen",
"description": "Möchtest du schnell checken, ob ein Raum frei ist? Hier kannst du die Belegung der Räume an der HTWK Leipzig einsehen.",
"dropDownSelect": "Bitte wähle einen Raum aus", "dropDownSelect": "Bitte wähle einen Raum aus",
"noRoomsAvailable": "Keine Räume verfügbar", "noRoomsAvailable": "Keine Räume verfügbar",
"available": "verfügbar", "available": "verfügbar",
@@ -30,6 +32,7 @@
"freeRooms": { "freeRooms": {
"freeRooms": "Freie Räume", "freeRooms": "Freie Räume",
"detail": "Bitte wähle einen Zeitraum aus, um alle Räume ohne Belegung anzuzeigen.", "detail": "Bitte wähle einen Zeitraum aus, um alle Räume ohne Belegung anzuzeigen.",
"description": "Freier Lerngruppenraum gesucht? Hier kannst du alle freien Räume in einem bestimmten Zeitraum an der HTWK Leipzig einsehen.",
"searchByRoom": "Suche nach Räumen", "searchByRoom": "Suche nach Räumen",
"pleaseSelectDate": "Bitte wähle ein Datum aus", "pleaseSelectDate": "Bitte wähle ein Datum aus",
"room": "Raum", "room": "Raum",
@@ -68,6 +71,7 @@
} }
}, },
"editCalendarView": { "editCalendarView": {
"description": "Mit deinem Token kannst du deinen HTWKalender jederzeit bearbeiten und sogar ins nächste Semester mitnehmen",
"error": "Fehler", "error": "Fehler",
"invalidToken": "Ungültiger Token", "invalidToken": "Ungültiger Token",
"headline": "Bearbeite deinen HTWKalender", "headline": "Bearbeite deinen HTWKalender",
@@ -147,6 +151,7 @@
}, },
"faqView": { "faqView": {
"headline": "Fragen und Antworten", "headline": "Fragen und Antworten",
"description": "Falls du Fragen zum HTWKalender hast, findest du hier Antworten auf häufig gestellte Fragen und unsere Kontaktdaten.",
"firstQuestion": "Wie funktioniert das Kalender erstellen mit dem HTWKalender?", "firstQuestion": "Wie funktioniert das Kalender erstellen mit dem HTWKalender?",
"firstAnswer": "Die Webseite ermöglicht es deinen HTWK-Stundenplan in eines deiner bevorzugten Kalender-Verwaltungs-Programme (Outlook, Google Kalender, etc.) einzubinden. ", "firstAnswer": "Die Webseite ermöglicht es deinen HTWK-Stundenplan in eines deiner bevorzugten Kalender-Verwaltungs-Programme (Outlook, Google Kalender, etc.) einzubinden. ",
"secondQuestion": "Wie genau funktioniert das alles?", "secondQuestion": "Wie genau funktioniert das alles?",

View File

@@ -6,6 +6,7 @@
"faq": "faq", "faq": "faq",
"imprint": "imprint", "imprint": "imprint",
"privacy": "privacy", "privacy": "privacy",
"description": "Your individual timetable with sports events and exams. Find upcoming events or free rooms for studying and working.",
"english": "English", "english": "English",
"german": "German", "german": "German",
"courseSelection": { "courseSelection": {
@@ -22,6 +23,7 @@
"roomSchedule": "room occupancy", "roomSchedule": "room occupancy",
"headline": "room occupancy plan", "headline": "room occupancy plan",
"detail": "Please select a room to view the occupancy.", "detail": "Please select a room to view the occupancy.",
"description": "Would you like to quickly check whether a room is available? Here you can see the occupancy of the rooms at HTWK Leipzig.",
"dropDownSelect": "please select a room", "dropDownSelect": "please select a room",
"noRoomsAvailable": "no rooms listed", "noRoomsAvailable": "no rooms listed",
"available": "available", "available": "available",
@@ -30,6 +32,7 @@
"freeRooms": { "freeRooms": {
"freeRooms": "free rooms", "freeRooms": "free rooms",
"detail": "Please select a time period to display rooms that have no occupancy.", "detail": "Please select a time period to display rooms that have no occupancy.",
"description": "Looking for a free study group room? Here you can see all available rooms at HTWK Leipzig in a specific period.",
"searchByRoom": "search by room", "searchByRoom": "search by room",
"pleaseSelectDate": "please select a date", "pleaseSelectDate": "please select a date",
"room": "room", "room": "room",
@@ -68,6 +71,7 @@
} }
}, },
"editCalendarView": { "editCalendarView": {
"description": "With your token, you can edit your HTW calendar at any time and even take it with you into the next semester",
"error": "error", "error": "error",
"invalidToken": "invalid token", "invalidToken": "invalid token",
"headline": "edit your HTWKalender", "headline": "edit your HTWKalender",
@@ -147,6 +151,7 @@
}, },
"faqView": { "faqView": {
"headline": "faq", "headline": "faq",
"description": "If you have any questions about the HTWKalender, you will find answers to frequently asked questions and our contact details here.",
"firstQuestion": "How does calendar creation work with HTWKalender?", "firstQuestion": "How does calendar creation work with HTWKalender?",
"firstAnswer": "The website allows you to integrate your HTWK timetable into one of your preferred calendar management programs (Outlook, Google Calendar, etc.).", "firstAnswer": "The website allows you to integrate your HTWK timetable into one of your preferred calendar management programs (Outlook, Google Calendar, etc.).",
"secondQuestion": "How does it all work exactly?", "secondQuestion": "How does it all work exactly?",

View File

@@ -14,7 +14,7 @@
//You should have received a copy of the GNU Affero General Public License //You should have received a copy of the GNU Affero General Public License
//along with this program. If not, see <https://www.gnu.org/licenses/>. //along with this program. If not, see <https://www.gnu.org/licenses/>.
import { createRouter, createWebHistory } from "vue-router"; import { createMemoryHistory, createRouter, createWebHistory } from "vue-router";
const CourseSelection = () => import("../view/CourseSelection.vue"); const CourseSelection = () => import("../view/CourseSelection.vue");
const AdditionalModules = () => import("../view/create/AdditionalModules.vue"); const AdditionalModules = () => import("../view/create/AdditionalModules.vue");
@@ -31,7 +31,7 @@ const Faq = () => import("../view/Faq.vue");
import i18n from "../i18n"; import i18n from "../i18n";
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: import.meta.env.SSR ? createMemoryHistory(import.meta.env.BASE_URL) : createWebHistory(import.meta.env.BASE_URL),
routes: [ routes: [
{ {
path: "/", path: "/",
@@ -47,6 +47,7 @@ const router = createRouter({
component: RoomFinder, component: RoomFinder,
meta: { meta: {
label: "roomFinderPage.roomSchedule", label: "roomFinderPage.roomSchedule",
description: "roomFinderPage.description",
}, },
}, },
{ {
@@ -55,7 +56,8 @@ const router = createRouter({
component: FreeRooms, component: FreeRooms,
meta: { meta: {
label: "freeRooms.freeRooms", label: "freeRooms.freeRooms",
} description: "freeRooms.description",
},
}, },
{ {
path: "/faq", path: "/faq",
@@ -63,6 +65,7 @@ const router = createRouter({
component: Faq, component: Faq,
meta: { meta: {
label: "faq", label: "faq",
description: "faqView.description",
} }
}, },
{ {
@@ -79,6 +82,7 @@ const router = createRouter({
component: EditAdditionalModules, component: EditAdditionalModules,
meta: { meta: {
label: "editCalendar", label: "editCalendar",
description: "editCalendarView.description"
} }
}, },
{ {
@@ -87,6 +91,7 @@ const router = createRouter({
component: EditModules, component: EditModules,
meta: { meta: {
label: "editCalendar", label: "editCalendar",
description: "editCalendarView.description"
} }
}, },
{ {
@@ -103,6 +108,7 @@ const router = createRouter({
component: EditCalendarView, component: EditCalendarView,
meta: { meta: {
label: "editCalendar", label: "editCalendar",
description: "editCalendarView.description"
} }
}, },
{ {