Better SEO

src/components/core/MetaTags.astro

@@ -1,4 +1,5 @@
 ---
+import { AstroSeo } from "@astrolib/seo"
 import { getImage } from '@astrojs/image';
 import { getRelativeUrlByFilePath } from '~/utils/directories';
 
@@ -19,9 +20,13 @@ const {
 	title = SITE.name,
 	description = '',
 	image: _image = defaultImage,
+
 	canonical,
 	noindex = false,
 	nofollow = false,
+
+	ogTitle = title,
+	ogType = 'website',
 } = Astro.props;
 
 const image =
@@ -35,30 +40,33 @@ const image =
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-<title>{title}</title>
-<meta name="description" content={description} />
-{canonical && <link rel="canonical" href={canonical} />}
+<AstroSeo
+	title={title}
+	description={description}
 
-<meta name="robots" content={`${noindex ? 'noindex' : 'index'}, ${nofollow ? 'nofollow' : 'follow'}`} />
+	canonical={canonical}
+	noindex={noindex}
+	nofollow={nofollow}
 
-<!-- Google / Search Engine Tags -->
-<meta itemprop="name" content={title} />
-<meta itemprop="description" content={description} />
-{image && <meta itemprop="image" content={image} />}
-
-<!-- Facebook Meta Tags -->
-{canonical && <meta property="og:url" content={canonical} />}
-<meta property="og:type" content="website" />
-<meta property="og:title" content={title} />
-<meta property="og:description" content={description} />
-{image && <meta property="og:image" content={image} />}
-
-<!-- Twitter Meta Tags -->
-{canonical && <meta name="twitter:url" content={canonical} />}
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:title" content={title} />
-<meta name="twitter:description" content={description} />
-{image && <meta name="twitter:image" content={image} />}
+	openGraph={{
+		url: canonical,
+		title: ogTitle,
+		description: description,
+		type: ogType,
+		images: image ? [
+			{
+				url: image.toString(),
+				alt: ogTitle,
+			},
+		] : undefined,
+		// site_name: 'SiteName',
+	}}
+	twitter={{
+		// handle: '@handle',
+		// site: '@site',
+		cardType: image ? 'summary_large_image' : undefined,
+	}}
+/>
 
 <Fonts />