Metadatos básicos en plantillas de zkreations

metadatos plantilla zkreations blogger metadatos plantilla zkreations blogger

Buenas amigos, en esta ocasión voy a hablar sobre los datos reemplazables que todas mis plantillas traen. Los datos a los que me estoy refiriendo son los siguientes:


<!-- Datos personalizados del usuario -->
<link href='https://plus.google.com/IDpaginaGoogle' rel='Publisher'/>
<meta content='@blogger' name='twitter:site'/>
<meta content='@google' name='twitter:creator'/>

También les explicare que otros datos faltantes pueden agregar (aunque no obligatorios) con el fin de mejorar la presencia de sus blogs en el SERP (Search Engine Result Page ) y en las redes sociales.


Publisher (IDpaginaGoogle)

Lo que debemos poner aqui es la ID de nuestra página de google plus. No confundir la página con el perfil de Google, ya que son distintos, por ejemplo, Mi perfil en Google +Daniel Abel, mientras que el de mi pagina seria +zkreations, por lo que la url de mi pagina seria la siguiente:


https://plus.google.com/+zkreations1

Por lo que finalmente la ID de mi pagina seria +zkreations1. Ahora bien, puede que no tengas una página de google o que no esté vinculada a tu blog. Si es tu caso, te recomiendo seguir mi tutorial sobre Cómo crear una Página de Google plus.


twitter:site (@blogger)

Se trata del usuario perteneciente al perfil de tu pagina en twitter, nuevamente no hay que confundir el perfil de tu página con el personal. Como ejemplo tomaré de nuevo el perfil de twitter de zkreations:


https://twitter.com/zkreations

Así que mi usuario vendría a ser @zkreations, y es ese el que pondria en la etiqueta meta "twitter:site". Esta información sirve para la tarjeta que se muestra al compartir tus articulos por twitter.


twitter:creator (@google)

Indica el perfil del creador del sitio, este si corresponde al usuario de tu perfil personal en twitter. Como ejemplo este seria la url del perfil mio en twitter:


https://twitter.com/danieI_abel

Por lo tanto mi usuario vendría a ser @danieI_abel, ese dato se sustituye en "twitter:creator". Esta información también sirve para completar las tarjetas de twitter.


fb:app_id (App de facebook)

Al depurar tus enlaces con la herramienta de facebook, notaras que se te solicita la ID de una app en facebook y por ello te marcara un error:


faecboook app id pen graph

Esto no impedirá que tus artículos se compartan, pero sí que es necesario especificar la ID de tu app. Si no tienes una app de facbook puedes seguir mi tutorial Moderación para plugin de comentarios de Facebook, en donde enseño a crear una app y vincularla a tu pagina.


twitter:image & og:image

Las plantillas de zkreations tienen metadatos que toman la primera imagen en una entrada, que será mostrada al momento de compartir tanto en facebook como en twitter. Sin embargo la página principal carece de esto, por lo que se toma una imagen aleatoria o ninguna. Si quieres especificarla agrega lo siguiente en cualquier parte dentro de <head>:


<b:if cond='data:view.isHomepage'>
   <meta content='imagen_600x312.jpg' name='twitter:image'/>
   <meta content='imagen_600x312.jpg' property='og:image'/>
</b:if>

Reemplaza imagen_600x312.jpg por el enlace hacia tu imagen que representara a tu web, he especificado "600x312" ya que considero que es el tamaño suficiente como para que se muestre completa y con buena calidad:


facebook compartir zkreations

twitter card zkreations

apple-touch-icon

Por último si lo deseas puedes agregar los iconos que se usarán en los accesos directos creados en dispositivos con iOS. Esto no afecta al posicionamiento en absoluto, pero puede ayudarte a mejorar la presencia de tu página en dispositivos móviles de apple. El código es el siguiente:.


<link rel="apple-touch-icon" href="touch-icon-iphone.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png"/>
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png"/>
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png"/>

El nombre de sus iconos debe ser obligatoriamente los que proporciono en el ejemplo, es decir "touch-icon-ipad.png","touch-icon-iphone-retina.png", etc. Hay mucha informacion al respecto y para ello les recomiendo leer Configuring Web Applications.


Eso a sido todo, si les ha resultado de utilidad no olviden compartir este articulo, eso me ayudaria mucho y cualquier duda dejenla en los comentarios.