Quem já desenvolve sites sabe que o HTML é uma linguagem que instruem os navegadores sobre qual conteúdo será exibido. Para isso são utilizadas tags (etiquetas) que marcam e dão valor semântico ao conteúdo.
Porém existem alguns dados que precisam de um tipo particular de tags para quo navegadores e outras aplicações os interprete. Falo dos metadados.
Metadados são dados que descrevem dados. Com os metadados é possível compreender os dados através do tempo. E são as meta tags que são responsáveis por marcar esses dados no documento HTML.
Neste artigo vamos entender para que servem as meta tags, como utilizá-la e os tipos mais usados.
O que são meta tags? Para que servem as meta tags?
Meta tags são etiquetas para marcam e descrevem informações relacionadas ao website para que determinadas aplicações possam utilizadas.
Só para você ter uma ideia as meta tags são responsáveis por informar sobre dados como uma descrição do conteúdo da página, seu autor, data de criação, entre outras informações.
Você com certeza já presenciou o resultado de uma aplicação que utilizou de informações inseridas em meta tags, como por exemplo, o texto que descreve sobre uma página em um resultado de busca no Google.
O texto destacado é um dado retirado de uma metag tag específica dentro do código HTML de uma página.
Como se utiliza as meta tags?
As meta tags são inseridas entre as tags de abertura e fechamento do elemento Head. E se trata de um elemento vazio que abriga atributos com diferentes valores e funcionalidades.
A seguir um exemplo de sintaxe de código para inserção de meta tag.
<meta name="description" content="Um canal de conteúdos sobre Web Design, Front-End, Design, Comunicação e Criatividade em geral. Acesse, curta e compartilhe nossos conteúdos!! Por que Qualquer Um Acha Que Pode Dar Pitacos, Né ??">
Agora dentro do elemento “head”:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Chief of Design | Blog de Web design para iniciantes</title>
<meta name="description" content="Um canal de conteúdos sobre Web Design, Front-End, Design, Comunicação e Criatividade em geral. Acesse, curta e compartilhe nossos conteúdos!! Por que Qualquer Um Acha Que Pode Dar Pitacos, Né ??">
</head>
<body>
</html>Atributos
Como se trata de um elemento HTML (meta) também recebe atributos comuns ao HTML 5, que são tratados como atributos globais. Indo alémrecebe atributos específicos responsáveis por diferentes funcionalidades. Vamos a eles:
charset
Este atributo serve especificar a codificação de caracteres usada nas páginas.
O padrão não solicita um código específico, entretanto encoraja o uso do valor “UTF-8”.
<meta charset="UTF-8">
content
É um atributo que dá um valor associado com o atributo “http-equiv” ou com o atributo “name”.
http-equiv
Esse atributo serve para controlar ações dos navegadores e podem ser usadas para melhor especificar as informações. Ele pode ser usado para executar tarefas como atualizar periodicamente a página, redirecionar para outra página, etc.
Entre os valores válidos para esse atributo temos:
defult-style
Define o nome do conjunto de folhas de estilo alternativo padrão.
O valor de “content” deve corresponder ao valor do atributo “title” em um elemento HTML link no mesmo documento ou deve corresponder ao valor do atributo de “title” em um elemento HTML “style” no mesmo documento.
Valor do atributo “title” em :
<link href="style.css" rel="stylesheet" type="text/css" title="Estilo padrão">
Código com uso de valor de “title” no atributo “content”.
<meta http-equiv="default-style" content="Estilo padrão">
refresh
Este valor estipula um tempo para uma página ser recarregada ou para que haja um redirecionamento para outra página.
No exemplo a seguir a página será recarregada a cada 5 minutos, que corresponde a 300 segundos inseridos no atributo “content”.
<meta http-equiv="refresh" content="300">
Neste outro exemplo haverá um redirecionamento para a página “outra_pagina.html” após passar 20 segundos.
<meta http-equiv="refresh" content="20; url=outra_pagina.html">
Name
Este atributo especifica um nome para o metadado.
É importante saber que para o HTML5 existem nomes padrão de metadados. São eles:
application-name
Define o nome do aplicativo da Web em execução na página. Se a página não for um aplicativo da Web, o nome de metadados referente ao aplicativo não deverá ser usado.
<meta name="application-name" content="Nome do Aplicativo">
author
Define o nome do autor do documento.
<meta name="author" content="Nome do autor">
description
É destinado a conter um resumo curto e preciso do conteúdo da página. Apesar de não ser um fator para classificação nos motores de buscas é importante que use um texto atraente com uma palavra-chave porque buscadores como o Google e Bing podem mostrar este texto nos resultados de busca. Um texto persuasivo pode atrair cliques.
<meta name="description" content="Este é um resumo sobre a página">
generator
Serve para identificar o software usado para gerar a página.
<meta name="generator" content="Wordpress">
keywords
Define palavras chaves separadas por vírgulas associadas ao conteúdo da página. Um dia já foi usada como estratégia de SEO, porém hoje não contribui mas com este tipo de otimização e é ignorada pelos principais mecanismos de busca.
<meta name="keywords" content="palavra chave 1, palavra-chave 2, palavra-chave 3">
Outros nomes de metadados
Existem outros valores além dos nomes padrão de metadados para o atributo name. Esses nomes estão registrados na WHATWG Wiki MetaExtensions page, onde você pode conhecer uma lista estendida que formam metag tags. Embora nenhum tenha sido formalmente aceita ainda, alguns nomes de meta tags mais conhecidas se encontram nesta extensa lista.
Podemos encontrar, por exemplo, meta tags do tipo robots. Veja no código seguir:
<meta name="robots" content="index,follow">
scheme
Ainda existe o atributo “scheme”. Este atributo define o esquema no qual os metadados são descritos. Mas ele está descontinuado por isso não aprofundarei neste artigo.
Outros valores de meta tags de uso comum
Agora passarei uma lista de meta tags que estão entre as mais usadas. Elas têm a função de transmitir informações relevantes.
creator
Este valor define o nome do criador do documento HTML. Pode ser utilizado o nome da instituição.
<meta name="creator" content="Chief of Design">
publisher
Este valor define o nome do editor.
<meta name="creator" content="David Arty">
robots
Uma das principais funções das meta tags é transmitir instruções de indexação aos rastreadores de mecanismos de busca. Essa é função das meta tags robots.
Através delas é possível determinar se uma página pode ser adicionada a um índice do mecanismo de busca e se está disponível para uma pesquisa na web. Eles também podem especificar se os links das páginas de saída devem ser seguidos ou ignorados pelos rastreadores.
A seguir mostrarei os tipos.
Observação: Neste caso o que diferencia cada meta tag é o valor que vai no atributo “content”.
index
Este tipo permite que os robôs indexem uma página.
<meta name="robots" content="index">
noindex
Este tipo impede que os robôs indexem uma página.
<meta name="robots" content="noindex">
follow
Este tipo permite que os robôs sigam os links de saída de uma página.
<meta name="robots" content="follow">
nofollow
Este tipo impede que os robôs sigam os links de saída de uma página.
<meta name="robots" content="nofollow">
Combinação de valores
Também é permitido a combinação de valores no atributo “content”. Isso torna tudo mais prático. As combinações mantêm as funções de cada valor do modo isolado.
<meta name="robots" content="index, follow"> <meta name="robots" content="index, nofollow"> <meta name="robots" content="noindex, follow"> <meta name="robots" content="noindex, nofollow">
noodp
O nome de noodp vem de “No ODP”, referente a sigla ODP que significa Open Directory Project. Este é o nome formal do DMOZ, um diretório que possui páginas com descrições que podem aparecer nos motores de busca. Para impedir que isso acontece deve usar o código a seguir.
<meta name="robots" content="noodp">
noarchive
Este tipo previne que páginas sejam armazenadas em cache. É aplicado para o Google, Bing e o Yahoo.
<meta name="robots" content="noarchive">
nosnippet
Este tipo impede a exibição de qualquer descrição da página na página de resultados do mecanismo de pesquisa. É aplicado para o Google e Bing.
<meta name="robots" content="nosnippet">
noimageindex
Impede que mecanismos de buscas indexem imagens na página. É aplicado para o Google.
<meta name="robots" content="noimageindex">
viewport
Este valor dá dicas sobre o valor inicial do viewport. É usado para sites que foram desenvolvidos para serem responsivos.
O código a seguir possui os valores de uso mais frequente em sites.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
O valor “width=devide-width” define que largura da página deve seguir a largura da tela do dispositivo. Lembrando que os dispositivos variam as dimensões de tela.
O valor “initial-scale=1.0” define define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.
Meta tag de valor viewport é assunto abrangente que necessita de um estudo a parte. Esta documentação pode ajudar a aprofundar no assunto.
Valores de meta tags conhecidos, porém não conforme
São valores que encontramos em muitas páginas web, mas estão obsoletos.
content-language
Esse atributo define o idioma padrão da página web. O atributo que recebe o valor referente ao idioma é o “content”. No exemplo a seguir informa que o idioma padrão é o Português do Brasil.
<meta http-equiv="content-language" content="pt-br">
Por ser obsoleto é indicado, em vez de usar esta meta tag, que utilize o atributo “lang” no elemento. Veja como fica a seguir:
<html lang="pt-br">
content-type
Este atributo serve especificar a codificação de caracteres usada nas páginas.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Como já vimos neste artigo existe outra forma de especificar a codificação de caracteres que é através de meta tag com atributo “charset”. Esta é a forma indicada para uso.
<meta charset="UTF-8">
Bônus – Metas tags Opengraph
Essas são meta tags que também estão registradas na lista estendida WHATWG Wiki MetaExtensions.
Elas são utilizadas para fornecer dados do seu site, ou página ao Facebook no processo de publicação de conteúdo nesta rede social. Com isso você possui o controle sobre a forma que seus conteúdos serão publicados.
Essas meta tags se caracterizam por possuírem um atributo particular o property e por usar valores que começam com aos caracteres og:.
Agora vamos aos exemplos.
og:locale
Este valor define o idioma da publicação.
<meta property="og:locale" content="pt_BR">
og:type
Este valor especifica o tipo do seu site. O tipo padrão é website. Caso você possuir um blog o tipo para cada artigo será article.
<meta property="og:type" content="website">
<meta property="og:type" content="article">
Caso utilize o valor article. É interessante fornecer outras informações importantes do artigo como:
- article:author – Dados do autor da publicação.
- article:section – Categoria do artigo.
- article:published_time – Momento da publicação.
<meta property="og:type" content="article"> <meta property="article:author" content="https://www.facebook.com/david.diarty"> <meta property="article:section" content="Freelancer e Empreendedorismo" > <meta property="article:published_time" content="2018-06-07T12:04:39-03:00" />
og:title
Este valor define o título da página ou artigo.
<meta property="og:title" content="Título da página ou artigo">
og:description
Define uma descrição resumida sobre o conteúdo da página. Pode-se usar a mesma descrição da meta tag description ou outra adequada para atrair a atenção no Facebook.
<meta property="og:description" content="Uma descrição para página ou artigo">
og:url
Este valor define o endereço de destino da publicação.
<meta property="og:url" content="http://www.seusite.com.br/sua-pagina/">
og:site_name
Este valor define o nome do site.
<meta property="og:site_name" content="Nome do sue site">
og:image
Este valor serve para apresentar a imagem que representa a publicação. O valor do atributo “content” deve apresentar o endereço da imagem.
<meta property="og:image" content="www.seusite.com.br/imagem-1.jpg">
É interessante fornecer mais informações relevantes sobre a imagem como:
- og:image:type – Estipula o formato da imagem. São aceitos os tipos JPEG, PNG, GIF, e BMP.
- og:image:width – Estipula a largura da imagem em pixels.
- og:image:height – Estipula a altura da imagem em pixels.
<meta property="og:image" content="www.seusite.com.br/imagem-1.jpg"> <meta property="og:image:type" content="image/jpeg"> <meta property="og:image:width" content="1280"> <meta property="og:image:height" content="630">
Conclusão
Através deste artigo podemos ver como as meta tags funcionam e como seu site pode ser beneficiar de sua utilização. A lista de meta tags existentes é bastante extensa e vai bem além das apresentadas aqui.
Algumas podem ser inválidas para o HTML 5, por isso caso você necessita de fornecer algum metadado que não esteja relacionado com as meta tags apresentadas neste artigo sugiro consulte a relação de valores existentes na WHATWG Wiki MetaExtensions page e considere também validar seu código HTML no validador da W3C para verificar se as meta tags usadas estão conforme.
Espero que o artigo seja útil para você. Peço que compartilhe com amigos e se desejar contribua com seus comentários.
Abraço!
Referências:
https://www.w3.org/TR/2014/CR-html5-20140429/document-metadata.html#attr-meta-http-equiv-default-style
https://wiki.whatwg.org/wiki/MetaExtensions
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/meta
Ed Francisco
Olá! Aqui é Ed Francisco, colaborador do Chief of Design desde suas primeiras linhas de conteúdo e de códigos.
Por falar em códigos, acredito que o HTML é a mais notável tecnologia web a qual me permitiu chegar aqui onde estou, e também escrever essas linhas sobre mim para você.
Sou formado em Tecnologia da Produção (foi aqui que conheci o HTML) e em Técnico em Produção Digital, Web e Multimídia (onde aperfeiçoei os meus conhecimentos de HTML).
Sou Paulistano da Zona Leste. Me aventuro tentando desvendar os mistérios da web desde 2008.