TkxSEO

TkxSEO writes <meta>, Open Graph, Twitter Card, and JSON-LD tags to document.head from a React component.

Client-side only — read this first

TkxSEO writes tags in a useEffect, so they do not exist in the first-byte HTML. Crawlers and social scrapers that don’t execute JavaScript will not see them. If your app is server-rendered or statically generated, put your canonical SEO in the framework’s native head API and use TkxSEO only as a client-side supplement.

What it writes

A live demo would be meaningless here — TkxSEO’s output lives in document.head, and mounting it on this page would overwrite the page’s own meta tags. The panel below is a static illustration: the props on top, and the exact tags the component would write (the JSON-LD is computed with the library’s real seoSchema helper).

Static illustration — this panel does NOT modify this page's head

Props passed to <TkxSEO />

{
  "title": "Acme Dashboard — Reports",
  "description": "Monthly usage reports for your Acme workspace.",
  "canonical": "https://app.example.com/reports",
  "image": "https://app.example.com/og/reports.png",
  "twitterSite": "@acme",
  "ogType": "website",
  "locale": "en_US"
}

Tags TkxSEO writes into document.head (data-tkx-seo flagged; JSON-LD via the real seoSchema helper)

document.title = "Acme Dashboard — Reports"

<meta name="description" content="Monthly usage reports for your Acme workspace.">
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large">

<meta property="og:title" content="Acme Dashboard — Reports">
<meta property="og:description" content="Monthly usage reports for your Acme workspace.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://app.example.com/reports">
<meta property="og:image" content="https://app.example.com/og/reports.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="en_US">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Acme Dashboard — Reports">
<meta name="twitter:description" content="Monthly usage reports for your Acme workspace.">
<meta name="twitter:image" content="https://app.example.com/og/reports.png">
<meta name="twitter:site" content="@acme">

<link rel="canonical" href="https://app.example.com/reports">

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Acme Dashboard",
  "description": "Usage analytics for Acme workspaces.",
  "url": "https://app.example.com",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Web",
  "softwareVersion": "2.1.0",
  "version": "2.1.0"
}
</script>

When to use it

Situation	Use
Plain client-rendered SPA (Vite/CRA, no SSR)	✅ TkxSEO is the right tool — there’s no server head to write to
Client route changes / dashboards behind auth / embedded views	✅ Supplement — update tags as the SPA navigates
Next.js, Remix, Astro pages	❌ Use the framework’s head API for crawlable SEO

Mirror in your framework (SSR/SSG)

// Next.js App Router — crawlable, server-rendered
export const metadata = {
  title: 'My Page',
  description: 'A description',
  openGraph: { images: ['/og.png'] },
};

---
// Astro — in the page frontmatter / layout <head>
---
<head>
  <title>My Page</title>
  <meta name="description" content="A description" />
  <meta property="og:image" content="/og.png" />
</head>

// Plain React SPA — TkxSEO IS your best option
import { TkxSEO } from 'tekivex-ui';

<TkxSEO
  title="My Page"
  description="A description"
  image="https://example.com/og.png"
  canonical="https://example.com/page"
/>

Article pages

Set ogType="article" and the article props to emit article:* Open Graph tags:

<TkxSEO
  ogType="article"
  title="Shipping a design system"
  description="How we built it"
  articleAuthor="Ada Lovelace"
  articlePublishedTime="2026-01-01T00:00:00Z"
  articleModifiedTime="2026-02-01T00:00:00Z"
  articleSection="Engineering"
  articleTags={['react', 'design-systems']}
/>

JSON-LD helpers

seoSchema builds common structured-data objects: softwareApplication, article, product, faqPage, breadcrumbList.

import { TkxSEO, seoSchema } from 'tekivex-ui';

<TkxSEO
  title="tekivex-ui"
  schema={seoSchema.softwareApplication({ name: 'tekivex-ui', description: '…', url: 'https://www.tekivex.com/ui' })}
/>

Tip

You no longer need to memoize the schema object — TkxSEO keys its effect on a stable serialization internally, so passing a fresh {...} literal each render won’t rewrite the head or accumulate duplicate tags.

Props

Prop	Type	Default	Description
title	string	—	document.title + og/twitter title.
description	string	—	description / og / twitter description.
canonical	string	—	Canonical URL + og:url.
keywords	string	—	Comma-separated keywords meta.
image	string	—	og:image / twitter:image (1200×630).
twitterSite / twitterCreator	string	—	Twitter handles.
ogType	'website' | 'article' | 'product' | 'profile'	'website'	og:type.
locale	string	—	og:locale (e.g. en_US).
robots	string	index, follow, …	Robots directive.
schema	object | object[]	—	JSON-LD payload(s).
articleAuthor	string	—	article:author (article pages).
articlePublishedTime	string	—	article:published_time (ISO 8601).
articleModifiedTime	string	—	article:modified_time (ISO 8601).
articleSection	string	—	article:section.
articleTags	string[]	—	One article:tag meta per entry.

Each render removes the tags it previously wrote (data-tkx-seo) before re-writing, and cleans them all up on unmount — no stale accumulation.