GEO/AEO Optimization

Optimize your content for AI search engines and answer engines.

StructuredData

Generates Article JSON-LD schema for search engines and AI systems.

import { StructuredData } from "@trident/client/components";

<StructuredData
  article={article}
  baseUrl="https://yourdomain.com"
  organization={{
    name: "Your Company",
    logo: "https://yourdomain.com/logo.png",
  }}
/>

Renders a <script type="application/ld+json"> tag with Article schema.

FAQSchema

Generates FAQPage JSON-LD schema for rich results and AI extraction.

import { FAQSchema } from "@trident/client/components";

{article.content?.faq && (
  <FAQSchema questions={article.content.faq} />
)}

This enables Google FAQ rich results and helps AI systems extract Q&A pairs.

HowToSchema

Generates HowTo schema for step-by-step content. Useful when articles contain ordered lists with instructions.

import { HowToSchema, extractStepsFromList } from "@trident/client/components";

// Find a list block in the content
const listBlock = article.content?.sections
  .flatMap(s => s.content)
  .find(block => block.blockType === "list" && block.list?.listType === "ordered");

{listBlock?.list && (
  <HowToSchema
    name="How to Improve Email Deliverability"
    steps={extractStepsFromList(listBlock.list)}
  />
)}

CitableBlock

Wraps content in a way that's optimized for AI citation. Adds schema.org markup for better discoverability.

import { CitableBlock } from "@trident/client/components";

<CitableBlock id="email-deliverability-definition">
  Email deliverability is the ability to successfully deliver
  emails to subscribers' inboxes rather than spam folders.
</CitableBlock>

Renders with data-citable, itemscope, and itemprop attributes.

KeyTakeaways

Renders key points in a format optimized for AI extraction with ItemList schema.

import { KeyTakeaways } from "@trident/client/components";

{section.keyPoints && (
  <KeyTakeaways
    points={section.keyPoints}
    title="Key Takeaways"
  />
)}

Complete Example

Here's how to combine all GEO/AEO components in an article page:

// app/blog/[slug]/page.tsx
import { trident } from "@/lib/trident";
import {
  ArticleRenderer,
  StructuredData,
  FAQSchema,
} from "@trident/client/components";
import { generateArticleMetadata } from "@trident/client/nextjs";

export async function generateMetadata({ params }) {
  const article = await trident.getArticle(params.slug);
  return generateArticleMetadata(article, {
    baseUrl: "https://yourdomain.com",
  });
}

export default async function ArticlePage({ params }) {
  const article = await trident.getArticle(params.slug);

  return (
    <>
      {/* Schema markup in head */}
      <StructuredData
        article={article}
        baseUrl="https://yourdomain.com"
        organization={{
          name: "Your Company",
          logo: "https://yourdomain.com/logo.png",
        }}
      />
      {article.content?.faq && (
        <FAQSchema questions={article.content.faq} />
      )}

      {/* Article content */}
      <article className="prose mx-auto max-w-3xl">
        <h1>{article.title}</h1>
        {article.content && <ArticleRenderer article={article} />}
      </article>
    </>
  );
}

Best Practices