Fix: Open Graph Image is Missing (#28)

* Fix: Open Graph Image is Missing

* Fix open graph

* fix opengraph

Author: sintaherena

app/(inferenceai)/inferenceai/rag-chatbot/[lang]/data.tsx

@@ -46,6 +46,11 @@ import {
   ReloadIcon
 } from "@radix-ui/react-icons";
 
+export const data = {
+  name: "RAG Chatbot",
+  baseUrl: "https://hyperjump.tech/inferenceai/rag-chatbot"
+};
+
 export const navRagChatbot = (lang: SupportedLanguage) => {
   const data = [
     { label: ragChatbotNavItems0Label(lang), href: "#key-features" },

app/(inferenceai)/inferenceai/rag-chatbot/page.tsx

@@ -1,5 +1,36 @@
+import {
+  ragChatbotHeroDesc,
+  ragChatbotHeroHeading
+} from "@/locales/.generated/server";
 import RagChatbotLangLayout from "./[lang]/layout";
 import RagChatbotPage from "./[lang]/page";
+import { data } from "./[lang]/data";
+import { Metadata } from "next";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const { baseUrl, name } = data;
+  const title = `${name} - ${ragChatbotHeroHeading("en")}`;
+
+  return {
+    description: ragChatbotHeroDesc("en"),
+    title,
+    openGraph: {
+      url: baseUrl,
+      type: "website",
+      title,
+      images: [
+        {
+          url: "https://hyperjump.tech/images/inferenceai/inference-ai-og.png",
+          width: 1200,
+          height: 630,
+          alt: `${name} Logo`,
+          type: "image/png"
+        }
+      ],
+      siteName: name
+    }
+  };
+}
 
 export default function NoLangRagChatbot() {
   return (

app/(main)/[lang]/home.tsx

@@ -33,33 +33,13 @@ import { Button } from "@/components/ui/button";
 import Link from "next/link";
 
 const {
-  hero: { heading, subheading },
+  hero: { subheading },
   location,
   socials,
   title,
   url
 } = data;
 
-export const metadata: Metadata = {
-  description: subheading,
-  title: `${title} - ${heading}`,
-  openGraph: {
-    url,
-    type: "website",
-    title: `${title} - ${heading}`,
-    images: [
-      {
-        url: "https://hyperjump.tech/images/hyperjump-og.png",
-        width: 1200,
-        height: 630,
-        alt: "Hyperjump Logo",
-        type: "image/png"
-      }
-    ],
-    siteName: title
-  }
-};
-
 export default function Home({ lang }: { lang: SupportedLanguage }) {
   return (
     <>

app/(services)/services/[lang]/home.tsx

@@ -31,8 +31,7 @@ import {
   servicesCtaHeading,
   servicesCtaDesc,
   servicesPartnersHeading,
-  servicesPartnersDesc,
-  servicesSeeMore
+  servicesPartnersDesc
 } from "@/locales/.generated/server";
 import { ServiceCard } from "../components/service-card";
 import { Button } from "@/components/ui/button";
@@ -61,7 +60,6 @@ export default function Home({ lang }: { lang: SupportedLanguage }) {
           ]}
           image="/images/services/ctoaas.webp"
           icon="/images/services/ctoaas-icon.svg"
-          seeMoreText={servicesSeeMore(lang)}
         />
 
         <ServiceCard
@@ -76,7 +74,6 @@ export default function Home({ lang }: { lang: SupportedLanguage }) {
           image="/images/services/saas.webp"
           icon="/images/services/saas-icon.svg"
           reverse
-          seeMoreText={servicesSeeMore(lang)}
         />
 
         <ServiceCard
@@ -90,7 +87,6 @@ export default function Home({ lang }: { lang: SupportedLanguage }) {
           ]}
           image="/images/services/tech-due-diligence.webp"
           icon="/images/services/tech-due-diligence-icon.svg"
-          seeMoreText={servicesSeeMore(lang)}
         />
 
         <ServiceCard
@@ -106,7 +102,6 @@ export default function Home({ lang }: { lang: SupportedLanguage }) {
           icon="/images/services/erp-icon.svg"
           withBorder={false}
           reverse
-          seeMoreText={servicesSeeMore(lang)}
         />
       </section>
 

app/(services)/services/components/service-card.tsx

@@ -1,6 +1,4 @@
 import Image from "next/image";
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
 
 interface ServiceCardProps {
   title: string;
@@ -9,9 +7,7 @@ interface ServiceCardProps {
   items: string[];
   image: string;
   icon: string;
-  url?: string;
   reverse?: boolean;
-  seeMoreText?: string;
   withBorder?: boolean;
 }
 
@@ -23,8 +19,6 @@ export function ServiceCard({
   image,
   icon,
   reverse,
-  seeMoreText,
-  url = "#",
   withBorder = true
 }: ServiceCardProps) {
   return (

app/layout.tsx

@@ -23,6 +23,22 @@ export const metadata: Metadata = {
     icon: "/icons/icon-192x192.png",
     apple: "/icons/apple-touch-icon.png",
     shortcut: "/icons/icon-192x192.png"
+  },
+  openGraph: {
+    title: data.title,
+    description: data.description,
+    type: "website",
+    url: data.url,
+    siteName: data.title,
+    images: [
+      {
+        url: "https://hyperjump.tech/images/hyperjump-og.png",
+        width: 1200,
+        height: 630,
+        alt: `${data.title} Logo`,
+        type: "image/png"
+      }
+    ]
   }
 };