Meta tags que importam
Um link compartilhado que aparece sem preview, ou uma página que abre minúscula no celular, quase sempre é um problema de meta tag ausente, não de design.
Estudar esta lição interativa →Duas cenas comuns: alguém compartilha o link do seu site no WhatsApp e aparece um preview genérico, sem título nem imagem; ou alguém abre a mesma página no celular e ela vem toda minúscula, como se fosse uma versão reduzida de tela de computador. Nos dois casos, o problema quase nunca é de design, é a ausência de meta tags específicas dentro do <head>.
viewport
Diz ao navegador do celular para usar a largura real da tela, em vez de simular uma tela de desktop reduzida. Sem ela, a página abre minúscula no celular, o bug de mobile mais clássico que existe.
description
O texto que aparece embaixo do título nos resultados de busca do Google. Vale escrever uma frase clara sobre o que a página oferece.
og:title / og:description / og:image
As tags Open Graph controlam o preview que aparece ao compartilhar o link em redes sociais e apps de mensagem (WhatsApp, Twitter/X, LinkedIn).
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. As meta tags não aparecem visualmente na página; o script abaixo as lê e mostra na tela só para você enxergar o que está lá.
Estas tags não são teoria distante: o próprio programandoai, a plataforma onde você está estudando agora, usa exatamente esse conjunto no seu <head>, incluindo viewport, description e as tags Open Graph, para garantir que a página funcione bem no celular e que um link compartilhado mostre um preview decente. É o mesmo padrão, em produção, agora mesmo.
Esquecer a viewport é o erro mais grave dos três, ele quebra a experiência inteira em celular, não só um detalhe visual. Uma description longa demais (o Google costuma truncar por volta de 155-160 caracteres) desperdiça a parte final da frase, que nunca aparece. E esquecer o og:image faz o preview em redes sociais aparecer sem nenhuma imagem, ou com uma escolhida ao acaso pela rede social, fora do seu controle.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione a meta description.