Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

As < meta > tags description e keywords - Informações sobre seu site

Na aula passada de nosso curso de HTML, ensinamos como criar um título para as páginas de seu site, bem como sua importância e como criar um título relevante para seus leitores e para os motores de busca, como o Google.

Agora vamos aprender como dar mais detalhes de sua página, através de uma descrição e das palavras-chaves que definem sua página, através das <meta> tags.
Lembrando que caso deseje transformar seus estudos de HTML em uma profissão e começar a ganhar dinheiro criando sites, sugerimos que faça o seguinte curso e obtenha seu certificado de Webmaster (tudo online), para poder atuar na área:

Curso de Webmaster (criação de sites HTML) online com certificado
Baixar PDF: Apostila HTML + CSS Progressivo

As meta tags - Fornecendo informações de seu site

Curso de HTML
Como já havíamos comentado em nosso artigo sobre a tag <head> e sobre a tag <title>, podemos usar alguns funcionalidades no cabeçalho de nosso código HTML para definir algumas informações de nossas páginas na web.

Uma dessas informações, talvez a mais importante, é um conjunto especial de tags, chamadas meta tags.
Vamos estudar duas dessas tags neste artigo de nossa apostila de HTML, que são as meta tags description e keywords, que como os próprios nomes dizem, servem para que possamos fazer uma descrição de nosso site para os motores de busca.

Na verdade, ambas são do tipo <meta>, o que diferencia uma da outra são seus atributos.
Elas possuem os atributos 'name' e 'content', que veremos quais são, em detalhes, ainda nesta aula.

Essa tag possui somente a tag de abertura <tag> (não é necessário a tag de fechamento </tag>).
A sintaxe das <meta> tags é, portanto:
<meta name="TIPO_DE_META-TAG" content="CONTEÚDO_DA_META-TAG">

A <meta> tag description - Descrevendo o conteúdo do seu site

Essa descrição é um resumo de sua página, usada principalmente pelos buscadores, que analisam a descrição de sua página e fornecem para o usuário que está procurando informações que são parecidas com as que seu site está oferecendo.

Essa descrição é aquele trecho que aparece nos resultados da busca, explicando brevemente o conteúdo daquela página.

Ou seja, o usuário vai decidir se vai clicar ou não em seu site dependendo do que está escrito no título a na descrição daquela pesquisa. Portanto, você deve fornecer uma descrição mais completa, resumida e direta possível.

A sintaxe da <meta> tag description é:
<meta name="description" content="Aqui você escreve uma descrição de sua página, que irá ser usada pelos buscadores">

Exemplo de site:
Vamos criar um site sobre o curso HTML Progressivo, usando todos os conhecimentos que vimos até o momento em nossa apostila:
<!DOCTYPE html>
 
<html>
 <head>
 <meta name="description" content="Curso de HTML, CSS, SEO e Monetização! Online completo e gratuito">
 <title> HTML Progressivo - Curso de HTML completo, online e gratuito </title>
 </head>
 
Bem vindo ao site HTML Progressivo.</br>
Aqui você encontrará informações sobre HTML, XHTML, CSS, SEO e Monetização de sites.
</html>


A <meta> tag keyword - Definindo as palavras-chaves de seu site

Se você já leu algum artigo científico, deve ter notado que sempre existe um conjunto de palavras que definem o trabalho.
Não é um resumo, muito menos um texto, e sim um conjunto de palavras que melhor representam o documento.
É o modo mais 'compacto' de informações que oferecemos sobre cada página de um site.

Por exemplo, as palavras-chave de uma página de moda: moda, beleza, maquiagem, acessórios, roupas.
Palavras-chave de um site de uma loja de aparelhos eletrônicos: celulares, notebooks, netbooks, iPad, iPhone, Tablets.
As keywords (palavras-chave) de um site de carros: carros, 4x4, carros populares, regulagem, venda, troca, financiamento.

Note que, embora não exista um texto explicativo, apenas pelas keywords nós podemos saber o conteúdo de uma página de seu site.

A sintaxe da <meta> tag keyword é a seguinte:
<meta name="keywords" content="palavras chaves, separadas, por vírgulas">

Vamos ver então como ficaria nosso site, que estamos fazendo como exemplo em nosso curso de HTML:
<!DOCTYPE html>
 
<html>
 <head>
 <meta name="description" content="Curso de HTML, CSS, SEO e Monetização! Online completo e gratuito">
 <meta name="keywords" content="HTML, CSS, SEO, Monetização, Curso, Apostila, Online, Grátis">
 <title> HTML Progressivo - Curso de HTML completo, online e gratuito </title>
 </head>
</html> 
Bem vindo ao site HTML Progressivo.</br>
Aqui você encontrará informações sobre HTML, XHTML, CSS, SEO e Monetização de sites.
</html>

A importância das meta-tags para o Google

Conforme explicamos em nosso sobre as meta tags no SEO, elas já foram utilizadas pelo Google para definir o posicionamento de sites nos resultados de busca. Porém, hoje eles não usam mais, pois as pessoas começaram a manipular essas tags.

Por exemplo, era comum encontrarmos um site sobre futebol que tinha description e keywords de um site sobre computadores, por exemplo. Tudo isso com o intuito de burlar o esquema de busca do Google.
Esse tipo de técnica era usada por spammers (pessoas que fazem spam, propagandas indesejadas). Por exemplo, eles criavam um site qualquer, que aparecia super bem rankeado no Google (devido as descriptions e meta tags), mas quando alguém entrava no tal site, ele não tinha absolutamente nada a ver com o que o usuário estava procurando.

Embora não seja mais usado para definir posicionamento, essas tags (principalmente a description) é extremamente usada para fornecer informações para os motores de busca e para os usuários. É muito difícil rankear bem um site no Google sem ter sua descrição.

Caso crie descrições e defina keywords que não tem nada a ver com seu conteúdo (sim, o Google avalia qual o conteúdo de seu site), estará propenso a receber uma punição do Google, e não importa onde ou que tipo de site você faça, o Google será, quase sempre, a maior fonte de visitas para seu site.

Por isso, indicamos sempre que os Webmasters que estão estudando pelo curso HTML Progressivo que não burlem o sistema.
Agora que você tem mais conhecimento que a maioria dos visitantes comuns, você também terá responsabilidade, pois já está entendendo, em detalhes, como funciona a internet.

Escrevam sempre descrições reais, diretas e objetivas. Não minta e não extrapole, use uma ou duas frases, e nada de usar dezenas de palavras-chaves.
As tags devem ser únicos, e uma para cada página de seu site. Também ocorrem punições para meta tags excessivamente repetidas e longas.





Exercício 1 de HTML:
Crie um site sobre seu time de futebol. Use as meta tags description e keywords para definir o conteúdo de seu site para os visitantes que fazem busca no Google.

Exercício 2 de HTML:
Você consegue achar no código-fonte desta página qual é a descrição dela?
Você consegue descobrir essa descrição através da busca do Google ?

4 comentários:

Junior Oliveira disse...

Legal a dica

Anônimo disse...

descrição na linha 21 do código, acima de 1 comentario

Anônimo disse...

ótimo site, seria possível postar exercícios sobre o assunto!

Unknown disse...

Acho que o correto seria dizer que a meta tag description esta na linha 18

Tutoriais de HTML e CSS