feat: add seo for index page (#1)

* feat: add seo for index page * fix: move head to svelte layout * chore: TOI --------- Co-authored-by: Nutthapat Pongtanyavichai <[email protected]>
crackncode-th · Apr 26, 2023 · 980639e · 980639e
1 parent 2c1723e
commit 980639e
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
 		"node-fetch": "^3.3.1",
 		"prettier-plugin-tailwindcss": "^0.2.7",
 		"pretty-quick": "^3.1.3",
+		"schema-dts": "^1.1.2",
 		"svelte-bootstrap-icons": "^2.3.1"
 	},
 	"engines": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -2,14 +2,12 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<title>Pre TOI 19</title>
-		<meta name="description" content="การแข่งขัน Crack 'n' Code ในวันที่ 13-14 พฤษภาคม 2566" />
-		<!--
-      <link rel="icon" href="%sveltekit.assets%/crackncode.webp" />
-		-->
-		<link rel="icon" href="%sveltekit.assets%/cncxcodeblitz.png" />
+		<link rel="icon" href="%sveltekit.assets%/cncxcodeblitz.webp" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Thai" />
+
+		<!-- For google's verification -->
+		<meta name="google-site-verification" content="qRdSoVMowAFZPds4O92p_c-Ca5KnujbMub4EbFLr5RM" />
 		%sveltekit.head%
 	</head>
 

diff --git a/src/components/layout/NavBar.svelte b/src/components/layout/NavBar.svelte
@@ -26,7 +26,7 @@
 		<a href="/" class="flex items-center transition-colors hover:text-neutral-300 lg:gap-3">
 			<img
 				class="scale-[.66] cursor-pointer lg:scale-100"
-				src="/cncxcodeblitz.png"
+				src="/cncxcodeblitz.webp"
 				width="70"
 				alt="Crack 'n' Code x CodeBlitz Logo"
 			/>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -5,6 +5,14 @@
 	import Footer from "$components/layout/Footer.svelte";
 </script>
 
+<svelte:head>
+	<title>Crack 'n' Code x CodeBlitz Pre TOI19</title>
+	<meta
+		name="description"
+		content="การแข่งขัน Pre TOI19 จัดโดย Crack 'n' Code และ CodeBlitz ในวันที่ 13-14 พฤษภาคม 2566 เวลา 19.00-22.00 น."
+	/>
+</svelte:head>
+
 <div class="relative overflow-x-hidden">
 	<NavBar />
 	<main class="min-h-[calc(100vh-18rem)] p-4 lg:min-h-[calc(100vh-16.5rem)]">

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -7,11 +7,12 @@
 
 	import PrizeList from "$components/PrizeList.svelte";
 	import CountDown from "$components/CountDown.svelte";
+
+	import { serializeJsonLd, websiteSchema } from "$utils/json-ld";
 </script>
 
 <svelte:head>
-	<title>Crack 'n' Code x CodeBlitz Pre TOI19</title>
-	<meta name="description" content="Crack 'n' Code is online programming contest organizer" />
+	{@html serializeJsonLd(websiteSchema)}
 </svelte:head>
 
 <main class="page">

diff --git a/src/utils/json-ld.ts b/src/utils/json-ld.ts
@@ -0,0 +1,30 @@
+import type { Thing, WithContext, Event } from "schema-dts";
+
+export type Schema = Thing | WithContext<Thing>;
+
+export function serializeJsonLd(data: Schema): string {
+	return `<script type="application/ld+json">${JSON.stringify(data, null, 2)}</script>`;
+}
+
+export const websiteSchema: WithContext<Event> = {
+	"@context": "https://schema.org",
+	"@type": "Event",
+	name: "Crack 'n' Code x CodeBlitz Pre TOI19",
+	startDate: "2023-05-14",
+	location: {
+		"@type": "Place",
+		name: "ผ่านระบบ CMS"
+	},
+	image: "https://pretoi19.crackncode.org/cncxcodeblitz.webp",
+	description:
+		"การแข่งขัน TOI19 ใกล้เข้ามาแล้ว อยากจะทดสอบฝีมือตัวเองใช่มั้ย คุณคิดว่าคุณพร้อมแค่ไหนกัน",
+	url: "https://forms.gle/QtSv4pD7e92WEhVCA",
+	performer: {
+		"@type": "Person",
+		name: "Crack n code x codeblitz"
+	},
+	offers: {
+		"@type": "Offer",
+		price: "รางวัล คะแนนรวมสูงสุด 16 อันดับแรก [first place prize] เสื้อ Crack 'n' Code X CodeBlitz"
+	}
+};
diff --git a/static/cncxcodeblitz.png b/static/cncxcodeblitz.png
diff --git a/static/cncxcodeblitz.webp b/static/cncxcodeblitz.webp
diff --git a/svelte.config.js b/svelte.config.js
@@ -14,7 +14,8 @@ const config = {
 			$components: path.resolve("src/components"),
 			$lib: path.resolve("src/lib"),
 			$styles: path.resolve("src/styles"),
-			$data: path.resolve("src/data")
+			$data: path.resolve("src/data"),
+			$utils: path.resolve("src/utils")
 		}
 	}
 };