Solución para la falta de etiquetas meta de imagen en la portada de Blogger
es un caso muy comun que se haya puesto una data:post.firstImageUrl y funcione en los post pero no en la pagina principal ni el las páginas estáticasUno de los problemas comunes a los que se enfrentan los usuarios de Blogger es la falta de etiquetas meta de imagen en la página principal o portada del blog. Las etiquetas como `data:first image` y otras utilizadas para mostrar imágenes de forma correcta en las redes sociales y motores de búsqueda, a menudo no funcionan como deberían en la página principal. Sin embargo, existe una solución sencilla que permite a los usuarios de Blogger incluir estas etiquetas meta en la portada, usando los widgets de imagen. A continuación, te explicamos cómo hacerlo.
¿Por qué no funcionan las etiquetas meta de imagen en la portada?
En Blogger, el código que maneja las etiquetas meta y las imágenes en las entradas del blog funciona correctamente. Sin embargo, cuando se trata de la página principal o la portada del blog, las imágenes no siempre están relacionadas de manera correcta con las etiquetas meta, lo que puede causar que estas no se muestren como deberían en las redes sociales o en los resultados de búsqueda. Esto sucede porque Blogger maneja de forma diferente las imágenes que se colocan dentro de las entradas y las que se muestran en los widgets de la página principal.
El principal problema radica en que el código HTML que genera la página principal no incluye las etiquetas meta necesarias para las imágenes, lo que impide que las imágenes de la portada sean reconocidas correctamente por las plataformas de redes sociales y buscadores. Las imágenes de los widgets, que son imágenes visibles en la portada, no tienen asociadas las etiquetas meta de forma automática.
La solución: Incluir etiquetas meta dentro de los widgets de imagen
La solución a este problema es bastante simple: puedes incluir las etiquetas meta directamente dentro del widget de imagen que estás utilizando en la portada de tu blog. Esto asegura que las imágenes de los widgets también tengan las etiquetas meta necesarias, como `og:image`, `twitter:image`, y otras, lo que permite que las imágenes se muestren correctamente cuando el contenido se comparte en redes sociales o se indexa por los motores de búsqueda.
A continuación, te mostramos cómo hacerlo. Debes añadir un bloque de código dentro del widget de imagen en el que se incluyen las etiquetas meta necesarias. Aquí te mostramos un ejemplo de cómo se haría:
<b:widget id='Image61' locked='true' title='Impulsa tu marca' type='Image' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEjOt0mW4VBVsSzkXF-h1p6Uj4b5EJJZeM_7cJD5MI_p4uAIJH5qXoybjx9K4BcMXr1awxShpnj-b1hwbr0bKs_DKYFMwTm9yAIX9sbx6SNsd09eb-ueYYNk-GNJwVqELr4QDLqSiqIGzhz_GebV8SU9qpajQOWiCGCH_y4LH0sK1fXG7yOFQmM2oBI_OUo=s675</b:widget-setting>
<b:widget-setting name='displayHeight'>675</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>540</b:widget-setting>
<b:widget-setting name='link'/>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<link expr:href='data:sourceUrl' rel='image_src'/>
<b:tag cond='data:view.isPost' expr:href='data:sourceUrl' name='link' rel='image_src'/>
<meta expr:content='data:sourceUrl' itemprop='image'/>
<meta expr:content='data:sourceUrl' property='og:image'/>
<meta expr:content='data:sourceUrl' name='twitter:image'/>
<meta expr:content='data:sourceUrl' name='twitter:image:src'/>
<!-- Thumbnail Meta Tags -->
<link expr:href='data:sourceUrl' rel='thumbnail'/>
<b:tag cond='data:view.isPost' expr:href='resizeImage(data:sourceUrl, 0)' name='link' rel='thumbnail'/>
<meta expr:content='resizeImage(data:sourceUrl, 600, "2:1")' itemprop='thumbnail'/>
<meta expr:content='resizeImage(data:sourceUrl, 600, "2:1")' property='thumbnail'/>
<meta expr:content='resizeImage(data:sourceUrl, 600, "2:1")' name='thumbnail'/>
<b:tag cond='data:link' expr:href='data:link' name='a'>
<img class='lazy' expr:alt='data:title' expr:data-src='data:sourceUrl' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:title='data:title' expr:width='data:width' loading='lazy' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>
<b:attr cond='data:sourceSet' expr:value='data:sourceSet' name='srcset'/>
</img>
</b:tag>
<b:if cond='data:caption'>
<span class='caption'><data:caption/></span>
</b:if>
</b:includable>
</b:widget>
¿Cómo funciona esta solución?
El código mostrado anteriormente realiza varias acciones importantes. En primer lugar, se asegura de que las imágenes de los widgets tengan sus propias etiquetas meta. Esto se logra mediante el uso de la etiqueta `` con `rel='image_src'` y las etiquetas `` que se utilizan para indicar la imagen en formato Open Graph (`og:image`) y Twitter Card (`twitter:image`).
El truco principal aquí es el uso de `expr:content='data:sourceUrl'`. Esto garantiza que la URL de la imagen del widget se inserte en las etiquetas meta, de modo que cualquier cambio en la imagen del widget también se refleje automáticamente en las etiquetas meta. Así, cuando cambias la imagen del widget desde el panel de Blogger, las etiquetas meta se actualizan de manera automática, lo que asegura que las redes sociales muestren la imagen correcta cuando compartas la URL de la portada del blog.
Ventajas de esta solución
Esta solución tiene varias ventajas que la hacen bastante atractiva para los usuarios de Blogger. A continuación, te mencionamos algunas de las principales ventajas:
- Automatización: No necesitas preocuparte por actualizar manualmente las etiquetas meta cada vez que cambies la imagen del widget. Al incluir la URL de la imagen directamente en las etiquetas meta, estas se actualizan automáticamente.
- Mejora en la visibilidad: Al agregar las etiquetas meta correctamente, las imágenes se mostrarán de forma óptima en las redes sociales, lo que puede mejorar la visibilidad de tu blog y aumentar las interacciones.
- Facilidad de implementación: El proceso es bastante sencillo y solo requiere que añadas un bloque de código en el widget de imagen, lo cual es accesible incluso para usuarios con conocimientos básicos de Blogger.
Conclusión: Cómo mejorar la visibilidad de tus imágenes en la portada de Blogger
En resumen, aunque las etiquetas meta de imagen no funcionen correctamente en la portada de Blogger de manera predeterminada, es posible solucionar este problema mediante una simple modificación en el código del widget de imagen. Al agregar las etiquetas meta dentro del widget, aseguras que las imágenes se muestren correctamente en las redes sociales y motores de búsqueda. Esta solución es fácil de implementar y ofrece varios beneficios, como la automatización de la actualización de las imágenes en las etiquetas meta y una mejor visibilidad en plataformas como Facebook y Twitter.
Si aún no has implementado esta solución en tu blog de Blogger, es el momento de probarla. Asegúrate de que las imágenes de la portada de tu blog tengan las etiquetas meta necesarias y verás cómo mejoran los resultados cuando compartes tu contenido en las redes sociales.
