{"id":1291,"date":"2018-01-23T10:43:33","date_gmt":"2018-01-23T10:43:33","guid":{"rendered":"https:\/\/sitechecker.pro\/?page_id=1291"},"modified":"2025-02-14T18:57:54","modified_gmt":"2025-02-14T16:57:54","slug":"open-graph","status":"publish","type":"page","link":"https:\/\/test.sitechecker.pro\/pt\/open-graph\/","title":{"rendered":"O que s\u00e3o as Tags Open Graph e Como Us\u00e1-las Efetivamente"},"content":{"rendered":"<p>Aqui est\u00e1 um exemplo de como as informa\u00e7\u00f5es estruturadas sobre o link para um artigo aparecem nas redes sociais<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Facebook Open Graph<\/strong><\/p>\n<p>&nbsp;<\/p>\n<div class=\"content__img-wrap\"><img src=\"http:\/\/test.sitechecker.pro\/wp-content\/uploads\/2018\/01\/facebook-open-graph.png\" alt=\"Facebook open graph example\" class=\"description-img description-img-zoom\" loading=\"lazy\" ><\/div>\n<p>&nbsp;<\/p>\n<p><strong>Google + Open Graph<\/strong><\/p>\n<p>&nbsp;<\/p>\n<div class=\"content__img-wrap\"><img src=\"http:\/\/test.sitechecker.pro\/wp-content\/uploads\/2018\/01\/Google-open-graph.png\" alt=\"Google+ og tags\" class=\"description-img description-img-zoom\" loading=\"lazy\" ><\/div>\n<p>&nbsp;<\/p>\n<p>Certamente voc\u00ea ir\u00e1 concordar que essas postagens parecem bastante atraentes e clic\u00e1veis, sendo apenas um link que um usu\u00e1rio das redes sociais compartilhou com seus amigos, publicado em uma linha do tempo ou comunidade.<\/p>\n<p>Mas, o que voc\u00ea deve fazer se o c\u00f3digo estiver escrito corretamente, mas ao compartilhar no facebook, informa\u00e7\u00f5es incorretas\/desatualizadas aparecem? Bem-vindo ao <a href=\"https:\/\/developers.facebook.com\/docs\/sharing\/webmasters\" target=\"_blank\" rel=\"noopener noreferrer\">Facebook para desenvolvedores<\/a>. Seguindo este link voc\u00ea pode limpar o cache antigo de informa\u00e7\u00f5es que est\u00e1 armazenado na rede social para a sua p\u00e1gina e aliment\u00e1-lo com um novo e lindo <a href=\"http:\/\/test.sitechecker.pro\/pt\/meta-title\/\">t\u00edtulo<\/a> e <a href=\"http:\/\/test.sitechecker.pro\/pt\/meta-tag-description\/\">descri\u00e7\u00e3o<\/a>.<\/p>\n<p>Por acaso voc\u00ea agora tem uma ideia de como personalizar o layout do OG para o seu site, e spam (apenas um pouco) nos grupos e nas comunidades das redes sociais?<\/p>\n<p>&nbsp;<\/p>\n<h2>Como personalizar o layout OG<\/h2>\n<p>&nbsp;<\/p>\n<p>Vamos agora descobrir como configurar o protocolo Open Graph para o seu site e transformar essa ideia em realidade. Tudo \u00e9 extremamente simples! veja como o c\u00f3digo-fonte do protocolo deve parecer:<\/p>\n<p>&nbsp;<\/p>\n<div class=\"content__img-wrap\"><img src=\"http:\/\/test.sitechecker.pro\/wp-content\/uploads\/2018\/01\/open-graph-protocol.png\" alt=\"Open graph protocol\" class=\"description-img description-img-zoom\" loading=\"lazy\" ><\/div>\n<p>&nbsp;<\/p>\n<p>\u00c9 colocado no c\u00f3digo da p\u00e1gina, na se\u00e7\u00e3o\u2026 mas pode ser colocado ap\u00f3s as principais meta tags.<br \/>\nVamos lidar com cada tag do Open Graph e seu significado separadamente:<\/p>\n<ul>\n<li><strong>&#8220;og:locale&#8221;<\/strong> &#8211; indica a localiza\u00e7\u00e3o (idioma do site). Voc\u00ea pode usar o valor de \u201cen_US\u201d como padr\u00e3o<\/li>\n<li><strong>&#8220;og:type&#8221;<\/strong> &#8211; descreve o tipo da p\u00e1gina (artigo, not\u00edcias, v\u00eddeo, categoria, etc.); voc\u00ea pode usar \u201cartigo\u201d como padr\u00e3o<\/li>\n<li><strong>&#8220;og:title&#8221;<\/strong> &#8211; indica o t\u00edtulo do artigo<\/li>\n<li><strong>&#8220;og:description&#8221;<\/strong> \u2013 situa\u00e7\u00e3o onde uma descri\u00e7\u00e3o curta que \u00e9 exibida quando a visualiza\u00e7\u00e3o do link \u00e9 gerada<\/li>\n<li><strong>&#8220;og:url&#8221;<\/strong> &#8211; um link para a p\u00e1gina do site<\/li>\n<li><strong>&#8220;og:image&#8221;<\/strong> &#8211; um link para uma imagem que ser\u00e1 exibida na publica\u00e7\u00e3o<\/li>\n<li><strong>&#8220;og: site_name&#8221;<\/strong> &#8211; nome do site<\/li>\n<\/ul>\n<p>O significado de cada tag deve ser delineado, ent\u00e3o voc\u00ea s\u00f3 precisa preench\u00ea-las e incorpor\u00e1-las na p\u00e1gina de c\u00f3digos do seu recurso de internet favorito.<\/p>\n<p>Gostar\u00edamos de acrescentar que, com a introdu\u00e7\u00e3o do protocolo Open Graph, \u00e9 recomendado instalar bot\u00f5es \u201cCompartilhar\u201d nas redes sociais do site. Isso facilitar\u00e1 o usu\u00e1rio compartilhar informa\u00e7\u00f5es \u00fateis sobre seu site com outros usu\u00e1rios. Bem, isso certamente simplificar\u00e1 a implementa\u00e7\u00e3o de tarefas para o otimizador de SEO ao trabalhar com trocas de \u201clikes\u201d, que, embora n\u00e3o tenham um efeito tang\u00edvel de link, nos permitem acelerar a indexa\u00e7\u00e3o \/ re-indexa\u00e7\u00e3o, enquanto promovemos o site.<\/p>\n<p>&nbsp;<\/p>\n<h2>Open Graph para WordPress, Opencart, Joomla<\/h2>\n<p>For the most popular cms-systems, there are ready-made plug-ins that help realize introduction of the Open Graphic markup without involving coders.<\/p>\n<p>Para os sistemas cms mais populares, existem plug-ins pr\u00e9-fabricados que ajudam a realizar a introdu\u00e7\u00e3o da marca\u00e7\u00e3o Open Graphic sem envolver codificadores.<br \/>\nPor exemplo, para WordPress, este plug-in de SEO pode ser baixado <a href=\"https:\/\/wordpress.org\/plugins\/opengraph\/\" target=\"_blank\" rel=\"noopener noreferrer\">aqui<\/a> ou voc\u00ea pode usar a extens\u00e3o do plug-in Yoast SEO, que tamb\u00e9m solucionar\u00e1 este problema. Para o Joomla, voc\u00ea encontrar\u00e1 um plug-in seguindo este <a href=\"https:\/\/extensions.joomla.org\/extension\/easy-open-graph\/\" target=\"_blank\" rel=\"noopener noreferrer\">link<\/a>, e para Opencart <a href=\"https:\/\/www.opencart.com\/index.php?route=marketplace\/extension\/info&amp;extension_id=12874\" target=\"_blank\" rel=\"noopener noreferrer\">este<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"Aqui est\u00e1 um exemplo de como as informa\u00e7\u00f5es estruturadas sobre o link para um artigo aparecem nas redes sociais &nbsp; Facebook Open Graph &nbsp; &nbsp; Google + Open Graph &nbsp; &nbsp; Certamente voc\u00ea ir\u00e1 concordar que essas postagens parecem bastante atraentes e clic\u00e1veis, sendo apenas um link que um usu\u00e1rio das redes sociais compartilhou com&#8230;","protected":false},"author":10380808,"featured_media":3349,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"pages-templates\/pages-minitools-3.php","meta":[],"categories":[31],"tags":[],"_links":{"self":[{"href":"https:\/\/test.sitechecker.pro\/pt\/wp-json\/wp\/v2\/pages\/1291"}],"collection":[{"href":"https:\/\/test.sitechecker.pro\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.sitechecker.pro\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.sitechecker.pro\/pt\/wp-json\/wp\/v2\/users\/10380808"}],"replies":[{"embeddable":true,"href":"https:\/\/test.sitechecker.pro\/pt\/wp-json\/wp\/v2\/comments?post=1291"}],"version-history":[{"count":0,"href":"https:\/\/test.sitechecker.pro\/pt\/wp-json\/wp\/v2\/pages\/1291\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/test.sitechecker.pro\/pt\/wp-json\/wp\/v2\/media\/3349"}],"wp:attachment":[{"href":"https:\/\/test.sitechecker.pro\/pt\/wp-json\/wp\/v2\/media?parent=1291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/test.sitechecker.pro\/pt\/wp-json\/wp\/v2\/categories?post=1291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/test.sitechecker.pro\/pt\/wp-json\/wp\/v2\/tags?post=1291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}