Added og to sitemap + optimized alternates logic

Author: ArsenTech

src/app/categories/[category]/page.tsx

@@ -2,7 +2,7 @@ import PageLayout from "@/components/layout"
 import Search from "@/components/pages/search"
 import { KEYWORDS, POSTS_IN_SEARCH } from "@/lib/constants"
 import { getAllCategories, getPostsByCategory } from "@/lib/helpers"
-import { absoluteURL } from "@/lib/helpers/seo"
+import { absoluteURL, metaAlternatives } from "@/lib/helpers/seo"
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
 
@@ -63,9 +63,7 @@ export const generateMetadata = async({params, searchParams}: PageProps): Promis
                title: meta.title,
                description: meta.description,
           },
-          alternates: {
-               canonical: absoluteURL(`/categories/${category}`)
-          }
+          alternates: metaAlternatives(`/categories/${category}`)
      }
 }
 

src/app/layout.tsx

@@ -4,7 +4,7 @@ import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { KEYWORDS } from "@/lib/constants";
 import { Toaster } from "@/components/ui/sonner";
-import { absoluteURL } from "@/lib/helpers/seo";
+import { absoluteURL, metaAlternatives } from "@/lib/helpers/seo";
 
 const sora = Sora({
   variable: "--font-sora",
@@ -35,9 +35,7 @@ export const metadata: Metadata = {
   verification: {
     google: "fO_3worN0840UBpRpX9H9HVtu-U2Z3y5LFJT5qzXpUE" 
   },
-  alternates: {
-    canonical: absoluteURL("/")
-  },
+  alternates: metaAlternatives("/"),
   openGraph: {
     title: "ArsenTech's Official Blog Website",
     description: "Your go-to hub for tech tutorials, antivirus comparisons, and in-depth guides for programmers, tech enthusiasts, and more tech related curious minds.",

src/app/page.tsx

@@ -2,7 +2,7 @@ import PageLayout from "@/components/layout";
 import LandingPage from "@/components/pages/landing";
 import { POSTS_PER_PAGE } from "@/lib/constants";
 import { getAllPosts, getCategories } from "@/lib/helpers";
-import { absoluteURL } from "@/lib/helpers/seo";
+import { absoluteURL, metaAlternatives } from "@/lib/helpers/seo";
 import type { Metadata } from "next";
 
 interface HomepageProps{
@@ -19,9 +19,7 @@ export const generateMetadata = async({searchParams}: HomepageProps): Promise<Me
       previous: currentPage > 1 ? absoluteURL(`/?page=${currentPage - 1}`) : undefined,
       next: currentPage < totalPages ? absoluteURL(`/?page=${currentPage + 1}`) : undefined
     },
-    alternates: {
-      canonical: currentPage === 1 ? absoluteURL("/") : absoluteURL(`/?page=${currentPage}`)
-    }
+    alternates: metaAlternatives(currentPage === 1 ? "/" : `/?page=${currentPage}`)
   }
 }
 export default async function Home({searchParams}: HomepageProps) {

src/app/posts/[slug]/page.tsx

@@ -2,7 +2,7 @@ import PageLayout from "@/components/layout";
 import BlogPost from "@/components/pages/blog-post";
 import { KEYWORDS } from "@/lib/constants";
 import { getAllSlugs, getPostBySlug, getRelatedPosts } from "@/lib/helpers";
-import { absoluteURL } from "@/lib/helpers/seo";
+import { absoluteURL, metaAlternatives } from "@/lib/helpers/seo";
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
 
@@ -62,9 +62,7 @@ export const generateMetadata = async({params}: SinglePostPageProps): Promise<Me
       title: currPost.title,
       description: currPost.description,
     },
-    alternates: {
-      canonical: absoluteURL(`/posts/${slug}`)
-    }
+    alternates: metaAlternatives(`/posts/${slug}`)
   }
 }
 

src/app/sitemap.ts

@@ -25,7 +25,10 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap>{
                url: absoluteURL(`/posts/${slug}`),
                lastModified: post?.date ?? new Date(),
                changeFrequency: "daily",
-               priority: 0.8
+               priority: 0.8,
+               images: post ? [
+                    absoluteURL(`/api/og?title=${encodeURIComponent(post.title)}&description=${encodeURIComponent(post.description)}&date=${post.date.toISOString()}&bg=image`)
+               ] : undefined
           }
      }))
      const latestDate = searchPostPages.length>0 ? new Date(Math.max(...searchPostPages.map(p => new Date(p.lastModified as string).getTime()))) : new Date()
@@ -34,7 +37,8 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap>{
                url: SITE_URL,
                lastModified: latestDate,
                changeFrequency: "monthly",
-               priority: 1
+               priority: 1,
+               images: [absoluteURL("/og.png")]
           },
           ...searchPostPages,
           ...searchTagPages,

src/app/tags/[tag]/page.tsx

@@ -2,7 +2,7 @@ import PageLayout from "@/components/layout"
 import Search from "@/components/pages/search"
 import { KEYWORDS, POSTS_IN_SEARCH } from "@/lib/constants"
 import { getAllTags, getPostsByTag } from "@/lib/helpers"
-import { absoluteURL } from "@/lib/helpers/seo"
+import { absoluteURL, metaAlternatives } from "@/lib/helpers/seo"
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
 
@@ -63,9 +63,7 @@ export const generateMetadata = async({params, searchParams}: PageProps): Promis
                title: meta.title,
                description: meta.description,
           },
-          alternates: {
-               canonical: absoluteURL(`/tags/${tag}`)
-          }
+          alternates: metaAlternatives(`/tags/${tag}`)
      }
 }
 

src/lib/helpers/seo.ts

@@ -1,3 +1,4 @@
+import { Metadata } from "next";
 import { SITE_URL } from "../constants";
 
 export function getValueFromKey(searchParams: URLSearchParams, key: string, fallbackValue=""):string{
@@ -18,3 +19,7 @@ export function getRangeAsText(page: number, pageSize: number, totalResults: num
 
   return `Showing ${start} - ${end} of ${totalResults} ${totalResults <= 1 ? itemName : `${itemName}s`}`;
 }
+
+export const metaAlternatives = (url?: string): Metadata["alternates"] => ({
+  canonical: absoluteURL(url)
+})