Guides

SEO Best Practices

trink-ui is designed with SEO in mind. Semantic HTML, proper heading hierarchy, and server-side rendering ensure your landing pages rank well and look great in search results.

Semantic HTML out of the box

trink-ui components use semantic HTML elements that search engines understand. This provides meaning and structure beyond visual presentation:

<section>

All section components (Hero, Features, Pricing, etc.)

<nav>

NavbarSimple and footer navigation

<header>

SectionHeader with title and subtitle

<footer>

FooterColumns and FooterSimple

<article>

Testimonial cards and blog-style content

<h2>

Section headings (page reserves h1 for the main title)

Heading hierarchy

Search engines use heading hierarchy to understand page structure. trink-ui enforces a clean hierarchy: section components render their titles as <h2> elements, leaving <h1> for the page's main heading (typically in the Hero section):

{/* Correct heading hierarchy */}
<HeroCentered
  title="Ship Faster with Acme"    {/* renders as <h1> */}
  subtitle="The modern platform..."
/>
<FeaturesGrid
  title="Why Choose Us"             {/* renders as <h2> */}
  features={...}
/>
<PricingCards
  title="Simple Pricing"            {/* renders as <h2> */}
  plans={...}
/>
<FAQAccordion
  title="FAQ"                       {/* renders as <h2> */}
  items={...}
/>

This creates a clear document outline that search engines and screen readers can navigate.

Image alt text

Always provide descriptive alt text for images. Components that accept image props require or strongly encourage alt text. Good alt text improves both accessibility and image search ranking:

// Good: descriptive alt text
<HeroCentered
  title="Build faster"
  image={{
    src: "/hero-dashboard.png",
    alt: "Acme dashboard showing real-time analytics with charts and metrics",
  }}
/>

// Good: avatar with person's name
<TestimonialsGrid
  testimonials={[
    {
      quote: "Amazing product!",
      author: "Sarah Chen",
      avatar: "/avatars/sarah.jpg",
      // Avatar alt text is auto-generated from author name
    },
  ]}
/>

// Bad: empty or generic alt text
// alt="" or alt="image" or alt="screenshot"

Next.js Metadata API

Use Next.js's built-in Metadata API to set page title, description, and Open Graph tags. This works alongside trink-ui components:

app/page.tsx

import type { Metadata } from "next";
import { HeroCentered, FeaturesGrid } from "@trinkui/react";

export const metadata: Metadata = {
  title: "Acme - Ship Faster with Modern Tools",
  description:
    "Acme helps developers build and launch products 10x faster with production-ready components and templates.",
  keywords: ["landing page", "react components", "ui library"],
};

export default function HomePage() {
  return (
    <main>
      <HeroCentered title="Ship Faster with Acme" ... />
      <FeaturesGrid title="Why Choose Us" ... />
    </main>
  );
}

Open Graph and social sharing

When someone shares your landing page on social media, Open Graph tags control what preview appears. Add these to your metadata:

app/layout.tsx

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    default: "Acme - Ship Faster",
    template: "%s | Acme",
  },
  description: "Production-ready landing page components for React.",
  openGraph: {
    title: "Acme - Ship Faster with Modern Tools",
    description: "Build beautiful landing pages in minutes.",
    url: "https://acme.com",
    siteName: "Acme",
    images: [
      {
        url: "https://acme.com/og-image.png",
        width: 1200,
        height: 630,
        alt: "Acme landing page builder preview",
      },
    ],
    locale: "en_US",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Acme - Ship Faster",
    description: "Build beautiful landing pages in minutes.",
    images: ["https://acme.com/og-image.png"],
  },
  robots: {
    index: true,
    follow: true,
  },
};

Structured data (JSON-LD)

Add JSON-LD structured data to help search engines understand your page content. This can generate rich snippets in search results:

app/page.tsx

export default function HomePage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    name: "Acme",
    description: "Production-ready landing page components for React.",
    applicationCategory: "DeveloperApplication",
    offers: {
      "@type": "Offer",
      price: "0",
      priceCurrency: "USD",
    },
    aggregateRating: {
      "@type": "AggregateRating",
      ratingValue: "4.9",
      ratingCount: "1250",
    },
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <main>
        <HeroCentered title="Ship Faster with Acme" ... />
        {/* ... rest of sections */}
      </main>
    </>
  );
}

For pricing pages, use the Product schema with Offer items. For FAQ sections, use the FAQPage schema to potentially show FAQ rich snippets.

Performance and Core Web Vitals

Google uses Core Web Vitals as a ranking signal. trink-ui is designed to score well:

Tree-shakeable exports — only the components you use are included in your bundle
No runtime CSS — all styles are Tailwind utility classes processed at build time
Animations use only opacity and transform — no layout thrashing (good CLS score)
Server-side rendering support — content is visible before JavaScript loads (good LCP)
No external font loading by default — fonts are configurable via CSS variables
Minimal JavaScript — section components with animated={false} send zero client JS

Next step

Deploy your optimized landing page to production.

Deployment Guide