[add] SEO metadata and structured data

serhiipylypchuk1991 · serhiipylypchuk1991 · commit b064eaaeaae0 · 2026-05-27T20:14:15.000+03:00
- Open Graph and Twitter Card meta tags in site config
- default OG image for social sharing
- StructuredData component emitting JSON-LD per page type
- DocItem Metadata swizzle to inject schema.org data and Twitter tags
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -252,6 +252,14 @@ const config = {
   	themeConfig:
     /* @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+		image: 'img/og-default-gantt.png',
+		metadata: [
+			{ property: 'og:type', content: 'website' },
+			{ property: 'og:site_name', content: 'DHTMLX Gantt Docs' },
+			{ property: 'og:locale', content: 'en_US' },
+			{ name: 'twitter:card', content: 'summary_large_image' },
+			{ name: 'twitter:site', content: '@dhtmlx' }
+		],
 		navbar: {
 			title: 'JavaScript Gantt Documentation',
 			logo: {
diff --git a/src/components/StructuredData/index.js b/src/components/StructuredData/index.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import Head from '@docusaurus/Head';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
+
+const SITE_NAME = 'DHTMLX Gantt Docs';
+const PRODUCT_NAME = 'DHTMLX Gantt';
+const PRODUCT_URL = 'https://dhtmlx.com/docs/products/dhtmlxGantt/';
+
+function resolveType(pathname) {
+    const path = (pathname || '').replace(/\/+$/, '');
+    if (path === '' || path === '/gantt') return 'SoftwareApplication';
+    if (/\/api(\/|$)/.test(path)) return 'APIReference';
+    return 'TechArticle';
+}
+
+function buildJsonLd({ type, title, description, url, image, siteUrl }) {
+    const base = {
+        '@context': 'https://schema.org',
+        headline: title,
+        name: title,
+        description,
+        url,
+        image,
+        inLanguage: 'en-US',
+        isPartOf: {
+            '@type': 'WebSite',
+            name: SITE_NAME,
+            url: siteUrl
+        }
+    };
+
+    if (type === 'SoftwareApplication') {
+        return {
+            '@context': 'https://schema.org',
+            '@type': 'SoftwareApplication',
+            name: PRODUCT_NAME,
+            description,
+            url,
+            image,
+            applicationCategory: 'DeveloperApplication',
+            operatingSystem: 'Cross-platform',
+            offers: {
+                '@type': 'Offer',
+                url: PRODUCT_URL,
+                priceCurrency: 'USD'
+            }
+        };
+    }
+
+    if (type === 'APIReference') {
+        return {
+            ...base,
+            '@type': 'APIReference',
+            programmingModel: 'JavaScript',
+            about: {
+                '@type': 'SoftwareApplication',
+                name: PRODUCT_NAME,
+                applicationCategory: 'DeveloperApplication'
+            }
+        };
+    }
+
+    return {
+        ...base,
+        '@type': 'TechArticle',
+        proficiencyLevel: 'Beginner',
+        dependencies: PRODUCT_NAME,
+        about: {
+            '@type': 'SoftwareApplication',
+            name: PRODUCT_NAME,
+            applicationCategory: 'DeveloperApplication'
+        }
+    };
+}
+
+export default function StructuredData({ title, description, pathname, image }) {
+    const { siteConfig } = useDocusaurusContext();
+    const { withBaseUrl } = useBaseUrlUtils();
+
+    const siteUrl = siteConfig.url + siteConfig.baseUrl.replace(/\/$/, '');
+    const url = siteConfig.url + withBaseUrl(pathname || '/');
+    const absoluteImage = image ? withBaseUrl(image, { absolute: true }) : undefined;
+
+    const type = resolveType(pathname);
+    const jsonLd = buildJsonLd({
+        type,
+        title,
+        description,
+        url,
+        image: absoluteImage,
+        siteUrl
+    });
+
+    return (
+        <Head>
+            <script type="application/ld+json">
+                {JSON.stringify(jsonLd)}
+            </script>
+        </Head>
+    );
+}
diff --git a/src/theme/DocItem/Metadata/index.js b/src/theme/DocItem/Metadata/index.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import Head from '@docusaurus/Head';
+import { useLocation } from '@docusaurus/router';
+import DocItemMetadata from '@theme-original/DocItem/Metadata';
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import StructuredData from '@site/src/components/StructuredData';
+
+export default function DocItemMetadataWrapper(props) {
+    const { metadata, frontMatter, assets } = useDoc();
+    const { pathname } = useLocation();
+
+    const title = metadata.title;
+    const description = metadata.description;
+    const image = assets.image ?? frontMatter.image;
+
+    return (
+        <>
+            <DocItemMetadata {...props} />
+            <Head>
+                {title && <meta name="twitter:title" content={title} />}
+                {description && <meta name="twitter:description" content={description} />}
+            </Head>
+            <StructuredData
+                title={title}
+                description={description}
+                pathname={pathname}
+                image={image}
+            />
+        </>
+    );
+}
diff --git a/static/img/og-default-gantt.png b/static/img/og-default-gantt.png
