From b85932416df97114556fa3f7660edbb566537f2e Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Sun, 14 Aug 2022 17:34:54 -0400
Subject: [PATCH] Fix SEO problem with metatags

---
 src/components/astro/utils/BasicScripts.astro | 25 +++++++
 src/components/astro/utils/MetaTags.astro     | 53 ++++++++++++++
 src/layouts/Default.astro                     | 70 ++-----------------
 src/layouts/Empty.astro                       | 27 ++-----
 4 files changed, 89 insertions(+), 86 deletions(-)
 create mode 100644 src/components/astro/utils/BasicScripts.astro
 create mode 100644 src/components/astro/utils/MetaTags.astro

diff --git a/src/components/astro/utils/BasicScripts.astro b/src/components/astro/utils/BasicScripts.astro
new file mode 100644
index 0000000..aa33a9d
--- /dev/null
+++ b/src/components/astro/utils/BasicScripts.astro
@@ -0,0 +1,25 @@
+---
+const {} = Astro.props;
+---
+
+<script is:inline>
+  function toggleDarkMode() {
+    document.documentElement.classList.toggle("dark");
+    localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
+  }
+  window.toggleDarkMode = toggleDarkMode;
+
+  if (
+    localStorage.theme === "dark" ||
+    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
+  ) {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+
+  function toggleMenu() {
+    document.getElementById("menu").classList.toggle("hidden");
+  }
+  window.toggleMenu = toggleMenu;
+</script>
diff --git a/src/components/astro/utils/MetaTags.astro b/src/components/astro/utils/MetaTags.astro
new file mode 100644
index 0000000..385e4b4
--- /dev/null
+++ b/src/components/astro/utils/MetaTags.astro
@@ -0,0 +1,53 @@
+---
+import { getImage } from "@astrojs/image";
+
+const { src: defaultImage } = await getImage({
+  src: import("~/assets/images/hero.jpg"),
+  width: 768,
+  aspectRatio: "16:9",
+});
+
+const {
+  title = "AstroWind",
+  description = "A template to make your website using Astro + Tailwind CSS.",
+  image = defaultImage,
+} = Astro.props;
+
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const absoluteImageUrl = new URL(image, Astro.site);
+---
+
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+
+<title>{title}</title>
+<meta name="description" content={description} />
+<link rel="canonical" href={canonicalURL} />
+
+<!-- Google / Search Engine Tags -->
+<meta itemprop="name" content={title} />
+<meta itemprop="description" content={description} />
+<meta itemprop="image" content={absoluteImageUrl} />
+
+<!-- Facebook Meta Tags -->
+<meta property="og:url" content={canonicalURL} />
+<meta property="og:type" content="website" />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content={absoluteImageUrl} />
+
+<!-- Twitter Meta Tags -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:url" content={canonicalURL} />
+<meta name="twitter:title" content={title} />
+<meta name="twitter:description" content={description} />
+<meta name="twitter:image" content={absoluteImageUrl} />
+
+<!-- Fonts -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
+
+<!-- Google Site Verification -->
+<meta name="google-site-verification" content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M" />
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index b905a74..faf9dc9 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -3,56 +3,16 @@ import "~/assets/styles/base.css";
 
 import Header from "~/components/astro/headers/BasicHeader.astro";
 import Footer from "~/components/astro/footers/BasicFooter.astro";
+import MetaTags from "~/components/astro/utils/MetaTags.astro";
+import BasicScripts from "~/components/astro/utils/BasicScripts.astro";
 
-import { getImage } from "@astrojs/image";
-
-const { src: defaultImage } = await getImage({
-  src: import("~/assets/images/hero.jpg"),
-  width: 768,
-  aspectRatio: "16:9"
-})
-
-const {
-  title = "AstroWind",
-  description = "A template to make your website using Astro + Tailwind CSS.",
-  image = defaultImage,
-  withHeader = true,
-} = Astro.props;
+const { title, description, image } = Astro.props;
 ---
 
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-
-    <title>{title}</title>
-    <meta name="description" content={description} />
-
-    <!-- Google / Search Engine Tags -->
-    <meta itemprop="name" content={title} />
-    <meta itemprop="description" content={description} />
-    <meta itemprop="image" content={image} />
-
-    <!-- Facebook Meta Tags -->
-    <meta property="og:url" content="https://astrowind.vercel.app" />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    <meta property="og:image" content={image} />
-
-    <!-- Twitter Meta Tags -->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content={title} />
-    <meta name="twitter:description" content={description} />
-    <meta name="twitter:image" content={image} />
-
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet"
-    />
-    <meta name="google-site-verification" content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M" />
+    <MetaTags title={title} description={description} image={image} />
   </head>
 
   <body
@@ -62,26 +22,6 @@ const {
     <slot />
     <Footer />
 
-    <script is:inline>
-      function toggleDarkMode() {
-        document.documentElement.classList.toggle("dark");
-        localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
-      }
-      window.toggleDarkMode = toggleDarkMode;
-
-      if (
-        localStorage.theme === "dark" ||
-        (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
-      ) {
-        document.documentElement.classList.add("dark");
-      } else {
-        document.documentElement.classList.remove("dark");
-      }
-
-      function toggleMenu() {
-        document.getElementById("menu").classList.toggle("hidden");
-      }
-      window.toggleMenu = toggleMenu;
-    </script>
+    <BasicScripts />
   </body>
 </html>
diff --git a/src/layouts/Empty.astro b/src/layouts/Empty.astro
index edc1db7..09adbe9 100644
--- a/src/layouts/Empty.astro
+++ b/src/layouts/Empty.astro
@@ -1,22 +1,16 @@
 ---
 import "~/assets/styles/base.css";
 
-const { title = "", description = "", withHeader = true } = Astro.props;
+import MetaTags from "~/components/astro/utils/MetaTags.astro";
+import BasicScripts from "~/components/astro/utils/BasicScripts.astro";
+
+const { title, description, image } = Astro.props;
 ---
 
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <title>{title}</title>
-    <meta name="description" content={description} />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet"
-    />
-    <meta name="google-site-verification" content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M" />
+    <MetaTags title={title} description={description} image={image} />
   </head>
 
   <body
@@ -24,15 +18,6 @@ const { title = "", description = "", withHeader = true } = Astro.props;
   >
     <slot />
 
-    <script is:inline>
-      if (
-        localStorage.theme === "dark" ||
-        (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
-      ) {
-        document.documentElement.classList.add("dark");
-      } else {
-        document.documentElement.classList.remove("dark");
-      }
-    </script>
+    <BasicScripts />
   </body>
 </html>