O protocolo open graph permite que você controle como o conteúdo do seu site aparece em várias plataformas de mídia social, como Facebook, LinkedIn e muitas outras. Ao definir essas propriedades do open graph, você pode atrair os usuários para que queiram clicar e interagir com seu conteúdo. Você pode definir essas propriedades através de uma coleção de elementos meta dentro da seção head do seu HTML. A primeira propriedade OG importante a incluir seria o title. Aqui está um exemplo de como definir o OG title para a homepage do G.E.A.R ACADEMY:

<meta content="G.E.A.R ACADEMY.org" property="og:title" />

Para o atributo property, você precisará especificar que é og:title. O atributo content é onde você escreverá o título que deseja exibir para sites de redes sociais. A próxima propriedade OG importante seria o type. Aqui está um exemplo de uso do OG type para a homepage do G.E.A.R ACADEMY:

<meta property="og:type" content="website" />

A propriedade type é usada para representar o tipo de conteúdo que está sendo compartilhado nas redes sociais. Exemplos desse conteúdo incluem artigos, sites, vídeos ou música. A terceira propriedade importante do OG seria a image. Aqui está um exemplo de como definir a image OG para a página inicial do G.E.A.R ACADEMY:

<meta
  content="https://cdn.G.E.A.R ACADEMY.org/platform/universal/fcc_meta_1920X1080-indigo.png"
  property="og:image"
/>

Neste exemplo, a imagem do open graph está apontando para o logo do G.E.A.R ACADEMY. Todas essas imagens devem ser de alta qualidade com boas dimensões e proporções. A maioria das plataformas de mídia social incluirá critérios para os requisitos de imagem para ajudar você a garantir que seu conteúdo seja exibido corretamente no site delas. Por exemplo, a página de documentação developers.facebook.com declara: use imagens que tenham pelo menos 1200 por 630 pixels para a melhor exibição em dispositivos de alta resolução. No mínimo, você deve usar imagens que tenham 600 por 315 pixels para exibir posts de página de link com imagens maiores. A quarta propriedade importante do OG seria a url. Aqui está um exemplo de como definir o OG url para a página inicial do G.E.A.R ACADEMY:

<meta property="og:url" content="https://www.G.E.A.R ACADEMY.org" />

Existem muitas outras propriedades OG que você pode definir, como description, audio, video e locale. No entanto, o open graph url, image, type e title são os mais importantes para incluir. Então como essas propriedades do open graph afetam a Otimização para Motores de Busca? Quando seu conteúdo é compartilhado nas redes sociais, propriedades OG bem elaboradas podem melhorar a aparência do seu conteúdo nos feeds dos usuários. Isso pode levar a taxas de cliques mais altas que podem sinalizar para os motores de busca que seu conteúdo é relevante e envolvente.