Improve PortalJS template's SEO features

components/schema/HomePageStructuredData.tsx

@@ -0,0 +1,40 @@
+import nextSeoConfig, { url } from "@/next-seo.config";
+import { BreadcrumbJsonLd, LogoJsonLd, NextSeo, WebPageJsonLd, SiteLinksSearchBoxJsonLd } from "next-seo";
+
+export function HomePageStructuredData() {
+  return (
+    <>
+      <LogoJsonLd
+        url={url}
+        logo={`${url}/favicon.ico`}
+      />
+      <NextSeo
+        {...nextSeoConfig}
+      />
+      <BreadcrumbJsonLd
+        itemListElements={[
+          {
+            position: 1,
+            name: 'Home',
+            item: url,
+          },
+        ]}
+      />
+      <WebPageJsonLd
+        id={`${url}#webpage`}
+        url={url}
+        name={nextSeoConfig.title}
+        description={nextSeoConfig.description}
+      />
+      <SiteLinksSearchBoxJsonLd
+        url={url}
+        potentialActions={[
+          {
+            target: `${url}/search?q={search_term_string}`,
+            queryInput: "required name=search_term_string",
+          },
+        ]}
+      />
+    </>
+  );
+}

components/schema/OrganizationIndividualPageStructuredData.tsx

@@ -0,0 +1,41 @@
+import nextSeoConfig, { url } from "@/next-seo.config";
+import { BreadcrumbJsonLd, LogoJsonLd, NextSeo, WebPageJsonLd, SiteLinksSearchBoxJsonLd } from "next-seo";
+
+export function OrganizationIndividualPageStructuredData({ org }) {
+  const title = org.name || org.title
+  const description = org.notes || "Organizations page of " + org
+  return (
+    <>
+      <LogoJsonLd
+        url={`${url}/@${title}`}
+        logo={org.image_display_url || `${url}/favicon.ico`}
+      />
+      <NextSeo
+        canonical={`${url}/@${title}`}
+        title={title}
+        description={description}
+        {...nextSeoConfig}
+      />
+      <BreadcrumbJsonLd
+        itemListElements={[
+          {
+            position: 1,
+            name: 'Home',
+            item: url,
+          },
+          {
+            position: 2,
+            name: 'Organizations',
+            item: `${url}/@${title}`,
+          },
+        ]}
+      />
+      <WebPageJsonLd
+        id={`${url}/@${title}#webpage`}
+        url={`${url}/@${title}`}
+        name={title}
+        description={description}
+      />
+    </>
+  );
+}

components/schema/OrganizationPageStructuredData.tsx

@@ -0,0 +1,50 @@
+import nextSeoConfig, { url } from "@/next-seo.config";
+import { BreadcrumbJsonLd, LogoJsonLd, NextSeo, WebPageJsonLd, SiteLinksSearchBoxJsonLd } from "next-seo";
+
+export function OrganizationPageStructuredData() {
+  const title = "Organizations page"
+  const description = "Organizations page of " + title
+  return (
+    <>
+      <LogoJsonLd
+        url={`${url}/organizations`}
+        logo={`${url}/favicon.ico`}
+      />
+      <NextSeo
+        canonical={`${url}/organizations`}
+        title={title}
+        description={description}
+        {...nextSeoConfig}
+      />
+      <BreadcrumbJsonLd
+        itemListElements={[
+          {
+            position: 1,
+            name: 'Home',
+            item: url,
+          },
+          {
+            position: 2,
+            name: 'Organizations',
+            item: `${url}/organizations`,
+          },
+        ]}
+      />
+      <WebPageJsonLd
+        id={`${url}/organizations#webpage`}
+        url={`${url}/organizations`}
+        name={title}
+        description={description}
+      />
+      <SiteLinksSearchBoxJsonLd
+        url={`${url}/organizations`}
+        potentialActions={[
+          {
+            target: `${url}/organizations`,
+            queryInput: "search_term_string"
+          },
+        ]}
+      />
+    </>
+  );
+}

components/schema/SearchPageStructuredData.tsx

@@ -0,0 +1,57 @@
+import nextSeoConfig, { url } from "@/next-seo.config";
+import { BreadcrumbJsonLd, LogoJsonLd, NextSeo, SiteLinksSearchBoxJsonLd } from "next-seo";
+import Script from "next/script";
+
+export function SearchPageStructuredData() {
+  const title = "Search page"
+  const description = "Browse through multiple datasets available on " + title
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "DataCatalog",
+    "name": title,
+    "description": description,
+    "url": url + "/search",
+  };
+  return (
+    <>
+      <LogoJsonLd
+        url={`${url}/search`}
+        logo={`${url}/favicon.ico`}
+      />
+      <NextSeo
+        canonical={`${url}/search`}
+        title={title}
+        description={description}
+        {...nextSeoConfig}
+      />
+      <BreadcrumbJsonLd
+        itemListElements={[
+          {
+            position: 1,
+            name: 'Home',
+            item: url,
+          },
+          {
+            position: 2,
+            name: 'Search',
+            item: `${url}/search`,
+          },
+        ]}
+      />
+      <Script
+        id="datacatalog-jsonld"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <SiteLinksSearchBoxJsonLd
+        url={`${url}/search`}
+        potentialActions={[
+          {
+            target: `${url}/search?q={search_term_string}`,
+            queryInput: "search_term_string"
+          },
+        ]}
+      />
+    </>
+  );
+}

next-seo.config.js

@@ -1,25 +1,74 @@
+/* eslint-disable import/no-anonymous-default-export */
+
+const title = "PortalJS Open Data Portal";
+const description =
+  "Discover thousands of datasets, publish your own, and request data via Portal – an open data platform powered by PortalJS.";
+
+export const url = "https://portaljs-cloud-frontend-template.vercel.app";
+const imageUrl = `${url}/images/portaljs-frontend.png`;
+
 export default {
-  titleTemplate: "%s | Ckan Homepage",
-  description: "Ckan Homepage",
-  canonical: "https://datahub-enterprise.vercel.app/",
+  title,
+  titleTemplate: "%s | PortalJS",
+  description,
+  canonical: url,
   openGraph: {
-    title: "Ckan Homepage",
+    title,
+    description,
     type: "website",
-    url: "https://datahub-enterprise.vercel.app/",
-    site_name: "Ckan Homepage",
+    locale: "en_US",
+    url,
+    site_name: title,
     images: [
       {
-        url: "https://datahub-enterprise.vercel.app/images/datahub_enterprise_frontend.png",
-        alt: "Ckan Homepage",
+        url: imageUrl,
+        alt: title,
         width: 1200,
         height: 627,
-        type: "image/jpg",
+        type: "image/png",
       },
     ],
   },
-  // twitter: {
-  //   handle: "@datahubenterprise",
-  //   site: "https://datahub-enterprise.vercel.app/",
-  //   cardType: "summary_large_image",
-  // },
+  twitter: {
+    handle: "@datopian",
+    site: "@PortalJS_",
+    cardType: "summary_large_image",
+  },
+  additionalMetaTags: [
+    {
+      name: "keywords",
+      content: "PortalJS, open data, datasets, data portal, Portal, datopian, frontend template",
+    },
+    {
+      name: "author",
+      content: "Datopian / PortalJS",
+    },
+    {
+      property: "og:image:width",
+      content: "1200",
+    },
+    {
+      property: "og:image:height",
+      content: "627",
+    },
+    {
+      property: "og:locale",
+      content: "en_US",
+    },
+  ],
+  additionalLinkTags: [
+    {
+      rel: "icon",
+      href: "/favicon.ico",
+    },
+    {
+      rel: "apple-touch-icon",
+      href: "/apple-touch-icon.png",
+      sizes: "180x180",
+    },
+    {
+      rel: "manifest",
+      href: "/site.webmanifest",
+    },
+  ]
 };

pages/[org]/index.tsx

@@ -12,6 +12,7 @@ import { getOrganization } from "@/lib/queries/orgs";
 import { getDataset } from "@/lib/queries/dataset";
 
 import HeroSection from "@/components/_shared/HeroSection";
+import { OrganizationIndividualPageStructuredData } from "@/components/schema/OrganizationIndividualPageStructuredData";
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const DMS = process.env.NEXT_PUBLIC_DMS;
@@ -27,14 +28,26 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     name: orgName as string,
     include_datasets: true,
   });
+
   if (org.packages) {
     const packagesWithResources = await Promise.all(
-      org.packages.map(
-        async (dataset) => await getDataset({ name: dataset.name })
-      )
+      org.packages.map(async (dataset) => {
+        try {
+          const fullDataset = await getDataset({ name: dataset.name });
+          return fullDataset || null;
+        } catch (err) {
+          console.error(`Failed to fetch dataset: ${dataset.name}`, err);
+          return null;
+        }
+      })
     );
-    org = { ...org, packages: packagesWithResources };
+
+    org = {
+      ...org,
+      packages: packagesWithResources.filter(Boolean),
+    };
   }
+
   const activityStream = await ckan.getOrgActivityStream(org._name);
   if (!org) {
     return {
@@ -72,11 +85,7 @@ export default function OrgPage({ org }): JSX.Element {
   ];
   return (
     <>
-      <Head>
-        <title>{org.title || org.name + " - Organization Page"}</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
+      <OrganizationIndividualPageStructuredData org={org} />
       {org && (
         <Layout>
           <HeroSection title={org.title} cols="6" />

pages/index.tsx

@@ -5,6 +5,7 @@ import { searchDatasets } from "@/lib/queries/dataset";
 import { getAllGroups } from "@/lib/queries/groups";
 import { getAllOrganizations } from "@/lib/queries/orgs";
 import HeroSectionLight from "@/components/home/heroSectionLight";
+import { HomePageStructuredData } from "@/components/schema/HomePageStructuredData";
 
 export async function getServerSideProps() {
   const datasets = await searchDatasets({
@@ -39,11 +40,7 @@ export default function Home({
 }: InferGetServerSidePropsType<typeof getServerSideProps>): JSX.Element {
   return (
     <>
-      <Head>
-        <title>Open Data Portal Demo</title>
-        <meta name="description" content="Open Data Portal Demo" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
+      <HomePageStructuredData />
       <HeroSectionLight stats={stats} />
       <MainSection groups={groups} datasets={datasets} />
     </>

pages/organizations.tsx

@@ -6,6 +6,7 @@ import ListOfOrgs from "../components/organization/ListOfOrganizations";
 import Layout from "../components/_shared/Layout";
 import { Organization } from "@portaljs/ckan";
 import { getAllOrganizations } from "@/lib/queries/orgs";
+import { OrganizationPageStructuredData } from "@/components/schema/OrganizationPageStructuredData";
 
 export async function getServerSideProps() {
   const orgs = await getAllOrganizations({ detailed: true });
@@ -24,11 +25,7 @@ export default function OrgsPage({ orgs }): JSX.Element {
   miniSearch.addAll(orgs);
   return (
     <>
-      <Head>
-        <title>Ckan Homepage</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
+      <OrganizationPageStructuredData />
       <Main miniSearch={miniSearch} orgs={orgs} />
     </>
   );
@@ -44,10 +41,6 @@ function Main({
   const [searchString, setSearchString] = useState("");
   return (
     <>
-      <Head>
-        <title>Organizations</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
       <Layout>
         <SearchHero
           title="Organizations"