SEO optimizations

SEO optimizations using astro-seo and SEO component
Modified i18n to incorporate complex SEO

package.json

@@ -25,9 +25,11 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@tailwindcss/typography": "^0.5.13",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
     "astro": "^4.11.5",
+    "astro-seo": "^0.8.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
@@ -41,7 +43,6 @@
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.0",
-    "zod": "^3.23.8",
+    "zod": "^3.23.8"
-    "@tailwindcss/typography": "^0.5.13"
   }
 }

src/i18n/cs.js

@@ -1,6 +1,6 @@
 export const cs = {
   title: "Cyril Šebek", // Title of the main page in browser's handlebard
-  description: "Personal website of one weird student", // HTML page description
+  escription: "Hi there, I am Cyril, one weird student from Czechia, also a programmer and a musician.",
   favicon: "/favicon.svg",
 
   /*
@@ -106,6 +106,7 @@ export const cs = {
     pageTitle: "Moje skladby @ Cyril Šebek",
     title: "Moje skladby",
     description: "Seznam mých skladeb.",
+    ogDescription: "This page lists all published compositions by Cyril Šebek",
     downloadPDF: "Stáhnout PDF",
     downloadMP3: "Stáhnout MP3",
     downloadFLAC: "Stáhnout FLAC"

src/i18n/de.js

@@ -1,6 +1,6 @@
 export const de = {
 	title: "Cyril Šebek", // Title of the main page in browser's handlebard
-	description: "Personal website of one weird student", // HTML page description
+	description: "Hi there, I am Cyril, one weird student from Czechia, also a programmer and a musician.",
 	favicon: "/favicon.svg",
   
 	/*
@@ -106,6 +106,7 @@ export const de = {
 	  pageTitle: "Music @ Cyril Šebek",
 	  title: "My compositions",
 	  description: "This is page is listing all my published musical compositions.",
+	  ogDescription: "This page lists all published compositions by Cyril Šebek",
 	  downloadPDF: "Download PDF",
 	  downloadMP3: "Download MP3",
 	  downloadFLAC: "Download FLAC"

src/i18n/en.js

@@ -1,6 +1,6 @@
 export const en = {
   title: "Cyril Šebek", // Title of the main page in browser's handlebard
-  description: "Personal website of one weird student", // HTML page description
+  description: "Hi there, I am Cyril, one weird student from Czechia, also a programmer and a musician.",
   favicon: "/favicon.svg",
 
   /*
@@ -106,6 +106,7 @@ export const en = {
     pageTitle: "Music @ Cyril Šebek",
     title: "My compositions",
     description: "This is page is listing all my published musical compositions.",
+    ogDescription: "This page lists all published compositions by Cyril Šebek",
     downloadPDF: "Download PDF",
     downloadMP3: "Download MP3",
     downloadFLAC: "Download FLAC"

src/i18n/fr.js

@@ -1,6 +1,6 @@
 export const fr = {
 	title: "Cyril Šebek", // Title of the main page in browser's handlebard
-	description: "Personal website of one weird student", // HTML page description
+	description: "Hi there, I am Cyril, one weird student from Czechia, also a programmer and a musician.",
 	favicon: "/favicon.svg",
   
 	/*
@@ -106,6 +106,7 @@ export const fr = {
 	  pageTitle: "Music @ Cyril Šebek",
 	  title: "My compositions",
 	  description: "This is page is listing all my published musical compositions.",
+	  ogDescription: "This page lists all published compositions by Cyril Šebek",
 	  downloadPDF: "Download PDF",
 	  downloadMP3: "Download MP3",
 	  downloadFLAC: "Download FLAC"

src/layouts/BlogPost.astro

@@ -1,17 +1,15 @@
 ---
-import type { CollectionEntry } from "astro:content";
 import SinglePageBlogMode from "./SinglePageBlogMode.astro";
 import MainLayout from "./MainLayout.astro";
 
-type Props = CollectionEntry<"blog">["data"];
+const { title, description, language, openGraph } = Astro.props;
-
-const { title, description, language } = Astro.props;
 ---
 
 <MainLayout
   title=`${title} @ Cyril Šebek`
   description={description}
   lang={language}
+  openGraph={openGraph}
 >
   <SinglePageBlogMode>
     <slot />

src/layouts/MainLayout.astro

@@ -1,9 +1,10 @@
 ---
-const { title, description, lang, themeOverride } = Astro.props;
+const { title, description, lang, themeOverride, openGraph } = Astro.props;
 import { ViewTransitions } from 'astro:transitions';
 import Navbar from "../components/Navbar.astro";
 import "../style/index.css";
 import { useTranslations } from '../i18n/utils';
+import { SEO } from "astro-seo";
 
 const t = useTranslations(lang)
 ---
@@ -20,6 +21,11 @@ const t = useTranslations(lang)
         <link rel="shortcut icon" href={t("favicon")}>
         <link rel="shortcut icon" href={t("favicon")} type="image/x-icon">
         <title>{title}</title>
+        <SEO 
+            title={title}
+            description={description}
+            openGraph={openGraph}
+        />
         <ViewTransitions />
     </head>
     <body class="bg-bkg" >

src/pages/[lang]/blog/[...slug].astro

@@ -25,9 +25,22 @@ const page = Astro.props;
 const formattedDate = page.data.publishDate?.toLocaleString(lang);
 
 const { Content } = await page.render();
+
+const og = {
+  basic: {
+    title: page.data.title,
+    type: "article",
+    image: page.data.image.url
+  },
+  article: {
+    publishedTime: page.data.publishDate,
+    authors: [page.data.author],
+    tags: page.data.tags
+  }
+}
 ---
 
-<BlogPost {...page.data} language={lang}>
+<BlogPost {...page.data} language={lang} openGraph={og}>
   <article
     class="prose prose-moi m-[auto] sm:prose-sm md:prose-md lg:prose-lg text-justify"
   >

src/pages/[lang]/blog/index.astro

@@ -19,12 +19,26 @@ var posts = await getBlogPosts();
 var filtered_posts = posts.filter(
   (post) => post.data.language == Astro.currentLocale,
 );
+
+const og = {
+  basic: {
+    title: t("blog")["title"],
+    type: "website",
+    image: t("favicon")
+  },
+  optional: {
+    description: t("blog")["ogDescription"],
+    locale: getLangFromUrl(Astro.url),
+    siteName: "Cyril Šebek"
+  }
+};
 ---
 
 <MainLayout
   title={t("blog")["title"]}
-  description={t("blog")["description"]}
+  description={t("blog")["ogDescription"]}
   lang={Astro.currentLocale}
+  openGraph={og}
 >
   <SinglePageBlogMode>
     <div class="p-4">

src/pages/[lang]/blog/tags/[tag].astro

@@ -33,9 +33,22 @@ const { lang, tag } = Astro.params;
 const { posts } = Astro.props;
 
 const filteredPosts = posts.filter((post) => post.data.tags?.includes(tag) && post.data.language == Astro.currentLocale);
+
+const og = {
+  basic: {
+    title: `${t("postsTagged")} "${tag}"}`,
+    image: t("favicon"),
+    type: "website"
+  },
+  optional: {
+    description: t("blog")["ogDescription"],
+    locale: getLangFromUrl(Astro.url),
+    siteName: "Cyril Šebek"
+  }
+}
 ---
 
-<MainLayout title=`${tag} @ Cyril Šebek` description={"desc"} lang={lang}>
+<MainLayout title=`${tag} @ Cyril Šebek` description={"desc"} lang={lang} openGraph={og}>
   <SinglePageBlogMode>
     <h1 class="text-2xl text-center font-bold text-content mb-10 mt-5">{t("postsTagged")} "{tag}"</h1>
     <PostsList filteredPosts={filteredPosts} lang={Astro.currentLocale} />

src/pages/[lang]/index.astro

@@ -17,8 +17,22 @@ export async function getStaticPaths() {
     return { params: { lang } };
   });
 }
+
+const og = {
+  basic: {
+    title: t("title"),
+    type: "website",
+    image: t("favicon")
+  },
+  optional: {
+    description: t("description"),
+    locale: getLangFromUrl(Astro.url),
+    siteName: "Cyril Šebek"
+  }
+}
+
 ---
-<MainLayout title={t("title")} description={t("description")} lang={Astro.currentLocale} themeOverride="theme_auto">
+<MainLayout title={t("title")} description={t("description")} openGraph={og} lang={Astro.currentLocale} themeOverride="theme_auto">
   <FloatingLinks />
   <Hero />
   <About />

src/pages/[lang]/music/index.astro

@@ -17,12 +17,26 @@ export async function getStaticPaths() {
 
 var songs = await getCompositions()
 songs = songs.reverse()
+
+const og = {
+  basic: {
+    title: t("music")["title"],
+    type: "website",
+    image: t("favicon")
+  },
+  optional: {
+    description: t("music")["ogDescription"],
+    locale: getLangFromUrl(Astro.url),
+    siteName: "Cyril Šebek"
+  }
+};
 ---
 
 <MainLayout
   title={t("music")["pageTitle"]}
-  description={t("music")["description"]}
+  description={t("music")["ogDescription"]}
   lang={Astro.currentLocale}
+  openGraph={og}
 >
   <SinglePageBlogMode>
     <div class="p-4">

src/pages/index.astro

@@ -8,7 +8,7 @@ import Showcase from "../components/Showcase.astro";
 import FloatingLinks from "../components/FloatingLinks.astro";
 
 //@ts-ignore
-import { getLangFromUrl, useTranslations } from "../i18n/utils";
+import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 
 const t = useTranslations(getLangFromUrl(Astro.url));
 
@@ -17,8 +17,22 @@ export async function getStaticPaths() {
     return { params: { lang } };
   });
 }
+
+const og = {
+  basic: {
+    title: t("title"),
+    type: "website",
+    image: t("favicon")
+  },
+  optional: {
+    description: t("description"),
+    locale: getLangFromUrl(Astro.url),
+    siteName: "Cyril Šebek"
+  }
+}
+
 ---
-<MainLayout title={t("title")} description={t("description")} lang={Astro.currentLocale} themeOverride="theme_auto">
+<MainLayout title={t("title")} description={t("description")} openGraph={og} lang={Astro.currentLocale} themeOverride="theme_auto">
   <head>
     <meta http-equiv="refresh" content="0; url=https://cyrilsebek.cz/en">
         <script type="text/javascript">