Blog sobre WordPress
No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
Cadastrar e-mail
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
No Result
View All Result
Blog sobre WordPress
No Result
View All Result
banner-horizontal-3

Início » WordPress Mobile » O protocolo Open Graph no WordPress

O protocolo Open Graph no WordPress

Open Graph é uma tecnologia que te permite ter controle sobre como sua página web será compartilhada nas redes sociais. Saiba como aproveitar o recurso.

Leandro Vieira by Leandro Vieira
3 anos ago
Reading Time: 8 min
3
O protocolo Open Graph no WordPress
Compartilhe no FacebookCompartilhe no LinkedIn
Audio

Open Graph é uma tecnologia que te permite ter controle sobre como sua página web será compartilhada nas redes sociais.

Conteúdo relacionado

O conceito e aplicabilidade do Mobile First

WordPress e o desenvolvimento de aplicativos móveis

Não use Design Adaptativo. Considere o Design Responsivo

O recurso foi introduzido pelo Facebook em 2010.

Em nossas páginas, no fritar dos ovos, a tecnologia se resume a meta tags.

Meta tags nos permite definir qual imagem representará uma página, o título e a descrição.

Dessa forma, podemos trabalhar uma linguagem mais específica para o contexto social.

Se do nosso lado a tecnologia se resume em meta tags, do lado da maior rede social do mundo, o Facebook, as páginas com esse artifício podem se transformar em objetos ricos e integradas ao gráfico social.

Esse mecanismo também ficou convencionalmente chamado de meta tags das redes sociais, meta tags do Facebook e por aí vai.

Mas o correto é Open Graph, meta tags do padrão Open Graph.

Logo do protocolo Open Graph

Para que serve o recurso

Quando o usuário do Facebook curte uma URL com o Open Graph implementado, é criado um vínculo entre o usuário e essa URL.

Através desse vínculo, será possível interagir com os usuários que a curtiram, da mesma forma que ocorrem as interações com uma página do Facebook.

Por exemplo: publicar atualizações ao usuário, direcionar anúncios e aparecer na seção “Atividades e Interesses” no perfil de quem a curtiu.

Páginas com a implementação enriquecem a experiência do usuário em suas ações de curtir e compartilhar informações.

Além de definir como a página web será representada no feed das redes sociais.

Quem usa

Além do Facebook, outras redes sociais e aplicativos de chat, como LinkedIn, Pinterest e WhatsApp, também adotam o Open Graph.

Portanto, vale a pena o esforço da implementação, dado que estamos falando de um universo maior e além da rede social do Zuckerberg.

Dado que é um padrão, outros poderão a vir utilizá-lo. Quando fazemos as coisas da forma correta, nossos ganhos são de longo prazo.

As metas-tags do protocolo

Nesse contexto chamamos essas tags de propriedades.

Algumas delas são requeridas, outras opcionais, recomendadas e específicas para vídeos, áudios e games, por exemplo.

Para abranger uma diversidade de páginas, foram disponibilizadas dezenas de possibilidades no protocolo para organizar e estruturar esses conteúdos.

A lista completa pode ser encontrada na documentação oficial. No Facebook tem as específicas dessa rede.

Abaixo, listo e comento as essenciais.

<meta property="og:url"                content="https://blog.apiki.com/slug-post/" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="Título social do post" />
<meta property="og:description"        content="Aquela descrição para aumentar o CTR" />
<meta property="og:image"              content="https://blog.apiki.com/wp-content/uploads/..." />

As meta-tags são compostas de dois atributos: property e content.

O atributo property define propriedade da página. Além disso, o nome dessa propriedade sempre começará com “og:”.

Já o atributo content especifica o conteúdo dessa propriedade.

Dito isso, no exemplo acima temos cinco propriedades. São elas.

  1. og:url;
  2. og:type;
  3. og: title;
  4. og:description;
  5. og:image

Através da “og:url” definimos a URL do conteúdo.

A “og:type” é mais semântica, define o tipo de conteúdo da página.

O título e a descrição são definidos através da “og:title” e “og:description”, respectivamente.

Já a “og:image” define a imagem a ser considerada no compartilhamento.

Protocolo Open Graph aplicado e exemplificado no Facebook

Como implementar Open Graph no WordPress

Existem vários plugins no repositório para te ajudar na implementação do recurso no WP.

Particularmente, eu prefiro fazer uso do Yoast SEO para cumprir a missão.

Primeiro, porque fica integrado com a análise de SEO e Twitter Cards. Logo, faço as três coisas de uma só vez.

Segundo, não vejo necessidade de ter uma outra solução especificamente para essa finalidade dado que o referido plugin já realiza o trabalho, e muito bem.

Mas caso você não faça uso do Yoast SEO, existe diversos outros no repositório oficial do WordPress.

Conheça o protocolo Open Graph e saiba como implementá-lo no WordPress. #OpenGraph #WordPress #YoastSEO

Tweet

A implementação em Posts e Páginas

O Yoast SEO adiciona um box na interface de edição dos Posts e Páginas.

Nesse box, uma das opções é chamado de Redes Sociais, a qual exibe duas opções: Facebook e Twitter.

Embora o nome seja Facebook, sabemos que outras redes também fazem uso do protocolo Open Graph, e nesse local é onde implementamos o recurso no Post ou na Página em questão.

Interface de edição do protocolo Open Graph no plugin Yoast SEO em Posts / Páginas no WordPress

Basta preencher os três campos disponíveis para personalizar o Título, Descrição e Imagem a ser utilizada pelo Facebook e outras redes que adotam o protocolo.

A implementação em listagens de categoria e tags

O mesmo box é disponibilizado na edição de Categorias e Tags de Posts.

Da mesma forma que podemos personalizar as informações dos conteúdos quando compartilhados, também podemos fazer o mesmo para as nossas páginas de listagem de conteúdo.

A implementação genérica

As demais páginas do seu projeto WordPress, bem como a página inicial, podem fazer uso de uma configuração global e padrão do Yoast para redes sociais.

Através da opção Redes Sociais > Facebook do plugin, temos uma interface para configurarmos o recurso nesses tipo de páginas.

Interface de configuração global do protocolo Open Graph no plugin WordPress Yoast SEO

Como validar a implementação

O Facebook disponibiliza uma ferramenta chamada Depurador de objetos do Open Graph.

Nessa ferramenta informamos o endereço de uma página e, a partir disso, podemos realizar duas ações.

  1. Mostrar informações de verificação existentes. Com essa opção são listadas todas as informações de Open Graph que foram coletadas da URL informada;
  2. Buscar novas informações de verificação. Já com essa opção, a ferramenta visita a página novamente, realiza uma nova captação de dados e atualiza as informações na rede social.

Essa segunda opção é muito útil para quando desejamos atualizar uma informação, ou corrigir dados equivocados.

Conclusão

Quanto mais pessoas compartilharem os conteúdos da sua presença digital, maior será seu alcance em plataformas sociais.

Esse gera mais tráfego e aumenta a probabilidade de conversão.

Com a implementação do protocolo Open Graph você consegue ter um maior controle e usar informações mais relevantes no âmbito social.

Você pode, por exemplo, usar um título para uma postagem no seu blog e outro título no Facebook para o mesmo conteúdo.

Você tem utilizado esse recurso de alguma forma mais estratégica?

Tags: facebookopen graphsocial media
Share18Share1SendShare
Previous Post

NGINX vs Apache: conceitos, semelhanças e diferenças

Next Post

Como implementar Mobile First em projetos WordPress

Leandro Vieira

Leandro Vieira

Uma das grandes referências de WordPress no Brasil, entusiasta e evangelista da plataforma. Fundador e CEO da Apiki, empresa especializada no desenvolvimento web com WordPress.

Related Posts

Como personalizar sua mobile branding no Google
WordPress Mobile

Como personalizar sua mobile branding no Google

4 de agosto de 2020
Twitter Card – o recurso para seu tweet ir além dos 140 caracteres
WordPress Mobile

Twitter Card – o recurso para seu tweet ir além dos 140 caracteres

28 de julho de 2020
Como implementar Mobile First
WordPress Mobile

Como implementar Mobile First em projetos WordPress

15 de janeiro de 2021
Tags Mobile
WordPress Mobile

Tags para Mobile First no cabeçalho da página

19 de agosto de 2020
Next Post
Como implementar Mobile First

Como implementar Mobile First em projetos WordPress

Visão geral sobre o checkout do WooCommerce

Visão geral sobre o checkout do WooCommerce

Comments 3

  1. Pingback: 7 ações para você vender mais na Black Friday 2020 - Apiki
  2. REINALDO OLIVEIRA says:
    2 anos ago

    Olá, super interessante.
    Estes dias estava pesquisando alguns sites que estão nas primeiras linhas do Google e notei que um que está na primeira em quase tudo tem uma instrução:
    meta property=”article:tag” content=”palavra-chave que está ranqueada”
    meta property=”article:tag” content=”palavra-chave que está ranqueada um sinônimo”
    meta property=”article:tag” content=”palavra-chave que está ranqueada um sinônimo”
    Ex:
    article:tag 1 de paus – article:tag às de paus – article:tag ás de paus tarot – article:tag – carta 1 de paus – article:tag carta 1 de paus tarot – article:tag carta ás de paus – article:section Tarot

    Perguntas:
    – Será que isso ajuda no posicionamento da palavra-chave ?
    – Se ajuda, como podemos implementar ela no WordPress?

    Grande Abraço

    Responder
    • Leandro Vieira says:
      2 anos ago

      Fala, Reinaldo.

      O Open Graph não tem relação com as primeiras posições. O Google analisa palavras-chave na composição da página e não nessas tags mencionadas.

      Essas tags servem para melhor a experiência de compartilhamento das páginas em canais sociais como Facebook, LinkedIn, por exemplo.

      Elas podem ser implementadas através do plugin Yoast SEO.

      Responder

Deixe um comentário Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

banner-lateral-3
Receba no seu e-mail uma série de conteúdos sobre Infra para WordPress.
  • Este campo é para fins de validação e não deve ser alterado.

Facebook LinkedIn Instagram Twitter Youtube Github RSS

Sobre a Apiki

Empresa especializada em WordPress com três unidades de negócios.

  1. Design e Desenvolvimento;
  2. Infra e Hospedagem;
  3. Suporte e manutenção.

Em resumo, só fazemos uma coisa em WordPress: tudo.

Páginas do Apiki.com

  • Apiki.com
  • Sobre a Apiki
  • Hospedagem
  • Desenvolvimento
  • UX & UI para WordPress
  • Growth em WordPress
  • Suporte
  • Atendimento

Páginas do Blog

  • Sobre
  • Newsletter
  • Desenvolvimento WordPress
  • Segurança para WordPress
  • WordPress Mobile
  • Infra para WordPress
  • WordPress SEO
  • WordPress Performance
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.

No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.