Português

English
Español
中文
हिन्दी
日本語
한국어

Português

English
Español
中文
हिन्दी
日本語
한국어

Appearance

Interactive coursesLearn by building 🚀 Hundreds of hours of interactive lessons, coding challenges, and projects across web, Python, and AI. Pause, tweak the code, and build along in the browser. See all courses
This page has been auto-translated and may contain errors.View in English

Metadados, SEO e redes sociais ​

docs.scrimba.com

Dois visitantes chegam à sua página sem nunca vê-la da forma como uma pessoa vê. Um é um mecanismo de busca decidindo se lista a página e o que diz sobre ela. O outro é uma plataforma social construindo o pequeno card de prévia que aparece quando alguém compartilha o link. Ambos leem um pequeno bloco de tags no <head>, não o conteúdo visível na tela. Este capítulo é sobre escrever esse bloco para que sua página apareça corretamente em um resultado de busca, uma aba do navegador e um link compartilhado.

Título e descrição ​

Toda página precisa de um <title>. É o texto mostrado na aba do navegador, em seus marcadores e como o título clicável quando a página aparece em uma lista de resultados de busca. Ele fica no head, e é uma linha curta:

html
<title>Massa azeda para iniciantes: seu primeiro pão, passo a passo</title>

Abaixo desse título em um resultado de busca geralmente há uma frase descrevendo a página. Isso vem da meta descrição, outra tag que você coloca no head:

html
<meta name="description" content="Receitas simples de massa azeda, desde misturar sua primeira massa até uma crosta dourada e crocante, com cronograma para cada etapa." />

Imagine um livro em uma prateleira. O título é impresso na lombada para você encontrá-lo, e a descrição é a sinopse na contracapa que ajuda você a decidir se abre.

O elemento <title> é obrigatório, e há exatamente um por documento. Ele faz três trabalhos: rotula a aba do navegador, é o nome padrão quando alguém marca a página, e é o título que um mecanismo de busca mostra para seu resultado. Escreva para um humano vasculhando uma lista, coloque as palavras distintivas primeiro, e mantenha em torno de 60 caracteres para não ser cortado com reticências.

A tag <meta name="description"> é a frase mostrada sob aquele título. Não é um fator de classificação, mas é seu argumento para a pessoa decidindo se clica, então seja específico e escreva uma diferente para cada página. Procure por volta de 150 a 160 caracteres. Se você deixar de fora, o mecanismo de busca escreve seu próprio resumo puxando um trecho do texto da página, e seu palpite raramente é tão bom quanto sua frase.

html
<title>Massa azeda para iniciantes: seu primeiro pão</title>
<meta name="description" content="Uma primeira massa azeda passo a passo, com cronogramas e uma solução para cada erro comum." />

O <title> é o texto mais forte que você controla completamente para o que um resultado diz na SERP (a página de resultados do mecanismo de busca, a lista de resultados que uma consulta retorna). Vale a pena tratar como copy, não como um rótulo: as palavras distintivas vêm primeiro, porque o fim fica truncado. A contagem de caracteres que todos citam é realmente um limite de largura em pixels de aproximadamente 600 pixels, então um título com caracteres largos é cortado mais cedo do que uma contagem sugere. Os mecanismos de busca também reescrevem títulos que julgam inúteis, por exemplo um que repete uma palavra para efeito ou não corresponde à consulta, então um título claro e preciso sobrevive mais vezes do que um inflado.

A descrição não é um fator de classificação. Seu trabalho inteiro é taxa de cliques, a proporção de pessoas que veem seu resultado e clicam nele, e uma descrição mais clara aumenta essa proporção. Duas regras de produção importam mais do que comprimento. Primeiro, cada página tem seu próprio título e descrição; enviar um único par global em um site inteiro baseado em templates significa resultados quase idênticos que competem entre si e parecem genéricos. Segundo, em um site que constrói páginas a partir de dados, gere ambos a partir dos próprios campos da página em vez de uma string fixa, então uma página de produto nomeia seu produto e uma página de receita nomeia sua receita.

JunoTítulo e descrição O <title> é seu rótulo de aba e o título que as pessoas clicam em resultados de busca, então deixe claro. O <meta name="description"> é a sinopse abaixo. Ambos vivem no head, e dar a cada página seu próprio par exigiu muito menos esforço do que esperava para o quanto ajuda.
JunoTítulo e descrição Um <title> por página, palavras distintivas primeiro, cerca de 60 caracteres. A descrição não afeta classificação, apenas ganha o clique, então escreva uma específica por página em vez de uma linha global. Deixe de fora e o mecanismo inventa um trecho que você não escolheu.
JunoTítulo e descrição O título é o texto de resultado mais forte que você controla, e é truncado por largura de pixel, não contagem de caracteres, então coloque as palavras distintivas na frente. Descrição é taxa de cliques, não classificação. A armadilha real em um site baseado em template é um par global em cada página; gere ambos por página a partir dos próprios dados da página.

Charset e viewport, revisitados ​

O esqueleto em Sua primeira página HTML abria com duas meta tags que são rápidas de copiar e esquecer. Vale a pena uma segunda olhada, porque ambas mudam como a página é lida e renderizada antes de qualquer conteúdo aparecer.

A primeira tag é a codificação de caracteres:

html
<meta charset="UTF-8" />

Ela diz ao navegador qual alfabeto as letras estão escritas, então caracteres acentuados, aspas curvas e emoji aparecem corretamente em vez de virar símbolos estranhos. Sempre use UTF-8; cobre cada idioma e cada emoji.

A segunda tag é o viewport, e faz a página caber em uma tela de telefone:

html
<meta name="viewport" content="width=device-width, initial-scale=1" />

Sem ela, um telefone assume que a página foi construída para um desktop largo e encolhe tudo até o texto ficar pequeno demais para ler. Com ela, a página combina com a largura do dispositivo. Pense nisso como dizer ao navegador o tamanho real do papel que está imprimindo.

<meta charset="UTF-8"> define a codificação de caracteres, o mapeamento dos bytes brutos do arquivo para os caracteres que eles representam. Tem que aparecer cedo, dentro dos primeiros 1024 bytes do documento e como a primeira coisa no head, porque o analisador precisa saber a codificação antes de decodificar o texto que segue. UTF-8 é a única resposta que você deve usar; codifica cada caractere em cada idioma.

<meta name="viewport" content="width=device-width, initial-scale=1"> é o que torna uma página responsiva em telefones. width=device-width combina a largura de layout da página com a largura do dispositivo, e initial-scale=1 a abre no zoom normal em vez de afastado. Deixe esta tag de fora e navegadores móveis voltam a assumir um layout de desktop de aproximadamente 980 pixels, depois escalam para caber. Não adicione user-scalable=no ou um maximum-scale para travar o zoom; impede que as pessoas façam pinça para ampliar o texto, no qual muitos leitores confiam.

A declaração de charset existe porque a análise é um problema de dois estágios: o navegador tem um fluxo de bytes e precisa de uma codificação para transformá-los em caracteres. Se a codificação é declarada tarde, ou entra em conflito com o que o analisador adivinhou dos primeiros bytes, o navegador pode descartar seu trabalho e reanalizar do topo sob a codificação correta, um pequeno custo que você evita colocando <meta charset="UTF-8"> primeiro. Se a resposta também carrega um charset em seu cabeçalho HTTP Content-Type, o cabeçalho vence, mas você ainda inclui a meta tag para que o arquivo esteja correto quando salvo ou servido sem esse cabeçalho. UTF-8 é o padrão estabelecido da web; qualquer outra coisa é uma situação legada para migrar.

A tag de viewport é o interruptor entre dois modos de renderização. Sem ela um navegador móvel renderiza em um canvas virtual largo (historicamente cerca de 980 pixels CSS) e escala o resultado, que é por que uma página sem tags fica parecendo um desktop encolhido. width=device-width vincula o viewport de layout ao dispositivo, que é a pré-condição para qualquer CSS responsivo se comportar. Suprimir zoom com user-scalable=no ou um maximum-scale baixo é uma falha de acessibilidade: é chamado na WCAG (as Diretrizes de Acessibilidade de Conteúdo Web, a referência padrão para conteúdo web acessível, coberto em Acessibilidade) porque bloqueia pessoas de ampliar o texto que não conseguem ler de outra forma.

JunoCharset e viewport, revisitados<meta charset="UTF-8"> impede que letras acentuadas e emoji virem gibis, então sempre inclua. A linha de viewport faz a página caber em um telefone em vez de encolher para um desktop minúsculo. Duas tags que você copia uma vez e raramente toca novamente, mas pulá-las aparece rápido.
JunoCharset e viewport, revisitados Charset vai primeiro no head, dentro dos primeiros 1024 bytes, porque o analisador precisa da codificação antes de ler o texto. Use UTF-8, nada mais. A tag de viewport com width=device-width é o que torna CSS responsivo funcionar em telefones, e nunca desabilite zoom, as pessoas confiam nisso.
JunoCharset e viewport, revisitados Declare o charset cedo ou o navegador pode reanalizar do topo quando seu palpite estava errado; o cabeçalho HTTP vence se presente, mas mantenha a meta tag como fallback. A tag de viewport vincula o layout ao dispositivo, em que todo layout responsivo depende. Travar zoom com user-scalable=no falha em WCAG, então deixe de fora.

Open Graph e cards de redes sociais ​

Quando você cola um link em um chat ou em um post de rede social, um pequeno card de prévia geralmente aparece com uma imagem, um título e uma linha de texto. Esse card não é a plataforma adivinhando. A página entrega a ela a imagem e as palavras para mostrar, usando um conjunto de tags chamadas Open Graph no head:

html
<meta property="og:title" content="Massa azeda para iniciantes" />
<meta property="og:description" content="Seu primeiro pão, passo a passo." />
<meta property="og:image" content="https://escoladepao.example/pao.jpg" />

Note que estas usam property onde a tag de descrição anterior usou name. Essa é a forma que as tags Open Graph tomam; copie o padrão e mude as palavras e o endereço da imagem. Pense nisso como empacotar uma pequena prévia na página, pronta para sempre que alguém a compartilhar.

Open Graph é um vocabulário compartilhado de meta tags que descrevem uma página como um objeto compartilhável. Começou no Facebook e agora é lido por quase todas as plataformas que mostram prévias de links. As tags usam property="og:..." e os essenciais são cinco:

html
<meta property="og:title" content="Massa azeda para iniciantes" />
<meta property="og:description" content="Seu primeiro pão, passo a passo, com cronogramas." />
<meta property="og:image" content="https://escoladepao.example/pao.jpg" />
<meta property="og:url" content="https://escoladepao.example/massa-azeda" />
<meta property="og:type" content="article" />

Twitter, agora X, lê suas próprias tags twitter: mas volta para as de Open Graph, então você só precisa adicionar a peça que muda o layout:

html
<meta name="twitter:card" content="summary_large_image" />

Isso lhe dá o card de imagem grande em vez da miniatura pequena. Faça o og:image em torno de 1200 por 630 pixels para que preencha o card limpar, e verifique seu resultado no depurador de prévia de link próprio de uma plataforma antes de confiar nele.

O público para essas tags é um raspador social: um bot que uma plataforma executa quando um link é postado, que busca a página, lê apenas o head, e não rola, clica ou geralmente executa JavaScript. Tudo sobre como você escreve Open Graph segue disso. O og:image deve ser uma URL absoluta, incluindo o https:// e domínio, porque um caminho relativo como /pao.jpg não tem contexto de página para resolver quando um raspador remoto o lê. As tags usam o atributo property em vez de name porque Open Graph é definido em RDFa, um padrão antigo para incorporar dados estruturados em markup; o resultado prático é apenas que tags og: usam property e você não deve "corrigir" para name.

Duas realidades de produção pegam as pessoas. Primeiro, plataformas armazenam em cache o card que rasparam, então editar suas tags não atualiza um link já compartilhado até você forçar uma re-raspagem através do depurador da plataforma. Segundo, porque a maioria dos raspadores não executa JavaScript, tags Open Graph injetadas no cliente por um app de página única geralmente não são vistas; o card volta para um título vazio ou nada. Se suas páginas são construídas por JavaScript, a correção é renderizar o head no servidor para que as tags estejam presentes na primeira resposta que o raspador lê. Essa é a mesma restrição que molda o rastreamento, coberto na próxima seção.

JunoOpen Graph e cards de redes sociais O card de prévia que aparece quando você compartilha um link vem de tags Open Graph no head: og:title, og:description e og:image. Eles usam property em vez de name, o que parece estranho no começo mas é como são escritos. Defina-os e seus links param de aparecer vazios.
JunoOpen Graph e cards de redes sociais Cinco tags Open Graph cobrem: og:title, og:description, og:image, og:url, og:type. Adicione twitter:card definido como summary_large_image para a imagem grande, e dimensione a imagem em torno de 1200 por 630. Sempre verifique o card no depurador de uma plataforma antes de confiar nele.
JunoOpen Graph e cards de redes sociais Raspadores leem apenas o head, não pegam JavaScript, e precisam de URLs de imagem absolutas, então um og:image relativo falha silenciosamente. Plataformas armazenam em cache o card, então uma mudança precisa de uma re-raspagem forçada em seu depurador. E tags renderizadas no cliente muitas vezes nunca são vistas, que é por que um app JavaScript tem que renderizar o head no servidor.

O pequeno ícone na aba do navegador, ao lado do título da página, é o favicon. É como alguém identifica sua aba entre uma dúzia de outras. Você adiciona um com uma tag <link> no head:

html
<link rel="icon" href="/favicon.png" />

A parte rel="icon" diz ao navegador que este arquivo é o ícone da página, e href aponta para a imagem. Uma pequena imagem quadrada, em torno de 32 por 32 pixels, é suficiente. É um pequeno toque, e faz um site parecer terminado.

O elemento <link> conecta sua página a um arquivo relacionado, e o atributo rel diz o que esse arquivo é. O favicon usa rel="icon", e um PNG ou SVG moderno é uma escolha melhor do que o formato antigo .ico. Adicione também um ícone de toque da Apple, que é a imagem que o iOS usa quando alguém salva seu site na tela inicial:

html
<link rel="icon" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Um <link> a mais merece seu lugar aqui: a URL canônica. Quando a mesma página é acessível em mais de um endereço, por exemplo com e sem uma barra final ou com parâmetros de rastreamento no fim, rel="canonical" nomeia o único endereço que você quer que seja tratado como o real:

html
<link rel="canonical" href="https://escoladepao.example/massa-azeda" />

Isso diz aos mecanismos de busca creditar todos os duplicados para aquela URL única em vez de dividir o status da página entre eles.

O atributo rel é uma palavra-chave de relacionamento: ele afirma o que o recurso vinculado é para este documento, que é por que um elemento cobre ícones, canônicos, stylesheets e precargas. Para ícones, navegadores aceitam vários e escolhem por tamanho e formato; um ícone SVG dimensiona para qualquer exibição sem um arquivo separado por tamanho, com um fallback PNG para navegadores antigos. O legado favicon.ico é um formato multi-resolução mantido para compatibilidade e não é mais o formato para alcançar primeiro.

O link canônico é o com consequências reais de classificação, então vale a pena acertá-lo exatamente. Ele consolida equity de link, o valor de classificação passado junto por links apontando para uma página, na URL que você nomeia, em vez de espalhá-lo entre endereços duplicados. A boa prática é um canônico auto-referenciador em cada página (cada página nomeia seu próprio URL limpo), que remove ambiguidade quando parâmetros ou caminhos alternativos aparecem. O modo de falha é apontar o canônico para a página errada: um template que fixa um canônico em toda uma seção diz aos mecanismos de busca que cada página nela é uma cópia de uma, e o resto sai do índice. Outros valores de rel como preload e preconnect são dicas de desempenho que buscam ou aquecem uma conexão a um recurso cedo; eles pertencem a uma discussão de velocidade de página em vez de desta, então trate-os como um apontador, não uma tarefa aqui.

JunoFavicons e outras tags de link O favicon é o pequeno ícone na aba do navegador, adicionado com <link rel="icon"> e uma pequena imagem quadrada. É uma coisa minúscula que faz um site parecer terminado. A tag <link> no head é como você aponta uma página para arquivos extras como este.
JunoFavicons e outras tags de link Use rel="icon" com um PNG ou SVG em vez do `.ico` antigo, e adicione um apple-touch-icon para salvo na tela inicial. O link canônico, rel="canonical", nomeia o endereço real quando uma página é acessível em vários, para que os mecanismos de busca creditem uma URL em vez de dividi-lo.
JunoFavicons e outras tags de linkrel é uma palavra-chave de relacionamento, que é por que um elemento lida com ícones, canônicos e precargas. Um ícone SVG dimensiona sem um arquivo por tamanho. O canônico é o de alto risco: um canônico auto-referenciador por página é seguro, mas um template apontando cada página para uma URL tira o resto do índice.

Noções básicas de rastreabilidade ​

Os mecanismos de busca enviam programas que visitam páginas web, as leem, e as adicionam a uma lista grande para que as pessoas as encontrem depois. Esse programa é um crawler, e a maioria das vezes você quer que ele faça seu trabalho e você não faz nada especial. Se você tem uma página que prefere manter fora da busca, um rascunho ou uma página de obrigado privada, você diz isso com uma meta tag de robots:

html
<meta name="robots" content="noindex" />

noindex significa "por favor, não liste esta página em resultados de busca." Imagine o crawler como um bibliotecário andando pelas prateleiras e catalogando cada livro; esta tag é uma nota pedindo ao bibliotecário pular este.

Um crawler lê seu HTML, segue os links que encontra para alcançar mais páginas, e indexa o conteúdo para que possa servir em resultados. Você o orienta com a meta tag de robots. noindex mantém uma página fora de resultados, e nofollow diz ao crawler para não passar nenhum crédito de classificação através dos links na página:

html
<meta name="robots" content="noindex, nofollow" />

Não confunda isso com robots.txt, um arquivo separado na raiz do seu site que controla quais páginas um crawler é permitido buscar. A meta tag controla indexação de uma página que o crawler já alcançou; o arquivo controla acesso.

Pule a tag antiga <meta name="keywords"> inteiramente. Ela uma vez deixou páginas listar suas próprias palavras-chave, mecanismos de busca pararam de confiar nela muitos anos atrás, e ela não faz nada hoje. O que realmente ajuda uma página a se classificar é construção ordinária boa: um título claro, headings reais, HTML semântico que noma cada parte da página, texto de link descritivo, e uma página que carrega rapidamente.

Ajuda separar três passos que um mecanismo de busca toma, porque tags atuam em diferentes. Rastrear é buscar a página. Indexar é armazená-la e entendê-la depois. Classificar é ordená-la contra outras páginas para uma consulta dada. A meta tag de robots com noindex atua em indexação; robots.txt atua em rastreamento; um cabeçalho HTTP X-Robots-Tag pode aplicar as mesmas regras de indexação a arquivos não-HTML como PDFs. O erro clássico é bloquear uma página em robots.txt e também adicionar noindex a ela: o crawler não é permitido buscar a página, então nunca vê o noindex, e a URL pode ficar em resultados sem descrição. Se você quer uma página fora do índice, deixe-a ser rastreada e deixe o noindex ser lido.

Crawlers modernos renderizam JavaScript, mas em um atraso e dentro de um orçamento limitado, então conteúdo que só aparece depois de uma busca no lado do cliente é indexado lentamente ou não; a resposta confiável é renderizar no servidor qualquer coisa que deve ser encontrada. Para descrever uma página em uma forma que um mecanismo de busca possa usar diretamente, adicione dados estruturados, fatos legíveis por máquina sobre a página. O jeito padrão é um bloco JSON-LD, dados estruturados escritos em JSON usando o vocabulário Schema.org, colocado no head ou body dentro de uma tag <script type="application/ld+json">:

json
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Massa azeda para iniciantes",
  "totalTime": "PT24H",
  "recipeYield": "1 pão"
}

Isso não aumenta sua classificação por si só; torna uma página elegível para resultados ricos, as listagens melhoradas com estrelas, preços, ou detalhes de receita que se destacam na SERP. Quanto à classificação em si, a maioria do que as pessoas afiam é mito. A meta tag keywords tem sido ignorada desde cerca de 2009. Repetir uma palavra-chave para parecer mais relevante é detectado e funciona contra você. A descrição não é um fator de classificação. O que consistentemente vence é conteúdo que responde à consulta, markup semântico que torna a estrutura legível, links de outros sites, e uma página que é rápida e estável para carregar. As tags neste capítulo tornam uma página apresentável e corretamente entendida; não substituem a página sendo digna de classificação.

JunoNoções básicas de rastreabilidade Os mecanismos de busca usam crawlers para visitar páginas e adicioná-las a sua lista, e geralmente você deixa eles seguirem. Para manter uma página de fora, adicione <meta name="robots" content="noindex">. Esse é o principal botão que você sempre alcançará neste estágio, então sem necessidade de se preocupar com o resto ainda.
JunoNoções básicas de rastreabilidade A meta tag de robots controla indexação (noindex, nofollow); o arquivo robots.txt separado controla rastreamento. A meta tag keywords antiga está morta, então ignore-a. Classificação real vem de um título claro, HTML semântico, bons links, e uma página rápida, não de uma tag mágica.
JunoNoções básicas de rastreabilidade Rastrear, indexar e classificar são três passos, e as tags atuam em diferentes. A armadilha é bloquear uma página em robots.txt e adicionar noindex, já que o crawler nunca busca a página para ler a tag. JSON-LD ganha resultados ricos, não um impulso de classificação. Meta keywords está morta; conteúdo e semântica são o que realmente vence.