fix: Fixup meta tags

kiosion · Oct 3, 2023 · 29111a6 · 29111a6
1 parent 783ba4d
commit 29111a6
Show file tree

Hide file tree

Showing 22 changed files with 35 additions and 51 deletions.
diff --git a/svelte-app/src/app.html b/svelte-app/src/app.html
@@ -17,7 +17,6 @@
       href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&display=swap"
       rel="stylesheet"
     />
-    <script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous" defer></script>
     %sveltekit.head%
   </head>
   <body>

diff --git a/svelte-app/src/components/document/route.svelte b/svelte-app/src/components/document/route.svelte
@@ -25,15 +25,8 @@
     scrollTo($page?.url);
   });
 
-  $: allTags =
-    (data?.tags || [])
-      .reduce(
-        (acc, tag) => (tag.title && acc.push(tag.title.toLowerCase()), acc),
-        [] as string[]
-      )
-      ?.join(', ') + ', ' || '';
   $: $page?.url && scrollTo($page.url);
-  $: pageTitle = `${BASE_PAGE_TITLE}${data?.title ? ` | ${data.title}` : ''}`;
+  $: pageTitle = `${BASE_PAGE_TITLE} ~ ${data.title}`;
   $: pageDescription = data?.desc
     ? data.desc.length > 160
       ? `${data.desc.slice(0, 160 - 3)}...`
@@ -43,30 +36,25 @@
 
 <svelte:head>
   <title>{pageTitle}</title>
-
   <meta itemprop="name" content={pageTitle} />
   <meta itemprop="description" content={pageDescription} />
-
+  <meta name="robots" content="index, nofollow" />
   <meta name="description" content={pageDescription} />
+  <meta property="og:type" content="article" />
+  <meta property="og:title" content={pageTitle} />
+  <meta property="og:description" content={pageDescription} />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content={data.title} />
+  <meta name="twitter:description" content={pageDescription} />
+  <meta property="article:author" content="Kio" />
   <meta
-    name="keywords"
-    content="{allTags}blog, {model === 'post'
-      ? 'blog post'
-      : 'project'}, kio.dev, kio, kiosion"
+    property="article:published_time"
+    content={new Date(data.date || '0')?.toISOString()}
   />
-  <meta name="author" content="Kio" />
-
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content={$page.url.href} />
-  <meta property="og:title" content={pageTitle} />
   <meta
-    property="og:description"
-    content={data?.desc ? data.desc : $t('A post on kio.dev')}
+    property="article:modified_time"
+    content={new Date(data.date || '0')?.toISOString()}
   />
-
-  <meta property="twitter:url" content={$page.url.href} />
-  <meta property="twitter:title" content={pageTitle} />
-  <meta property="twitter:description" content={pageDescription} />
 </svelte:head>
 
 <ContentWrapper>

diff --git a/svelte-app/src/lib/helpers/navigation.ts b/svelte-app/src/lib/helpers/navigation.ts
@@ -55,6 +55,6 @@ export const pageTitle = derived([isLocalized, t, page], (vals) => {
     route = APP_ROUTES.find((r) => r.path === pathname);
 
   return route?.name?.length
-    ? `${BASE_PAGE_TITLE} | ${vals[1](route.name)}`
+    ? `${BASE_PAGE_TITLE} ~ ${vals[1](route.name)}`
     : BASE_PAGE_TITLE;
 });
diff --git a/svelte-app/src/routes/+error.svelte b/svelte-app/src/routes/+error.svelte
@@ -42,6 +42,7 @@
 
 <svelte:head>
   <title>kio.dev | {status}</title>
+  <meta name="robots" content="none" />
 </svelte:head>
 
 <div class="mt-12">

diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
@@ -13,7 +13,7 @@
   import { isDesktop } from '$helpers/responsive';
   import { check as checkTranslations, currentLang, isLocalized, t } from '$i18n';
   import { APP_LANGS, BASE_ANIMATION_DURATION, DEFAULT_APP_LANG } from '$lib/consts';
-  import { ENV } from '$lib/env';
+  import { ENV, SELF_BASE_URL } from '$lib/env';
   import { setState as setMenuState, state as menuState } from '$lib/helpers/menu';
   import { navOpen } from '$stores/navigation';
   import Settings, { loading } from '$stores/settings';
@@ -95,6 +95,18 @@
   $: browser && (document.documentElement.lang = $currentLang);
 </script>
 
+<svelte:head>
+  <meta name="author" content="Kio" />
+  <meta name="theme-color" content={$theme === 'dark' ? '#16160e' : '#e5e4e6'} />
+  <meta property="og:locale" content={$currentLang === 'fr' ? 'fr_CA' : 'en_CA'} />
+  <meta property="og:site_name" content="kio.dev" />
+  <meta property="og:url" content={$page?.url?.href} />
+  <meta property="og:image" content="{SELF_BASE_URL}/assets/dark-embed.png" />
+  <meta property="twitter:url" content={$page?.url?.href} />
+  <meta property="twitter:site" content="@0xKI0" />
+  <meta property="twitter:image" content="{SELF_BASE_URL}/assets/dark-embed.png" />
+</svelte:head>
+
 <svelte:body
   use:classList={`${$theme} ${$navigating ? 'is-loading' : 'is-loaded'}`}
   on:contextmenu|preventDefault={(e) => setMenuState(e, pageContainer)}

diff --git a/svelte-app/src/routes/[[lang=lang]]/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { page } from '$app/stores';
   import { pageTitle } from '$helpers/navigation';
   import { linkTo, t } from '$i18n';
 
@@ -12,21 +11,18 @@
 
   export let data;
 
-  $: description = $t('A bit about me, my work, and what I do');
+  $: description = $t('A bit about me and what I do');
 </script>
 
 <svelte:head>
   <title>{$pageTitle}</title>
   <meta itemprop="name" content={$pageTitle} />
   <meta itemprop="description" content={description} />
+  <meta name="robots" content="index, follow" />
   <meta name="description" content={description} />
-  <meta name="keywords" content="about, index, homepage, home, kio.dev, kio, kiosion" />
-  <meta name="author" content="Kio" />
   <meta property="og:type" content="website" />
-  <meta property="og:url" content={$page.url.href} />
   <meta property="og:title" content={$pageTitle} />
   <meta property="og:description" content={description} />
-  <meta property="twitter:url" content={$page.url.href} />
   <meta property="twitter:title" content={$pageTitle} />
   <meta property="twitter:description" content={description} />
 </svelte:head>

diff --git a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { page } from '$app/stores';
   import { sortDocumentsByYear } from '$helpers/date';
   import { t } from '$helpers/i18n';
   import { pageTitle } from '$helpers/navigation';
@@ -19,15 +18,12 @@
   <title>{$pageTitle}</title>
   <meta itemprop="name" content={$pageTitle} />
   <meta itemprop="description" content={description} />
+  <meta name="robots" content="index, follow" />
   <meta name="description" content={description} />
-  <meta name="keywords" content="blog, posts, blog posts, kio.dev, kio, kiosion" />
-  <meta name="author" content="Kio" />
   <meta property="og:type" content="website" />
-  <meta property="og:url" content={$page?.url?.href} />
   <meta property="og:title" content={$pageTitle} />
   <meta property="og:description" content={description} />
-  <meta property="twitter:url" content={$page?.url?.href} />
-  <meta property="twitter:title" content="kio.dev | blog" />
+  <meta property="twitter:title" content={$pageTitle} />
   <meta property="twitter:description" content={description} />
 </svelte:head>
 

diff --git a/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { page } from '$app/stores';
   import { pageTitle } from '$helpers/navigation';
   import { t } from '$i18n';
 
@@ -11,21 +10,18 @@
 
   export let data;
 
-  $: description = $t('A peek into my current adventures in tech and beyond');
+  $: description = $t('How to get in touch, and some meta info about this site');
 </script>
 
 <svelte:head>
   <title>{$pageTitle}</title>
   <meta itemprop="name" content={$pageTitle} />
   <meta itemprop="description" content={description} />
+  <meta name="robots" content="index, follow" />
   <meta name="description" content={description} />
-  <meta name="keywords" content="About, kio.dev, kio, kiosion" />
-  <meta name="author" content="Kio" />
   <meta property="og:type" content="website" />
-  <meta property="og:url" content={$page.url.href} />
   <meta property="og:title" content={$pageTitle} />
   <meta property="og:description" content={description} />
-  <meta property="twitter:url" content={$page.url.href} />
   <meta property="twitter:title" content={$pageTitle} />
   <meta property="twitter:description" content={description} />
 </svelte:head>

diff --git a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { page } from '$app/stores';
   import { pageTitle } from '$helpers/navigation';
   import { t } from '$i18n';
   import { sortDocumentsByYear } from '$lib/helpers/date';
@@ -23,14 +22,11 @@
   <title>{$pageTitle}</title>
   <meta itemprop="name" content={$pageTitle} />
   <meta itemprop="description" content={description} />
+  <meta name="robots" content="index, follow" />
   <meta name="description" content={description} />
-  <meta name="keywords" content="work, experience, projects, kio.dev, kio, kiosion" />
-  <meta name="author" content="Kio" />
   <meta property="og:type" content="website" />
-  <meta property="og:url" content={$page?.url?.href} />
   <meta property="og:title" content={$pageTitle} />
   <meta property="og:description" content={description} />
-  <meta property="twitter:url" content={$page?.url?.href} />
   <meta property="twitter:title" content={$pageTitle} />
   <meta property="twitter:description" content={description} />
 </svelte:head>

diff --git a/svelte-app/static/android-chrome-192x192.png b/svelte-app/static/android-chrome-192x192.png
diff --git a/svelte-app/static/android-chrome-512x512.png b/svelte-app/static/android-chrome-512x512.png
diff --git a/svelte-app/static/apple-touch-icon.png b/svelte-app/static/apple-touch-icon.png
diff --git a/svelte-app/static/assets/dark-embed.png b/svelte-app/static/assets/dark-embed.png
diff --git a/svelte-app/static/assets/dark-icon.png b/svelte-app/static/assets/dark-icon.png
diff --git a/svelte-app/static/assets/favicon.png b/svelte-app/static/assets/favicon.png
diff --git a/svelte-app/static/assets/light-embed.png b/svelte-app/static/assets/light-embed.png
diff --git a/svelte-app/static/assets/light-icon.png b/svelte-app/static/assets/light-icon.png
diff --git a/svelte-app/static/assets/spinner.png b/svelte-app/static/assets/spinner.png
diff --git a/svelte-app/static/assets/spinner.webp b/svelte-app/static/assets/spinner.webp
diff --git a/svelte-app/static/favicon-16x16.png b/svelte-app/static/favicon-16x16.png
diff --git a/svelte-app/static/favicon-32x32.png b/svelte-app/static/favicon-32x32.png
diff --git a/svelte-app/static/favicon.ico b/svelte-app/static/favicon.ico