<meta> tags em <head> fornecem metadados sobre a página — codificação de caracteres, comportamento de viewport, descrições SEO e visualizações de compartilhamento social. Não são renderizadas, mas lidas por navegadores, motores de busca e plataformas sociais.
charset garante que o texto (especialmente não-ASCII) seja decodificado corretamente. Coloque-o primeiro.viewport é o que torna um site responsivo em mobile — sem ele, telefones renderizam com uma largura falsa de 980px e fazem zoom out, quebrando seu CSS responsivo.<title>Page Title — 50–60 chars</title>
<meta name="description" content="Summary shown in search results, ~150 chars" />
<link rel="canonical" href="https://site.com/page" /> <!-- avoid duplicate-content penalties -->
O <title> e description são o que aparece nos resultados do Google, portanto impulsionam cliques. canonical diz aos motores de busca a URL autoritária.
<meta property="og:title" content="Shareable title" />
<meta property="og:description" content="Shown when shared" />
<meta property="og:image" content="https://site.com/preview.jpg" />
<meta property="og:url" content="https://site.com/page" />
<meta name="twitter:card" content="summary_large_image" />
Estas controlam o card que aparece quando seu link é compartilhado no Facebook, LinkedIn, Slack, X, etc. — sem elas você obtém uma visualização feia ou vazia.
charset e viewport são inegociáveis para renderização correta e responsividade mobile; title/description/canonical impulsionam SEO; tags Open Graph controlam como seus links aparecem quando compartilhados.
Juntas elas formam a camada de metadados que faz uma página renderizar corretamente, rankear bem e compartilhar bem.