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

File diff suppressed because it is too large Load Diff

View File

@ -4,8 +4,10 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"dev": "node src/server",
"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",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
"lint-no-fix": "eslint --ext .js,.vue --ignore-path .gitignore src",
@ -20,12 +22,16 @@
"@fullcalendar/vue3": "^6.1.11",
"@tanstack/vue-query": "^5.28.9",
"@tanstack/vue-query-devtools": "^5.28.10",
"@unhead/ssr": "^1.9.14",
"@unhead/vue": "^1.9.10",
"@vueuse/core": "^10.9.0",
"compression": "^1.7.4",
"express": "^4.19.2",
"pinia": "^2.1.7",
"primeflex": "^3.3.1",
"primeicons": "^6.0.1",
"primevue": "^3.50.0",
"sirv": "^2.0.4",
"source-sans": "^3.46.0",
"vue": "^3.4.11",
"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>
import MenuBar from "./components/MenuBar.vue";
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 moduleStore from "./store/moduleStore.ts";
import { computed, provide, ref } from "vue";
@ -48,6 +48,10 @@ const title = computed(() => route.meta.label?
`HTWKalender - ${t(String(route.meta.label))}`:
"HTWKalender"
);
const description = computed(() => route.meta.description?
t(String(route.meta.description)):
t("description")
);
useHead({
title: title,
@ -55,17 +59,29 @@ useHead({
{ rel: "canonical", href: canonical},
],
meta: [
{
name: "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",
}
{ name: "description", content: description},
{ property: "og:description", content: description},
]
});
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 mobilePage = ref(true);
provide("mobilePage", mobilePage);
@ -75,12 +91,14 @@ const isDisabled = (routeName: RouteRecordName | null | undefined) => {
};
const updateMobile = () => {
if (import.meta.env.SSR) return;
mobilePage.value = window.innerWidth <= 992;
};
updateMobile();
window.addEventListener("resize", updateMobile);
if (!import.meta.env.SSR)
window.addEventListener("resize", updateMobile);
</script>
<template>

View File

@ -6,6 +6,7 @@
"faq": "FAQ",
"imprint": "Impressum",
"privacy": "Datenschutz",
"description": "Dein individueller Stundenplan mit Sportevents und Prüfungen. Finde kommende Veranstaltungen oder freie Räume zum Lernen und Arbeiten.",
"english": "Englisch",
"german": "Deutsch",
"courseSelection": {
@ -22,6 +23,7 @@
"roomSchedule": "Raumbelegung",
"headline": "Raumbelegung",
"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",
"noRoomsAvailable": "Keine Räume verfügbar",
"available": "verfügbar",
@ -30,6 +32,7 @@
"freeRooms": {
"freeRooms": "Freie Räume",
"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",
"pleaseSelectDate": "Bitte wähle ein Datum aus",
"room": "Raum",
@ -68,6 +71,7 @@
}
},
"editCalendarView": {
"description": "Mit deinem Token kannst du deinen HTWKalender jederzeit bearbeiten und sogar ins nächste Semester mitnehmen",
"error": "Fehler",
"invalidToken": "Ungültiger Token",
"headline": "Bearbeite deinen HTWKalender",
@ -147,6 +151,7 @@
},
"faqView": {
"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?",
"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?",

View File

@ -6,6 +6,7 @@
"faq": "faq",
"imprint": "imprint",
"privacy": "privacy",
"description": "Your individual timetable with sports events and exams. Find upcoming events or free rooms for studying and working.",
"english": "English",
"german": "German",
"courseSelection": {
@ -22,6 +23,7 @@
"roomSchedule": "room occupancy",
"headline": "room occupancy plan",
"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",
"noRoomsAvailable": "no rooms listed",
"available": "available",
@ -30,6 +32,7 @@
"freeRooms": {
"freeRooms": "free rooms",
"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",
"pleaseSelectDate": "please select a date",
"room": "room",
@ -68,6 +71,7 @@
}
},
"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",
"invalidToken": "invalid token",
"headline": "edit your HTWKalender",
@ -147,6 +151,7 @@
},
"faqView": {
"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?",
"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?",

View File

@ -14,7 +14,7 @@
//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/>.
import { createRouter, createWebHistory } from "vue-router";
import { createMemoryHistory, createRouter, createWebHistory } from "vue-router";
const CourseSelection = () => import("../view/CourseSelection.vue");
const AdditionalModules = () => import("../view/create/AdditionalModules.vue");
@ -31,7 +31,7 @@ const Faq = () => import("../view/Faq.vue");
import i18n from "../i18n";
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: [
{
path: "/",
@ -47,6 +47,7 @@ const router = createRouter({
component: RoomFinder,
meta: {
label: "roomFinderPage.roomSchedule",
description: "roomFinderPage.description",
},
},
{
@ -55,7 +56,8 @@ const router = createRouter({
component: FreeRooms,
meta: {
label: "freeRooms.freeRooms",
}
description: "freeRooms.description",
},
},
{
path: "/faq",
@ -63,6 +65,7 @@ const router = createRouter({
component: Faq,
meta: {
label: "faq",
description: "faqView.description",
}
},
{
@ -79,6 +82,7 @@ const router = createRouter({
component: EditAdditionalModules,
meta: {
label: "editCalendar",
description: "editCalendarView.description"
}
},
{
@ -87,6 +91,7 @@ const router = createRouter({
component: EditModules,
meta: {
label: "editCalendar",
description: "editCalendarView.description"
}
},
{
@ -103,6 +108,7 @@ const router = createRouter({
component: EditCalendarView,
meta: {
label: "editCalendar",
description: "editCalendarView.description"
}
},
{