[03.15] Pilar 03

SEO

Diretrizes de otimização para mecanismos de busca e acessibilidade.

[01]

Meta Tags

Tags meta essenciais para SEO e redes sociais.

Title Tag

<title>[Título da Página] | AIOX Design System</title>

Máximo de 60 caracteres. Incluir nome da marca no final.

Meta Description

<meta name="description" content="Descrição otimizada para SEO com palavras-chave relevantes." />

Máximo de 160 caracteres. Incluir call-to-action.

OG Tags

<meta property="og:title" content="[Título]" />
<meta property="og:description" content="[Descrição]" />
<meta property="og:image" content="[URL da Imagem]" />

Imagem: 1200x630px, formato PNG ou JPG.

[02]

Semântica HTML

Uso correto de elementos semânticos para acessibilidade.

Hierarquia de Títulos

h1Título principal (único por página)

h2Seções principais

h3-h6Subseções em ordem

Elementos Semânticos

headerCabeçalho de página/seção

navNavegação principal

mainConteúdo principal

footerRodapé de página

[03]

Performance Web

Métricas Core Web Vitals e otimização.

LCP

Good

Largest Contentful Paint

Alvo: < 2.5s

Tempo de carregamento do maior elemento de conteúdo.

FID

Good

First Input Delay

Alvo: < 100ms

Tempo até a primeira interação do usuário.

CLS

Good

Cumulative Layout Shift

Alvo: < 0.1

Mudança inesperada de layout durante carregamento.

[04]

Acessibilidade

Diretrizes WCAG e práticas de inclusão.

Contraste

Relação de contraste mínima de 4.5:1 para texto normal e 3:1 para texto grande.

AA (Normal): 4.5:1

AA (Large): 3:1

AAA: 7:1

Navegação por Teclado

Todos os elementos interativos devem ser acessíveis via teclado com ordem lógica.

TabNavegação

Enter/SpaceAtivação

EscapeFechar modais

ARIA Labels

Use ARIA para elementos não-semânticos ou estados complexos.

<button aria-label="Fechar modal">
<div role="alert">
<span aria-live="polite">

Alt Text

Todas as imagens devem ter atributo alt descritivo, exceto decorativas.

Informativaalt="Screenshot do dashboard"

Decorativaalt=""