Lar Mídia social Como otimizar as mídias sociais com o Open Graph Protocol do Facebook - dummies

Como otimizar as mídias sociais com o Open Graph Protocol do Facebook - dummies

Vídeo: O que é API? REST e RESTful? | Mayk Brito 2025

Vídeo: O que é API? REST e RESTful? | Mayk Brito 2025
Anonim

O Facebook é o principal site de redes sociais do mundo. Se você quiser otimizar as mídias sociais, você precisará saber sobre o Open Graph Protocol do Facebook. O protocolo Open Graph é um padrão de marcação semântica introduzido pelo Facebook em 2010 e agora amplamente aceito. Algumas pessoas vêem Open Graph como sendo concorrentes com Schema. org, mas, na realidade, os dois padrões são complementares.

É possível implementar o esquema. microdados org e a marcação Open Graph. Os padrões não são conflitantes.

Ambos os padrões têm o mesmo objetivo: descrever melhor as informações em uma página da web. As principais diferenças podem ser resumidas desta forma:

  • Os metadados de Gráficos Abertos descrevem a página como um todo.

  • Esquema. Os microformatos orgânicos descrevem elementos específicos na página.

Abrir Gráfico de marcação contém menos informações do que o Esquema. O org -microdata faz, mas é mais fácil de implementar. Para tornar a sua página web compatível com Gráficos abertos, você precisa adicionar metadados básicos para sua página. Como metadados tradicionais, os metadados do Open Graph entraram na tag da página da Web.

Em Open Graph-speak, uma página da Web é um objeto Gráfico aberto.

O Gráfico aberto tem quatro propriedades necessárias:

  • og: title : O título da página como você deseja que ele apareça em qualquer sistema que lê os dados do Gráfico de Aberto.

    É melhor manter a tag do título com menos de 88 caracteres. Embora você possa adicionar mais caracteres, o Facebook exibe apenas os primeiros 88.

  • og: digite : O tipo de seu objeto. Os tipos são especificados pelo protocolo e são bastante numerosos.

    tipo é uma propriedade interessante, pois controla onde o compartilhamento aparece nos interesses do usuário no Facebook. Se, por exemplo, você definir o tipo de objeto como "filme" e o usuário compartilhar o objeto, o compartilhamento aparece como um dos interesses do usuário abaixo do cabeçalho Filmes no perfil do Facebook da pessoa.

    Verifique aqui para descobrir todos os vários tipos de objeto.

  • og: image : O URL da imagem que deseja representar a página.

    imagem é uma marca importante, porque uma boa imagem pode ajudar seu conteúdo a se espalhar. Use esta etiqueta para controlar o que aparece quando seu conteúdo é compartilhado e certifique-se de que está otimizado para se encaixar bem no Facebook. (A proporção de 1. 9: 1 funciona melhor. Mantenha-o maior que 400 × 209 pixels.)

    Não deixe esta etiqueta em branco. Se você fizer isso, o Facebook simplesmente puxará alguma outra imagem da página - possivelmente levando a resultados inadequados.

  • og: url : O URL da página.O conteúdo da etiqueta url determina onde o usuário vai quando ele clica no botão Compartilhar.

Alguns dos elementos necessários possuem atributos opcionais adicionais e você pode fornecer vários valores para alguns deles, se assim o desejar.

As opções incluem

  • og: audio : Se você deseja que um arquivo de áudio acompanhe o objeto, use essa tag e especifique a URL do arquivo.

  • og: descrição : Use esta etiqueta para fornecer uma descrição de um ou duas frases do objeto.

    O Facebook exibe apenas os primeiros 300 caracteres da sua descrição.

  • og: determiner : Esta tag permite que você especifique a palavra que precede o título do objeto em uma frase - normalmente, a, an, ou a.

  • og: locale : Esta etiqueta especifica a localidade para a página - em outras palavras, o idioma na página. Se o seu conteúdo estiver em inglês americano, por exemplo, o valor dessa tag seria en_us.

  • og: local: alternativo : Se a página é oferecida em vários idiomas, você pode listá-los usando essa tag.

  • og: site_name : Se a página da Web for parte de um site maior que tenha um nome diferente, use esta tag para especificar o nome do site.

  • og: video : Se você possui um arquivo de vídeo para incluir, use esta tag para especificar o URL do arquivo.

Usar as tags é mais fácil de entender com um exemplo. No exemplo a seguir, você vê como você pode implementar a marcação Open Graph para uma página da Web sobre um livro intitulado HowTo: WordPress 4:

 200x300. png ">  Escrito por Ric Shreves e publicado pela água e pedra digital. Disponível agora na Amazon. com, Google Play Store e neste site. Publicado nas versões ePub, Mobi e PDF. ">

Suas tags Open Graph ir na tag da página. Observe que se você estiver usando um sistema popular de gerenciamento de conteúdo (como WordPress, Joomla! Ou Drupal), os plug-ins irão lidar com esta tarefa para que você não precise escrever nenhum código.

O resultado da implementação dos metadados do Open Graph é controlar o que é exibido quando alguém compartilha o conteúdo na página da Web. Se alguém compartilhar a página com a marcação mostrada no código anterior, isso é o que parece.

Exemplo de compartilhamento de compartilhamento do Facebook.

Se você não tiver certeza de que você fez uma marcação Open Graph corretamente, teste-a com o Open Debugger de gráfico aberto do Facebook.

Embora os metadados do Open Graph sejam fundamentais para o sucesso do seu conteúdo no Facebook, ele também é usado por vários outros sites sociais importantes, incluindo Twitter, Pinterest, LinkedIn e Google+.

A marcação Open Graph funciona? Isso certamente faz! O site do livro eletrônico Kobo afirma ter alcançado um aumento de 50% no tráfego do Facebook depois de implementar tags do Open Graph.

Como otimizar as mídias sociais com o Open Graph Protocol do Facebook - dummies

Escolha dos editores

Como criar um módulo HTML personalizado no Joomla - dummies

Como criar um módulo HTML personalizado no Joomla - dummies

Uma das grandes coisas sobre o Joomla é o quão incrivelmente flexível é. A instalação padrão do CMS inclui 23 módulos diferentes para ajudá-lo a fazer seu site funcionar sem problemas. Às vezes, no entanto, você pode querer adicionar uma função ao seu site que esses 23 módulos simplesmente não vão cobrir. Sob tais circunstâncias, você pode querer considerar ...

Como criar um item de menu no Joomla Content Management - manequins

Como criar um item de menu no Joomla Content Management - manequins

Um item de menu determina o layout dos artigos, que é um dos aspectos do Joomla para o qual você precisa se acostumar. As páginas da Web não existem fisicamente no Joomla - elas são apenas itens no seu banco de dados - até que a página seja acessada. Quando você abre um artigo, o Joomla tira os dados necessários do ...

Como criar um novo item de menu com o Joomla! 1. 6 - dummies

Como criar um novo item de menu com o Joomla! 1. 6 - dummies

Não estresse se você precisa criar um item de menu em sua página da Web interativa - é fácil ao usar o Joomla! Gerenciador de menu. Para adicionar itens de menu a um site existente, basta usar estas etapas: Escolha Menus → Gerenciador de menus para abrir o Gerenciador de menus. Clique no nome do menu que deseja adicionar um novo ...

Escolha dos editores

Obtendo Ajuda do Eclipse - dummies

Obtendo Ajuda do Eclipse - dummies

Com a complexidade do Java e a nuance do Eclipse, você não pode esperar para lembrar de tudo. Às vezes, você precisa de um pouco mais de ajuda do Eclipse para começar sua programação. Felizmente, o Eclipse oferece ajuda geral e sensível ao contexto: para ajuda sensível ao contexto: no Windows, pressione F1. No Linux, pressione Ctrl + F1. Em um Mac, pressione ...

Software gratuito: preenchimento automático de células no OpenOffice. org Calc - dummies

Software gratuito: preenchimento automático de células no OpenOffice. org Calc - dummies

OpenOffice. org - uma alternativa gratuita para o Microsoft Office - inclui Calc, uma planilha eletrônica semelhante ao Excel. O Calc fornece uma maneira fácil de criar automaticamente uma coluna ou linha de números em qualquer sequência que você especificar. Esse recurso de preenchimento automático é útil para criar listas numeradas ou preencher os cabeçalhos de colunas e linhas de tabelas, como ...

Acessos acessíveis no modo de exibição do Prezi - dummies

Acessos acessíveis no modo de exibição do Prezi - dummies

O prezi possui dois modos de operação diferentes: Modo de edição, no qual você crie sua apresentação e Show Mode, no qual você apresenta suas criações. No modo Show, use esses atalhos úteis para tornar sua apresentação ainda mais suave. Use esta como uma lista de verificação de prática antes de começar: Use esta função: Para fazer isso: Completo ...

Escolha dos editores

Elementos HTML básicos - dummies

Elementos HTML básicos - dummies

HyperText Markup Language (HTML) é o idioma da web, onde os elementos ditaram a formatação e o estilo do seu conteúdo. Os elementos HTML compõem a codificação baixada que você vê quando você acessa uma página da Web em seu navegador da Web (como Internet Explorer, Firefox ou Safari). Aqui estão alguns elementos básicos para você ...

Usando AutoCAD DesignCenter - dummies

Usando AutoCAD DesignCenter - dummies

DesignCenter é um nome tolo para uma paleta útil, se um pouco ocupada. A paleta DesignCenter é útil para dados de mineração de todos os tipos de desenhos. Enquanto a paleta Propriedades está preocupada com as propriedades do objeto, a paleta DesignCenter lida principalmente com objetos nomeados: camadas, tipos de linha, definições de bloco (isto é, símbolo), estilos de texto e outros objetos organizacionais ...

Zoom e Panning no AutoCAD - dummies

Zoom e Panning no AutoCAD - dummies

O AutoCAD facilita a panorâmica, oferecendo barras de rolagem e panning em tempo real. Na panorâmica em tempo real (em oposição à panorâmica de finalização), você pode ver objetos movendo-se na tela enquanto você arrasta o mouse para cima e para baixo ou para frente e para trás. Claro, o ponto de vista está em movimento, não os objetos. Tanto a panorâmica quanto o zoom mudam a visualização ...