Cómo añadir etiquetas Open Graph a Blogger (con imágenes)
Por Víctor Aracil - diciembre 21, 2021
Al compartir una entrada no hay problema, ya que Facebook pilla la primera imagen que tengamos subida.
El tema es que al compartir la página principal, no queremos la imagen de la entrada más reciente que tengamos, o según el código, una imagen favicon .ICO.
Depurando el contenido compartido.
Para ver la información que se comparte en Facebook de la página de inicio, nos pasaremos por este sitio, pegamos la URL de nuestro blog, y hacemos clic en el botón 'Depurar':
Con esto lo que haremos será comprobar el resultado que obtendríamos antes de que nosotros o alguien compartiera nuestro blog.
Cómo implementar las meta etiquetas Open Graph en Blogger.
Paso 1. Vamos a nuestra cuenta Temas > Editar HTML
Paso 2. Añadimos el siguiente código. xmlns:og='http://ogp.me/ns#'
Pero antes nos aseguramos que tenemos descargada una copia de seguridad del blog, por si hay que restaurar por algún tipo de error.
Paso 3. Buscamos el código <b:include data='blog' name='all-head-content'/>
Para ello, hacemos clic en cualquier lugar dentro del código, y usamos CTRL+F.
Puede que al buscar el código no obtengamos resultados, porque lo más parecido que encontremos es la línea que hay justo arriba ... name='google-analytics'...
En ese caso copiamos el código del paso 3, y lo pegamos debajo, como aparece en la imagen anterior.
Paso 4. Justo debajo, añadimos el siguiente código:
<meta content='article' property='og:type'/><b:if cond='data:blog.url == data:blog.homepageUrl'><meta content='[URL DE LA PÁGINA DE INICIO]' property='og:image'/><meta content='[ANCHO DE LA IMAGEN]' property='og:image:width' /><meta content='[ALTO DE LA IMAGEN]' property='og:image:height' /></b:if><meta expr:content='data:blog.title' property='og:site_name'/><meta content='[ID DEL PERFIL DE FACEBOOK]' property='fb:admins'/><b:if cond='data:blog.pageType == "item"'><meta content='https://www.facebook.com/nombredeusuario'property='article:author'></b:if><meta content='es_ES' property='og:locale'/> Nota: para la mejor imagen de salida en Facebook el tamaño será de 1200 de ancho por 630 de alto. Los valores serán solo numéricos ('1200' '630').
Paso 5. Configuración.
Para la [URL DE LA PÁGINA DE INICIO]. crearemos una nueva entrada, subimos una imagen dejándola con el tamaño original, cambiamos a la vista en HTML y copiamos/pegamos el enlace, donde corresponde.
En cuanto a nuestra ID de Facebook, seguimos los pasos de esta página, y copiamos/pegamos el resultado en [ID DEL PERFIL DE FACEBOOK] quedando algo así..
<meta content='8786678090' property='fb:admins'/>
Por último, reemplazamos nombredeusuario y listo.
Si aún no funcionara, buscamos esta línea y la borramos:
0 Reviews