Gerador de Meta Tag

A importância do SEO

SEO é uma abreviação para Search Engine Optimization, ou Otimização para Mecanismos de Busca. Você sabe porque o processo de SEO é importante para seu website? E como o SEO afeta seu tráfego?

Neste tutorial iremos lhe mostrar como otimizar suas páginas a fim de aumentar o tráfego e o valor do seu site usando o Gerador de Meta Tag do EasyRetro.

O propósito do SEO é aumentar o tráfego do seu site ao tornar mais fácil - para mecanismos de busca, encontrarem e posicionarem sua página em seus resultados, baseado no conteúdo da mesma. Este processo tem como objetivo melhorar a visibilidade do site em resultados buscas não patrocinadas (grátis).

O tráfego gerado em decorrência do SEO é frequentemente denominado como orgânico.

É muito fácil cair na armadilha de pensar que aplicar técnicas de SEO irá automaticamente aumentar o tráfego, leads e vendas, tornando seu negócio mais lucrativo. Mas é importante ter em mente que seus esforços levarão algum tempo para se tornarem efetivos.

Principais meta tags para SEO

Uma meta tag é uma palavra ou frase adicionada ao código HTML de uma página web que descreve o conteúdo desta, e não é visível aos leitores. Estas tags são usadas por mecanismos de busca para compreender a página e extrair uma visão geral sobre seu conteúdo.

Existem vários tipos de meta tags, nós iremos cobrir os mais importantes aqui, mas caso você precise de mais detalhes, basta buscar o tipo específico no Google ou olhar sua especificação.

Nós cobriremos os seguintes tipos de meta tags:

• Título
• Descrição
• Cards do Twitter
• Open Graph (OG)
• Imagem

A meta tag title

A meta tag title (títiulo) é utilizada para descrever um documento no resultado de uma busca, como no Google ou no Bing. Um dos papéis mais importantes do título é atrair a atenção dos leitores. O título deve ser conciso porém informativo o suficiente para dar uma ideia do conteúdo no corpo da página.

O título também é a fonte do texto exibido nas abas dos navegadores.

A seguir mostramos um exemplo de como a meta tag title se parece:

<!-- Title tag example -->
<title>Example</title>

A meta tag description

A meta tag description (descrição) é utilizada para informar aos mecanismos de busca sobre o que a página trata. Escrever apropriadamente este trecho de texto irá melhorar suas chances de aparecer em resultados de buscas com as palavras-chave relevantes. Também poderá impactar seu CTR, uma vez que a descrição é exibida logo após o título em mecanismos de busca.

CTR é uma abreviação para Click Through Rate, ou taxa de cliques, e é uma métrica importante que mede quantos leitores - do total que foi exposto ao seu link, clicaram nele. É uma medida de quão bem sucedido é o seu conteúdo, e pode lhe ajudar a entender como melhorá-lo.

A seguir, um exemplo da meta tag description:

<!-- Description tag example -->
<meta name="description" content="This is an example description." />

Meta tags para cards do Twitter

Redes sociais não são apenas ótimos canais para comunicação com sua audiência, mas também um ótimo lugar para promover seu conteúdo. O Twitter é uma das plataformas de mídia social mais utilizadas e pode ser uma boa forma de alcançar novos clientes e parceiros de negócios.

Mas você deve atrair a atenção dos usuários em seus feeds. Aqui é onde os Twitter cards entram em cena. Eles lhe permitem apresentar um card chamativo sobre seu conteúdo, incluindo o título da página, descrição e até uma imagem!

Você pode usar as seguintes meta tags principais para criar cards no Twitter: title, description, site e creator. Imagens serão abordadas mais à frente.

A seguir, um exemplo de meta tags para cards do Twitter

<!-- Twitter tags example -->
<meta name="twitter:title" content="Example" />
<meta name="twitter:description" content="This is an example description." />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@example" />

Meta tags para Open Graph

Open Graph (OG) é um protocolo para desenvolvedores poderem adicionar metadados às páginas web para plataformas como Facebook, Twitter, Telegram e LinkedIn. Utilizando o Open Graph, anunciantes podem fazer com que informações sobre seu conteúdo sejam exibidas nos feeds.

Assim como os cards do Twitter, o mesmo princípio se aplica ao Open Graph. Se você deseja atrair a atenção para seus posts, precisa ter certeza de que eles se destacam na multidão.

As principais meta tags para Open Graph são: title, description, URL e nome do site. Na próxima seção também serão abordadas as tags para imagem.

A seguir, um exemplo de meta tags para Open Graph:

<!-- Open Graph / Facebook tags-->
<meta name="og:title" content="Example" />
<meta name="og:description" content="This is an example description." />
<meta property="og:url" content="https://example.com" />
<meta property="og:site_name" content="Example" />

Como incluir imagens em cards do Twitter cards e em Open Graph

Imagens são uma forma ótima de prender a atenção das pessoas e garantir que leiam seu post. Elas são especialmente ótimas para uso em redes sociais. Agora nós lhe mostraremos como criar elegantes cards do Twitter e posts em Open Graph utilizando imagens.

Para ambos os protocolos, há três tipos de meta tags: a URL da imagem, a altura e a largura.

Primeiro, para cards do Twitter, as meta tags serão como o exemplo:

<!-- Twitter image tags-->
<meta property="twitter:image" content="https://example.com/example.png" />
<meta property="twitter:image:width" content="1200" />
<meta property="twitter:image:height" content="630" />

Já para Open Graph, elas serão como a seguir:

<!-- Open Graph / Facebook image tags-->
<meta property="og:image" content="https://example.com/example.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Utilizando o Gerador de Meta Tag do EasyRetro

O processo pode ser tedioso, configurar todas estas meta tags pode fazer com que queira arrancar os cabelos. Mas não se preocupe, estamos aqui para lhe auxiliar.

O Gerador de Meta Tag é uma ferramenta grátis que torna fácil a criação de meta tags. Tudo que precisa fazer é preencher um formulário com as informações do seu site ou página, e nós geramos o código HTML para suas meta tags. Simples assim.

Você pode preencher os metadados básicos como título e descrição, e também gerar tags para cards do Twitter e Open Graph!

Check out some other tools from EasyRetro

Nós acreditamos que as ferramentas certas podem levar seu time ao sucesso, por isso estamos sempre lhe trazendo ferramentas divertidas e fáceis de usar!

Veja nossa página Retrospective Academy, você encontrará conteúdos e ferramentas muito úteis! Você também pode visitar o EasyRetro Blog onde você encontrará um conteúdo valioso com dicas, passos e guias para lhe ajudar em suas retrospectivas!