Adding SEO component and including in all pages.

src/lib/components/SEO.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { PUBLIC_SITE_URL } from "$env/static/public";
+	const siteUrl = PUBLIC_SITE_URL || 'https://bradleyshellnut.com';
+
+  const defaultMetadata = {
+    defaultTitle: 'Bradley Shellnut',
+    defaultDescription: "My name is Bradley Shellnut and I'm a Full Stack Software Engineer.",
+    defaultImage: '/b_shell_nut_favicon.png',
+    siteUrl,
+  };
+
+	export let title = defaultMetadata.defaultTitle;
+	export let description = defaultMetadata.defaultDescription;
+	export let image = defaultMetadata.defaultImage;
+	export let location: string = '';
+
+  const seo = {
+    title,
+    description,
+    image: `${siteUrl}${image}`,
+    url: `${siteUrl}${location || ``}`,
+  };
+</script>
+
+<svelte:head>
+	<title>{`${seo.title} - ${defaultMetadata.defaultTitle}`}</title>
+	<link rel="icon" type="image/gif" href="/b_shell_nut_favicon.gif" />
+	<meta name="description" content={seo.description} />
+	<meta name="og:type" content="website" />
+	<meta name="og:title" content={seo.title} />
+	{#if seo.url}
+		<meta name="og:url" content={seo.url} />
+	{/if}
+	<meta name="og:description" content={seo.description} />
+	<meta name="og:site_name" content={seo.title} />
+	<meta name="og:image" content={seo.image || '/b_shell_nut_favicon.png'} />
+	<meta name="og:locale" content="en_US" />
+	<meta name="twitter:card" content="summary" />
+	<!-- <meta name="twitter:site" content="@" /> -->
+	<!-- <meta name="twitter:creator" content="@" /> -->
+	{#if seo.url}
+		<meta name="twitter:url" content={seo.url} />
+	{/if}
+	<meta name="twitter:title" content={seo.title} />
+	<meta name="twitter:description" content={seo.description} />
+	<meta
+		name="twitter:image"
+		content={seo.image || '/b_shell_nut_favicon.png'}
+	/>
+	<meta name="theme-color" content="#272727" />
+</svelte:head>

src/routes/+layout.svelte

@@ -3,8 +3,11 @@
 	import Header from '$lib/components/header/index.svelte';
 	import Footer from '$lib/components/footer/index.svelte';
 	import '$root/styles/styles.pcss';
+	import SEO from '$root/lib/components/SEO.svelte';
 </script>
 
+<SEO />
+
 <div class="wrapper">
 	<Header />
 	<main>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { PageData } from "./$types";
+	import SEO from '$lib/components/SEO.svelte';
 
 	export let data: PageData;
   const userNames = {
@@ -9,9 +10,7 @@
   };
 </script>
 
-<svelte:head>
+<SEO title="Home" />
-	<title>Bored Game | Home</title>
-</svelte:head>
 
 <div class="home">
 	<div>

src/routes/about/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import SEO from "$root/lib/components/SEO.svelte";
+</script>
+
+<SEO title="About" />

src/routes/articles/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+	import SEO from "$root/lib/components/SEO.svelte";
+
+	export let data: PageData;
+
+	const currentPage: number = 1;
+</script>
+
+<SEO title={`Tech Articles - Page ${currentPage}`} />

src/routes/portfolio/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import SEO from "$root/lib/components/SEO.svelte";
+</script>
+
+<SEO title="Portfolio" />

src/routes/privacy/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import SEO from "$root/lib/components/SEO.svelte";
+</script>
+
+<SEO title="Privacy Blog" />

src/routes/uses/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import SEO from "$root/lib/components/SEO.svelte";
+</script>
+
+<SEO title="Uses" />