Capítulo 14

SEO, metadados e analytics

8 min de leitura 1.394 palavras 2 gravuras

Este capítulo ensina a deixar cada página da Oficina Costeira fácil de encontrar, de entender e de descrever. A Oficina Costeira é um coletivo fictício de design em João Pessoa. Os nomes, os projetos e as datas existem só para estudo.

O exemplo está em exemplos/14-seo-metadados/. Este volume tem 52 capítulos. Estude na ordem numérica.

O ciclo de estudo é o mesmo de sempre: ler, copiar, mudar uma coisa, prever, recarregar, conferir. Não publique esta pasta. Não crie conta de estatística para fazer o exercício.

O que você vai aprender

Entender SEO como conteúdo honesto, não como truque.
Escrever title e meta description únicos por página.
Marcar o que o buscador pesa: títulos, primeiro parágrafo, links e alt.
Preparar sitemap.xml, robots.txt e humans.txt.
Acrescentar Open Graph e um bloco JSON-LD simples.
Tratar analytics como conceito, sem rastrear ninguém de verdade.

Conteúdo honesto primeiro

SEO é a sigla em inglês para otimização para mecanismos de busca. Na prática, é ajudar a pessoa e o buscador a entenderem a mesma página.

O buscador não “gosta” de truque. Ele lê o HTML, segue links e compara o que você promete com o que a página entrega. Texto útil, hierarquia clara e endereço estável pesam mais do que repetir a mesma palavra dez vezes.

A Oficina Costeira fala de cartazes, oficinas na orla e identidade visual. Escreva isso em português corrente. Não encha a página de “melhor agência João Pessoa João Pessoa João Pessoa”.

O que costuma ajudar:

texto natural, com as palavras que a visitante usaria;
mais conteúdo do que marcação vazia;
um h1 por página e subtítulos na ordem;
o primeiro parágrafo dizendo o que a página é;
páginas públicas, sem login e sem depender de JavaScript para existir;
endereços com palavras (projetos.html, não p1.html);
site rápido e servido com HTTPS quando for a público.

Nada disso exige conta paga. O exemplo deste volume já tem lang="pt-BR" e um título por arquivo.

Título da aba e descrição

O title vira o link grande no resultado da busca. A meta description pode virar o texto embaixo. O buscador pode ignorar a descrição e citar o primeiro parágrafo. Mesmo assim, escreva as duas.

Na home, coloque o nome do coletivo primeiro. Depois um recorte curto. Cidade só quando fizer sentido, como neste site fictício.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Oficina Costeira · Design gráfico na orla · João Pessoa</title>
    <meta name="description" content="Coletivo fictício de design em João Pessoa. Cartazes, identidade e oficinas de estudo.">
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <h1>Oficina Costeira</h1>
    <p>Coletivo fictício de design gráfico em João Pessoa. Este site cresce a cada capítulo.</p>
  </body>
</html>

Nas internas, inverta: o assunto da página vem primeiro, o nome do site depois.

<title>Projetos · Oficina Costeira</title>
<meta name="description" content="Cartazes e identidades fictícias da Oficina Costeira, em João Pessoa.">

Cada página precisa de título e descrição próprios. Copiar o mesmo title em cinco arquivos faz o buscador tratar tudo como a mesma coisa.

A descrição cabe em cerca de 150 caracteres. Diga o que a página entrega. Não use a frase “clique aqui” nem lista de palavras soltas.

O separador do título pode ser um ponto médio (·) ou um traço. O importante é a ordem: o que a pessoa buscou aparece cedo.

Resumo dos conceitos: title, description, canonical

O que o buscador pesa na página

Além do head, o HTML visível também conta. Algumas tags carregam mais peso do que um div qualquer.

title — o mais importante.
meta name="description" — candidato a resumo.
h1, h2, h3 — o mapa da página.
Primeira linha do primeiro p.
Texto dos links (a).
alt das imagens.
strong e em com parcimônia.

O h1 da home é “Oficina Costeira”. Em projetos.html o h1 é “Projetos”. Não repita o mesmo h1 em todas as páginas.

O primeiro parágrafo precisa fazer sentido sozinho. Se a descrição sumir do resultado, esse parágrafo pode aparecer no lugar.

O texto do link descreve o destino. “Saiba mais” cinco vezes não diz nada. Prefira “Ver a agenda de setembro” ou use aria-label quando o visual for curto.

alt classifica a imagem para quem não a vê e para o buscador de imagens. alt="imagem" não descreve. alt="" só vale se a foto for enfeite e o texto ao lado já disser o mesmo.

Erro comum: encher keywords no meta. Os buscadores atuais ignoram essa lista. Escreva as palavras no conteúdo de verdade.

Sitemap, robots e humans

Três arquivos de texto na raiz do domínio ajudam o robô e a pessoa.

sitemap.xml lista as URLs que existem. Em um site pequeno você pode escrever na mão. Em um site grande, um gerador faz o arquivo. O endereço típico é https://exemplo.invalid/sitemap.xml. Neste volume o domínio é inventado.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://oficina-costeira.invalid/</loc>
    <changefreq>monthly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://oficina-costeira.invalid/projetos.html</loc>
  </url>
</urlset>

robots.txt diz o que o robô pode ou não percorrer. Também aponta o mapa. Não use Disallow para esconder segredo: o arquivo é público.

Sitemap: https://oficina-costeira.invalid/sitemap.xml

User-Agent: *
Disallow:

Disallow: vazio significa “não bloqueie nada”. Se o arquivo não existir no site publicado, o servidor responde 404 e o relatório de rastreamento enche de erro.

humans.txt é opcional. É um crédito para quem lê o código. Como os capítulos deste volume não levam nome de autor, o arquivo do exemplo pode listar só o coletivo fictício e as ferramentas.

/* Equipe */
Oficina Costeira — João Pessoa (conteúdo fictício)

/* Tecnologia */
HTML, CSS, servidor em 127.0.0.1

Compartilhar: Open Graph

Quando alguém cola o endereço num aplicativo, o cartão de prévia costuma nascer das tags Open Graph. Quatro delas são o mínimo.

<head>
  <meta charset="utf-8">
  <title>Agenda · Oficina Costeira</title>
  <meta name="description" content="Oficinas fictícias na orla de João Pessoa, em setembro.">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Agenda · Oficina Costeira">
  <meta property="og:url" content="https://oficina-costeira.invalid/agenda.html">
  <meta property="og:image" content="https://oficina-costeira.invalid/assets/imagens/marca.svg">
  <meta property="og:site_name" content="Oficina Costeira">
  <meta property="og:description" content="Oficinas fictícias na orla de João Pessoa, em setembro.">
  <meta property="og:locale" content="pt_BR">
  <link rel="stylesheet" href="assets/stylesheets/main.css">
</head>

og:title e og:description repetem o que já está no title e na description. og:url é o endereço canônico daquela página. og:locale usa underscore: pt_BR.

A imagem precisa de URL absoluta quando o site for público. No estudo local, o cartão de rede social não abre de verdade. O exercício é a marcação.

Cartões de microblog reaproveitam o Open Graph. Um extra comum é twitter:card com valor summary. Não precisa de conta para escrever a tag.

Microdados no HTML (itemscope, itemtype, itemprop) ainda existem. Primeiro acerte as tags semânticas. Depois, se quiser, acrescente Schema. JSON-LD no fim da página costuma ser mais fácil de manter.

Resumo dos conceitos: canonical, description, title

JSON-LD sem inventar dado real

JSON-LD é um bloco de dados ligados. Vive num script com type="application/ld+json". O visível na página precisa dizer a mesma coisa. Se o bloco inventar nota, preço ou endereço que o HTML não mostra, o buscador pode ignorar.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Oficina Costeira",
  "description": "Coletivo fictício de design gráfico em João Pessoa.",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "João Pessoa",
    "addressRegion": "PB",
    "addressCountry": "BR"
  }
}
</script>

Não coloque telefone, e-mail pessoal nem CNPJ. O projeto é fictício. Organização e página web bastam para o estudo.

Geotag no head (geo.placename) é opcional. Útil para um ateliê físico. Aqui o lugar é João Pessoa, conteúdo inventado.

Analytics é conceito, não conta

Analytics é o conjunto de números sobre visitas. Ajuda a decidir o que reescrever. Não substitui conversar com a pessoa.

Números típicos, só para você reconhecer o vocabulário:

visitas e visitantes distintos;
páginas vistas;
tempo na página;
taxa de rejeição (entrou e saiu na mesma página);
origem (busca, link, digitou o endereço);
navegador e tamanho de tela.

Nada disso exige colar um script de terceiros neste volume. Muitos provedores mostram logs no próprio servidor. Extensões de privacidade bloqueiam rastreadores. Respeite isso.

Não crie conta no Google Analytics, no Search Console nem em ferramenta de A/B para “completar” o capítulo. Não cole ID de medição. Não rastreie colega.

O que você pode fazer agora: título único, descrição única, h1 certo, alt honesto, sitemap de estudo e JSON-LD alinhado ao HTML.

Pare e experimente. Abra index.html e projetos.html. Troque só o title de projetos para o mesmo da home. Preveja: as duas abas ficam iguais. Recarregue e confira. Depois devolva o título próprio.

Atividades

Escreva o title da página equipe.html no padrão das internas.
Por que cada página precisa de meta description própria?
O que robots.txt com Disallow: vazio comunica ao robô?
Por que este volume pede para não criar conta de analytics?
O JSON-LD pode afirmar um endereço de rua que o HTML não mostra? Por quê?

Respostas comentadas

Algo como Equipe · Oficina Costeira. O assunto da página vem primeiro.
Cada URL precisa de um resumo diferente. Senão o resultado da busca parece cópia.
“Não bloqueie nenhum caminho.” O mapa ainda deve ser apontado na linha Sitemap.
O objetivo é a marcação. Conta de terceiros pede dado pessoal, script extra e não é necessária para estudar.
Não. O bloco precisa repetir o que a página já diz. Dado inventado no script é informação falsa.

Referências

O arquivo completo

Referência do exemplo 14-seo-metadados, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}