AGÊNC[IA] TLX//Guidelines//v2.0
09

SEO

Meta tags, Open Graph, structured data, performance e acessibilidade. Checklist completo para deploy.

01META TAGS

Formato padrão de meta tags para todas as páginas TLX. Title segue o padrão Página — TLX Brandbook.

<title>{Page Title} — TLX Brandbook</title> <meta name="description" content="{Page description, 150-160 chars}" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#F77E2D" /> <meta name="robots" content="index, follow" /> <link rel="canonical" href="https://brand.agenciatlx.com/{path}" />

Meta Tags por Página

PáginaTitleDescription
/Home — TLX BrandbookBrandbook oficial da TLX Agencia. Identidade visual, tokens, guidelines e estratégia.
/guidelinesGuidelines — TLX BrandbookDiretrizes de uso da marca TLX. Tom de voz, aplicações e regras visuais.
/foundationsFoundations — TLX BrandbookDesign tokens TLX: cores, tipografia, spacing, motion e grid system.
/logoLogo — TLX BrandbookLogo TLX: anatomia, variantes, zona de exclusão e regras de uso.
/iconsIcons — TLX BrandbookÍcones Lucide curados para o design system TLX. Grid 24px, stroke-only.
/strategyStrategy — TLX BrandbookEstratégia de marca TLX: propósito, posicionamento, identidade e voz.
/foundersFounders — TLX BrandbookLucas e Thaina Sales. Os fundadores da TLX Agencia.
/templatesTemplates — TLX BrandbookPage templates canônicos: landing page, brandbook, showcase e blog.
/showcaseShowcase — TLX BrandbookAplicações práticas da marca TLX em materiais de comunicação.
/seoSEO — TLX BrandbookGuidelines de SEO, Open Graph, structured data e acessibilidade.
02OPEN GRAPH

Tags Open Graph para compartilhamento em redes sociais. Todas as páginas devem incluir og:image apontando para a imagem padrão.

<meta property="og:type" content="website" /> <meta property="og:site_name" content="TLX Brandbook" /> <meta property="og:title" content="{Page Title} — TLX Brandbook" /> <meta property="og:description" content="{Page description}" /> <meta property="og:url" content="https://brand.agenciatlx.com/{path}" /> <meta property="og:image" content="https://brand.agenciatlx.com/og-image.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:alt" content="TLX Brandbook — {Page Title}" /> <meta property="og:locale" content="pt_BR" />

OG Image Spec

PropriedadeValor
Dimensões1200 x 630px
FormatoPNG (fallback JPG)
Background#0C0E14 (bg-base)
LogoTLx glifo centralizado, Cosmic Orange (#F77E2D)
TituloPlus Jakarta Sans Bold, 48px, #EAEDF2
SubtituloInter Regular, 24px, #A1A1AA
Safe zone60px padding em todos os lados
Max file size< 300KB
03TWITTER CARDS

Tags para Twitter/X cards. Usar summary_large_image para máximo impacto visual.

<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@agenciatlx" /> <meta name="twitter:creator" content="@agenciatlx" /> <meta name="twitter:title" content="{Page Title} — TLX Brandbook" /> <meta name="twitter:description" content="{Page description}" /> <meta name="twitter:image" content="https://brand.agenciatlx.com/og-image.png" /> <meta name="twitter:image:alt" content="TLX Brandbook — {Page Title}" />
04STRUCTURED DATA

Schemas JSON-LD para rich results no Google. Incluir no <head> ou via Next.js metadata API.

Organization

{ "@context": "https://schema.org", "@type": "Organization", "name": "TLX Agencia", "url": "https://agenciatlx.com", "logo": "https://agenciatlx.com/logo.png", "description": "Consultoria boutique de estratégia e tecnologia para negócios locais", "foundingDate": "2024", "founders": [ { "@type": "Person", "name": "Lucas Sales" }, { "@type": "Person", "name": "Thaina Sales" } ], "sameAs": [ "https://instagram.com/agenciatlx", "https://linkedin.com/company/agenciatlx" ] }

LocalBusiness

{ "@context": "https://schema.org", "@type": "LocalBusiness", "name": "TLX Agencia", "image": "https://agenciatlx.com/logo.png", "address": { "@type": "PostalAddress", "addressLocality": "Pelotas", "addressRegion": "RS", "addressCountry": "BR" }, "url": "https://agenciatlx.com", "priceRange": "$$" }

WebSite

{ "@context": "https://schema.org", "@type": "WebSite", "name": "TLX Brandbook", "url": "https://brand.agenciatlx.com", "description": "Brandbook oficial da TLX Agencia", "publisher": { "@type": "Organization", "name": "TLX Agencia" } }

FAQ

{ "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "O que a TLX faz?", "acceptedAnswer": { "@type": "Answer", "text": "Consultoria boutique de estratégia e tecnologia para negócios locais." } }, { "@type": "Question", "name": "Como funciona o diagnóstico?", "acceptedAnswer": { "@type": "Answer", "text": "Analisamos seu negócio antes de propor qualquer solução." } } ] }

Service

{ "@context": "https://schema.org", "@type": "Service", "serviceType": "Consultoria de Estratégia e Tecnologia", "provider": { "@type": "Organization", "name": "TLX Agencia" }, "areaServed": { "@type": "Place", "name": "Sul do Brasil" }, "description": "Diagnóstico, estratégia e implementação tecnológica para negócios locais" }

BlogPosting

{ "@context": "https://schema.org", "@type": "BlogPosting", "headline": "{Article Title}", "image": "{Cover Image URL}", "datePublished": "{YYYY-MM-DD}", "dateModified": "{YYYY-MM-DD}", "author": { "@type": "Person", "name": "{Author Name}" }, "publisher": { "@type": "Organization", "name": "TLX Agencia", "logo": { "@type": "ImageObject", "url": "https://agenciatlx.com/logo.png" } }, "description": "{Article description}", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://agenciatlx.com/blog/{slug}" } }
05SITEMAP

Sitemap XML para o brandbook. Gerado automaticamente pelo Next.js em /sitemap.xml.

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://brand.agenciatlx.com/</loc> <lastmod>2026-03-06</lastmod> <changefreq>monthly</changefreq> <priority>1.0</priority> </url> <url> <loc>https://brand.agenciatlx.com/guidelines</loc> <lastmod>2026-03-06</lastmod> <changefreq>monthly</changefreq> <priority>0.8</priority> </url> <url> <loc>https://brand.agenciatlx.com/foundations</loc> <lastmod>2026-03-06</lastmod> <changefreq>monthly</changefreq> <priority>0.8</priority> </url> <url> <loc>https://brand.agenciatlx.com/logo</loc> <lastmod>2026-03-06</lastmod> <changefreq>monthly</changefreq> <priority>0.8</priority> </url> <url> <loc>https://brand.agenciatlx.com/icons</loc> <lastmod>2026-03-06</lastmod> <changefreq>monthly</changefreq> <priority>0.7</priority> </url> <url> <loc>https://brand.agenciatlx.com/strategy</loc> <lastmod>2026-03-06</lastmod> <changefreq>monthly</changefreq> <priority>0.8</priority> </url> <url> <loc>https://brand.agenciatlx.com/founders</loc> <lastmod>2026-03-06</lastmod> <changefreq>yearly</changefreq> <priority>0.6</priority> </url> <url> <loc>https://brand.agenciatlx.com/templates</loc> <lastmod>2026-03-06</lastmod> <changefreq>monthly</changefreq> <priority>0.7</priority> </url> <url> <loc>https://brand.agenciatlx.com/showcase</loc> <lastmod>2026-03-06</lastmod> <changefreq>monthly</changefreq> <priority>0.6</priority> </url> <url> <loc>https://brand.agenciatlx.com/seo</loc> <lastmod>2026-03-06</lastmod> <changefreq>monthly</changefreq> <priority>0.7</priority> </url> </urlset>
06PERFORMANCE

Core Web Vitals — Targets

MétricaTargetDescrição
LCP< 2.5sLargest Contentful Paint — tempo até o maior elemento visível renderizar
INP< 200msInteraction to Next Paint — responsividade a interações do usuário
CLS< 0.1Cumulative Layout Shift — estabilidade visual durante carregamento
FCP< 1.8sFirst Contentful Paint — tempo até o primeiro conteúdo visível
TTFB< 800msTime to First Byte — tempo de resposta do servidor

Lighthouse Targets

CategoriaScore Mínimo
Performance>= 90
Accessibility>= 95
Best Practices>= 90
SEO>= 95

Otimizações

TécnicaImplementaçãoImpacto
Image optimizationNext.js Image com WebP/AVIF, sizes, priority para LCPLCP, CLS
Font loadingnext/font com display: swap, preload Inter + Plus Jakarta SansFCP, CLS
Code splittingDynamic imports para componentes pesados (MotionDemo, etc.)FCP, TTI
Static generationTodas as páginas do brandbook são SSG (generateStaticParams)TTFB, LCP
Asset cachingCache-Control: public, max-age=31536000 para assets estáticosRepeat visits
Bundle analysis@next/bundle-analyzer para monitorar tamanho de chunksFCP, TTI
Preconnectdns-prefetch + preconnect para CDN e fontesFCP
Lazy loadingloading='lazy' para imagens abaixo do foldLCP, bandwidth
07ACESSIBILIDADE

Estrutura semântica HTML e conformidade WCAG 2.1 AA. Todos os componentes devem seguir estas diretrizes.

Estrutura Semântica

<header> <!-- NavBar, logo, links principais --> <nav> <!-- Navegação principal com role="navigation" --> </header> <aside> <!-- Sidebar com role="complementary" --> <nav> <!-- Navegação secundária (sidebar links) --> </aside> <main> <!-- Conteúdo principal, único por página --> <section> <!-- Seções temáticas com id para anchor --> <h2> <!-- Heading hierárquico (nunca pular níveis) --> </section> </main> <footer> <!-- Links, legal, copyright -->

WCAG AA — Checklist

CritérioWCAGRequisito
Contraste de texto1.4.3 (AA)Ratio mínimo 4.5:1 para texto normal, 3:1 para texto grande (>=18px bold ou >=24px)
Contraste UI1.4.11 (AA)Ratio mínimo 3:1 para componentes de interface e gráficos
Texto redimensionável1.4.4 (AA)Texto legível até 200% zoom sem perda de conteúdo
Focus visible2.4.7 (AA)Indicador de foco visível em todos os elementos interativos
Navegação por teclado2.1.1 (A)Todas as funções acessíveis via teclado (Tab, Enter, Escape)
Alt text1.1.1 (A)Todas as imagens informativas com alt descritivo. Decorativas com alt=''
Headings hierárquicos1.3.1 (A)H1 > H2 > H3 sem pular níveis. Um H1 por página
Link purpose2.4.4 (A)Texto do link descreve destino. Evitar 'clique aqui'
Language3.1.1 (A)html lang='pt-BR' definido. Trechos em ingles com lang='en'
Touch target2.5.8 (AA)Áreas clicáveis com mínimo 44x44px em mobile
08CHECKLIST

Checklist pré-deploy. Validar todos os itens antes de publicar qualquer página TLX.

Meta & SEO

☐Title tag único por página (<= 60 caracteres)
☐Meta description única (<= 160 caracteres)
☐Canonical URL definida
☐robots meta tag configurada (index, follow)
☐Sitemap.xml gerado e acessível em /sitemap.xml
☐robots.txt configurado em /robots.txt
☐Favicon e apple-touch-icon configurados

Open Graph & Social

☐og:title, og:description, og:image em todas as páginas
☐og:image com dimensões 1200x630px
☐Twitter card tags configuradas
☐Testar preview no Facebook Sharing Debugger
☐Testar preview no Twitter Card Validator

Structured Data

☐JSON-LD Organization no layout raiz
☐JSON-LD WebSite no layout raiz
☐JSON-LD BlogPosting em páginas de blog
☐Validar schemas no Google Rich Results Test
☐Sem erros no Schema Markup Validator

Performance

☐Lighthouse Performance >= 90
☐LCP < 2.5s em mobile
☐CLS < 0.1
☐INP < 200ms
☐Imagens otimizadas (WebP/AVIF, sizes, lazy load)
☐Fontes com font-display: swap
☐Bundle size monitorado (< 200KB JS inicial)

Acessibilidade

☐Lighthouse Accessibility >= 95
☐Contraste WCAG AA validado em todos os tokens de cor
☐Navegação completa via teclado
☐Focus indicators visiveis
☐Alt text em todas as imagens informativas
☐html lang='pt-BR' definido
☐Headings hierárquicos sem pular níveis
☐Touch targets >= 44x44px

Final

☐Todas as páginas renderizam sem erros no console
☐Links internos funcionando (sem 404)
☐Responsivo testado em 375px, 768px, 1280px
☐Dark mode (se aplicável) sem problemas de contraste
☐Analytics configurado (Google Analytics / Vercel Analytics)
☐Error pages (404, 500) customizadas