Merge pull request #180 from sgcarstrends/main

Fix SEO details

app/(dashboard)/cars/fuel-types/[fuelType]/page.tsx → app/(default)/cars/fuel-types/[fuelType]/page.tsx

@@ -1,5 +1,5 @@
 import dynamic from "next/dynamic";
-import { fetchMonths } from "@/app/(dashboard)/cars/utils/fetchMonths";
+import { fetchMonths } from "@/app/(default)/cars/utils/fetchMonths";
 import { EmptyData } from "@/components/EmptyData";
 import { StructuredData } from "@/components/StructuredData";
 import Typography from "@/components/Typography";
@@ -33,18 +33,17 @@ export const generateMetadata = async (props: {
 
   const formattedFuelType = deslugify(fuelType);
   const title = `${formattedFuelType} Cars in Singapore`;
-  const description = `Explore registration trends and statistics for ${formattedFuelType} cars in Singapore.`;
-  const pageUrl = `/cars/fuel-types/${fuelType}`;
+  const description = `${formattedFuelType} cars registrations by month. Explore registration trends, statistics and distribution by fuel type for the month in Singapore.`;
+  const canonical = `/cars/fuel-types/${fuelType}`;
 
   return {
-    metadataBase: new URL(SITE_URL),
     title,
     description,
     openGraph: {
       title,
       description,
-      images: "/opengraph-image.png",
-      url: pageUrl,
+      images: `${SITE_URL}/opengraph-image.png`,
+      url: canonical,
       siteName: SITE_TITLE,
       locale: "en_SG",
       type: "website",
@@ -53,12 +52,12 @@ export const generateMetadata = async (props: {
       card: "summary_large_image",
       title,
       description,
-      images: "/opengraph-image.png",
+      images: `${SITE_URL}/twitter-image.png`,
       site: "@sgcarstrends",
       creator: "@sgcarstrends",
     },
     alternates: {
-      canonical: pageUrl,
+      canonical,
     },
   };
 };
@@ -91,11 +90,14 @@ const CarsByFuelTypePage = async (props: {
   const filteredCars = mergeCarsByMake(cars);
 
   const formattedFuelType = deslugify(fuelType);
+
+  const title = `${formattedFuelType} Cars in Singapore`;
+  const description = `${formattedFuelType} cars overview. Explore registration trends, statistics and distribution by fuel type for the month in Singapore.`;
   const structuredData: WithContext<WebPage> = {
     "@context": "https://schema.org",
     "@type": "WebPage",
-    name: `${formattedFuelType} Car in Singapore`,
-    description: `Explore registration trends and statistics for ${formattedFuelType} cars in Singapore.`,
+    name: title,
+    description,
     url: `${SITE_URL}/cars/fuel-types/${fuelType}`,
     publisher: {
       "@type": "Organization",

app/(dashboard)/cars/makes/[make]/page.tsx → app/(default)/cars/makes/[make]/page.tsx

@@ -1,5 +1,5 @@
 import dynamic from "next/dynamic";
-import { columns } from "@/app/(dashboard)/cars/makes/[make]/columns";
+import { columns } from "@/app/(default)/cars/makes/[make]/columns";
 import { MakeSelector } from "@/app/components/MakeSelector";
 import { EmptyData } from "@/components/EmptyData";
 import { StructuredData } from "@/components/StructuredData";
@@ -31,29 +31,29 @@ export const generateMetadata = async (props: {
   const { make } = params;
 
   const formattedMake = deslugify(make).toUpperCase();
-  const description = `Historical trends and monthly breakdown of ${formattedMake} cars by fuel and vehicle types in Singapore.`;
+  const title = `${formattedMake} Cars Overview`;
+  const description = `${formattedMake} cars overview. Historical car registrations trends and monthly breakdown by fuel and vehicle types in Singapore.`;
   // const images = `/api/og?title=Historical Trend&make=${make}`;
-  const canonicalUrl = `/cars/makes/${make}`;
+  const canonical = `/cars/makes/${make}`;
 
   return {
-    metadataBase: new URL(SITE_URL),
-    title: formattedMake,
+    title,
     description,
     openGraph: {
-      images: "/opengraph-image.png",
-      url: canonicalUrl,
+      images: `${SITE_URL}/opengraph-image.png`,
+      url: canonical,
       siteName: SITE_TITLE,
       locale: "en_SG",
       type: "website",
     },
     twitter: {
       card: "summary_large_image",
-      images: "/opengraph-image.png",
+      images: `${SITE_URL}/twitter-image.png`,
       site: "@sgcarstrends",
       creator: "@sgcarstrends",
     },
     alternates: {
-      canonical: canonicalUrl,
+      canonical,
     },
   };
 };
@@ -81,11 +81,14 @@ const CarMakePage = async (props: { params: Params }) => {
   const filteredCars = mergeCarData(cars);
 
   const formattedMake = deslugify(make).toUpperCase();
+
+  const title = `${formattedMake} Cars Overview`;
+  const description = `${formattedMake} cars overview. Historical car registrations trends and monthly breakdown by fuel and vehicle types in Singapore.`;
   const structuredData: WithContext<WebPage> = {
     "@context": "https://schema.org",
     "@type": "WebPage",
-    name: `${formattedMake} Car Registrations in Singapore`,
-    description: `Historical trends and monthly breakdown of ${formattedMake} cars by fuel and vehicle types in Singapore.`,
+    name: title,
+    description,
     url: `${SITE_URL}/cars/makes/${make}`,
     publisher: {
       "@type": "Organization",

app/(dashboard)/cars/page.tsx → app/(default)/cars/page.tsx

@@ -33,31 +33,30 @@ export const generateMetadata = async (props: {
 
   const formattedMonth = formatDateToMonthYear(month);
 
-  const title = `${formattedMonth} Car Registrations in Singapore`;
+  const title = "Car Registrations in Singapore";
   const description = `Discover ${formattedMonth} car registrations in Singapore. See detailed stats by fuel type, vehicle type, and top brands.`;
-  const pageUrl = `/cars`;
+  const canonical = `/cars`;
 
   // const images = `/api/og?title=Car Registrations for ${formattedMonth}`;
 
   return {
-    metadataBase: new URL(SITE_URL),
     title,
     description,
     openGraph: {
-      images: "/opengraph-image.png",
-      url: pageUrl,
+      images: `${SITE_URL}/opengraph-image.png`,
+      url: canonical,
       siteName: SITE_TITLE,
       locale: "en_SG",
       type: "website",
     },
     twitter: {
       card: "summary_large_image",
-      images: "/opengraph-image.png",
+      images: `${SITE_URL}/twitter-image.png`,
       site: "@sgcarstrends",
       creator: "@sgcarstrends",
     },
     alternates: {
-      canonical: pageUrl,
+      canonical,
     },
   };
 };
@@ -126,11 +125,14 @@ const CarsPage = async (props: { searchParams: SearchParams }) => {
     findTopEntry(numberByVehicleType);
 
   const formattedMonth = formatDateToMonthYear(month);
+
+  const title = "Car Registrations in Singapore";
+  const description = `Discover ${formattedMonth} car registrations in Singapore. See detailed stats by fuel type, vehicle type, and top brands.`;
   const structuredData: WithContext<WebPage> = {
     "@context": "https://schema.org",
     "@type": "WebPage",
-    name: `${formattedMonth} Car Registrations in Singapore`,
-    description: `Discover ${formattedMonth} car registrations in Singapore. See detailed stats by fuel type, vehicle type, and top brands.`,
+    name: title,
+    description,
     url: `${SITE_URL}/cars`,
     publisher: {
       "@type": "Organization",

app/(dashboard)/cars/vehicle-types/[vehicleType]/page.tsx → app/(default)/cars/vehicle-types/[vehicleType]/page.tsx

@@ -1,5 +1,5 @@
 import dynamic from "next/dynamic";
-import { fetchMonths } from "@/app/(dashboard)/cars/utils/fetchMonths";
+import { fetchMonths } from "@/app/(default)/cars/utils/fetchMonths";
 import { EmptyData } from "@/components/EmptyData";
 import { StructuredData } from "@/components/StructuredData";
 import Typography from "@/components/Typography";
@@ -31,28 +31,29 @@ export const generateMetadata = async (props: {
   const { vehicleType } = params;
 
   const formattedVehicleType = deslugify(vehicleType);
+  const title = `${formattedVehicleType} Cars in Singapore`;
+  const description = `${formattedVehicleType} cars registrations by month. Explore registration trends, statistics and distribution by vehicle type for the month in Singapore.`;
   // const images = `/api/og?title=Historical Trend&type=${vehicleType}`;
-  const canonicalUrl = `/cars/vehicle-types/${vehicleType}`;
+  const canonical = `/cars/vehicle-types/${vehicleType}`;
 
   return {
-    metadataBase: new URL(SITE_URL),
-    title: `${formattedVehicleType} Cars in Singapore`,
-    description: `Explore registration trends and statistics for ${formattedVehicleType} cars in Singapore.`,
+    title,
+    description,
     openGraph: {
-      images: "/opengraph-image.png",
-      url: canonicalUrl,
+      images: `${SITE_URL}/opengraph-image.png`,
+      url: canonical,
       siteName: SITE_TITLE,
       locale: "en_SG",
       type: "website",
     },
     twitter: {
       card: "summary_large_image",
-      images: "/opengraph-image.png",
+      images: `${SITE_URL}/twitter-image.png`,
       site: "@sgcarstrends",
       creator: "@sgcarstrends",
     },
     alternates: {
-      canonical: canonicalUrl,
+      canonical,
     },
   };
 };
@@ -92,11 +93,14 @@ const CarsByVehicleTypePage = async (props: {
   const filteredCars = mergeCarsByMake(cars);
 
   const formattedVehicleType = deslugify(vehicleType);
+
+  const title = `${formattedVehicleType} Cars in Singapore`;
+  const description = `${formattedVehicleType} cars registrations by month. Explore registration trends, statistics and distribution by vehicle type for the month in Singapore.`;
   const structuredData: WithContext<WebPage> = {
     "@context": "https://schema.org",
     "@type": "WebPage",
-    name: `${formattedVehicleType} Cars in Singapore`,
-    description: `Explore registration trends and statistics for ${formattedVehicleType} cars in Singapore.`,
+    name: title,
+    description,
     url: `${SITE_URL}/cars/vehicle-types/${vehicleType}`,
     publisher: {
       "@type": "Organization",

app/(dashboard)/coe/(prices)/TrendTable.tsx → app/(default)/coe/(prices)/TrendTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useMemo } from "react";
-import { columns } from "@/app/(dashboard)/coe/(prices)/columns";
+import { columns } from "@/app/(default)/coe/(prices)/columns";
 import useStore from "@/app/store";
 import { DataTable } from "@/components/ui/data-table";
 import type { COEResult } from "@/types";

app/(dashboard)/coe/(prices)/page.tsx → app/(default)/coe/(prices)/page.tsx

@@ -1,4 +1,4 @@
-import { TrendTable } from "@/app/(dashboard)/coe/(prices)/TrendTable";
+import { TrendTable } from "@/app/(default)/coe/(prices)/TrendTable";
 import { COECategories } from "@/components/COECategories";
 import { COEPremiumChart } from "@/components/COEPremiumChart";
 import { StructuredData } from "@/components/StructuredData";
@@ -25,31 +25,30 @@ type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>;
 
 const title = "COE Result";
 const description =
-  "Explore historical trends and bidding results for COE in Singapore.";
+  "Explore historical Certificate of Entitlement (COE) price trends and bidding results for car registrations in Singapore.";
 
 export const generateMetadata = async (): Promise<Metadata> => {
-  const pageUrl = "/coe";
+  const canonical = "/coe";
   // const images = "/api/og?title=COE Result";
 
   return {
-    metadataBase: new URL(SITE_URL),
     title,
     description,
     openGraph: {
-      images: "/opengraph-image.png",
-      url: pageUrl,
+      images: `${SITE_URL}/opengraph-image.png`,
+      url: canonical,
       siteName: SITE_TITLE,
       locale: "en_SG",
       type: "website",
     },
     twitter: {
       card: "summary_large_image",
-      images: "/opengraph-image.png",
+      images: `${SITE_URL}/twitter-image.png`,
       site: "@sgcarstrends",
       creator: "@sgcarstrends",
     },
     alternates: {
-      canonical: pageUrl,
+      canonical,
     },
   };
 };

app/(dashboard)/layout.tsx → app/(default)/layout.tsx

@@ -20,13 +20,16 @@ const url = new URL(SITE_URL);
 
 export const metadata: Metadata = {
   metadataBase: url,
-  title,
+  title: {
+    template: `%s - ${SITE_TITLE}`,
+    default: SITE_TITLE,
+  },
   description,
   robots: { index: true, follow: true },
   openGraph: {
     title,
     description,
-    images: "/opengraph-image.png",
+    images: `${SITE_URL}/opengraph-image.png`,
     url,
     siteName: title,
     locale: "en_SG",
@@ -36,7 +39,7 @@ export const metadata: Metadata = {
     card: "summary_large_image",
     title,
     description,
-    images: "/opengraph-image.png",
+    images: `${SITE_URL}/twitter-image.png`,
     site: "@sgcarstrends",
     creator: "@sgcarstrends",
   },

app/components/CarOverviewTrends.tsx

@@ -13,7 +13,7 @@ interface Props {
 }
 
 const DataTable = dynamic(() => import("@/components/DataTable"));
-const TrendChart = dynamic(() => import("@/app/(dashboard)/cars/TrendChart"));
+const TrendChart = dynamic(() => import("@/app/(default)/cars/TrendChart"));
 
 export const CarOverviewTrends = ({ cars }: Props) => {
   const total = cars.reduce((acc, curr) => acc + curr.number, 0);

components/StatisticsCard.tsx

@@ -25,7 +25,7 @@ import { formatPercent } from "@/utils/formatPercent";
 import { slugify } from "@/utils/slugify";
 
 const DistributionPieChart = dynamic(
-  () => import("@/app/(dashboard)/cars/DistributionPieChart"),
+  () => import("@/app/(default)/cars/DistributionPieChart"),
 );
 
 export const StatisticsCard = ({