Tag Archives: METADADOS

#04 – HTML5 – Básico – MetaTags

Um pouco de teoria! – Web Apps! (Conceitos & Utilização)

Saga: M&M (Mundo Mobile)

O que é?

MetaTags representam estruturas de informações que descrevem características de uma fonte de informação. Ou seja, elas expõem informações sobre um site para buscas ou aplicações.

Em resumo, metadados são dados sobre dados, informações sobre a própria informação.

Utilização

Os metadados servem para ajudar para informar aos devs ou apps como localizar/descrever informações, melhorando o gerenciamento/uso das nossas informações.

Na prática, as aplicações conseguem fazer um melhor uso/aproveitamento destas informações.

Padrões

Existem vários de padrões para criação de Metadados, mas no universo web, entra em ação as Metatags. Ou seja, tags HTML que permite inserir informações sobre site.

A MetaTag mais simples do mundo

Definidas dentro da tag HEAD do doc HTML:

<meta name="description" content="site.rio - Site sobre Rio Web." />

html5_basico_metatags

Os sistemas de “Search” usam metatags para exibir informações sobre sites nos resultados de busca. Por exemplo, o Google descarta as metatags Keywords, mas utiliza a metatags Description para exibir a descrição de sites nos resultados de sua busca.

Metatags importantes

Description

Informa uma descrição sobre o site. Diga para que serve, o assunto principal.

<meta name="description" content="site.rio - Site sobre Rio Web." />

As busca conseguem indexar em média 250 caracteres desta metatag. Atenção neste limite, ou a sua descrição pode ser exibida pela metade nos resultados de busca.

Keywords

Informa as palavras chaves relativas ao assunto do site.

<meta name="keywords" content="xhtml, ajax, javascript, c#">

Existem CMS e sistema de blog (tipo WordPress) onde é importante realizar um estudo para inserir as tags dos posts nestas metatags.

Robots

Informa para os robôs de busca o que eles irão e não indexar no site.

Muito utilizada para páginas que não desejamos que o sistema de busca faça a indexação.

<meta name="robots" content="valor, valor, valor" />
  • none: robôs ignoram a página. Equivale ao noindex e nofollow
  • noindex: não indexa a page pela busca
  • nofollow: impede os robôs que sigam os links da page
  • noimageindex: impede indexar imagens (Isso não inclui os textos)
  • noimageclick: ignora links colocados diretamente em imgs
  • all: sem restrições de indexação
  • index: permite aos robôs incluir esta página nas buscas
  • follow: robôs podem seguir os links da page para localizar outras pages

Language

Informa a linguagem da página.

<meta name="language" content="pt-br" />

Author

Informa os autores do site.

<meta name="author" content="Aldo" />

Pragma

Informa que o browser não deve cachear a página.

<meta http-equiv="pragma" content="no-cache" />

HTTP-EQUIV e NAME (Diferença)

Quando o um link é clicado, o servidor recebe um request do browser via protocolo HTTP (regras que determinam o diálogo entre cliente/server).

O Server “fala” retornará várias repostas ao browser (este exibirá na tela o que o server mandar).

A metatag HTTP-EQUIV, permite controlar alguns destes comandos, como o cacheamento da página ou redirecionamento para outro endereço.

Já as metatags NAME não irá utilizar este tipo de conversa. Eles ficam responsáveis apenas em passar informações sobre o site para sistemas ou apps (como sistemas de busca).

Definir muitas metatags?

Utilize somente as metatags realmente úteis para o seu objetivo.

No WordPress, existem plugins que auxiliam na publicação de metatags.

Então é isso treine bastante, e foco no HTML5.

Ok! Um pouco sobre as FEATURES do HTML5.