diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 88db36b..eb39945 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -2,6 +2,7 @@
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
 import '../styles/global.css';
+import { SITE_TITLE } from '../consts';
 
 export interface Props {
   title: string;
@@ -9,9 +10,10 @@ export interface Props {
   image?: string;
 }
 
-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-
 const { title, description, image = '/placeholder-social.jpg' } = Astro.props;
+
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const actualTitle = title === 'home' ? SITE_TITLE : title + ' | ' + SITE_TITLE;
 ---
 
 <meta charset="utf-8" />
@@ -19,16 +21,16 @@ const { title, description, image = '/placeholder-social.jpg' } = Astro.props;
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <meta name="generator" content={Astro.generator} />
 <link rel="canonical" href={canonicalURL} />
-<title>{title}</title>
-<meta name="title" content={title} />
+<title>{actualTitle}</title>
+<meta name="title" content={actualTitle} />
 <meta name="description" content={description} />
 <meta property="og:type" content="website" />
 <meta property="og:url" content={Astro.url} />
-<meta property="og:title" content={title} />
+<meta property="og:title" content={actualTitle} />
 <meta property="og:description" content={description} />
 <meta property="og:image" content={new URL(image, Astro.url)} />
 <meta property="twitter:card" content="summary_large_image" />
 <meta property="twitter:url" content={Astro.url} />
-<meta property="twitter:title" content={title} />
+<meta property="twitter:title" content={actualTitle} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />