Bonsai UX
Bonsai UX

UI, Design e User Experience de um ponto de vista zen

Share


Our Newsletter


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tags


avrt

Twitter


Bonsai UX

SEO: META tags gerais + tags opcionais

Poe BellentaniPoe Bellentani

Essa é uma série de posts baseados em uma documentação que uso no cotidiano e também como material base de um workshop para a galera de Frontend Dev com quem trabalho (se alguém estiver interessado, manda e-mail!).


As tags gerais se definem como ótimas ferramentas de ranking, algumas são importantes, outras nem tanto, mas a definição das mesmas atribui algum ponto positivo dentro do ranking em sistemas de busca - várias delas ajudam o usuário a se encontrar, seja em celulares ou navegadores, como as que definem favicon e imagens para favoritos em smartphones.

Por sua vez, as tags opcionais não são tão relevantes, mas podem ajudar seu site em determinados contextos sistêmicos.

Tags Gerais

As metatags são normalmente preenchidas com variáveis em comum com as tags utilizadas pelo Twitter, Google e Facebook. No final do documento tem algumas dicas de como utilizar melhor as metatags.

Keywords

<META name="keywords" content="a, list, of, keywords">

Esta tag contém a lista de palavras-chave separadas por vírgula. Estas são palavras-chaves importantes que contém informação sobre o conteúdo do seu website.

Elas perderam muito a relevância hoje para buscadores, o Google, por exemplo, leva mais em consideração o contexto todo da página e informações contidas no atributo ALT e em microdata que nessa tag. Porém, é bom manter uma listagem concisa de keywords sempre listada, para organizar a página.

Uma saída é pegar as tags cadastradas pelo usuário na confecção da página master e somar com o post específico ou com a categoria. É bom evitar o uso de muitas metatags porque os buscadores podem acreditar que são técnicas de *Black Hat SEO*.

Description

<META name="description" content="A descrição entra aqui.">

Esta tag contém uma descrição do site e seu conteúdo. Esta descrição deve ser curta e resumir o site com suas principais palavras-chave.

Podemos alimentar essa tag com o mesmo conteúdo presente nas descrições do Twitter, Google e Facebook.

Outras tags

Existem várias outras meta tags como robots, revisit-after, rating, owner, publisher, etc. que podem ser usadas em uma página. Elas podem ser escolhidas para serem utilizadas de acordo com cada projeto.

Através da otimização de META tags, as páginas podem atingir posições melhores nos mecanismos de busca. Agora, a maioria deles varre a internet em busca do conteúdo das páginas, então este conteúdo deve ser específico e conter palavras-chave várias vezes - mas fique atento, utilizar palavras-chave sem contexto ou para "burlar as regras" pode causar mais problemas que soluções (leia mais sobre *Black Hat SEO*).

Favicon e Touch Icons

Existem alguns itens que também podem variar nos cabeçalhos dos documentos HTML. Em alguns casos, as páginas recebem variações de logotipos da empresa de acordo com as áreas internas e isso pode se refletir na variação de thumbs para mobile ou até mesmo nos favicons, pensando nisso a inclusão desses elementos está referenciada aqui.

Favicon

Basta chamar o favicon alterando a sua composição de acordo com a página, caso necessário.

<link rel="shortcut icon" href="favicon.ico" />

Apple Touch Icon

A Apple considera para seus dispositivos essa imagem, que pode ser usada para exibir miniaturas em seus aplicativos ou até mesmo no Safari de dispositivos mobile (celulares e tablets).

<link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png">

Tags Opcionais

<META name="copyright" content="copyright statement">

Indica as informações de copyright de sua página.

Revisit After

<META name="revisit-after" content="7 days">

Esta tag informa ao robô que revisite o site após 7/14/21 dias.

Author

<META name="author" content="Nome do Autor">

Esta tag contém o nome do autor da página, pode ser utilizada tanto para referenciar a uma pessao física como jurídica, dependendo do contexto.

Demais posts dessa série:

Comments