git:20260527.ada0900 to git:20260611.9e5d744

---

name: seo-specialist

description: |

Skill do Especialista SEO para otimização de páginas e sistemas para motores de busca tradicionais e

também para otimização para ser citado por LLMs (ChatGPT, Claude, Perplexity, Google AI Overviews).

Use quando precisar otimizar meta tags, Open Graph, sitemap, schema markup, Core Web Vitals, performance,

generativos. Trigger em: "SEO", "meta tags", "Open Graph metadata", "sitemap", "schema markup", "Core Web Vitals",

"performance", "LCP", "CLS", "ranking", "canonical", "robots.txt", "GEO", "AEO", "Answer Engine",

---

# SEO Specialist - Otimização para Motores de Busca

O Especialista SEO é responsável por garantir que o sistema e landing pages sejam encontráveis, rápidos e bem ranqueados nos motores de busca.

## Governanca Global

Esta skill segue `GLOBAL.md`, `policies/execution.md`, `policies/handoffs.md`, `policies/quality-gates.md`, `policies/token-efficiency.md`, `policies/stack-flexibility.md`, `policies/evals.md`, `policies/tool-safety.md` e `policies/anti-ai-writing.md`.

**Gate:** conteúdo publicado (artigos, meta descriptions, headings) deve passar pelos 29 padrões de `policies/anti-ai-writing.md` antes de finalizar. Conteúdo com tells de IA penaliza percepção de autenticidade e pode afetar E-E-A-T.

Para templates de metadata, schema e checks de indexacao, consultar `docs/skill-guides/seo-specialist.md` apenas quando necessario.

## Quando Usar

- otimizar indexacao, metadata, performance e semantica

- revisar landing pages ou paginas publicas com objetivo de descoberta

## Quando Nao Usar

- para areas autenticadas sem indexacao

- para substituir Copy, Frontend ou Security como papel principal

## Entradas Esperadas

- copy e estrutura da pagina

- contexto tecnico de performance e rendering

- objetivos de descoberta e palavras-chave

## Saidas Esperadas

- recomendacoes de SEO tecnico e on-page

- metadata e requisitos de performance claros

- handoff claro para Frontend/Reviewer

## Responsabilidades

1. Otimizar meta tags em todas as páginas (title, description, canonical, Open Graph, Twitter Card)

2. Implementar schema markup (JSON-LD) para dados estruturados

3. Garantir excelência em Core Web Vitals (LCP, FID, CLS, INP, TTFB)

4. Configurar sitemap.xml e robots.txt

5. Otimizar imagens e fontes para performance máxima

6. Garantir acessibilidade (impacta diretamente o SEO)

7. Assegurar HTML semântico em toda a aplicação

## Meta Tags - Template Padrão

**src/app/layout.tsx**

```typescript

import type { Metadata } from 'next';

export function generateMetadata({

title,

description,

url,

image,

}: {

title: string;

description: string;

url: string;

image?: string;

}): Metadata {

const siteName = 'Nome do Projeto';

const defaultImage = '/og-image.png';

return {

title: {

default: title,

template: `%s | ${siteName}`,

},

description,

alternates: {

canonical: url,

},

openGraph: {

title,

description,

url,

siteName,

images: [

{

url: image || defaultImage,

width: 1200,

height: 630,

alt: title,

},

],

locale: 'pt_BR',

type: 'website',

},

twitter: {

card: 'summary_large_image',

title,

description,

images: [image || defaultImage],

},

robots: {

index: true,

follow: true,

googleBot: {

index: true,

follow: true,

'max-video-preview': -1,

'max-image-preview': 'large',

'max-snippet': -1,

},

},

};

}

```

## Schema Markup - JSON-LD

**src/components/seo/WebsiteSchema.tsx**

```typescript

export function WebsiteSchema({ url, name }: { url: string; name: string }) {

const schema = {

'@context': 'https://schema.org',

'@type': 'WebSite',

name,

url,

potentialAction: {

'@type': 'SearchAction',

target: `${url}/search?q={search_term_string}`,

'query-input': 'required name=search_term_string',

},

};

return (

<script

type="application/ld+json"

dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}

/>

);

}

```

**src/components/seo/OrganizationSchema.tsx**

```typescript

export function OrganizationSchema({

name,

url,

logo,

sameAs,

}: {

name: string;

url: string;

logo: string;

sameAs: string[];

}) {

const schema = {

'@context': 'https://schema.org',

'@type': 'Organization',

name,

url,

logo,

sameAs,

contactPoint: {

'@type': 'ContactPoint',

contactType: 'customer service',

availableLanguage: ['Portuguese'],

},

};

return (

<script

type="application/ld+json"

dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}

/>

);

}

```

**src/components/seo/FAQSchema.tsx**

```typescript

interface FAQItem {

question: string;

answer: string;

}

export function FAQSchema({ items }: { items: FAQItem[] }) {

const schema = {

'@context': 'https://schema.org',

'@type': 'FAQPage',

mainEntity: items.map((item) => ({

'@type': 'Question',

name: item.question,

acceptedAnswer: {

'@type': 'Answer',

text: item.answer,

},

})),

};

return (

<script

type="application/ld+json"

dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}

/>

);

}

```

## Core Web Vitals - Metas Obrigatórias

```

Métrica Alvo Descrição

─────────────────────────────────────────────────────────────

LCP < 2.5s Largest Contentful Paint — tempo até o maior elemento visível

FID < 100ms First Input Delay — tempo de resposta à primeira interação

CLS < 0.1 Cumulative Layout Shift — estabilidade visual da página

INP < 200ms Interaction to Next Paint — responsividade geral

TTFB < 800ms Time to First Byte — velocidade do servidor

```

Todas as métricas devem estar na zona **verde** do Google PageSpeed Insights.

## Otimizações Obrigatórias

### next.config.js

**next.config.js**

```javascript

const nextConfig = {

images: {

formats: ['image/avif', 'image/webp'],

},

experimental: {

optimizeCss: true,

},

compress: true,

poweredByHeader: false,

};

module.exports = nextConfig;

```

### Imagens

Regras inegociáveis:

- **Sempre** usar `next/image` — nunca `<img>` nativo

- Prioridade de formato: AVIF > WebP > PNG

- **Alt text** obrigatório em TODAS as imagens — sem exceção

- Dimensões explícitas (`width` e `height`) em todas as imagens

- `priority` para imagens hero (above the fold)

**src/components/ui/OptimizedImage.tsx**

```typescript

import Image from 'next/image';

interface OptimizedImageProps {

src: string;

alt: string;

width: number;

height: number;

priority?: boolean;

className?: string;

}

export function OptimizedImage({

src,

alt,

width,

height,

priority = false,

className,

}: OptimizedImageProps) {

return (

<Image

src={src}

alt={alt}

width={width}

height={height}

priority={priority}

loading={priority ? 'eager' : 'lazy'}

sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"

className={className}

/>

);

}

```

### Fontes

- **Sempre** usar `next/font` (self-hosted, zero CLS)

- `font-display: swap` obrigatório

**src/app/layout.tsx**

```typescript

import { Inter } from 'next/font/google';

const inter = Inter({

subsets: ['latin'],

display: 'swap',

variable: '--font-inter',

});

export default function RootLayout({ children }: { children: React.ReactNode }) {

return (

<html lang="pt-BR" className={inter.variable}>

<body>{children}</body>

</html>

);

}

```

### Lazy Loading e Performance

- Dynamic imports para tudo abaixo do fold

- `loading="lazy"` em imagens e iframes fora da viewport

- Defer em scripts de terceiros

**src/app/page.tsx**

```typescript

import dynamic from 'next/dynamic';

const FAQ = dynamic(() => import('@/components/sections/FAQ'));

const Testimonials = dynamic(() => import('@/components/sections/Testimonials'));

const Footer = dynamic(() => import('@/components/layout/Footer'));

```

**src/components/ThirdPartyScripts.tsx**

```typescript

import Script from 'next/script';

export function ThirdPartyScripts() {

return (

<>

<Script

src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"

strategy="afterInteractive"

/>

<Script id="gtag-init" strategy="afterInteractive">

{`window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'G-XXXXX');`}

</Script>

</>

);

}

```

## HTML Semântico - Referência

```

Correto Errado

──────────────────────────────────────────

<header> <div class="header">

<nav> <div class="nav">

<main> <div class="main">

<section> <div class="section">

<article> <div class="article">

<aside> <div class="sidebar">

<footer> <div class="footer">

<h1> a <h6> <div class="title">

<figure> + <figcaption> <div class="image-wrapper">

<time datetime=""> <span class="date">

<address> <div class="contact">

<mark> <span class="highlight">

```

Regras:

- Uma única `<h1>` por página

- Hierarquia de headings sem pular níveis (h1 > h2 > h3)

- `<main>` uma única vez por página

- `<nav>` com `aria-label` quando houver mais de uma navegação

## SEO Checklist

### Técnico

- [ ] Sitemap.xml gerado e enviado ao Google Search Console

- [ ] robots.txt configurado corretamente

- [ ] Tags canonical em todas as páginas

- [ ] HTTPS ativo em todo o site

- [ ] Sem conteúdo duplicado

- [ ] URLs amigáveis (slug legível, sem IDs expostos)

- [ ] Redirects 301 para URLs antigas

- [ ] Página 404 customizada com navegação

- [ ] Carregamento < 3s em conexão 3G

### On-Page

- [ ] H1 única e descritiva em cada página

- [ ] Title tag < 60 caracteres

- [ ] Meta description < 160 caracteres

- [ ] Alt text em todas as imagens

- [ ] Links internos entre páginas relacionadas

- [ ] Breadcrumbs implementados

- [ ] Conteúdo mínimo de 300 palavras por página

### Acessibilidade (Impacta SEO)

- [ ] Contraste mínimo 4.5:1 (WCAG AA)

- [ ] Navegação completa via Tab

- [ ] ARIA labels em elementos interativos

- [ ] Skip to content implementado

- [ ] Labels em todos os campos de formulário

- [ ] Focus visível em todos os elementos interativos

### Performance

- [ ] Core Web Vitals na zona verde

- [ ] Imagens otimizadas (AVIF/WebP via next/image)

- [ ] Fontes com next/font (zero CLS)

- [ ] Bundle splitting (dynamic imports)

- [ ] Preload de recursos críticos

- [ ] CDN configurado para assets estáticos

### GEO/AEO

Ver seção dedicada `## GEO/AEO — Otimização para LLMs e Answer Engines` abaixo, com checklist completo de citação por motores generativos (clear claims, quotable headings, FAQ/HowTo schema, E-E-A-T, tabelas, llms.txt).

## GEO/AEO — Otimização para LLMs e Answer Engines

LLMs como ChatGPT, Claude, Perplexity e Google AI Overviews viraram a primeira camada de descoberta para muitos usuários — eles fazem a pergunta no chat antes de abrir o Google. GEO (Generative Engine Optimization) e AEO (Answer Engine Optimization) cobrem técnicas para tornar o conteúdo extraível, citável e referenciável por esses sistemas. Diferente de SEO clássico (que otimiza ranking em SERP), GEO/AEO otimiza para ser a fonte que o LLM cita textualmente na resposta gerada.

### Conteúdo citável

LLMs extraem trechos curtos e atômicos. Estruture o conteúdo para facilitar essa extração:

- **Clear atomic claims:** 1 fato por sentença. Evite parágrafos com múltiplas afirmações concatenadas — o LLM precisa conseguir citar uma frase isolada sem perder contexto.

- Ruim: "A Vitamina D é importante para os ossos e também tem papel no sistema imune, sendo que sua deficiência afeta 50% da população em climas frios."

- Bom: "A Vitamina D regula a absorção de cálcio. Sua deficiência afeta 50% da população em climas frios (Holick, 2024)."

- **Quotable H2/H3 como perguntas:** headings em forma de pergunta direta batem com a query do usuário no LLM. "Como configurar SSL no Nginx" extrai melhor que "Configuração de SSL".

- **Parágrafos curtos:** máximo 3-4 frases. Blocos longos são descartados na extração.

- **TL;DR no topo:** 2-3 linhas resumindo o artigo logo após o H1. LLMs frequentemente citam o TL;DR como resposta direta.

- **Listas numeradas e com bullets:** estruturas enumeradas são extraídas com fidelidade muito maior que prosa corrida.

### Structured data específico

Além do schema clássico (Website, Organization), priorize tipos que LLMs consomem para grounding:

- **FAQPage schema** (já tem template em `FAQSchema.tsx` — ver seção `## Schema Markup - JSON-LD` acima): cada par pergunta/resposta vira candidato a citação direta em AI Overviews.

- **HowTo schema:** para tutoriais e procedimentos. Cada `step` é extraído individualmente.

- **Article schema com metadados completos:** `author` (com `@type: Person` e `url` para bio), `datePublished`, `dateModified` (LLMs ranqueiam por frescor — conteúdo sem `dateModified` perde relevância em queries que pedem informação atual), `publisher`, `headline`, `description`.

```typescript

const articleSchema = {

'@context': 'https://schema.org',

'@type': 'Article',

headline: title,

author: {

'@type': 'Person',

name: 'Nome do Autor',

url: 'https://site.com/sobre/autor',

},

datePublished: '2025-01-15',

dateModified: '2025-03-20',

publisher: {

'@type': 'Organization',

name: 'Nome da Publicação',

logo: { '@type': 'ImageObject', url: 'https://site.com/logo.png' },

},

};

```

### E-E-A-T para LLMs

Experience, Expertise, Authoritativeness, Trustworthiness. LLMs filtram fontes por sinais de autoridade explícitos:

- **Bio do autor visível na página:** nome, credenciais, link para perfil profissional. Não basta no schema — precisa estar no HTML renderizado.

- **Fontes externas linkadas:** sempre que citar dado, estudo ou stat, link para a fonte primária. LLMs verificam grounding via outbound links.

- **Datas claras em todo conteúdo:** `<time datetime="2025-03-20">20 de março de 2025</time>` visível no corpo, não só no schema.

- **Contradições explícitas:** não use "alguns dizem X" — atribua nominalmente. "Smith (2024) defende X, mas Jones (2025) contradiz com Y baseado em dados de Z." Isso aumenta a confiabilidade percebida e dá ao LLM material para citar com nuance.

- **Sobre/About page robusta:** com bio dos contribuidores, missão editorial, processo de fact-checking se aplicável.

### Tabelas e listas

LLMs extraem tabelas com altíssima fidelidade — frequentemente reproduzem a tabela inteira na resposta. Use tabelas sempre que comparar:

- Planos/preços

- Features entre alternativas

- Antes/depois

- Especificações técnicas

- Prós/contras

Listas com bullets ou numeradas vencem prosa para qualquer enumeração. Se tem mais de 3 itens equivalentes, vire lista.

### llms.txt

Arquivo opcional na raiz do site (analogia ao `robots.txt`), formato markdown, lista o conteúdo canônico e legível por LLMs. Não é padrão oficial mas começou a ser respeitado por crawlers de Anthropic, OpenAI e Perplexity.

**public/llms.txt**

```markdown

# Nome do Site

> Descrição breve em 1-2 linhas do que o site oferece.

## Documentação principal

- [Guia de introdução](https://site.com/docs/intro): visão geral em 5 min

- [API Reference](https://site.com/docs/api): endpoints e schemas

- [Tutoriais](https://site.com/tutoriais): passo a passo por caso de uso

## Conteúdo editorial

- [Blog](https://site.com/blog): artigos técnicos atualizados

- [Changelog](https://site.com/changelog): histórico de releases

## Opcional

- [FAQ](https://site.com/faq): perguntas frequentes

```

Versão estendida `llms-full.txt` pode incluir o conteúdo completo concatenado em markdown plano — útil para sites pequenos onde o LLM pode ingerir tudo.

### GEO Checklist

- [ ] TL;DR de 2-3 linhas no topo de cada artigo/página de conteúdo

- [ ] H2/H3 formulados como perguntas diretas quando aplicável

- [ ] Parágrafos com máximo 3-4 frases

- [ ] Claims atômicos (1 fato por sentença) em conteúdo factual

- [ ] FAQPage schema implementado em páginas com FAQ

- [ ] HowTo schema em tutoriais e procedimentos

- [ ] Article schema com `author`, `datePublished`, `dateModified`, `publisher`

- [ ] Bio do autor visível no HTML (não só no schema)

- [ ] Fontes externas linkadas para todo dado/stat citado

- [ ] Datas visíveis no corpo do conteúdo via `<time datetime="">`

- [ ] Atribuições nominais em vez de "alguns dizem"

- [ ] Tabelas comparativas usadas sempre que comparar 2+ itens

- [ ] Listas numeradas ou com bullets para enumerações de 3+ itens

- [ ] `llms.txt` na raiz do site listando conteúdo canônico

- [ ] Página `/sobre` ou `/about` com missão editorial e bios

## Quando precisar de imagem (Open Graph card, Twitter card, hero pra blog post)

Não use templates genéricos. **Despache skill 17 (`image-generator`)** pra OG card alinhado ao branding:

```

Tipo: og-card (1200x630) / twitter-card (1200x675)

Texto na imagem: [título do post/página] — tipografia importa

Paleta: [primary], [secondary]

Output path: public/og/ ou public/share/

```

Skill 17 deve usar **`--model gemini-3-pro`** (override do default) quando texto na imagem for crítico — `gemini-3-pro` tem melhor tipografia que `grok-imagine` ($0.15 vs $0.020, mas vale pra OG card que vai pra produção). Para favicon multi-tamanho e PWA icons, despache **skill 36 (Web Asset Generator)** a partir do logo gerado.

## Evidencia de Conclusao

- metadata e semantica definidas

- impacto em Core Web Vitals considerado

- dependencias para frontend e copy explicitadas

## Handoff

### Recebe do Marketing Copy

- Textos das páginas com palavras-chave definidas

- Tom de voz e proposta de valor

- Conteúdo para meta descriptions

- FAQs estruturadas

- SEO fornece lista de keywords ANTES do Copy escrever (fluxo bidirecional)

Meta descriptions: SEO NAO reescreve o copy — apenas otimiza formato, keywords e tamanho. Se o texto precisa mudar substancialmente, devolver pro Copy.

### Entrega para QA

1. Meta tags testadas em todas as páginas (Open Graph Debugger, Twitter Card Validator)

2. Schema markup validado (Google Rich Results Test)

3. Sitemap.xml configurado e acessível

4. Core Web Vitals na zona verde (Google PageSpeed Insights)

5. Lighthouse score > 90 em todas as categorias (Performance, Accessibility, Best Practices, SEO)

## Fontes Externas

- GEO/AEO patterns inspired by [AgriciDaniel/claude-seo](https://github.com/AgriciDaniel/claude-seo) (MIT) — comprehensive SEO skill with deep GEO coverage.

## Regra de Código

Comentarios no codigo so fazem sentido quando explicam contexto nao obvio, restricoes externas ou workarounds temporarios. O padrao continua sendo codigo claro com nomes descritivos.