Meta tags em HTML
Meta tags em HTML são códigos que descrevem o conteúdo do site para os motores de busca. As palavras-chave são inseridas nelas facilitando a identificação e busca de conteúdo.
Os buscadores atuais levam em consideração a qualidade do conteúdo nos resultados de pesquisa, por isso a qualidade do site é essencial para melhorar o posicionamento dela.
Utilizando as meta tags
As meta tags devem ser incluídas dentro do código HTML, dentro da tag <head>:
<html>
<head>
<title> Tudo sobre meta tags </title>
<meta name="author" content="Benedito Silva Júnior">
<meta name="description" content="A importância das Meta Tags">
<meta name="keywords" content="sites, web, desenvolvimento">
</head>
...Keywords
Nesta tag você deve incluir a quantidade de palavras que se referem ao conteúdo da página. Mantenha o limite de aproximadamente 150 caracteres; tente utilizar sinônimos.
Nunca quebre a linha de palavras-chave porque o código gerará um erro e, consequentemente, será ignorado.
Sempre separe as palavras com vírgula e declare todas elas em letras minúsculas – alguns buscadores têm problemas com letras maiúsculas e podem ignorar seu site:
<meta name="keywords" content="programacao, redes, banco de dados, webdesigner">Description
É o resumo do conteúdo do seu site. Procure manter um limite de aproximadamente 90 caracteres:
<meta name="description" content="CriandoBits - tudo em TI">As meta tags não fazem milagres; invista no conteúdo em primeiro lugar. Conteúdo bem apresentado mais atualizaões constantse vão fazer com que seu site seja bem visitado, com um título coerente com o conteúdo.
Tome cuidado com seus links: procure inserir apenas endereços para páginas com assuntos relacionados ao seu conteúdo, e tente ser “linkado” de volta. Em quanto mais páginas relevantes sobre o mesmo assunto seu site aparecer, melhor ele estará no ranking dos buscadores.
Escondendo seu site dos buscadores
Hoje em dia é um pouco obsoleto utilizar as meta tags para esconder determinadas páginas do seu site dos buscadores. Para melhores resultados você pode experimentar o uso de um arquivo robots.txt.
Tão importante quanto conhecer a utilidade da tag keywords é saber usar a tag robots. A função desta é informar aos buscadores se devem indexar sua página ou não.
Parece contraditório falar sobre isso, mas, na verdade, bloquear seu site, em alguns casos, pode ser vantajoso.
Quando você utiliza pop-ups ou iframes para mostrar o conteúdo do seu site, por exemplo, não é interessante que o buscador indexe essas páginas, afinal, se elas forem acessadas individualmente, não vão significar nada e não trarão visitação relevante ao seu site.
Também pode ser interessante não indexar seu site quando o conteúdo é restrito a um grupo de pessoas e não precisa de divulgação ou quando você quer fazer um blog mais reservado, por exemplo.
Nestes casos, mesmo que outras pessoas façam links para o seu site, ele não aparecerá em nenhuma busca (na verdade, isso pode depender de critérios internos do buscador).
Os valores possíveis para esta tag são:
<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"Os valores “index” e “noindex” se referem ao tratamento da página inicial: se o buscador deve ou não incluí-la nos resultados, respectivamente.
Já os valores “follow” e “nofollow” se referem aos links da página inicial, se eles devem ser visitados e indexados, ou não.
Portanto:
<meta name="robots" content="index,follow">Indexa a página inicial e todas as páginas nela referenciadas.
<meta name="robots" content="noindex,follow">A instrução acima não indexa a página inicial, mas indexa as páginas nela referenciadas:
<meta name="robots" content="index,nofollow">A instrução anterior indexa a página inicial, mas nenhum link existente nela:
<meta name="robots" content="noindex,nofollow">Por fim, a instrução acima não indexa nem a página inicial e nem seus links.
Portanto, se você quiser evitar que os sites de busca encontrem seu site, use a última opção.
Porém, se você quiser que apenas o Google não encontre seu site ou se quiser remover uma página dos seus resultados de busca a partir da próxima varredura, pode utilizar a seguinte tag:
<meta name="googlebot" content="noindex,nofollow">A maioria dos buscadores armazena uma cópia da sua página em cache, para otimizar a busca. Para evitar isso, você pode utilizar a tag a seguir:
<meta name="robots" content="noarchive">Todavia, lembre-se que além de acelerar a busca, armazenar uma cópia em cache tem a finalidade de disponibilizar o resultado ao usuário caso seu site esteja passando por algum problema técnico. Use esta tag somente se o conteúdo do seu site for muito específico quanto a essa necessidade.
As meta tags não servem só para divulgar seu conteúdo. Basicamente, a função delas é fornecer informações adicionais sobre seu site:
content-language
Especifica a língua primária da página. Útil para ajudar o buscador a classificar seu site no idioma apropriado, orientar os navegadores a exibir acentuação e caracteres especiais corretamente, e para facilitar o uso de corretores ortográficos:
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
Exemplo:
<meta http-equiv="content-language" content="pt-br">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.
Para quem desenvolve páginas em idiomas orientais, utilizar o conjunto de caracteres apropriados é fundamental para que eles sejam exibidos corretamente:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">text/html define que o conteúdo é um texto em linguagem HTML. Se você desenvolve sites em XHTML ou XML, certamente sabe que deverá aplicar os valores “application/xhtml+xml” e “application/xml”, respectivamente.
iso-8859-1 é a codificação da linguagem mais comum para exibir textos em línguas derivadas do latim.
author
Por meio das meta tags, você também pode declarar sua autoria sobre a página, “assinando” seu código fonte. É especialmente ú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 você desenvolvedor por alguma razão:
<meta name="author" content="Benedito Silva Júnior">Infelizmente, existe o risco de clientes não pagarem pelo trabalho desenvolvido, motivo pelo qual também é importante manter uma tag com o seu nome no código do site para ajudar a provar que ele foi desenvolvido por você.
reply-to
Especifica um endereço de e-mail para entrar em contato com o responsável pelo site:
<meta name="reply-to" content="webmaster@gmail.com">generator
Alguma vez você já reparou que quando edita uma página HTML feita no FrontPage ou no Word, muitas vezes é o programa que a gerou que abre para edição, e não o Bloco de Notas ou seu editor não-visual padrão?
Isso é por causa da meta tag generator, que especifica o programa que construiu a página:
<meta name="generator" content="Microsoft FrontPage 5.0">É assim que o sistema operacional sabe qual editor utilizar e que ícone mostrar ao exibir um arquivo .htm ou .html em uma pasta.
Redirecionando o visitante para outra página
Alguma vez você já deve ter visitado um site que mudou de endereço e que exibe uma mensagem do tipo:
Você será redirecionado para um novo site em 5 segundos. Se não quiser aguardar, clique aqui.
Esse redirecionamento pode ser feito com meta tag, por meio de uma única linha:
<meta http-equiv="refresh" content=" 5 ;url=http://www.criandobits.com.br/">Ou seja, depois de 5 segundos, o navegador será redirecionado para o endereço www.criandobits.com.br.
Essa mesma tag é utilizada para atualizar automaticamente uma página dinâmica, como a home page de um portal ou a sessão de notícias de um site, por exemplo.
Neste caso, o intervalo de tempo em segundos deve ser bem maior e a URL deve ser o endereço do próprio site a ser atualizado:
<meta http-equiv="refresh" content="120;url=http://www.criandobits.com.br/">Lembre-se apenas de utilizar esse recurso com cautela, pois uma página que é atualizada automaticamente pode interromper a atividade do usuário, deixando-o irritado.
Redirecionamento com PHP e código 301
Apesar de as instruções do tópico acima funcionarem, especialistas em Search Engine Optimization (SEO) e o próprio Google recomendam que, toda vez que você tiver que mover uma página permanentemente, o faça utilizando o código 301.
Esse procedimento oferece maiores garantias de que o buscador entenderá que se trata de um redirecionamento, diminuindo as chances de problemas na indexação do site.
Em cada linguagem há maneiras de se fazer isso. Usando o PHP, por exemplo, na página que tiver que ser redirecionada, basta inserir as seguintes instruções:
<?
Header( "HTTP/1.1 301 Moved Permanently" );
Header( "Location: http://www.criandobits.com.br/" );
?>Assim, toda vez que o usuário acessar o endereço antigo, será automaticamente redirecionado para o link informado em Location.
As meta tags são importantes, mas não serão muito úteis caso a qualidade das informações disponíveis no site seja ruim.
Conheça a Danki Club e tenha acesso a uma infinidade de cursos na área de programação web, Android e IOS. Desenvolvimento de games, Blockchain e criptomoedas. Produtividade, marketing, empreendedorismo e muito mais!
Link do curso: https://go.hotmart.com/K70275475L
Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
