Implementar Twitter Cards en WordPress sin plugins

Inicio » Tecnología » Diseño Web » Implementar Twitter Cards en WordPress sin plugins

Twitter Cards en WordPress

Actualmente las redes sociales son el mejor medio de propagación del contenido de una web en si es el medio que nos permite generar más trafico en nuestro website, y una de las cosas que tenemos que tener en cuenta es la presentación de dicho contenido, en el caso de Twitter, no es igual a mostrar un simple enlace con un texto poco llamativo a mostrar al posible usuario un contenido mucho mejor presentado, con una imagen, video, un poco de contenido etc. y las Twitter Cards son la mejor forma de lograrlo.

Implementación de Twitter Cards en 3 pasos

  1. Implementar las diferentes meta tags en el archivo header.php de tu web.
  2. Enviar la URL de tu web para validación.
  3. Twittear tu contenido para sacarle provecho a las twitter cards.

Implementación de las meta etiquetas:

Las meta etiquetas (meta tags) que debes implementar en el header son las siguientes:

Como puedes apreciar son 6 meta etiquetas a implementar, si nuestra web fuera solo html, tendríamos que modificar las meta etiquetas para cada una de las páginas, sin embargo, gracias a WordPress podemos automatizar todo el proceso e ir llenando cada una de las etiquetas de acuerdo al contenido de nuestra web; primero identifiquemos las etiquetas y las funciones de WordPress que podemos utilizar:
  1. twitter:card: Es el tipo de twitter card que vamos a utilizar, en este caso el tipo es summary.
  2. twitter:site: Viene a ser el ID de usuario de nuestra cuenta twitter, en este caso del dueño de la web que vamos a compartir; si tienen implementado el sistema de opciones del theme, podrán agregar un campo que pueden llenar desde la administración, caso contrario tendrán que editar este campo manualmente, colocando su ID de usuario.
  3. twitter:title: Es el título de la página que vamos a compartir, para esto vamos a utilizar el nombre de la web o de la entrada o página.
  4. twitter:description: Aquí colocaremos un resumen de la entrada o página y en el caso del frontpage vamos a utilizar la descripción del sitio.
  5. twitter:image: Muestra una imagen representativa de la entrada o páginas o en todo caso de la web y,
  6. twitter:url: El enlace a nuestro artículo.

Creando la función para mostrar las meta etiquetas:

En el archivo functions.php del theme vamos a crear la siguiente función:

Con este pequeño código estamos declarando nuestra función “twitter cards” y ahora agregando el código que hará todo esto posible.

Implementar la función  en el theme:

En la parte superior del theme, donde se encuentran las demás etiquetas vamos a cargar la función de la siguiente manera:

Nótese que estoy utilizando la variable “function_exists” para determinar en primer lugar si existe la función “twitter_cards”, ya que de imprimir directamente la función si ésta no existiera nos arrojaría un error de que la función no existe.

Si hasta aquí hemos realizado todo bien, al ver el código fuente de la página podremos observar todas las meta etiquetas de nuestra twitter card con todos los datos requeridos.

Twitter Site:

Si tienen implementado el sistema de opciones del theme que vimos en un tutorial anterior, pueden realizar este paso, caso contrario tendrán que colocar su usuario de forma manual.

En nuestro archivo de funciones para las opciones del theme vamos a agregar el siguiente campo:

Con esto acabamos de crear el campo “tuprefijo_twitter_user” donde prefijo es el que has asignado a tu web.

Para mostrar este campo en nuestra función deberemos reemplazar:

Por:

Y eso sería todo en lo que es la implementación de las meta etiquetas en el header del theme.

Validación de las twitter cards

Ahora el segundo paso es verificar que nuestras twitter cards estén implementadas correctamente para lo cual ingresamos a: Validación Twitter Cards

Y así es como se verían nuestras twitter cards en la validación:

De la página principal de la web:

Twitter Cards de página principal
De una entrada de la página:
Twitter Cards de entradas o páginas

Probando si se muestra seleccin de Google Adsense

Una respuesta a “Implementar Twitter Cards en WordPress sin plugins”

  1. Información Bitacoras.com

    Valora en Bitacoras.com: Actualmente las redes sociales son el mejor medio de propagación del contenido de una web en si es el medio que nos permite generar más trafico en nuestro website, y una de las cosas que tenemos que tener en cuenta es la p…

Deja un comentario