Soluci贸n para la falta de etiquetas meta de imagen en la portada de Blogger
Es un caso muy com煤n que se haya puesto una data:post.firstImageUrl y funcione en los posts pero no en la p谩gina principal ni en las p谩ginas est谩ticas.Uno 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'>
</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 `link` con `rel='image_src'` y las etiquetas `meta` 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.
Para m谩s detalles, revisa estos art铆culos adicionales:
- Soluci贸n Blogger: Recursos no publicados
- Soluci贸n Blogger: No usa listeners pasivos para las im谩genes
