Added More OG Images + Tweaked Existing ones

Author: ArsenTech

public/backgrounds/og-bg.jpg

@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import { getValueFromKey } from "@/lib/helpers/seo"
+import { absoluteURL, getValueFromKey } from "@/lib/helpers/seo"
 import { formatDate } from "date-fns"
 import { ImageResponse } from "next/og"
 
@@ -16,9 +16,17 @@ export async function GET(req: Request) {
     const title = getValueFromKey(searchParams,"title","ArsenTech Blog")
     const description = getValueFromKey(searchParams,"description","Learn about cybersecurity, tech tutorials, unique coding projects, and other tech-related posts all in one place.")
     const date = new Date(getValueFromKey(searchParams,"date",new Date().toDateString()))
-
+    const bgType = getValueFromKey(searchParams,"bg","gradient") as "image" | "gradient";
+    const bgImage: React.CSSProperties = bgType==="image" ? {
+      backgroundImage: `url(${absoluteURL("/backgrounds/og-bg.jpg")})`,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "center",
+      backgroundSize: "contain"
+    } : {
+      backgroundImage: "linear-gradient(140deg,#22b455 25%,#1dd1a1)",
+    }
     return new ImageResponse((
-      <div style={{backgroundImage: "linear-gradient(140deg,#22b455 25%,#1dd1a1)"}} tw="flex flex-col w-full h-full items-center justify-between p-5 text-white">
+      <div style={bgImage} tw="flex flex-col w-full h-full items-center justify-between p-5 text-white">
         <img src={`${siteUrl}/arsentech-dark.svg`} alt="ArsenTech" tw="mb-3" width={300} height={64}/>
         <div tw="flex items-center justify-center flex-col">
           <h1 tw="text-[70px] my-0 font-semibold">{title}</h1>

public/og.png

@@ -27,15 +27,11 @@ export const generateMetadata = async({params, searchParams}: PageProps): Promis
      const currentPage = page ? parseInt(page) : 1;
      const postsPerPage = pageSize ? parseInt(pageSize) : POSTS_IN_SEARCH;
      const totalPages = Math.ceil(results.length / postsPerPage)
-     const now = new Date()
-
-     const meta = {
+     const now = new Date(), meta = {
           title: `Top ${results.length} "${categoryDecoded}" blog posts - Updated ${now.getFullYear()}`,
           description: `Explore {results.length} posts from the "${categoryDecoded}" category — from coding tutorials to tech insights`,
      }
-
      const ogImage = absoluteURL(`/api/og?title=${encodeURIComponent(meta.title)}&description=${encodeURIComponent(meta.description)}&date=${now.toISOString()}`)
-
      return {
           title: meta.title,
           description: meta.description,

src/app/api/og/route.tsx

@@ -37,7 +37,30 @@ export const metadata: Metadata = {
   },
   alternates: {
     canonical: absoluteURL("/")
-  }
+  },
+  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.",
+    url: absoluteURL("/"),
+    siteName: "ArsenTech Blog",
+    locale: "en_US",
+    type: "website",
+    images: {
+      url: "/og.png",
+      width: 1200,
+      height: 630
+    }
+  },
+  twitter: {
+    images: [{
+      url: "/og.png",
+      width: 1200,
+      height: 630
+    }],
+    card: "summary_large_image",
+    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.",
+  },
 };
 
 export const viewport: Viewport = {

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

@@ -21,7 +21,7 @@ export const generateMetadata = async({params}: SinglePostPageProps): Promise<Me
   const {slug} = await params;
   const currPost = await getPostBySlug(slug);
   if(!currPost || !currPost.published) return notFound();
-  const ogImage = absoluteURL(`/api/og?title=${encodeURIComponent(currPost.title)}&description=${encodeURIComponent(currPost.description)}&date=${currPost.date.toISOString()}`)
+  const ogImage = absoluteURL(`/api/og?title=${encodeURIComponent(currPost.title)}&description=${encodeURIComponent(currPost.description)}&date=${currPost.date.toISOString()}&bg=image`)
   return {
     title: currPost.title,
     description: currPost.description,

src/app/layout.tsx

@@ -27,15 +27,11 @@ export const generateMetadata = async({params, searchParams}: PageProps): Promis
      const currentPage = page ? parseInt(page) : 1;
      const postsPerPage = pageSize ? parseInt(pageSize) : POSTS_IN_SEARCH;
      const totalPages = Math.ceil(results.length / postsPerPage)
-     const now = new Date()
-
-     const meta = {
+     const now = new Date(), meta = {
           title: `Top ${results.length} posts tagged with "${tagDecoded}" - Updated ${now.getFullYear()}`,
           description: `Explore ${results.length} blog posts tagged with "${tagDecoded}" — from coding tutorials to tech insights`,
      }
-
      const ogImage = absoluteURL(`/api/og?title=${encodeURIComponent(meta.title)}&description=${encodeURIComponent(meta.description)}&date=${now.toISOString()}`)
-
      return {
           title: meta.title,
           description: meta.description,