Meta tags essenciais para um website

Nesse post pretendo apresentar uma das rotinas do meu workflow que é trabalhar com [glossary slug=’meta-tags’]meta-tags[/glossary] para melhorar a primeira impressão de um website, principalmente [glossary slug=’meta-tags’]meta-tags[/glossary] de social media. Com o passar do tempo fiz um arquivo com as principais [glossary slug=’meta-tags’]meta-tags[/glossary], que vamos analisar neste post.


Um tempo atrás, no inicio do blog, fiz um post sobre meta-tags, explicando o que era, como funcionam e porque devemos utiliza-las. Na época fiz o post com as principais meta-tags que deveríamos utilizar para melhorar a primeira impressão de um website. Para agilizar meu workflow eu criei um arquivo básico com as meta tags que obrigatoriamente devem estar presentes em um website, esse post é para compartilhar com vocês essa informação.

Algumas ressalvas antes de mergulharmos nas informações:

  • O uso de meta-tags não é obrigatório, mas é o marketing do seu website, ele que apresenta aos motores de busca como seu site deve ser interpretado e apresentado.
  • Não utilize informações de terceiros, lembre-se que as meta-tags identificam qual o propósito da sua pagina online.
  • meta-tags não garante por exemplo a primeira página de pesquisa do Google, para isso existem ferramentas pagas como o Google Adwords, mas elas ajudam na primeira impressão da sua pagina nos motores de busca. Para gerar anúncios o Google precisa entregar informações relevantes.

Vamos agora agora ao que interessa. Clique aqui para baixar uma cópia do arquivo com as todas as tags.

Meta Tags para motores de buscas

Meta tags essenciais para motores de buscas como Google e Bing, que atualmente são os mais utilizados. Note a maioria das informações são para tentar definir o perfil da sua página.

* OS DADOS DEVEM SER INSERIDOS ENTRE A TAG HEAD DA PÁGINA *

Caso você não queira que sua página seja indexada por motores de busca, utilize esta tag:

<meta name="robots" content="noindex,nofollow">

Agora as tags essenciais para que sua página seja indexada:

<title>Titulo da página. Recomendado de 60 a 70 caracteres.</title>
<meta name="description" content="Descrição da página. Tente não ultrapassar 155 caracteres." />

Essas são as tags básicas para um website comum. Hoje em dia todo website tem um propósito, ai que entra o schema.org. Aqui no blog temos um post destinado a explicar o que é o schema.org, confira:

Caso sua página seja bem especifica, você pode detalhar mais as informações dela para os motores de busca utilizando o padrão estipulado pelo schema.org. No exemplo a seguir estamos definindo as informações relacionadas a uma pagina destinada a exibir um artigo, ou algo parecido.

Primeiro definimos o tipo do de verificação que vai ser efetuada, informando aos crawlers qual o schema da página:

<!-- Necessário para definir qual o schema da pagina -->
<html itemscope itemtype="http://schema.org/Article">

Após apontar o schema da página, declaramos os atributos desse schema através de meta tags:

<meta property="place:location:latitude" content="13.062616"/>
<meta property="place:location:longitude" content="80.229508"/>
<meta property="business:contact_data:street_address" content="Nome da rua"/>
<meta property="business:contact_data:locality" content="Noma da Cidade"/>
<meta property="business:contact_data:postal_code" content="Código Postal"/>
<meta property="business:contact_data:country_name" content="País"/>
<meta property="business:contact_data:email" content="[email protected]"/>
<meta property="business:contact_data:phone_number" content="Telefone de contato"/>
<meta property="business:contact_data:website" content="http://www.website.com"/>


No site do Schema.org tem um área destinada a apresentar os schemas que você pode utilizar de acordo com sua página.

Meta tags Social Media

Meta tags para redes sociais funcionam da mesma forma que as meta tags utilizadas para melhorar o ranking da sua página em motores de buscas, a unica diferença é a padronização utilizada nas meta tags para serviços especificos como o Twitter, Facebook, que é feita para facilitar a forma como a rede interna dos serviços interpreta os links presentes na internet. Com isso em mente já da pra começar a entender o porque de incluir tais meta tags, a não ser que você não deseje expor tais informações em redes sociais, o que também é um pouco impossível hoje (se a informação for publica nada impede que outra pessoa compartilhe em uma rede social).

Twitter Card

Twitter card é um dos métodos que o Twitter utiliza para reconhecer o conteúdo de algum link em sua rede através de meta tags. Existem outras formas de definir as informações da sua página no Twitter com meta tags, essa é a mais padrão, para maiores informações visite a página Twitter Developers.

<!-- Twitter Card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@usuario_twitter">
<meta name="twitter:title" content="Titulo da pagina">
<meta name="twitter:description" content="Descrição da pagina com no máximo 200 caracteres.">
<meta name="twitter:creator" content="@twitter_autor">
<-- Imagem 200x200px -->
<meta name="twitter:image" content="http://www.example.com/image.jpg">

Com as informações preenchidas corretamente, você pode obter algo parecido com isso:

Twitter Card Exemplo - Web Social Dev - IMG Post

Facebook Open Graph

O Open Graph Protocol foi criado pelo Facebook para basicamente facilitar a forma como definimos informações sociais em links da internet e claro, para otimizar a forma como os links são interpretados dentro da rede. Utilizado em conjunto com o Facebook (caso você tenha uma página para a empresa na rede) você pode obter resultados interessantes de pessoas checando seu link através do Facebook Insights. Se você não utilizar as meta tags nos links compartilhados na rede os mesmos vão se converter em dados padrões para o Facebook Insights.

<!-- Open Graph Data -->
<meta property="og:title" content="Titulo da página" />
<meta property="og:type" content="tipo da página/artigo" />
<meta property="og:url" content="http://www.exemplo.com/" />
<meta property="og:image" content="http://exemplo.com/imagem.jpg" />
<meta property="og:description" content="Descrição do link" />
<meta property="og:site_name" content="Nome do site" />
<meta property="fb:admins" content="Facebook ID - toda conta developer possui um ID" />

Utilizando as meta tags corretamente você pode obter os seguintes resultados:

Facebook Share Link Example - Web Social Dev - IMG Post

Google Plus & Google Autorship

Além das meta tags e schemas padrões para motores de buscas, o Google também possui meta tags para otimizar o reconhecimento de links dentro da rede Google+ e de quebra, também possui um recurso super interessante onde você pode definir quem é o autor de algum conteúdo online através de uma meta tag que cria uma referência com seu perfil do Google+. Isso gera mais confiança para os motores de buscas ao atribuir o conteúdo a um autor, principalmente para as buscas do Google.

<!-- Google Authorship & Publisher Markup - Utilizado para definir quem é o autor e quem publicou o link -->
<link rel="author" href="https://plus.google.com/[Google+_Profile]/posts"/>
<link rel="publisher" href="https://plus.google.com/[Google+_Page_Profile]"/>

Se tudo estiver configurado corretamente a busca do Google vai apresentar as informações da seguinte forma:

Google Autorship Example - Web Social Dev - IMG Post


Complemento do Schema.org para otimizar os links compartilhados no Google+:

<!-- Schema.org markup para o Google+ -->
<meta itemprop="name" content="Nome ou titulo do link">
<meta itemprop="description" content="Descrição do link">
<meta itemprop="image" content="http://www.exemplo.com/imagem.jpg">

Exemplo:

Google Plus Link Share Example - Web Social Dev - IMG Post

Que fim levou as Meta Keywords

Existem algumas controvérsias em relação a meta keywords, alguns dizem que não são mais utilizadas por motores para relevar o ranking de uma pagina, outros dizem que sim. O Google desde 2009 não utiliza pelo menos para os seus serviços. O Bing utiliza para tentar avaliar se o link é spam ou não. Mais que isso, só é recomendado o uso das keywords caso o seu website possua um sistema de busca interno, para facilitar o filtro da busca. Caso você não tenha e queira utilizar uma pesquisa em seu website, utilize a ferramenta de buscas customizadas do Google(grátis) e evite o uso de keywords.

E o rel-canonical?

Na verdade esse padrão também é importante para o conteúdo, mas somente quando você tem problema com conteúdo duplicado ou se você está movendo o seu conteúdo de um link para o outro.

Conclusão

Agora já da pra ter noção do quanto é importante a presença de meta tags para quem é produtor de conteúdo ou atua profissionalmente com SEO. Todo desenvolvedor web deve ter conhecimento pelo menos das principais para os motores de busca, pois quanto melhor a visibilidade do seu conteúdo para os motores de busca, melhor é o retorno do seu website para empresa ou serviço.

Qualquer dúvida estou inteiramente a disposição nos comentários.

😀

  • Paulo Sérgio Oliveira

    Parabens, otimo artigo

  • Eduardo Luiz

    Parabens kra!

  • Wesley Silva

    Muito bom cara! Parabéns pelo artigo…

  • Mazulo

    Então realmente só devo me preocupar com, pelo menos, a inclusão da meta tag “description”, e ignorar a “keyword” (diante do que foi dito que essa só deveria ser usada em sites que tenham sistema de busca interno)?

    • nem precisa ignorar, a questão na verdade é que por exemplo o google já não considera mais keywords como um item relevante para determinar a relevância de um link, e se você pensar bem faz até sentido (gera muito lixo, pense nas fotos com tags no instagram). um bom uso delas, se já tiver keywords implementadas, é utilizar para motor de busca interno em websites, na verdade elas acabam sendo mais úteis pra isso. eu ainda utilizo tanto description quanto keywords, mas uso o campo para keywords moderadamente, somente com palavras relevantes em uma média de 6 palavras apenas para definar a description. 🙂

      • Mazulo

        Saquei! Valeu Thierry o

  • Muito bom, me ajudou! vlw!

    • Muito obrigado Flávio, qualquer dúvida estamos aí!

  • Thalysson Silva

    Parabéns pelo o artigo. Sensacional. Só uma duvida, O property e o itemprop

  • Dudu Barbosa

    Olá sou novo nessa com SEO … Parabéns pelo artigo, muito bom mesmo …
    Mas vemos que existem meta tags com o mesmo conteúdo porém direcionada para facebook, twitter e google+ …
    Minha dúvida é, se você coloca o mesmo conteúdo 3 vezes sei lá não é meio ruim, ou algo assim, o site mais pesado e tal … ???

    • Olá dudu, desculpe a demora para responder 🙂
      cara, também achava a mesma coisa, mas percebi que sem um deles, é pior (caso você utilize determinada rede). Algumas até interpretam as metas do open graph, mas sempre tem alguma informação especifica que não é integrada. Por via das dúvidas, é melhor colocar todas. Eles não geram tanto requisições HTTP quanto outros processos.

      • Dudu Barbosa

        Bem, então provavelmente usarei todas como você sugeriu … Obrigado pela resposta e me desculpe pela demora tbm 😀

  • Samuelson Brito

    Perfeito!

  • Galeria quarenta e quatro Goiâ

    o post esta dando pagina não encontrada

  • joaoeymard

    Primeiramente parabéns pelo o artigo. Mas estou com um problema na hora de usar essas tags para definir a imagem. Estou lanchando um ecommerce com angular. No angula, vc define a página principal e fica “trocando” só a parte do aí quando eu coloco um caminho de uma imagem estática, ele funciona de boa e quando que coloco o link da página no face ou whats aparece as informações bem direitinho, mas quando eu coloco uma variável do angula com as informações ele tá um erro e não aparece…
    Alguém poderia me ajudar??