# O que são e como usar meta tags HTML do jeito certo Meta tags HTML (ou *meta code HTML*) são informações dispostas no cabeçalho (*header*) de uma página web, não ficando visíveis aos usuários. Por oferecerem orientações sobre a estrutura, o tipo, a função e a linguagem, as meta tags não afetam apenas a forma como uma página web é exibida e indexada, mas também a otimização para mecanismos de busca (SEO). ## O que são meta tags HTML? Meta tags são tags HTML essenciais para navegadores e mecanismos de busca **exibirem, interpretarem e indexarem sites**. Localizadas no cabeçalho das páginas, essas tags não ficam visíveis aos visitantes. Ao usar tags `` do jeito certo, desenvolvedores compartilham informações importantes com mecanismos de busca, como o idioma do site, o conteúdo, a estrutura e a codificação de caracteres. Em HTML, meta tags são fundamentais para **otimizar as páginas para os mecanismos de busca**, melhorando suas classificações e gerenciando a forma como o site é exibido em diferentes dispositivos. Embora os metadados não sejam mais tão críticos para as classificações como no passado, elementos essenciais como a [tag HTML title](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/title-html-titulo-html/) e as meta descrições continuam importantes. Dica Quer aprender mais sobre HTML? Confira nosso tutorial de HTML para iniciantes! ## Como meta tags HTML são usadas? Algumas formas de usar elementos meta em HTML: - **Otimização para os mecanismos de busca (SEO)**: Meta tags como `` e `` oferecem aos mecanismos de busca insights sobre o conteúdo e o foco de uma página, ajudando a resumi-la de forma clara para atrair mais cliques. - **Indexação**: Metadados como `robots` instruem os mecanismos de busca se devem indexar ou não uma página. - **Exibição e apresentação**: As meta tags apresentam orientações sobre a codificação de caracteres, exibição em dispositivos móveis e detalhes sobre atualizações ou redirecionamentos automáticos. - **Redes sociais**: As redes sociais usam meta tags específicas para assegurar que o conteúdo seja exibido corretamente quando compartilhado. - **Acessibilidade**: Metadados desempenham uma função essencial na acessibilidade. Por exemplo, eles auxiliam os leitores de tela na categorização e asseguram (usando a tag `viewport`) a exibição correta dos sites em diferentes dispositivos. ## Como meta tags HTML afetam a classificação de sites pelos mecanismos de busca? Hoje, os mecanismos de busca como o Google fazem **classificações muito específicas** com base em termos de pesquisa e perguntas dos usuários. No passado, os metadados tinham um impacto muito maior sobre a classificação de um site. No entanto, a capacidade de manipulá-los com facilidade resultava em diversos problemas, como a prática de *keyword stuffing*. Independentemente disso, os metadados e as meta tags HTML não perderam totalmente sua importância para os mecanismos de busca. Na verdade, o uso indevido de metadados pode fazer com que um site seja totalmente ignorado pelas ferramentas. A inclusão de metadados relevantes, como a tag `<title>` e meta descrições, e a realização de atualizações regulares é essencial para uma boa classificação das suas páginas. ## Sintaxe das meta tags HTML mais importantes Cada meta tag tem uma finalidade própria. Na seção a seguir, apresentamos um resumo das meta tags mais importantes. ### Otimização para mecanismos de busca (SEO) A otimização para os mecanismos de busca é uma das principais funções das tags `<meta>` em HTML. Estas são as meta tags **mais relevantes para o SEO**: #### Título (title) O elemento `<title>` oferece tanto aos mecanismos de busca quanto aos usuários uma visão geral do **tema da página**. Embora não seja tecnicamente uma meta tag, ele costuma ser mencionado como um fator importante, porque os mecanismos de busca o leem e o consideram um elemento-chave de classificação. Por se tratar de um elemento clicável nos mecanismos de busca, é essencial que o título seja claro e conciso para chamar a atenção dos usuários. É importante se certificar de que seu comprimento não ultrapasse os limites estabelecidos para que ele seja totalmente exibido. **Sintaxe**: ```html <title>Insira o título do documento aqui ``` #### Meta descrição Embora a meta descrição não influencie diretamente a classificação do site, ela serve como o **primeiro ponto de contato com os usuários**, apresentando as informações mais importantes que estimulam os cliques. É importante que elas não sejam curtas ou longas demais e incluam elementos como ícones ou símbolos, destacando termos relevantes ou um call to action (CTA) (CTA). **Sintaxe**: ```html ``` #### `robots` O atributo HTML `robots` oferece aos mecanismos de busca **instruções de SEO importantes relacionadas à indexação, links a serem seguidos, snippets e cache**: - `index`: A página pode ser indexada. - `noindex`: A página não deve ser indexada. - `follow`: Os rastreadores (*crawlers*) podem seguir os links na página. - `nofollow`: Os rastreadores não devem seguir os links na página. - `nosnippet`: O conteúdo não deve ser usado como um snippet em destaque. - `noarchive`: A versão da página armazenada em cache no Google não deve ser exibida. Se você não definir a meta tag `robots`, os mecanismos de busca entenderão que possuem sua **permissão para indexar, exibir snippets e seguir links**. Você também pode usar o arquivo robots.txt para gerenciar a indexação do seu site. Este é um **exemplo de código** de uma página que pode ser indexada e que permite que os rastreadores sigam seus links: ```html ``` #### `viewport` O atributo meta HTML `viewport` é essencial para um design responsivo. Embora a meta tag em si não tenha uma relevância imediata para SEO, a prática de mobile SEO é um fator-chave de classificação. O uso do atributo `viewport` informa aos mecanismos de busca que o seu site é *mobile-friendly* e foi projetado para ser exibido de forma responsiva em vários dispositivos. Ele também assegura que o site seja exibido corretamente em diferentes telas, aprimorando sua usabilidade geral. **Sintaxe**: ```html ``` ### Codificação de caracteres com `charset` A meta tag `charset` informa a codificação de caracteres aos navegadores, assegurando que o **texto seja exibido corretamente**. Isso é especialmente importante se você não definiu o conjunto de caracteres no cabeçalho HTTP ou se o navegador recuperar arquivos HTML diretamente do disco rígido em vez de HTTP(S). **Sintaxe**: ```html ``` ### Cache com `expires` Se você não quiser impedir completamente o armazenamento em cache, use a tag `expires` para especificar quando **os dados HTML em cache devem expirar**. A expiração pode ocorrer em um momento específico ou após um determinado período. No entanto, nas aplicações web modernas, a tag `expires` é raramente usada, já que o armazenamento em cache é majoritariamente controlado por cabeçalhos HTTP. **Sintaxe**: ```html ``` ### Informações sobre autoria e direitos autorais Para incluir **informações do autor e direitos autorais** no código-fonte, use as meta tags HTML `author` e `copyright`. Elas contribuem com o gerenciamento do site e trazem transparência sobre as alterações recentes que foram feitas em suas páginas. **Sintaxe**: ```html ``` ### Palavras-chave As palavras-chave **descrevem os principais focos de uma página**, idealmente alinhados com as intenções de pesquisa dos usuários. No passado, as palavras-chave meta eram consideradas critérios importantes para a classificação dos sites. Embora alguns setores e empresas continuem usando palavras-chave, a relevância desse tipo de metadados para as classificações em mecanismos de busca diminuiu significativamente, já que o Google passou a ignorá-lo para fins de SEO. Independentemente disso, manter-se atento às palavras-chave ainda pode oferecer às empresas uma vantagem competitiva. **Sintaxe**: ```html ``` This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/meta-tags-html/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/meta-tags-html/) for AI/LLM consumption.