Open Graph y Twitter card para Blogger

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 == &quot;item&quot;'>
          <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 == &quot;item&quot;'>
          <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 -->