{"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\/es\/open-graph\/","title":{"rendered":"Descubre que es el protocolo Open Graph y c\u00f3mo usarlos eficientemente"},"content":{"rendered":"<p>Aqu\u00ed un ejemplo de c\u00f3mo luce la informaci\u00f3n estructurada en un enlace de un art\u00edculo dentro de una red social.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Facebook open graph<\/strong><\/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<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>De seguro estar\u00e1s de acuerdo con que estos post lucen muy atractivos y son \u201cclickeables\u201d aunque tan s\u00f3lo son un enlace a que un usuario comparti\u00f3 en una red social, en su timeline o en alg\u00fan grupo.<\/p>\n<p>Pero \u00bfqu\u00e9 deber\u00edas hacer si el c\u00f3digo est\u00e1 escrito correctamente pero al compartirlo en Facebook se muestra informaci\u00f3n incorrecta y anticuada? Bienvenido a<\/p>\n<p><a href=\"https:\/\/developers.facebook.com\/docs\/sharing\/webmasters\" target=\"_blank\" rel=\"noopener noreferrer\">Facebook para desarrolladores<\/a>. Siguiendo este enlace puedes borrar la vieja informaci\u00f3n en la memoria cach\u00e9 que est\u00e1 almacenada en la red social de t\u00fa p\u00e1ginay darles un nuevo\u00a0<a href=\"http:\/\/test.sitechecker.pro\/es\/meta-title\/\">t\u00edtulo<\/a> y\u00a0<a href=\"http:\/\/test.sitechecker.pro\/es\/meta-tag-description\/\">descripci\u00f3n<\/a>. Y quiz\u00e1s ahora tienes la idea de personalizar el dise\u00f1o del protocolo OG de tu sitio web y hacer spam (solo un poco) en grupos y comunidades dentro de la red social.<\/p>\n<p>&nbsp;<\/p>\n<h2>\u00bfC\u00f3mo personalizar el dise\u00f1o de OG?<\/h2>\n<p>&nbsp;<\/p>\n<p>Ahora veamos c\u00f3mo configurar el protocolo Open Graph para tu sitio web y hacer esta idea realidad. \u00a1Todo es muy f\u00e1cil! Aqu\u00ed esta c\u00f3mo luce la estructura de ese protocolo:<\/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>Tiene lugar en la p\u00e1gina de c\u00f3digos, en la secci\u00f3n&#8230; &lt;\/ head&gt; pero puesto despu\u00e9s de las meta etiquetas. Ahora veamos cada etiqueta Open Graph y su significado por separado:<\/p>\n<ul>\n<li><strong>&#8220;og:locale&#8221;<\/strong> &#8211; Indica la localizaci\u00f3n (lenguaje del sitio web); puedes usar el valor \u201cen_US\u201d por defecto.<\/li>\n<li><strong>&#8220;og:type&#8221;<\/strong> &#8211; Describe el tipo de p\u00e1gina (articulo, noticia, video, categor\u00eda); puedes usar \u201carticle\u201d por defecto.<\/li>\n<li><strong>&#8220;og:title&#8221;<\/strong> &#8211; Indica el t\u00edtulo del art\u00edculo.<\/li>\n<li><strong>&#8220;og:description&#8221;<\/strong> \u2013 Contiene una peque\u00f1a descripci\u00f3n que se muestra cuando se provee una vista previa del enlace generado<\/li>\n<li><strong>&#8220;og:url&#8221;<\/strong> &#8211; Un link o enlace a la p\u00e1gina o sitio.<\/li>\n<li><strong>&#8220;og:image&#8221;<\/strong> &#8211; Un enlace a una fotograf\u00eda que ser\u00e1 desplegada en el post.<\/li>\n<li><strong>&#8220;og: site_name&#8221;<\/strong> &#8211; Nombre del sitio web<\/li>\n<\/ul>\n<p>El significado de cada l\u00ednea ha sido mostrado, s\u00f3lo necesitas llenarlos y hacer embed del c\u00f3digo de tu fuente favorita del internet.<\/p>\n<p>Vale la pena se\u00f1alar que tras la introducci\u00f3n del protocolo Open Graph recomendamos instalar el bot\u00f3n de \u201cComaprtir\u201d en redes sociales dentro de las p\u00e1ginas del sitio. Esto har\u00e1 mucho m\u00e1s f\u00e1cil para el usuario el compartir contenido \u00fatil de tu sitio web con otros usuarios.<\/p>\n<p>Ciertamente esto simplifica la implementaci\u00f3n de tareas para tu optimizador de SEO cuando trabaje con el radio de intercambio de \u201cmegusta\u201d, el cual, incluso cuando no tiene una repercusi\u00f3n tangible en el enlace, nos permite incrementar la velocidad con la que indexamos o re-indexamos al promover el sitio.<\/p>\n<p>&nbsp;<\/p>\n<h2>Open Graph para WordPress, OpenCart, Joomla<\/h2>\n<p>&nbsp;<\/p>\n<p>Para los sistemas m\u00e1s populares de CMS, hay plug-ins hechos a la medida que ayudan a realizar la implementaci\u00f3n del marco Open Graph sin tener nada que ver con c\u00f3digos.<br \/>\nPor ejemplo, para WordPress, ese plug-in que puede ser descargado\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/opengraph\/\" target=\"_blank\" rel=\"noopener noreferrer\">aqu\u00ed<\/a> o puedes usar la extensi\u00f3n del plug-in Yoast SEO, el cual tambi\u00e9n resuelve este problema. Para Joomla encontrar\u00e1s una extensi\u00f3n siguiente ente\u00a0<a href=\"https:\/\/extensions.joomla.org\/extension\/easy-open-graph\/\" target=\"_blank\" rel=\"noopener noreferrer\">link<\/a>, y para OpenCart\u00a0<a href=\"https:\/\/www.opencart.com\/index.php?route=marketplace\/extension\/info&amp;extension_id=12874\" target=\"_blank\" rel=\"noopener noreferrer\">aqu\u00ed<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"Aqu\u00ed un ejemplo de c\u00f3mo luce la informaci\u00f3n estructurada en un enlace de un art\u00edculo dentro de una red social. &nbsp; Facebook open graph &nbsp; Google+ open graph De seguro estar\u00e1s de acuerdo con que estos post lucen muy atractivos y son \u201cclickeables\u201d aunque tan s\u00f3lo son un enlace a que un usuario comparti\u00f3 en&#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\/es\/wp-json\/wp\/v2\/pages\/1291"}],"collection":[{"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/users\/10380808"}],"replies":[{"embeddable":true,"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/comments?post=1291"}],"version-history":[{"count":0,"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/pages\/1291\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/media\/3349"}],"wp:attachment":[{"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/media?parent=1291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/categories?post=1291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/tags?post=1291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}