{"id":3899,"date":"2020-11-14T15:26:07","date_gmt":"2020-11-14T14:26:07","guid":{"rendered":"https:\/\/esferas.org\/msqlu\/?p=3899"},"modified":"2020-11-14T15:26:55","modified_gmt":"2020-11-14T14:26:55","slug":"por-que-no-se-previsualizan-los-enlaces","status":"publish","type":"post","link":"https:\/\/esferas.org\/msqlu\/2020\/11\/14\/por-que-no-se-previsualizan-los-enlaces\/","title":{"rendered":"Por qu\u00e9 no se previsualizan los enlaces"},"content":{"rendered":"\n<p>Esos enlaces que mandas v\u00eda Telegram o compartes en Facebook o Twitter. Esos que s\u00f3lo muestran el URL, s\u00ed. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Env\u00edas un URL para compartir y en principio no hay problema con \u00e9l porque se puede abrir sin m\u00e1s. Es correcto y detr\u00e1s de esa direcci\u00f3n hay un montaje funcional que responde. Pero no queda bonito.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"692\" height=\"220\" src=\"https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-1.png\" alt=\"\" class=\"wp-image-3900\" srcset=\"https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-1.png 692w, https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-1-300x95.png 300w\" sizes=\"auto, (max-width: 692px) 100vw, 692px\" \/><\/a><\/figure>\n\n\n\n<p>Y es que env\u00edas otros y s\u00ed que salen bien. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"621\" height=\"332\" src=\"https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-2.png\" alt=\"\" class=\"wp-image-3901\" srcset=\"https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-2.png 621w, https:\/\/esferas.org\/msqlu\/wp-content\/uploads\/sites\/12\/2020\/11\/image-2-300x160.png 300w\" sizes=\"auto, (max-width: 621px) 100vw, 621px\" \/><\/a><\/figure>\n\n\n\n<p>Y como ahora tengo un par de blogs que quiero que sean resultones he estado mirando y he encontrado diferencias significativas en las cabeceras de las p\u00e1ginas. En las que se muestra una previsualizaci\u00f3n del contenido se debe a que est\u00e1n incluyendo cabeceras especiales que describen qu\u00e9 y c\u00f3mo mostrarlo. As\u00ed el receptor del enlace no tiene que hacer un an\u00e1lisis a fondo de la p\u00e1gina y encontrar el t\u00edtulo (que no es tan d\u00edficil), el cuerpo (que lo mismo s\u00ed que se complica seg\u00fan el dise\u00f1o) y una imagen representativa (que tampoco es sencillo mirando el fuente). <\/p>\n\n\n\n<p>Estas cabeceras pertenecen a un protocolo llamado <a rel=\"noreferrer noopener\" href=\"https:\/\/ogp.me\/\" target=\"_blank\">Open Graph Protocol <\/a>cuyo prop\u00f3sito es permitir que cualquier p\u00e1gina web se convierta en un ente enriquecido dentro de un <a href=\"https:\/\/en.wikipedia.org\/wiki\/Social_graph\" target=\"_blank\" rel=\"noreferrer noopener\">grafo social<\/a>. Es decir, que la p\u00e1gina web pueda ser gestionada dentro de otros sitios como si de un objeto propio se tratase. <\/p>\n\n\n\n<p>Consiste, b\u00e1sicamente, en a\u00f1adir unos campos en el encabezado de la p\u00e1gina que suministren la siguiente informaci\u00f3n:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Un t\u00edtulo claro <\/li><li>Una indicaci\u00f3n de a qu\u00e9 est\u00e1 apuntando (el tipo)<\/li><li>Una imagen que lo describa o represente visualmente en el grafo<\/li><li>Un URL can\u00f3nico<\/li><\/ul>\n\n\n\n<pre title=\"Definici\u00f3n de la pel\u00edcula La roca\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\"><\/code><code>&lt;html prefix=\"og: https:\/\/ogp.me\/ns#\"> <\/code>\n  <code>&lt;head> <\/code>\n    <code>&lt;title>The Rock (1996)&lt;\/title> <\/code>\n    <code>&lt;meta property=\"og:title\" content=\"The Rock\" \/> <\/code>\n    <code>&lt;meta property=\"og:type\" content=\"video.movie\" \/> <\/code>\n    <code>&lt;meta property=\"og:url\" content=\"https:\/\/www.imdb.com\/title\/tt0117500\/\" \/><\/code>\n    <code>&lt;meta property=\"og:image\" content=\"https:\/\/ia.media-imdb.com\/images\/rock.jpg\" \/><\/code>\n    <code>... <\/code>\n<code>&lt;\/head><\/code>\n<code>... <\/code>\n<code>&lt;\/html><\/code><\/pre>\n\n\n\n<p>El <a rel=\"noreferrer noopener\" href=\"https:\/\/ogp.me\/#types\" target=\"_blank\">tipo de contenido<\/a> describe con bastante precisi\u00f3n de qu\u00e9 est\u00e1 hecho el objeto al que apuntamos. Y seg\u00fan el tipo, obviamente, se necesita m\u00e1s o menos informaci\u00f3n adicional.<\/p>\n\n\n\n<pre title=\"Ejemplo de tipo de objeto v\u00eddeo\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\"><\/code><code>&lt;meta property=\"og:image\" content=\"https:\/\/example.com\/ogp.jpg\" \/> <\/code>\n<code>&lt;meta property=\"og:image:secure_url\" content=\"https:\/\/secure.example.com\/ogp.jpg\" \/> <\/code>\n<code>&lt;meta property=\"og:image:type\" content=\"image\/jpeg\" \/> &lt;meta property=\"og:image:width\" content=\"400\" \/> <\/code>\n<code>&lt;meta property=\"og:image:height\" content=\"300\" \/><\/code>\n<code>&lt;meta property=\"og:image:alt\" content=\"A shiny red apple with a bite taken out\" \/><\/code><\/pre>\n\n\n\n<p>No es que esto resuelva todos los problemas de presentaci\u00f3n de contenidos ajenos pero con los principales funciona bastante bien. Es un desarrollo originario de Facebook derivado de <a rel=\"noreferrer noopener\" href=\"https:\/\/microformats.org\/\" target=\"_blank\">microformatos<\/a> y <a rel=\"noreferrer noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/RDFa\" target=\"_blank\">RDFa<\/a> entre otros.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Referencias<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/cards-dev.twitter.com\/validator\" target=\"_blank\">Validaci\u00f3n de URL como tarjetas en Twitter<\/a>. <\/li><li><a href=\"https:\/\/ogp.me\/\" target=\"_blank\" rel=\"noreferrer noopener\">Open Graph Protocol<\/a>.<\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Esos enlaces que mandas v\u00eda Telegram o compartes en Facebook o Twitter. Esos que s\u00f3lo muestran el URL, s\u00ed.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"footnotes":""},"categories":[14],"tags":[1073,1071,1070,1072],"class_list":["post-3899","post","type-post","status-publish","format-standard","hentry","category-internet","tag-facebook","tag-microformatos","tag-open-graph-protocol","tag-rdfa"],"_links":{"self":[{"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/posts\/3899","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/comments?post=3899"}],"version-history":[{"count":5,"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/posts\/3899\/revisions"}],"predecessor-version":[{"id":3907,"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/posts\/3899\/revisions\/3907"}],"wp:attachment":[{"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/media?parent=3899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/categories?post=3899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/esferas.org\/msqlu\/wp-json\/wp\/v2\/tags?post=3899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}