últimas postagens
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.
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.
A maioria das metatags usa uma combinação dos seguintes atributos para conter seus dados.
- nome e conteú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 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 content.
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 os navegadores e servidores processam as páginas da web. Eles incluem atributos como atualização e compatível com X-UA. 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 metatags disponíveis. Além disso, o uso de meta tags oferece benefícios na melhoria da organização de documentos HTML.
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 não os reconhecerão por padrão, então você provavelmente escreverá seu próprio código em algum momento para processá-los.