feat(seo): enhance multilingual support and SEO handling

- Added support for multiple languages in the frontend, including English, Spanish, and Cebuano, improving accessibility for a broader audience.
- Implemented hreflang links for better SEO performance, ensuring search engines can correctly index language-specific content.
- Updated SEO metadata handling to utilize internationalization keys, enhancing the clarity and relevance of page titles and descriptions.
- Refactored SEO utility functions to streamline the management of OpenGraph and hreflang attributes, improving maintainability and performance.

frontend/src/main.js

@@ -4,6 +4,7 @@ import store from './store';
 import router from './router';
 import './assets/styles.scss';
 import i18n from './i18n';
+import { setSeoI18nAccessor, applyRouteSeo } from './utils/seo';
 import { createVuetify } from 'vuetify';
 import * as components from 'vuetify/components';
 import * as directives from 'vuetify/directives';
@@ -53,7 +54,28 @@ function getBrowserLanguage() {
 
 const SUPPORTED_UI_LOCALES = ['de', 'en', 'ceb', 'es'];
 
+function readLangFromUrl() {
+    try {
+        const q = new URLSearchParams(window.location.search).get('lang');
+        if (q && SUPPORTED_UI_LOCALES.includes(q)) {
+            return q;
+        }
+    } catch (_) {
+        /* ignore */
+    }
+    return null;
+}
+
 function getInitialAppLanguage() {
+    const fromUrl = readLangFromUrl();
+    if (fromUrl) {
+        try {
+            localStorage.setItem('uiLanguage', fromUrl);
+        } catch (_) {
+            /* ignore */
+        }
+        return fromUrl;
+    }
     try {
         const saved = localStorage.getItem('uiLanguage');
         if (saved && SUPPORTED_UI_LOCALES.includes(saved)) {
@@ -72,6 +94,19 @@ const vuetify = createVuetify({
 
 store.dispatch('setLanguage', getInitialAppLanguage());
 
+setSeoI18nAccessor(() => ({
+    t: (...args) => i18n.global.t(...args),
+    te: (...args) => i18n.global.te(...args),
+    locale: store.state.language,
+}));
+
+store.watch(
+    (state) => state.language,
+    () => {
+        applyRouteSeo(router.currentRoute.value);
+    }
+);
+
 const app = createApp(App);
 
 app.use(store);