Fix: Layout components to include canonical URLs (#18)

* fix: Layout components to include canonical URLs * fix: canonical URL in Post component
Novage · Sep 26, 2024 · 8de610b · 8de610b
1 parent 55792f6
commit 8de610b
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 10 deletions.
diff --git a/src/components/blog-page/Post.astro b/src/components/blog-page/Post.astro
@@ -6,9 +6,10 @@ import Layout from "../../layouts/Layout.astro";
 import "../../styles/blog.css";
 
 const post = Astro.props.frontmatter ?? Astro.props;
+const canonicalUrl = `https://novage.com.ua/blog/${post.slug}`;
 ---
 
-<Layout title={post.title}>
+<Layout title={post.title} canonical={canonicalUrl}>
   <Header />
   <div id="content">
     <article>

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -3,9 +3,10 @@ import "../styles/main.css";
 
 interface Props {
   title: string;
+  canonical?: string;
 }
 
-const { title } = Astro.props;
+const { title, canonical } = Astro.props;
 ---
 
 <!doctype html>
@@ -47,6 +48,8 @@ const { title } = Astro.props;
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
 
+    {canonical && <link rel="canonical" href={canonical} />}
+
     <script is:inline>
       window.dataLayer = window.dataLayer || [];
 

diff --git a/src/pages/blog/blog.astro b/src/pages/blog/blog.astro
@@ -7,11 +7,11 @@ import Layout from "../../layouts/Layout.astro";
 import "../../styles/blog.css";
 
 const posts = (await getCollection("blog")).sort(
-  (a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
+  (a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf()
 );
 ---
 
-<Layout title="Novage Blog">
+<Layout title="Novage Blog" canonical="https://novage.com.ua/blog">
   <Header />
   <div id="content">
     <article>

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -7,11 +7,11 @@ import Layout from "../../layouts/Layout.astro";
 import "../../styles/blog.css";
 
 const posts = (await getCollection("blog")).sort(
-  (a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
+  (a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf()
 );
 ---
 
-<Layout title="Novage Blog">
+<Layout title="Novage Blog" canonical="https://novage.com.ua/blog">
   <Header />
   <div id="content">
     <article>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -7,7 +7,7 @@ import Footer from "../components/shared/Footer.astro";
 import PageHeader from "../components/shared/PageHeader.astro";
 ---
 
-<Layout title="Novage">
+<Layout title="Novage" canonical="https://novage.com.ua/">
   <Header />
   <div id="content">
     <article>

diff --git a/src/pages/p2p-media-loader/demo.astro b/src/pages/p2p-media-loader/demo.astro
@@ -11,7 +11,10 @@ import { P2PVideoDemo } from "p2p-media-loader-demo";
   href="/_astro/_astro-entry_p2p-media-loader-demo.BMEc0IOl.css"
 />
 
-<Layout title="P2P Media Loader">
+<Layout
+  title="P2P Media Loader"
+  canonical="https://novage.com.ua/p2p-media-loader/demo"
+>
   <Header />
 
   <div id="content">

diff --git a/src/pages/p2p-media-loader/overview.astro b/src/pages/p2p-media-loader/overview.astro
@@ -7,7 +7,10 @@ import Layout from "../../layouts/Layout.astro";
 import img from "../../../public/images/p2p-assisted-media-delivery.png";
 ---
 
-<Layout title="P2P Media Loader">
+<Layout
+  title="P2P Media Loader"
+  canonical="https://novage.com.ua/p2p-media-loader/overview"
+>
   <Header />
   <div id="content">
     <article>

diff --git a/src/pages/p2p-media-loader/technical-overview.astro b/src/pages/p2p-media-loader/technical-overview.astro
@@ -7,7 +7,10 @@ import Layout from "../../layouts/Layout.astro";
 import img from "../../../public/images/p2p-media-loader-network.png";
 ---
 
-<Layout title="P2P Media Loader">
+<Layout
+  title="P2P Media Loader"
+  canonical="https://novage.com.ua/p2p-media-loader/technical-overview"
+>
   <Header />
   <div id="content">
     <article>