Ir al contenido principal

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 -->

Entradas populares de este blog

¿Cuántas palabras debe tener un cuento?

Mi género literario favorito es el cuento. He leído miles de cuentos y siempre ando en búsqueda de nuevos cuentos para leer. También los escribo . Hace algunos años en un blog que ya no existe escribí un artículo sobre cuántas palabras debe tener un cuento, no teniendo copia del mismo lo reescribo.  La respuesta rápida es: menos de 7,500 palabras. 

Grabarte a ti mismo para mejorar tu inglés

La parte más difícil de aprender un idioma es la pronunciación. Cada idioma tiene sus propios sonidos. Cuando escuchas una palabra la puedes repetir más o menos bien, pero usar esa misma palabra en una conversación y pronunciarla correctamente no siempre es fácil.

Cómo eliminar el ?m=1 de tu blog de Blogger

Me gusta mucho Blogger pero no me gusta mucho esa 'colita' que le deja a las urls cuando se visita desde móviles. Eso servía cuando los temas no eran del tipo responsive , y había un tema específico para móviles.