SeoPreview

Code

import { useState } from "react";import { type SeoMeta, SeoPreview } from "@fadymondy/nasaq/web";export function PageSeo() {  const [meta, setMeta] = useState<SeoMeta>({    title: "A complete guide to RTL design systems",    description: "Learn how to build interfaces that work from right to left without a second stylesheet.",    url: "https://example.com/blog/rtl-guide",  });  return <SeoPreview value={meta} onValueChange={setMeta} />;}

SEO · beta

Live examples and controls: SeoPreview in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/seo-preview.json

SeoPreview shows one page the way people will meet it: a Google result on desktop and on mobile, and the share cards that Open Graph, X, WhatsApp and LinkedIn draw from the same tags. Two length meters tell the editor when the title or description is too short or will be cut. It is controlled or uncontrolled, and can edit the title, description and image URL in place.

Platform names are plain text. No logo or brand mark is drawn, so the preview never misrepresents an official mark.

When to useCopy Anchor Link

• A page or post editor that needs a live snippet while the author types.
• An SEO audit detail view that shows what a crawled page looks like today.
• A share settings screen for a marketing page.

When not to useCopy Anchor Link

• Listing many pages with scores: use SeoPageList.
• Search performance numbers (clicks, position): use SearchPerformanceTable.

ImportCopy Anchor Link

import { SeoPreview } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { useState } from "react";
import { type SeoMeta, SeoPreview } from "@fadymondy/nasaq/web";

export function PageSeo() {
  const [meta, setMeta] = useState<SeoMeta>({
    title: "A complete guide to RTL design systems",
    description: "Learn how to build interfaces that work from right to left without a second stylesheet.",
    url: "https://example.com/blog/rtl-guide",
  });
  return <SeoPreview value={meta} onValueChange={setMeta} />;
}

AnatomyCopy Anchor Link

SeoPreview            data-slot="seo-preview"   (a Card)
  fields              title, description, image URL (when editable)
  LengthMeter         data-slot="length-meter"  x2, data-status
  Tabs                Google | Open Graph | X | WhatsApp | LinkedIn
    Google preview    desktop or mobile toggle
    share card        one per platform

APICopy Anchor Link

SeoPreviewCopy Anchor Link

SeoMetaCopy Anchor Link

{ title, description, url, siteName?, favicon?, image?, breadcrumb? }. breadcrumb replaces the trail built from the URL.

LengthMeterCopy Anchor Link

HelpersCopy Anchor Link

lengthMeter, textLength, SEO_LIMITS, estimatePixelWidth, truncateAt, pathSegments, breadcrumbFor are exported from the package for use in your own validation. Limits: title 30 to 60 characters, description 70 to 160.

ExamplesCopy Anchor Link

Read only, for an audit:

import { SeoPreview } from "@fadymondy/nasaq/web";

<SeoPreview value={{ title: "Pricing", description: "Plans for every team.", url: "https://example.com/pricing" }} />;

Arabic copy, share tab first:

import { SeoPreview } from "@fadymondy/nasaq/web";

<SeoPreview
  defaultPlatform="whatsapp"
  defaultValue={{ title: "دليل تصميم واجهات من اليمين إلى اليسار", description: "تعلّم كيف تبني واجهات تعمل باتجاه اليمين دون ورقة أنماط ثانية.", url: "https://example.com/ar/guide" }}
/>;

AccessibilityCopy Anchor Link

Each meter is a role="meter" with a spoken value and a written verdict, so colour is not the only signal. Pass localised labels.

RTL & i18nCopy Anchor Link

Titles and descriptions use dir="auto"; the URL and breadcrumb stay left-to-right. Counts use Latin digits. Built-in English and Arabic strings.

Styling & tokensCopy Anchor Link

Uses --nq-* surface, border and status tokens. Meters carry data-status="empty | short | good | long".

Do / Don'tCopy Anchor Link

• Do let the author edit and see the result at once.
• Do pass a real image when you have one.
• Don't add logos of the networks: the preview uses names only.

RelatedCopy Anchor Link

• SeoPageList
• KeywordTracker

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-seo-seo-preview--docs