TkxSEO

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

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://ui.tekivex.com' })}
/>

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.