Si tienes un blog de Blogger o blogspot y al compartir tus posts en redes sociales no sale la imagen del post o no sale el resumen de la entrada debes añadir un poco de código para que Facebook, Twitter y otras redes sociales puedan mostrar tu contenido con foto y texto al nomás pegar el enlace en la red social.
Si no se muestra foto o se muestra la foto equivocada cuando compartes en redes sociales, es porque tu tema de Blogger no está usando el protocolo Open Graph. Con Open Graph le dices a las redes qué información deben tomar de tu post para publicarlo. Twitter usa también su propio protocolo o Twitter Card.
Para agregar Open Graph a tu blog debes buscar en tu panel de control la opción Tema y dar clic en Editar HTML. Verás una página parecida a esta:
Después de la etiqueta <head> debes pegar el siguiente código. Ahora al compartir tus posts en redes sociales ya podrás ver la imagen del post y el texto.
<!--START Twitter Card -->
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<!--END Twitter Card -->
<!--Open Graph Meta Tags BEGIN -->
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.homepageUrl' property='og:site_name'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!--END Open Graph -->
Si no se muestra foto o se muestra la foto equivocada cuando compartes en redes sociales, es porque tu tema de Blogger no está usando el protocolo Open Graph. Con Open Graph le dices a las redes qué información deben tomar de tu post para publicarlo. Twitter usa también su propio protocolo o Twitter Card.
Para agregar Open Graph a tu blog debes buscar en tu panel de control la opción Tema y dar clic en Editar HTML. Verás una página parecida a esta:
Después de la etiqueta <head> debes pegar el siguiente código. Ahora al compartir tus posts en redes sociales ya podrás ver la imagen del post y el texto.
<!--START Twitter Card -->
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<!--END Twitter Card -->
<!--Open Graph Meta Tags BEGIN -->
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.homepageUrl' property='og:site_name'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!--END Open Graph -->