Better SEO

package.json

@@ -8,6 +8,7 @@
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
+    "astro": "astro",
     "format": "prettier -w .",
     "lint:eslint": "eslint . --ext .js,.ts,.astro",
     "subfont": "subfont -ir --no-fallbacks --silent --root dist"
@@ -18,6 +19,7 @@
     "@astrojs/rss": "^1.0.0",
     "@astrojs/sitemap": "^1.0.0",
     "@astrojs/tailwind": "^1.0.0",
+    "@astrolib/seo": "^0.2.0",
     "@fontsource/inter": "^4.5.12",
     "@tailwindcss/typography": "^0.5.4",
     "@typescript-eslint/eslint-plugin": "^5.36.2",

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 />
 

src/pages/[...blog]/[...page].astro

@@ -26,6 +26,7 @@ const meta = {
 	title: `Blog ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
 	description: SITE.description,
 	canonical: getCanonical(getPermalink(page.url.current)),
+	ogType: "blog"
 };
 ---
 

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

@@ -29,6 +29,8 @@ const meta = {
 	description: post.description,
 	canonical: post.canonical || getCanonical(getPermalink(post.slug, 'post')),
 	image: await findImage(post.image),
+	ogTitle: post.title,
+	ogType: "article"
 };
 ---
 

src/pages/[...categories]/[category]/[...page].astro

@@ -38,10 +38,11 @@ const meta = {
 	title: `Category '${category}' ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
 	description: SITE.description,
 	canonical: getCanonical(getPermalink(page.url.current)),
+	noindex: true,
 };
 ---
 
-<Layout meta={{ ...meta, noindex: true }}>
+<Layout meta={meta}>
 	<Fragment slot="title">
 		Category: {category}
 	</Fragment>

src/pages/[...tags]/[tag]/[...page].astro

@@ -38,10 +38,11 @@ const meta = {
 	title: `Posts by tag '${tag}' ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
 	description: SITE.description,
 	canonical: getCanonical(getPermalink(page.url.current)),
+	noindex: true 
 };
 ---
 
-<Layout meta={{ ...meta, noindex: true }}>
+<Layout meta={meta}>
 	<Fragment slot="title">
 		Tag: {tag}
 	</Fragment>