O que são meta tags HTML e para que são usadas?
Forneça metadados úteis para o seu conteúdo da web e eleve a posição da sua pesquisa com meta tags.
Principais conclusões
- Meta tags fornecem informações vitais sobre uma página da web para mecanismos de pesquisa, navegadores e serviços da web.
- Os tipos essenciais incluem meta descrição, gráfico aberto, janela de visualização e tags HTTP equivalentes.
- Meta tags personalizadas oferecem flexibilidade, mas exigem documentação e planejamento cuidadosos.
Juntamente com o título da sua página e os scripts e folhas de estilo que ela usa, uma seção de cabeçalho HTML pode incluir metatags. Eles são vitais para SEO, acessibilidade e desempenho geral do site.
Aprenda como usar meta tags e descubra as informações que elas podem fornecer.
O que são metatags?
Meta tags são elementos que fornecem informações adicionais sobre uma página da web. Os navegadores não exibem esses metadados diretamente, mas qualquer ferramenta pode usá-los para diversos fins. Isso inclui mecanismos de pesquisa, navegadores e outros serviços da web.
Os dados que você fornece em meta tags ajudam a melhorar as classificações nos mecanismos de pesquisa, contribuem para a capacidade de resposta e acessibilidade do site e melhoram a exibição de suas páginas nas redes sociais.
Meta tags são tags de fechamento automático; não há porque eles não incluem nenhum conteúdo. Eles contêm todos os seus dados em atributos. Você pode adicionar meta tags à seção head do seu arquivo HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Este exemplo de padrão HTML contém duas metatags na seção head. Eles fornecem informações sobre o conjunto de caracteres (UTF-8) e a janela de visualização, respectivamente.
Metatags essenciais
A maioria das metatags usa uma combinação dos seguintes atributos para conter seus dados.
- nome econteúdo: o atributo name é como um rótulo, enquanto o atributo content armazena os dados associados a esse rótulo. Isso fornece um sistema flexível e extensível para armazenar quaisquer metadados necessários.
- propriedade: Este atributo às vezes é usado como uma alternativa ao nome e tem praticamente o mesmo propósito.
- http-equiv: Significa "equivalente a HTTP", este atributo define um cabeçalho HTTP para o valor especificado no atributo content.
- esquema: Este atributo, usado com nome, define o tipo de dados no atributo de conteúdo.
Você descobrirá que as meta tags a seguir são comumente suportadas por vários serviços da web e navegadores.
Tag de meta descrição
Este snippet de até 155 caracteres resume o conteúdo de uma página. Os mecanismos de pesquisa geralmente o exibem sob o título e o URL da página. É essencial fornecer uma descrição concisa e precisa para incentivar os usuários a clicar no link e visitar sua página.
<meta name="description" content="A brief description of your page">Metatags de gráfico aberto
O Facebook e outras plataformas de mídia social fazem uso significativo dessas tags. Eles usam as informações nessas tags para melhorar a apresentação dos links para sua página quando os usuários a compartilham. As metatags Open Graph incluem atributos como og:title, og:description e og:image:
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief description of your page">
<meta property="og:image" content="URL of a related image">Metatags de SEO
Essas tags fornecem informações para mecanismos de pesquisa e podem ajudar a melhorar a classificação da sua página. Eles também estão incluídos na lista de práticas recomendadas essenciais de SEO. Eles incluem atributos como robôs, autor e muito mais. Embora a importância dessas tags tenha diminuído com o tempo, ainda é essencial incluí-las em seu documento HTML.
<meta name="robots" content="index, follow">
<meta name="author" content="Your Name">Metatag da janela de visualização
A meta tag da janela de visualização é um elemento essencial no web design responsivo. Ele instrui o navegador a ajustar o layout da página da web de acordo com a largura do dispositivo, garantindo que o conteúdo seja exibido corretamente e legível em dispositivos móveis.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Meta tags HTTP equivalentes
Essas metatags são essenciais para controlar aspectos específicos de como navegadores e servidores processam páginas da web. Eles incluem atributos como refresh e X-UA-Compatible. Embora seu impacto direto no SEO possa variar, eles desempenham um papel crucial em influenciar o comportamento e a compatibilidade da página.
<meta http-equiv="refresh" content="5;url=https://example.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Você não usará todos de uma vez em seus projetos, mas ainda é importante ter um bom entendimento das diferentes meta tags disponíveis. Além disso, o uso de metatags oferece benefícios na melhoria da organização de documentos HTML.
Metatags personalizadas
As meta tags são flexíveis porque:
- Você é livre para usar um nome de sua escolha para armazenar os dados que desejar.
- Os navegadores não exibirão seu conteúdo, embora ele sempre esteja visível na origem da página.
Aqui está um exemplo de meta tag personalizada:
<meta name="target-audience" content="developers">Neste exemplo, a tag personalizada especifica o público-alvo do conteúdo, indicando que ele é direcionado aos desenvolvedores.
Meta tags personalizadas oferecem uma maneira de estender o conjunto padrão de tags amplamente reconhecidas. No entanto, é importante documentar cuidadosamente as tags personalizadas que você usa e ter um bom entendimento de como irá usá-las. Outros serviços não os usarão ou os reconhecerão por padrão, então provavelmente você escreverá seu próprio código em algum momento para processá-los.