Desenvolvimento - HTML
Código Tag - O que é meta tag?
Este artigo aborda as principais meta tag que são usadas em códigos HTML na criação de websites. Veja o que são e como trabalhar com essas meta tag.
por Ricardo ArrigoniOlá pessoal, neste artigo vamos falar um pouco sobre o que são as meta tag do HTML.
O que é meta tag?
Meta tags são linhas de código HTML que descrevem o conteúdo do seu site para os buscadores. É nelas que você vai inserir as palavras-chave que ajudarão usuários a te encontrar nas buscas, por exemplo. Por meio delas, você pode também declarar sua autoria sobre o código fonte.
Com cada vez mais o crescimento de SEO, os desenvolvedores têm dado mais atenção às meta tag, pois perceberam que elas são muito importantes no posicionamento do site nos buscadores.
Vamos ver as principais meta tags e suas funções?
Como utilizar as meta tags
As meta tags devem ser incluídas dentro da tag <head>, como podemos ver na listagem 1.
Listagem 1: Onde inserir meta tags
<head> <title> Meta tag - O que são e como usar?</title> <meta name="author" content="Ricardo Arrigoni"> <meta name="description" content="Meta Tags - O que são e como utilizá-las - Linha de Código"> <meta name="keywords" content="sites, web, meta tag, código, html"> </head>
Como podemos ver, é bem simples a implementação no código, o mais complicado nisso tudo é entender uma por uma, vamos começar pela de description?
Meta tag description
Vamos começar falando da meta tag description, que é nada mais, nada menos do que a descrição da sua página. É o conteúdo que você insere nela que irá aparecer embaixo do título nos buscadores, como podemos ver na figura a seguir:
Figura 1: meta tag description
Ao criar a sua meta tag description, procure manter um limite de aproximadamente 90 caracteres.
Abaixo veremos um exemplo da meta tag description:
Listagem 2: Meta tag description
<meta name="description" content="Meta Tags - O que são e como utilizá-las - Linha de Código">
Utilizando o noindex e o nofollow
Em alguns casos, queremos que nosso site/página não seja indexada pelos buscadores. A forma mais eficaz de se fazer isso é usando o arquivo robots.txt, mas no nosso artigo vou mostrar como fazer o mesmo por meio das meta tags
Listagem 3: Utilizando noindex e nofollow
<meta name="robots" content="index,follow"> <meta name="robots" content="noindex,follow"> <meta name="robots" content="index,nofollow"> <meta name="robots" content="noindex,nofollow"> <meta name="robots" content="noarchive">
No código acima, os valores "index" e "noindex" referem-se ao tratamento da página inicial: se o buscador deve ou não incluí-la nos resultados.
Os valores "follow" e "nofollow" referem-se aos links da página inicial, se eles devem ser visitados e indexados ou não, ou seja:
O código <meta name="robots" content="index,follow"> Indexa a página inicial e todas as páginas que são referenciadas por ela, já o código <meta name="robots" content="noindex,follow"> não indexa a página inicial, mas indexa as páginas referenciadas por ela.
Caso você queira que nenhum site de busca encontre o seu site, utilize o código a seguir:
Listagem 4: Evitando que os buscadores encontrem seu site
<meta name="robots" content="noindex,nofollow">
Mas se quiser que apenas o Google não encontre o seu site, mas que os outros buscadores te encontrem, basta usar o código a seguir:
Listagem 5: Evitando que o Google te encontre nas buscas
<meta name="googlebot" content="noindex,nofollow">
A grande maioria dos buscadores armazena uma cópia da sua página em cache, para otimizar a busca. Caso você queira que os navegadores não façam isso, você pode utilizar a tag a seguir:
Listagem 6: Não armazenar cópia da página em cache
<meta name="robots" content="noarchive">
Outras funcionalidades das meta tag
Além de definir a divulgação do seu site nos buscadores, as meta tag também servem para outras coisas, principalmente fornecer informações adicionais sobre o seu site, abaixo vamos ver algumas dessas outras funcionalidades:
Meta tag content-language
Essa meta tag é a responsável por definir o idioma principal em que a sua página foi escrita. Essa tag é a que faz com que os buscadores coloquem a sua página nas buscas de acordo com o idioma apropriado da busca e do seu site, além de orientar os navegadores em questão de acentos, etc.
Abaixo vou colocar uma lista de alguns dos valores possíveis para essa meta tag:
- pt - Português
- pt-br - Português do Brasil
- en - Inglês
- en-us - Inglês dos EUA
- en-gb - Inglês Britânico
- fr - Francês
- de - Alemão
- es - Espanhol
- it - Italiano
- ru - Russo
- zh - Chinês
- ja - Japonês
Veja como utilizar essa meta tag:
Listagem 7: Meta tag content-language
<meta http-equiv="content-language" content="pt-br">
Meta tag content-type
Especifica o tipo de conteúdo da página e o conjunto de caracteres que ele usa. É recomendável utilizar esta meta tag em todas as páginas do seu site, porque ela garante que os navegadores irão tratar seu documento da maneira mais apropriada, especialmente quando você utiliza formulários para enviar informações entre páginas.
Listagem 8: meta tag content-type
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
Meta tag author
A meta tag author é a responsável por dizer quem é o autor do site, aquele que criou e desenvolveu aquela determinada página.
Eu considero esta tag muito importante, pois ela pode ser útil quando algum usuário procura pelo seu nome em um buscador ou quando o site do seu cliente não tem uma forma de contato direto com o desenvolvedor.
Abaixo vamos ver como utilizar ela:
Listagem 9: Meta tag author
<meta name="author" content="Ricardo Arrigoni">
Meta tag reply-to
Esta meta tag é responsável por especificar um endereço de e-mail para entrar em contato com o responsável pelo site. Parecida com a tag author, a diferença é que nesse caso é o responsável e não o desenvolvedor da página.
Listagem 10: Meta tag reply-to
<meta name="reply-to" content="ricoarrigoni@gmail.com">
Redirecionamento de página
Quando queremos fazer um redirecionamento de página, ou seja, quando o usuário entrar em uma página, eu quero que ele seja redirecionado para outra, existe a meta tag refresh, utilizando uma única linha, como podemos ver na listagem 11.
Listagem 11: Meta tag refresh
<meta http-equiv="refresh" content=" 2 ;url=http://www.meunovosite.com/">
O código acima indica que o usuário será redirecionado para a url=http://www.meunovosite.com/ em 2 segundos content=" 2 . Caso queira que a sua página tenha um auto refresh, ou seja, se atualize automaticamente após um determinado número de tempo, devemos utilizar a mesma meta tag, mas com um espaço de tempo maior e sendo linkado a mesma página, assim ela fará a atualização automática.
Redirect 301 com PHP
Apesar da meta tag refresh funcionar muito bem, em termos de SEO é recomendado que seja feito o redirect 301 nas páginas que queremos que redirecionem. Esse procedimento oferece uma maior garantia de que o buscador entenda que se trata de um redirecionamento, diminuindo as chances de problemas na indexação do site.
Existem diversas linguagens que possamos fazer isso, no nosso exemplo vou mostrar como fazer isso via PHP.
Listagem 12: Redirect 301 com PHP
<? Header( “HTTP/1.1 301 Moved Permanently” ); Header( “Location: http://www.meunovosite.com.br/” ); ?>
Dessa forma, além do redirecionamento, toda a relevância daquela página junto aos buscadores, será passada para a nova página.
Conclusão
As meta tags são um conjuntos de códigos muito importantes e muitas vezes esquecidos pelos desenvolvedores na hora de colocar o site na web. Neste artigo eu procurei explicar as principais meta tags e como utilizá-las em seu site, melhorando assim a sua comunicação com os buscadores, principalmente.
Espero que tenham gostado do artigo e até a próxima.
Ricardo Arrigoni - Colunista do site Linha de Código e desenvolvedor front-end freelancer.
Ricardo Arrigoni - Especialista em SEO com mais de 7 anos de experiência. Para consultorias em SEO visite meu site: www.ricardoarrigoni.com.
