O que é SEO técnico?

SEO técnico é a parte do SEO que depende do desenvolvedor: meta tags, Schema.org, sitemap, heading hierarchy, Core Web Vitals, HTTPS e performance. É o que faz o site ser corretamente lido e ranqueado pelo Google.

O que é Schema.org e por que usar?

Schema.org é um formato de dados estruturados (JSON-LD) que diz ao Google exatamente o que uma página representa. Para negócios locais, é o que faz aparecer no Google Maps. Para blogs, mostra data e autor no resultado. Para FAQ, mostra as perguntas diretamente no Google.

Sim. Single Page Applications renderizam tudo com JavaScript no cliente. O Google precisa executar o JS pra ver o conteúdo, e nem sempre faz isso corretamente. Para SEO, use SSG (Astro) ou SSR (Next.js). SPA é indicada para webapps onde SEO não importa, como dashboards e painéis internos.

Quanto tempo leva pra implementar SEO técnico?

Menos de uma hora num site Astro. Meta tags, Schema.org, sitemap automático, robots.txt e Open Graph. É configuração no head da página, não trabalho extra. A diferença entre aparecer na primeira página do Google ou na quinta.

SEO técnico que todo dev precisa saber

SEO não é só do marqueteiro

A maioria dos devs entrega site sem pensar em SEO. Aí o cliente contrata agência de marketing que fala “o site precisa de ajustes técnicos” e cobra R$ 3-5k pra fazer o que deveria ter sido feito no desenvolvimento.

Já vi isso acontecer com clientes que chegaram com site de agência “pronto” mas que não aparecia no Google. Meta tags genéricas, sem Schema.org, sem sitemap, sem Open Graph. O designer caprichou no visual, o dev implementou fielmente, e ninguém pensou em como o Google ia ler aquilo.

SEO técnico é responsabilidade do dev. Não precisa virar especialista em marketing. Precisa entregar o básico bem feito. E o básico pega 80% do resultado.

Meta tags: o mínimo que toda página precisa

Title e Description

<title>Título da Página | Nome da Empresa</title>
<meta name="description" content="Descrição clara do conteúdo em até 160 caracteres">

O <title> aparece em dois lugares: na aba do navegador e no resultado do Google (o texto azul clicável). A description aparece como resumo abaixo do título no Google.

Se você não define, o Google inventa baseado no conteúdo da página. E geralmente inventa mal. Puxa um trecho aleatório que pode não fazer sentido fora de contexto.

Regras práticas:

Título com 50-60 caracteres. Mais que isso, Google corta com ”…”
Descrição com 140-160 caracteres. Longa demais, corta. Curta demais, desperdiça espaço
Cada página precisa de título e descrição únicos. Copiar o mesmo texto em todas as páginas é tão ruim quanto não ter
Keyword principal no título e na descrição. Se a página é sobre “veterinária em Ribeirão Preto”, essas palavras precisam estar no title

Na Laura Nasralla, o title é “Veterinária em Ribeirão Preto | Dra. Laura Nasralla”. Curto, com keyword local, e com o nome da profissional. No Google, quem pesquisa “veterinária Ribeirão Preto” vê exatamente o que procura.

Open Graph

Pra quando alguém compartilha o link no WhatsApp, LinkedIn, Twitter ou Facebook:

<meta property="og:title" content="Título">
<meta property="og:description" content="Descrição">
<meta property="og:image" content="/og-image.png">
<meta property="og:type" content="website">
<meta property="og:url" content="https://seusite.com/pagina">

Sem og:image, o preview do link fica sem imagem. No WhatsApp, um link sem imagem parece spam. Um link com imagem bem feita parece profissional.

A imagem OG ideal: 1200x630px, em PNG ou JPG. Coloca o logo, o nome da empresa e uma frase curta. Não precisa ser obra de arte. Precisa existir.

Dica: crie uma imagem OG genérica pro site e imagens específicas pra páginas importantes (home, cada serviço, cada post do blog). Ferramentas como Figma ou Canva fazem isso em minutos.

Heading hierarchy

<h1>Só um por página</h1>
  <h2>Seção principal</h2>
    <h3>Subseção</h3>
  <h2>Outra seção principal</h2>

H1 é o título da página. Um por página, sem exceção. H2 divide as seções principais. H3 subdivide. Não pule níveis (H1 direto pra H4 sem H2 e H3 no meio).

Google usa essa hierarquia pra entender a estrutura do conteúdo. Hierarquia bagunçada = Google não entende o que é mais importante na página. Resultado: ranqueia pior.

Erro comum: usar H1 em múltiplos lugares porque “a fonte é bonita”. Heading é semântica, não estilo. Quer fonte grande? Usa CSS. Quer hierarquia correta? Usa headings na ordem certa.

Schema.org: falar a língua do Google

JSON-LD no <head> que diz pro Google exatamente o que aquela página representa. É dado estruturado que o Google lê e usa pra montar os resultados de busca.

LocalBusiness (pra negócio local)

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Family Pilates e Fisioterapia",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Rua Exemplo, 123",
    "addressLocality": "Curitiba",
    "addressRegion": "PR",
    "postalCode": "80000-000",
    "addressCountry": "BR"
  },
  "telephone": "+5541999999999",
  "url": "https://familypilates.com.br",
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": "-25.4284",
    "longitude": "-49.2733"
  },
  "openingHours": "Mo-Fr 07:00-21:00"
}

Isso é o que faz o negócio aparecer no Google Maps e nos resultados locais. Na Laura Nasralla (veterinária em Ribeirão Preto), implementei LocalBusiness com coordenadas exatas e horário de funcionamento. Na Family Pilates, a mesma coisa pra Curitiba.

Dev que entrega site pra negócio local sem Schema.org LocalBusiness tá entregando trabalho incompleto. O cliente vai gastar R$ 3-5k com agência de SEO pra implementar o que deveria ter vindo no site.

Outros tipos úteis

Organization pra empresas que não são negócio local (SaaS, consultoria remota)
Article/BlogPosting pra posts de blog. Informa autor, data de publicação, data de atualização. Google usa pra mostrar data no resultado de busca
Product pra páginas de produto. Preço, disponibilidade, avaliações
FAQPage pra páginas com perguntas frequentes. Google pode mostrar as perguntas diretamente no resultado de busca (rich snippets)
BreadcrumbList pra navegação breadcrumb. Mostra o caminho no resultado de busca

Cada tipo é um JSON-LD diferente no <head>. Implementar leva minutos por tipo. O impacto nos resultados de busca pode ser grande: rich snippets (resultados expandidos) têm taxa de clique bem maior que resultados normais.

Sitemap e robots.txt

Sitemap.xml

Arquivo que lista todas as páginas do site pro Google. É um mapa que diz “essas são as páginas que existem, por favor indexe todas”.

No Astro, instala @astrojs/sitemap e ele gera automaticamente no build. Zero configuração manual.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>https://seusite.com/</loc></url>
  <url><loc>https://seusite.com/servicos</loc></url>
  <url><loc>https://seusite.com/cases</loc></url>
</urlset>

Depois de gerar, registra no Google Search Console. Vai em “Sitemaps”, cola a URL (geralmente https://seusite.com/sitemap.xml), e submete. Sem isso, o Google descobre as páginas por conta própria, mas pode demorar semanas.

robots.txt

User-agent: *
Allow: /
Sitemap: https://seusite.com/sitemap.xml

Arquivo na raiz do site que diz ao Google o que pode e o que não pode indexar. A versão acima é a mais comum: “indexe tudo, e aqui tá o sitemap”.

Se tem páginas que não devem ser indexadas (painel admin, página de staging, área de teste), adicione Disallow:

User-agent: *
Disallow: /admin
Disallow: /staging
Sitemap: https://seusite.com/sitemap.xml

Core Web Vitals: as métricas que o Google usa

Google não ranqueia só por conteúdo. Ranqueia por experiência. E mede experiência com três métricas:

LCP (Largest Contentful Paint)

Quanto tempo leva pro maior elemento visível da página carregar. Geralmente é a imagem hero ou o bloco de texto principal. A meta é menos de 2.5 segundos.

O vilão comum é imagem hero de 3 MB sem otimização, fonte bloqueando renderização, servidor lento. Resolve com otimização de imagens, font-display: swap e hospedagem com CDN.

INP (Interaction to Next Paint)

Quanto tempo o browser leva pra responder quando o usuário clica, toca ou digita. Mede responsividade. A meta é menos de 200ms.

O vilão comum é JavaScript pesado bloqueando a main thread, framework inteiro hidratando no carregamento. Resolve com menos JavaScript, defer/async em scripts e Astro em vez de React pra sites estáticos.

CLS (Cumulative Layout Shift)

Quanto o layout “pula” durante o carregamento. Aquele efeito de clicar num botão e ele se mover porque uma imagem carregou em cima. A meta é menos de 0.1.

O vilão comum é imagem sem width/height definidos, fonte que carrega tarde e muda tamanho do texto, banner de cookies que empurra conteúdo. Resolve com dimensões explícitas em todas as imagens e iframes, font-display: swap com preload e banner fixo que não empurra layout.

SSG vs SSR vs SPA: impacto no SEO

A escolha de stack impacta diretamente como o Google vê seu site.

SSG (Static Site Generation) gera HTML no build. Melhor pra SEO. Google recebe HTML pronto e indexa imediatamente. Astro faz isso nativamente.

SSR (Server-Side Rendering) gera HTML a cada request no servidor. Bom pra SEO (Google recebe HTML), mas mais lento que SSG porque gera na hora. Next.js faz isso.

SPA (Single Page Application) renderiza tudo no cliente via JavaScript. O HTML inicial é quase vazio. Google precisa executar JavaScript pra ver o conteúdo, e nem sempre faz isso. React puro (Create React App, Vite) gera SPA.

Se SEO é prioridade, SSG é a melhor opção. Se precisa de dados dinâmicos por request (preço personalizado, conteúdo por região), SSR. SPA só pra webapps onde SEO não importa (dashboards, painéis internos).

É por isso que o AutoPars (SPA React) precisou de uma LP separada em Astro. O marketplace é SPA porque precisa de interatividade. A LP é SSG porque precisa de SEO. Cada parte na stack certa.

Canonical URL

<link rel="canonical" href="https://seusite.com/pagina">

Diz pro Google qual é a URL “oficial” daquela página. Importante quando a mesma página pode ser acessada por URLs diferentes (com e sem www, com e sem barra no final, com parâmetros de UTM).

Sem canonical, o Google pode entender que são páginas diferentes e dividir a autoridade entre elas. Com canonical, toda a autoridade fica concentrada na URL que você definiu.

Checklist de entrega

Isso leva menos de uma hora num site Astro. Tudo que listei é configuração no <head> e no build. Não é trabalho extra. É trabalho que faz parte da entrega.

É a diferença entre primeira página do Google e quinta. Entre aparecer no Maps e não existir.