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.

Agora dentro do elemento “head”:

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”.

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 :

Código com uso de valor de “title” no atributo “content”.

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”.

Neste outro exemplo haverá um redirecionamento para a página “outra_pagina.html” após passar 20 segundos.

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.

author

Define o nome do autor do documento.

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.

generator

Serve para identificar o software usado para gerar a página.

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.

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:

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.

publisher

Este valor define o nome do editor.

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.

noindex

Este tipo impede que os robôs indexem uma página.

follow

Este tipo permite que os robôs sigam os links de saída de uma página.

nofollow

Este tipo impede que os robôs sigam os links de saída de uma página.

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.

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.

noarchive

Este tipo previne que páginas sejam armazenadas em cache. É aplicado para o Google, Bing e o Yahoo.

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.

noimageindex

Impede que mecanismos de buscas indexem imagens na página. É aplicado para o Google.

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.

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.

Por ser obsoleto é indicado, em vez de usar esta meta tag, que utilize o atributo “lang” no elemento. Veja como fica a seguir:

content-type

Este atributo serve especificar a codificação de caracteres usada nas páginas.

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.

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.

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.

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.

og:title

Este valor define o 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.

og:url

Este valor define o endereço de destino da publicação.

og:site_name

Este valor define o nome do 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.

É 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.

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.