Módulo 3.7: SEO e Presença Digital - Vocabulário de Design para Vibe Coding

SEO e Presença Digital

SEO (Search Engine Optimization) é o conjunto de técnicas para fazer seu site ser encontrado pelos mecanismos de busca. Neste módulo, você aprenderá o vocabulário necessário para instruir IAs a criar sites otimizados para buscadores e redes sociais, garantindo uma presença digital forte.

Tópicos do Módulo

O que é:

Meta tags são elementos HTML invisíveis que fornecem informações sobre a página para mecanismos de busca e navegadores. As mais importantes são title, description e viewport. Elas aparecem no <head> do documento e determinam como sua página é exibida nos resultados de busca.

Por que aprender:

As meta tags são a primeira impressão do seu site nos resultados de busca. Um title bem escrito e uma description atrativa aumentam significativamente a taxa de cliques (CTR). Ao instruir IAs, você precisa especificar exatamente quais meta tags incluir e o conteúdo de cada uma para garantir visibilidade.

Conceitos-chave:

• Title tag: título da página (até 60 caracteres)
• Meta description: resumo da página (até 160 caracteres)
• Meta viewport: controla responsividade mobile
• Meta robots: instrui indexação (index, noindex, follow)
• Canonical URL: evita conteúdo duplicado
• Hreflang: indica versões em outros idiomas

O que é:

Estrutura semântica refere-se ao uso correto de tags HTML para dar significado ao conteúdo. Ao invés de usar apenas divs, usamos header, main, article, section, nav e footer. Os headings (h1-h6) criam uma hierarquia de títulos que os buscadores usam para entender a organização do conteúdo.

Por que aprender:

Os algoritmos de busca usam a estrutura semântica para entender o conteúdo da página. Um h1 bem definido, hierarquia correta de headings e uso apropriado de landmarks semânticos melhoram o ranking. Também beneficia acessibilidade, pois leitores de tela dependem dessa estrutura para navegar.

Conceitos-chave:

• Hierarquia de headings: h1 único, h2-h6 em ordem lógica
• Landmarks: header, nav, main, aside, footer
• Article vs Section: conteúdo independente vs agrupamento
• Alt text: descrição de imagens para SEO e acessibilidade
• Figure e figcaption: imagens com legendas semânticas
• Time datetime: datas legíveis por máquinas

O que é:

Schema Markup (ou Structured Data) é um vocabulário padronizado que ajuda os buscadores a entender o conteúdo da página. Usando JSON-LD, você pode marcar produtos, artigos, eventos, receitas, FAQs e muito mais. Isso permite que o Google exiba rich snippets nos resultados de busca.

Por que aprender:

Rich snippets (estrelas de avaliação, preços, FAQs expandidos) destacam seu resultado entre os concorrentes e aumentam CTR em até 30%. Ao pedir para a IA criar uma página de produto ou FAQ, solicitar Schema Markup apropriado garante que ela aparecerá com destaque nos resultados do Google.

Conceitos-chave:

• JSON-LD: formato preferido pelo Google para structured data
• Schema.org: vocabulário padrão de tipos e propriedades
• Rich snippets: resultados de busca enriquecidos
• Organization: informações sobre empresa/marca
• Product: preço, disponibilidade, avaliações
• FAQPage: perguntas e respostas expandíveis no Google
• BreadcrumbList: navegação hierárquica nos resultados

O que é:

Performance é um fator de ranking crucial. Os Core Web Vitals do Google medem velocidade de carregamento (LCP), interatividade (INP) e estabilidade visual (CLS). Sites lentos são penalizados no ranking e têm maior taxa de abandono. Mobile-first indexing significa que a versão mobile define seu ranking.

Por que aprender:

Ao instruir IAs para criar sites, especificar otimizações de performance garante código eficiente desde o início. Solicitar lazy loading, otimização de imagens, CSS crítico inline e minimização de JavaScript resulta em sites que carregam rápido e rankeiam melhor sem precisar de otimização posterior.

Conceitos-chave:

• Core Web Vitals: LCP, INP, CLS - métricas do Google
• Lazy loading: carregar imagens sob demanda
• Preload/prefetch: carregar recursos antecipadamente
• Critical CSS: CSS essencial inline no head
• Image optimization: WebP, srcset, sizes
• Mobile-first: priorizar experiência mobile
• Minification: reduzir tamanho de CSS/JS

O que é:

Conteúdo otimizado combina palavras-chave estratégicas com texto de qualidade que atende à intenção de busca do usuário. Inclui URLs amigáveis, internal linking estratégico, formatação escaneável com listas e subtítulos, e conteúdo original que responde perguntas do público-alvo.

Por que aprender:

IAs são excelentes para gerar conteúdo, mas precisam de direcionamento para otimização. Ao especificar palavras-chave alvo, estrutura de headings, links internos desejados e formato do conteúdo, você garante que o texto gerado será tanto útil para usuários quanto otimizado para buscadores.

Conceitos-chave:

• Keyword research: identificar termos de busca relevantes
• Search intent: informacional, navegacional, transacional
• URL slugs: URLs curtas, descritivas, com keywords
• Internal linking: conectar páginas relacionadas
• Anchor text: texto descritivo para links
• Content hierarchy: H1 > H2 > H3 com keywords
• Readability: parágrafos curtos, listas, destaques

Vocabulário para Prompts

Use estes termos ao instruir IAs para criar sites SEO-friendly:

Meta Tags

"Inclua meta title de até 60 caracteres e meta description de 155 caracteres com a palavra-chave principal"

Open Graph

"Adicione OG tags completas: og:title, og:description, og:image (1200x630px), og:type e og:url"

Schema Markup

"Inclua JSON-LD com Schema.org para Organization/LocalBusiness com logo, contato e redes sociais"

Estrutura Semântica

"Use HTML5 semântico com header, nav, main, article, section e footer. H1 único por página"

Performance

"Otimize para Core Web Vitals: lazy loading em imagens, critical CSS inline, preload de fontes"

Imagens SEO

"Todas as imagens com alt text descritivo, loading='lazy', width e height definidos para evitar CLS"

FAQ Schema

"Crie uma seção FAQ com Schema FAQPage para aparecer expandido nos resultados do Google"

Breadcrumbs

"Adicione breadcrumb navigation com BreadcrumbList Schema para navegação hierárquica nos resultados"

Exemplo de prompt completo:

"Crie uma landing page para minha clínica veterinária com SEO completo: meta title e description otimizados para 'veterinário em São Paulo', todas as OG tags para compartilhamento social com imagem de destaque, Schema LocalBusiness com endereço, telefone, horário de funcionamento e área de serviço, Schema FAQPage para as 5 perguntas mais comuns, hierarquia de headings com H1 contendo a keyword principal, imagens com alt text descritivo e lazy loading, e performance otimizada para Core Web Vitals."