feat(seo): adds dynamic meta tags

Author: dvcol

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
 
     <title>Dinh-Van Colomban | Project portfolio</title>
-    <meta name="description" content="Dinh-Van Colomban personal website. Home of my projects, demos and portfolio." />
+    <meta id="description" name="description" content="Dinh-Van Colomban personal website. Home of my projects, demos and portfolio." />
 
     <!--  Google meta tags  -->
 
@@ -13,18 +13,21 @@
     <!--  Open Graph meta tags  -->
 
     <meta property="og:type" content="article" />
-    <meta property="og:title" content="Dinh-Van Colomban | projects and experiences" />
-    <meta property="og:description" content="Dinh-Van Colomban personal website. Home of my projects, demos and work experiences." />
-    <meta property="og:image" content="https://dvcol.github.io/assets/png/icon.png" />
-    <meta property="og:url" content="https://dvcol.github.io/" />
+    <meta id="og-title" property="og:title" content="Dinh-Van Colomban | projects and experiences" />
+    <meta id="og-description" property="og:description" content="Home of my projects, demos and portfolio." />
+    <meta id="og-image" property="og:image" content="https://dvcol.github.io/assets/snapshot/snap.png" />
+    <meta id="og-url" property="og:url" content="https://dvcol.github.io/" />
 
     <!--  Twitter tags  -->
 
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="Dinh-Van Colomban" />
-    <meta name="twitter:title" content="Dinh-Van Colomban | projects and experiences" />
-    <meta name="twitter:description" content="Dinh-Van Colomban personal website. Home of my projects, demos and work experiences." />
-    <meta name="twitter:image" content="https://dvcol.github.io/assets/png/icon.png" />
+    <meta id="tw-title" name="twitter:title" content="Dinh-Van Colomban | projects and experiences" />
+    <meta id="tw-description" name="twitter:description" content="Home of my projects, demos and portfolio." />
+    <meta id="tw-image" name="twitter:image" content="https://dvcol.github.io/assets/snapshot/snap.png" />
+    
+    <meta name="twitter:creator" content="@Dinh_Van" />
+    <meta name="twitter:site" content="@Dinh_Van" />
 
     <!--  PWA tags  -->
 

public/assets/snapshot/snap.png

@@ -5,11 +5,31 @@ import type { Component } from 'solid-js';
 import { useRouteData } from '~/services';
 import { useI18n } from '~/services/i18n';
 
+const changeContent = (selector: string, content: string) => {
+  const tag = document.head.querySelector(selector);
+  if (!tag) return;
+  tag.setAttribute('content', content);
+};
+
 export const RouteData: Component = () => {
   const [t] = useI18n();
   createEffect(() => {
     const data = useRouteData().active();
-    if (data) document.title = t(data.title);
+    if (data?.title) {
+      document.title = t(data.title)?.toString();
+      changeContent('#og-title', t(data.title)?.toString());
+      changeContent('#tw-title', t(data.title)?.toString());
+    }
+    if (data?.description) {
+      changeContent('#description', t(data.description)?.toString());
+      changeContent('#og-description', t(data.description)?.toString());
+      changeContent('#tw-description', t(data.description)?.toString());
+    }
+    if (data?.image) {
+      changeContent('#og-image', data.image);
+      changeContent('#tw-image', data.image);
+    }
+    if (data?.url) changeContent('#canonical', data.url);
   });
 
   return <div hidden aria-hidden="true" id="route-data" />;

src/components/common/router/route-data.tsx

@@ -27,18 +27,21 @@
 
   "title": {
     "home": "Dinh-Van Colomban | Project portfolio",
+
     "trakt": "Trakt | A chrome extension for Trakt.tv",
     "trakt_demo": "Trakt Demo | Interactive demo of Side Trakt",
+
     "synology": "Synology | A chrome extension for Synology NAS",
     "synology_demo": "Synology Demo | Interactive demo of Synology Download",
-    "syno_trakt_app": "Syno-Trakt | A react native app for Synology NAS and Trakt.tv",
-    "syno_trakt_app_demo": "Syno-Trakt Demo | Interactive demo of Syno-Trakt",
+
     "about_me": "About Me | About my projects and experiences",
     "contact": "Contact | Contact form",
+
     "not_found": "404 | Page not Found",
     "unauthorized": "401 | Page unauthorized",
     "forbidden": "403 | Page forbidden",
     "error": "500 | Internal server error",
+
     "particles": "Background | Animated particles",
     "beams": "Background | Animated beams",
     "redirect_to": "Redirect | Redirecting to another page",
@@ -47,8 +50,26 @@
     "trakt_extension": "Trakt Extension | A chrome extension for Trakt.tv",
     "reddit_extension": "Reddit Extension | A chrome extension for Reddit",
     "neo_svelte": "Neo Svelte | A neomorphic UI library for svelte 5",
-    "svelte_simple_router": "Svelte Simple Router | A simple Svelte 5 router",
-    "image_viewer": "Image Viewer | A simple image viewer",
-    "syno_trakt": "Syno-Trakt | A react native app for Synology NAS and Trakt.tv"
+    "svelte_simple_router": "Svelte Simple Router | A simple SPA router for Svelte 5",
+    "image_viewer": "Image Viewer | A simple image viewer"
+  },
+
+  "description": {
+    "home": "Dinh-Van Colomban personal website. Home of my projects, demos and portfolio.",
+
+    "trakt": "A chrome extension for Trakt.tv. Keep track of your favorite TV shows and movies.",
+    "trakt_demo": "An interactive demo for Side Trakt. A chrome extension for Trakt.tv.",
+
+    "synology": "A chrome extension for Synology NAS. Manage your downloads and files.",
+    "synology_demo": "An interactive demo for Synology Download. A chrome extension for Synology NAS.",
+
+    "about_me": "About me. My projects, experiences and skills.",
+
+    "synology_download": "A chrome extension for Synology Download. Manage your downloads and files.",
+    "trakt_extension": "A chrome extension for Trakt.tv. Keep track of your favorite TV shows and movies.",
+    "reddit_extension": "A chrome extension for Reddit. Catch up on your favorite subreddits.",
+    "neo_svelte": "A neomorphic UI library for Svelte 5.",
+    "svelte_simple_router": "A simple SPA router for Svelte 5.",
+    "image_viewer": "A simple image viewer."
   }
 }

src/i18n/models/routes.en.json

@@ -27,18 +27,21 @@
 
   "title": {
     "home": "Dinh-Van Colomban | Project portfolio",
+
     "trakt": "Trakt | Une extension chrome pour Trakt.tv",
     "trakt_demo": "Trakt Demo | Une démo interactive pour Side Trakt",
+
     "synology": "Synology | Une extension chrome pour les NAS Synology",
     "synology_demo": "Synology Demo | Une démo interactive pou Synology Download",
-    "syno_trakt_app": "Syno-Trakt | Une application react native pour Synology Download et Trakt.tv",
-    "syno_trakt_app_demo": "Syno-Trakt Demo | Une démo interactive pour Syno-Trakt",
+
     "about_me": "A propos | A propos de mes projects et expériences.",
     "contact": "Contact | Formulaire de contact",
+
     "not_found": "404 | Page non trouvée",
     "unauthorized": "401 | Page non autorisée",
     "forbidden": "403 | Page interdite",
     "error": "500 | Erreur interne du serveur",
+
     "particles": "Background | Particules animées",
     "beams": "Background | Faisceaux animés",
     "redirect_to": "Redirect | Redirection vers une autre page",
@@ -47,8 +50,26 @@
     "trakt_extension": "Trakt Extension | Une extension chrome pour Trakt.tv",
     "reddit_extension": "Reddit Extension | Une extension chrome pour Reddit",
     "neo_svelte": "Neo Svelte | Une library d'UI neomorphic for svelte 5",
-    "svelte_simple_router": "Svelte Simple Router | Un routeur simple pour Svelte 5",
-    "image_viewer": "Image Viewer | Un simple visualiseur d'images",
-    "syno_trakt": "Syno-Trakt | Une application react native pour Synology Download et Trakt.tv"
+    "svelte_simple_router": "Svelte Simple Router | Un simple router SPA pour Svelte 5",
+    "image_viewer": "Image Viewer | Un simple visualiseur d'images"
+  },
+
+  "description": {
+    "home": "Site personnel de Dinh-Van Colomban. Mes projets, démos et portfolio.",
+
+    "trakt": "Une extension chrome pour Trakt.tv. Suivez vos séries et films préférés.",
+    "trakt_demo": "Une démo interactive pour Side Trakt. Une extension chrome pour Trakt.tv.",
+
+    "synology": "Une extension chrome pour Synology NAS. Gérez vos téléchargements et fichiers.",
+    "synology_demo": "Une démo interactive pour Synology Download. Une extension chrome pour Synology NAS.",
+
+    "about_me": "A propos de Dinh-Van Colomban. Mes projets et expériences.",
+
+    "synology_download": "Une extension chrome pour Synology NAS. Gérez vos téléchargements et fichiers.",
+    "trakt_extension": "Une extension chrome pour Trakt.tv. Suivez vos séries et films préférés.",
+    "reddit_extension": "Une extension chrome pour Reddit. Suivez vos subreddits préférés.",
+    "neo_svelte": "Une library d'UI neomorphic pour Svelte 5.",
+    "svelte_simple_router": "Un simple router SPA pour Svelte 5.",
+    "image_viewer": "Un simple visualiseur d'images."
   }
 }

src/i18n/models/routes.fr.json

@@ -32,6 +32,9 @@ export type RouteMeta = {
   path: Routes;
   name: keyof typeof Routes;
   title: string;
+  description?: string;
+  image?: string;
+  url?: string;
   navbar?: boolean;
   more?: boolean;
   external?: boolean;
@@ -86,6 +89,7 @@ export const RoutesMeta: Record<keyof typeof Routes, RouteMeta> = {
     path: Routes.Home,
     name: 'Home',
     title: 'routes.title.home',
+    description: 'routes.description.home',
     navbar: true,
     color: Colors.White,
     accentColor: Colors.White,
@@ -95,6 +99,7 @@ export const RoutesMeta: Record<keyof typeof Routes, RouteMeta> = {
     path: Routes.SynologyDemo,
     name: 'SynologyDemo',
     title: 'routes.title.synology_demo',
+    description: 'routes.description.synology_demo',
     navbar: true,
     color: Colors.White,
     bgColor: Colors.Black,
@@ -105,6 +110,7 @@ export const RoutesMeta: Record<keyof typeof Routes, RouteMeta> = {
     path: Routes.TraktDemo,
     name: 'TraktDemo',
     title: 'routes.title.trakt_demo',
+    description: 'routes.description.trakt_demo',
     navbar: true,
     accentColor: Colors.Trakt,
     color: Colors.White,
@@ -115,6 +121,7 @@ export const RoutesMeta: Record<keyof typeof Routes, RouteMeta> = {
     path: Routes.Synology,
     name: 'Synology',
     title: 'routes.title.synology',
+    description: 'routes.description.synology',
     color: Colors.White,
     bgColor: Colors.Theme,
     navbar: true,
@@ -123,13 +130,15 @@ export const RoutesMeta: Record<keyof typeof Routes, RouteMeta> = {
     path: Routes.Trakt,
     name: 'Trakt',
     title: 'routes.title.trakt',
+    description: 'routes.description.trakt',
     color: Colors.White,
     navbar: true,
   },
   AboutMe: {
     path: Routes.AboutMe,
     name: 'AboutMe',
     title: 'routes.title.about_me',
+    description: 'routes.description.about_me',
     navbar: true,
     accentColor: Colors.White,
     bgColor: Colors.Theme,
@@ -270,7 +279,7 @@ export const RoutesDefinitions: RouteDefinition[] = [
   },
 ];
 
-export type ExternalRoute = Pick<RouteMeta, 'title' | 'external'> & { path: string; name: string };
+export type ExternalRoute = Pick<RouteMeta, 'title' | 'description' | 'url' | 'image' | 'external'> & { path: string; name: string };
 
 export type BaseRoute = RouteMeta | ExternalRoute;
 
@@ -279,42 +288,49 @@ export const externalRoutes: ExternalRoute[] = [
     path: `${AppLink.pages}/about-me`,
     name: 'AboutMe',
     title: 'routes.title.about_me',
+    description: 'routes.description.about_me',
     external: true,
   },
   {
     path: `${AppLink.pages}/synology-download`,
     name: 'SynologyDownload',
     title: 'routes.title.synology_download',
+    description: 'routes.description.synology_download',
     external: true,
   },
   {
     path: `${AppLink.pages}/trakt-extension`,
     name: 'TraktExtension',
     title: 'routes.title.trakt_extension',
+    description: 'routes.description.trakt_extension',
     external: true,
   },
   {
     path: `${AppLink.pages}/reddit-extension`,
     name: 'RedditExtension',
     title: 'routes.title.reddit_extension',
+    description: 'routes.description.reddit_extension',
     external: true,
   },
   {
     path: `${AppLink.pages}/svelte-simple-router`,
     name: 'SvelteSimpleRouter',
     title: 'routes.title.svelte_simple_router',
+    description: 'routes.description.svelte_simple_router',
     external: true,
   },
   {
     path: `${AppLink.pages}/neo-svelte`,
     name: 'NeoSvelte',
     title: 'routes.title.neo_svelte',
+    description: 'routes.description.neo_svelte',
     external: true,
   },
   {
     path: `${AppLink.pages}/image-viewer`,
     name: 'ImageViewer',
     title: 'routes.title.image_viewer',
+    description: 'routes.description.image_viewer',
     external: true,
   },
 ];