Metadados HTML: elementos incluídos e práticas recomendadas
Publicados: 2021-01-08Elementos e práticas recomendadas em metadados HTML
Meta tags são breves extratos de um código que informam os mecanismos de pesquisa sobre informações cruciais sobre sua página da web. Eles também controlam como os navegadores da Web são exibidos aos visitantes. Meta tags estão presentes em todas as páginas da web e você só pode vê-las no código HTML. Aqui está uma lista de exemplos de metatags para SEO.
- Meta Descrição
- Meta robôs
- Meta título
- Meta charset
- Redirecionamento de meta-atualização
- Janela de visualização meta
Metatítulo
O título da página mostrado pelo Google e outros mecanismos de pesquisa nos resultados da pesquisa é o meta-título. Um título HTML fornece aos usuários uma visão rápida do conteúdo de um resultado e sua relevância para a consulta. Geralmente, é a forma básica de informação que determina em qual resultado clicar. Usar títulos de alta qualidade em suas páginas da web é muito importante para SEO. Aqui está um exemplo de um meta-título:

Melhores Práticas
- Use uma tag de título especial para suas páginas
- Os títulos devem ser breves e descritivos
- Evite usar títulos genéricos e vagos
- Use título ou caso de frase
- Não use isca de clique, mas sim algo digno de clique
- Corresponder à intenção de pesquisa
- Use 60 caracteres ou menos
- Inclua palavras-chave de destino quando necessário
Encontrando e corrigindo erros de tag de título
Certifique-se de que sua tag de título não seja muito longa nem muito curta. Evite títulos desnecessariamente longos ou prolixos, mantendo-os concisos e descritivos. Certifique-se de que cada página tenha uma tag de título. Evite várias tags de título HTML na página, pois os mecanismos de pesquisa podem mostrar uma tag de título irrelevante se houver várias páginas da web. Títulos duplicados em várias páginas. É muito importante que cada uma das páginas do seu site tenha um título único e descritivo.
Teste o SEO e o desempenho do seu site em 60 segundos!
Um bom design do site é fundamental para o engajamento e as conversões do visitante, mas um site lento ou erros de desempenho podem fazer com que até mesmo o site mais bem projetado tenha um desempenho inferior. Diib é uma das melhores ferramentas de monitoramento de desempenho de sites e SEO do mundo. A Diib usa o poder do big data para ajudá-lo a aumentar de forma rápida e fácil seu tráfego e classificações. Como visto em Empreendedor!
- Ferramenta de SEO automatizada fácil de usar
- Monitoramento de palavras-chave e backlinks + ideias
- Garante velocidade, segurança, + rastreamento de Core Vitals
- Sugere de forma inteligente ideias para melhorar o SEO
- Mais de 250.000 mil membros globais
- Benchmarking integrado e análise de concorrentes
Usado por mais de 250 mil empresas e organizações:
Sincroniza com 
Meta Descrição
Uma meta descrição fornece uma breve descrição de uma página da web. Os mecanismos de pesquisa o usam para exibir uma página da Web nos resultados da pesquisa. Informa e conquista o interesse dos usuários por meio de um resumo breve e preciso do conteúdo de uma determinada página. Uma meta descrição garante ao usuário que ele está na página certa e exatamente o que está procurando. No entanto, eles não são usados pelo Google como um fator de classificação direto. A imagem abaixo mostra uma meta descrição:

Melhores Práticas
- Escreva uma descrição única e compreensível para cada página
- Forneça um resumo preciso
- Não use descrições genéricas
- Use as palavras-chave principais adequadamente em uma frase significativa
- Usar maiúsculas e minúsculas
- Não use isca de clique, mas escreva algo digno de clique
- Corresponder ao objetivo da pesquisa
- Use 160 caracteres ou menos
Erros comuns de meta descrição
Os erros mais comuns ao escrever uma meta descrição são quase semelhantes aos das tags de título. Uma meta descrição muito longa ou muito curta. Geralmente, não há limite para o comprimento de uma meta descrição. Para se ajustar à largura do dispositivo, os resultados da pesquisa extraídos geralmente são encurtados. Outro erro é quando uma página da web carece completamente de uma meta descrição.
Certifique-se de escrevê-lo em seu site. Você também pode ter uma página com mais de uma meta descrição, no entanto, isso pode confundir os mecanismos de pesquisa. Ter meta descrições semelhantes em várias páginas também é um erro comum. Certifique-se de que cada página tenha sua própria descrição exclusiva.
Meta-robôs
Os meta-robôs permitem que o mecanismo de pesquisa rastreie páginas da Web e também ofereça instruções sobre como fazê-lo. A presença do seu site nos resultados da pesquisa pode ter um impacto negativo se você não usar os atributos corretos na metatag robots. Entender essa tag e usá-la de maneira eficaz terá um grande impacto no seu SEO.
Os valores de índice dizem aos bots para fazer a indexação da página, enquanto o valor noindex instrui os bots a não fazer a indexação da página. Os bots são instruídos pelo valor a seguir a rastrear links na página para atestar por eles, enquanto o valor nofollow os instrui a não rastrear links na página para evitar qualquer endosso.
Melhores Práticas
Use apenas as meta tags de robô ao restringir os rastreamentos do Google em uma página e evite bloquear páginas com meta tags de robô em robots.
Erros comuns dos meta-robôs
Alguns dos erros típicos dos meta-robôs incluem robôs que não bloqueiam páginas de índice. Isso torna difícil para o Google ver a tag de robôs noindex e pode continuar indexando o URL. Um meta noindex desonesto reduz o tráfego orgânico da página, restringindo o Google de indexá-la. O meta nofollow desonesto impedirá o Google de rastrear os links da página e reduzirá as chances de descobrir e indexar conteúdo crucial. Isso também pode impedir o fluxo de PageRank para páginas importantes.
Meta Viewport
Uma meta viewport define a área visível da página da web e fornece instruções sobre como a página será exibida pelo navegador em diferentes tamanhos de tela. Isso é importante, pois as páginas da Web compatíveis com dispositivos móveis têm uma classificação mais alta nos resultados de pesquisa para dispositivos móveis do Google.
Melhores Práticas
É crucial que você use a meta viewport em todas as páginas da web e com a tag padrão.
Meta Charset
Essa tag determina a codificação de caracteres da sua página ou simplesmente instrui o navegador sobre como exibir os caracteres e o texto na página. Existem dois conjuntos de caracteres comuns, incluindo UTF-8 usado para codificar Unicode e ISO-8859-1 usado para codificar o alfabeto latino. A codificação com o caractere errado fará com que o navegador seja exibido incorretamente.

Você vai se interessar
Como escalar seu negócio com sucesso
Velocidade de carregamento do site: ferramentas para otimização
Verificação de integridade do site: ferramentas e dicas
O que significa UX?
(Crédito da imagem: Aprenda tutoriais da Web)
Problemas de formatação de caracteres resultam em uma experiência negativa do usuário e suas páginas podem parecer quebradas. Outros problemas que isso pode causar incluem menos pessoas com links para sua página, baixo tempo de permanência, pouco tempo na página, alta taxa de rejeição e o mecanismo de pesquisa pode não entender seu conteúdo.
Melhores Práticas
- Sempre use meta tag charset em todas as suas páginas da web
- Use Unicode/UTF-8 sempre que possível
É importante verificar todas as suas páginas da web para garantir que elas estejam usando a codificação UTF-8.
Redirecionamento de atualização meta
Essa tag redireciona o usuário para outro URL após um determinado período de tempo. O Google entende e respeita as tags de redirecionamento de meta-refresh, mas é melhor não usá-las em SEO. Isso ocorre porque a maioria dos navegadores não os suporta e pode causar confusão ao usuário ao levantar questões de segurança. Também leva tempo, pois as páginas exigem análise antes que o URL de destino fique visível. Esta é a aparência dessa tag:


(Crédito da imagem: HostPapa)
Melhores Práticas
- Use apenas tags de redirecionamento de meta-atualização quando necessário
É melhor evitar o uso de redirecionamentos de meta-atualização sempre que possível, pois eles são uma prática ruim. Se você os tiver em suas páginas da Web, poderá usar redirecionamentos 301 ou 302, sempre que possível.
Meta-palavras-chave
Palavras-chave meta são um bom exemplo de meta tag que é usado com frequência nos dias de hoje. Não é aconselhável adicionar a metatag de palavras-chave com uma lista de palavras-chave de destino, pois o Google parou de usar palavras-chave para classificações. Isso ocorre porque muitas pessoas encheram palavras-chave irrelevantes sem que os usuários as vissem. O Google desconsiderou a metatag de palavras-chave, uma vez que muitas vezes era abusada.
O Bing agora usa a metatag de palavras-chave para sinalizar spam, então isso pode funcionar contra você. É melhor que você remova a tag do seu site.
Metadados são dados que fornecem informações sobre outros dados. Os metadados HTML resumem as informações básicas sobre os dados, facilitando a localização e o trabalho com esses dados específicos. Ele pode ser criado manualmente para maior precisão ou automaticamente para oferecer informações mais básicas. Os dados Mata são usados para arquivos de documentos, imagens, vídeos, planilhas e páginas da web.
O que é um gerador de metatags?
Um gerador de meta tags permite que você desenvolva as meta tags HTML necessárias e mais úteis para SEO.
Práticas recomendadas ao usar metadados HTML
Declare um Doctype Sempre
Uma declaração de doctype deve ser a primeira coisa em suas metatags HTML para SEO. Ele notifica o navegador sobre os padrões XHTML que estão sendo usados. É aconselhável usar o doctype estrito XHTML 1.0, embora seja considerado uma escolha difícil por alguns desenvolvedores. Ele garante que seu código esteja estritamente em conformidade com os padrões mais recentes.
Use tags de título significativas
As tags de título permitem que a página da Web seja mais significativa e fácil de pesquisar.
Use a lista descritiva de metatags
Uma lista de meta tags adiciona mais significado à sua página da web para agentes de usuário, como aranhas de mecanismos de pesquisa. É importante que a descrição não tenha palavras e frases repetidas, pois os mecanismos de pesquisa detectarão isso. Use descrições simples e diretas ao explicar a finalidade da sua página da web.
Divida seu layout em seções principais usando divs
Ao construir um design de site, considere dividir a página da Web em seções na primeira etapa. Isso promoverá um código limpo e bem-intencionado, ajudando você a evitar confusão e usar divs excessivamente ao escrever uma marcação complexa e longa.
Evite misturar o conteúdo da apresentação
Não misture seu conteúdo HTML com a apresentação visual do conteúdo fornecida pelo CSS. Criar um arquivo CSS separado para seus estilos em vez de usar estilos embutidos em seu HTML é muito essencial. Isso permitirá que você e outros desenvolvedores que trabalham no código façam alterações rápidas e garantam que seu conteúdo seja mais compreensível para os agentes do usuário.
Minificar e unificar CSS
Sites típicos têm um arquivo CSS principal e provavelmente outras coisas, como correções específicas do navegador e redefinição de CSS. Quando cada arquivo C faz uma solicitação HTTP, ele diminui o tempo de carregamento do site. Retirar caracteres que não são necessários como novas linhas, espaços e tabulações de todo o seu código e unificar arquivos que podem ser integrados. Isso pode ajudar a resolver esse problema e melhorar os tempos de carregamento do seu site.
Minimizar, unificar e mover para baixo JavaScript
Evite usar JavaScript embutido, mas tente reduzir e unificar suas bibliotecas JavaScript para diminuir o número de solicitações HTTP necessárias para gerar uma de suas páginas. No entanto, você não pode ter downloads paralelos na maioria dos navegadores, o que significa que o navegador não baixará mais nada durante o download do JavaScript, fazendo com que a página pareça estar carregando lentamente.
Para evitar isso, você pode carregar seu JavaScript depois de carregar seu CSS, colocando o JavaScript no final do seu documento HTML, quando aplicável, de preferência antes de fechar a tag body.
Use os elementos de título com sabedoria
O uso de elementos h1 a h6 para indicar a ordem do conteúdo do seu HTML torna seu conteúdo mais amigável para o usuário, agente do usuário, mecanismos de pesquisa e software de leitura de tela. Ao usar blogs, é melhor que você use o elemento h1 para o título da postagem do blog em vez do nome do site, pois é ideal para mecanismos de pesquisa.
Use as tags HTML certas no lugar certo
É importante que você conheça as tags HTML disponíveis e como usá-las com precisão para evitar confusão e criar uma estrutura de conteúdo relevante.
Esperamos que você tenha achado este artigo útil.
Se você quiser saber mais sobre a saúde do seu site, obter recomendações e alertas pessoais, escaneie seu site pela Diib. Leva apenas 60 segundos.
Evite Usar Divs Excessivamente
Alguns desenvolvedores envolvem tags div em outras tags div que têm mais tags div criando vários divs. O div é considerado um elemento sem sentido que deve ser usado apenas quando não houver outros elementos adequados disponíveis de acordo com as especificações HTML do W3C. Evite ter vários divs usando-os com responsabilidade e somente quando for necessário.
Use uma lista não ordenada para navegação
O elemento de navegação é um fator muito essencial no design do site quando combinado com CSS. Ele ajuda seus menus de navegação a serem semânticos e bonitos. Aqui estão duas maneiras de fazer isso:

(Crédito da imagem: Studytonight)
Feche suas tags
As especificações do W3C exigem que você feche todas as suas tags. Outros navegadores podem exibir suas páginas corretamente, mesmo que a falha ao fechar suas tags seja inválida sob os padrões normais.
Usar marcação em minúsculas
Manter sua marcação em letras minúsculas é uma prática padrão no setor. Capitalizar sua marcação afeta a legibilidade do seu código, mas não altera a exibição de suas páginas da web.
Use correções modulares do IE
Se você estiver tendo problemas com suas páginas, poderá usar comentários condicionais para se concentrar no Internet Explorer. Certifique-se de fazer as correções modulares para garantir que seu trabalho seja à prova de futuro, para que a versão mais antiga do IE não precise de suporte.
Valide seu código
Você não deve ver a validação como a avaliação final de um bom trabalho contra um trabalho ruim. Um trabalho que valida não é necessariamente um código bom e, alternativamente, um trabalho que não valida totalmente não é necessariamente um código ruim.
Você pode usar serviços de validação automática como depuradores úteis para identificar erros de renderização. Valide seu trabalho com frequência ao escrever HTML para evitar problemas que podem ser difíceis de identificar depois de concluir seu trabalho.
Escrever código consistentemente formatado
Escrever uma base de código limpa e bem-intencionada realça seu profissionalismo e torna mais fácil para os desenvolvedores que podem trabalhar em seu código. Você também aumentará a legibilidade do seu trabalho quando escrever uma marcação devidamente recuada desde o início. Por exemplo:

(Crédito da imagem: html.com)
Evite comentários excessivos
O objetivo de documentar seu código é torná-lo compreensível e comentar seu código é razoável e lógico para linguagens de programação como Java, PHP e C#. No entanto, a marcação é muito auto-explicativa e você não precisa comentar em cada linha em XHTML/HTML. Revisar seu trabalho quanto à semântica o ajudará se você estiver comentando muito em seu HTML para explicar o processo.
Diib: Obtenha suas estatísticas de metadados HTML aqui!
Usar esses elementos e seguir as diretrizes o ajudará em seus esforços de SEO.
Elementos como uma boa meta descrição aumentarão suas taxas de cliques de pesquisas, mesmo que isso não melhore sua classificação. Meta tags agora estão sendo usadas em plataformas de mídia social como Twitter e Facebook. Você pode usar tags para verificar como seus dados são compartilhados no Facebook. A parceria com a Diib Digital fornecerá as métricas vitais sobre seus metadados para que você possa tomar decisões eficazes sobre a saúde do seu site.
Aqui estão alguns dos recursos do nosso Painel de Usuário que temos certeza que você vai adorar:
- Objetivos personalizados projetados para melhorar o desempenho do site
- Alertas que informam sobre sua Autoridade de Domínio e outros problemas técnicos de SEO
- Páginas quebradas onde você tem backlinks (verificador 404)
- Ferramentas de monitoramento e rastreamento de palavras-chave, backlinks e indexação
- Experiência do usuário e otimização de velocidade móvel
- Otimização do título da imagem
Clique aqui para fazer uma varredura gratuita ou simplesmente ligue para 800-303-3510 para falar com um de nossos especialistas em crescimento.
