Web Design Curitiba | Web Designer | Websites | Sistemas Web | Portfólio - Portfólio | Designer | XHTML | CSS | Tableless | Web Standards

 

A importância das Meta Tags! Você usa?

Ao entrar em algum site procurando por referências, quando me deparo com um bom layout, logo em seguida e quase que intuitivamente a primeira coisa que reparo é no código fonte da página. Através dele você sabe se o site foi desenvolvido num editor visual, o grau de atenção que o designer deu ao seu trabalho e até se ele se preocupou em colocar todas as meta tags para indexação dos mecanismos de busca corretamente.

O que mais me espanta é que a grande maioria dos iniciantes não tem a menor noção do que é uma meta tag, e de como elas são fundamentais na divulgação do seu site.

Hoje o nosso assunto será voltado para as “meta tags”, elas são responsáveis por trazer todas as informações sobre o documento web que está sendo acessado naquele momento.

Cada buscador trabalha de forma única, levando em consideração dezenas e às vezes até centenas de valores diferentes na hora de exibir os resultados de uma busca. Infelizmente, alguns desenvolvedores fazem mal uso deste recurso, o que faz com que alguns robots e spiders não dêem muita atenção às meta tags keywords. Por isso, sempre use palavras-chaves coerentes com o seu conteúdo, e nunca acrescente itens só para aparecer melhor na busca - afinal você sabe que quando o usuário entra no seu site e não encontra o que foi “prometido” a imagem dele está comprometida, e mesmo os buscadores melhoram seus algoritmos de procura a cada dia, e um truquezinho que aparentemente vai te ajudar pode atrapalhar, e muito.

A sintaxe se utilização das metas são:

<meta name="description" content="A importância das Meta Tags! Você usa?">

com isso você estaria dizendo para o navegador que a “meta” do tipo “name” teria o seguinte conteúdo: “A importância das Meta Tags! Você usa?”

Na categoria name você pode utilizar os seguintes tipos de meta:

  • description - uma breve descrição sobre o conteúdo do documento web ou de que tipo de documento se trata.
<meta name="author" content="Nome do autor do documento" />
  • author - seguindo do parâmetro “content” vai informar ao visitante e ao navegador qual é o Autor do documento web.
<meta name="revised" content="01/08/2008" />
  • generator - fornece ao navegador/usuário qual foi o software utilizado para gerar aquele documento.
<meta name="generator" content="Microsoft FrontPage 5.0" />
  • keywords - informa aos indexadores de busca (ex: Google), quais as principais palavras que levarão o usuário a encontrar sua página em um determinada busca.
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript" />
  • classification - as palavras nela inseridas serão associadas as categorias do mecanismo de busca que ler o conteúdo do documento.
<meta name="classification" content="Web Design, Design, Web Site, Website, Home Pages" />
  • language - determina qual a linguagem em que o documento foi escrito, ajuda quando o documento é acessado de outros paises.
<meta name="language" content="pt-br" />
  • doc-class - indica qual é o estado em que o documento se encontra, podendo receber os seguintes “content”: Completed, Draft, Living Document e Published.
<meta name="doc-class" content="Completed" />
  • doc-rights - indica o status de licença do documento, pode receber como atributo: Copywritten Work, Private, Public e Public Domai. Sintaxe:
<meta name="doc-rights" content="Public">

Finalizando

Com isso terminamos o nosso artigo sobre meta tags, para quem quiser se aprofundar sobre o assunto basta procurar no seu mecanismo de busca padrão e terá uma enorme quantidade de resultados, o que vale lembrar é que sempre devemos buscar por referências e filtrá-las da melhor forma possível focado no que você precisa para a atual necessidade, assim não estará colocando conteúdo desnecessário em seu documento XHTML.

Obrigado, um abraço a todos !

Escreva páginas utilizando XHTML corretamente

Seguindo com as introduções, vou agora descrever sobre a formação básica de um documento web. Um documento web bem formado deve ser do formato XHTML, ele se constitui de três partes (tags) básicas:

  • DOCTYPE
  • Head
  • Body

1.0 - DOCTYPE

O DOCTYPE é extremamente importante, pois informa ao navegador que tipo de documento ele está lendo e qual sua versão. Isso ajuda a evitar erros de renderização por parte dos navegadores e a depurar erros na marcação. Existem três tipos de DOCTYPE que pode ser utilizados, são eles:

1.1 - DTD XHTML 1.0 Strict:

O arquivo DTD/xhtml1-strict.dtd é uma parte normativa desta especificação. As anotações de conteúdo deste arquivo estão disponíveis em uma seção separada para complementação. Seu código tem o seguinte aspecto:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1.2 - DTD XHTML 1.0 Transitional:

O arquivo DTD/xhtml1-transitional.dtd é parte normativa desta especificação. As anotações de conteúdo deste arquivo estão disponíveis em uma seção separada para complementação. É escrito da seguinte forma:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1.3 - DTD XHTML 1.0 Frameset:

O arquivo DTD/xhtml1-frameset.dtd é parte normativa desta especificação. As anotações de conteúdo deste arquivo estão disponíveis em uma seção separada para complementação. Respectivamente:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2.0 - HEAD

O “head” não é visualizado no corpo da página do documento web. Ele serve para guardar informações referentes ao conteúdo da página, nele pode conter os seguintes elementos:

<base>, <link>, <meta>, <script>, <style>,  e <title>.

2.1 - <base>

Define um diretório base para dizer para o navegador à partir de onde ele vai buscar as informações sobre o documento.

2.2 - <link>

Usado para linkar arquivos externos no documento XHTML.

2.3 - <meta>

Esta tag provê meta-informações, descrições, tempo de refresh da página, data de revisão do documento, palavras-chaves, etc. São exemplos disto os seguintes trechos de códigos:

Define keywords para os mecanismos de busca:
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript" />;

Define uma descrição sobre sua página web:
<meta name="description" content="Tutoriais sobre XHMTL, CSS, JavaScript e Design" />

Refresh página depois de 5 segundos:
<meta http-equiv="refresh" content="5" />

2.4 - <script>

Utilizada para inserir scripts na página. De acordo com o padrão Web Standards todos os arquivos desta origem devem estar apenas linkados e não inseridos diretamente no documento. Ficando com o seguinte aspceto:

<script src="caminho do seu arquivo" type="text/javaScript"></script>

2.5 - <style>

É utilizado com frequência por todos os designer para inserir a formatação CSS do documento. Através desta tag podemos linkar um arquivo externo chamado de CSS (escrevei em breve), que será o responsável pela formação visual do documento. O trecho do código possui o seguinte padrão:

<link href="/caminho de localização do seu arquivo" rel="stylesheet" type="text/css" />

2.6 - <title>

E por fim o “Title” não menos importante é a tag responsável pelo nome exibido na barra superior do navegador. É de extrema importância que seja inserida em todos os documentos, pois ajuda na indexação dos motores de busca dos buscadores. Sua sintaxe é escrita da seguinte forma:

<title> Título do seu documento web </title>

3.0 - <body>

Está tag é a responsável por tudo que irá conter em seu documento web. Tudo o que for inserido após ela refletirá na apresentação do documento no navegador.

Conclusão:

Acima foi descrito passo a passo tudo o que contém dentro de um documento web básico no formato XHTML seguindo os padrões Web Standards. No seu formato mais simples um documento web completo ficará da seguinte forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Título do documento.</title>
</head>
<body>
<p>Conteúdo da página web.</p>
</body>
</html>

No próximo artigo falarei com mais detalhes sobre a utilização das Tags do html para disponibilização de conteúdos web de acordo com os padrões Web Standards.

Abraços.

 

Wordpress| XHTML Válido| CSS Válido
Danilo Thomé Gonçalves | dtggoncalves@gmail.com | Curitiba | PR