Insertar los Rich Snippets en WordPress

Una de las mejores maneras atraer tráfico a tu WEB es insertar los rich snippets o códigos de texto enriquecido dentro del código fuente, con el objetivo de clasificar mejor la temática de tu WEB para que Google la posicione mejor. De hecho, si Google considera que tus rich snippets dan la mejor respuesta al usuario, te reservará un gran espacio en el resultado de las búsquedas, como este:

Ejemplo de rich snippet
Rich snippet para la palabra clave «que es un movil»

En https://schema.org/ puedes consultar todos los tipos de esquemas que se pueden crear.

Insertar los Rich Snippets en el Código Fuente

Hace tiempo me pidieron implementar este tipo de contenido en una página de abogados que tenían dos despachos en dos localidades diferentes, así que lo que hice fue buscar la documentación de desarrolladores para Google para insertar el código de los snippets para dos despachos, es decir, una lista con múltiples elementos. Lo podéis encontrar en este enlace.

Lo siguiente que hice fue buscar el código de los snippets correspondientes para los despachos de abogados. Para ello, hay una herramienta muy útil que se encarga de crear este tipo de plantillas para rich snippets: Schema map generator. Para la WEB que os comento, utilicé el «legal service»

Ejemplo de Schema markup generator para generar rich snippets
Schema markup generator

Una vez que tuve los esquemas de snippets de servicios legales y de listado de elementos, mezclé los códigos para generar el rich snippet que necesitaba para los dos despachos. Para ello, me ayudé del editor de código fuente en json de Json Online, ya que me resultaba mucho más fácil para la vista.

El resultado final del código fuente que hice en su día fue:

<script type="application/ld+json">{
   "@context": "https://schema.org",
   "@type": "ItemList",
   "itemListElement": [  
       {
	  "@type": "ListItem",
          "position": "1",
          "item": {
            "@type": "LegalService",
            "name": "Abogado Moreno Salas - Rubí",
            "image": "https://abogadomorenosalas.es/wp-content/uploads/2019/03/todd-quackenbush-700-copy.png",
            "url": "https://abogadomorenosalas.es/",
            "telephone": "608 89 55 03",
            "address": {
               "@type": "PostalAddress",
               "streetAddress": "Av. de Barcelona, 57",
               "addressLocality": "Rubí",
               "postalCode": "08191",
               "addressCountry": "ES"
            }, // Address
            "geo": {
               "@type": "GeoCoordinates",
               "latitude": 41.4877244,
               "longitude": 2.0311647999999423
            } // geo
          } // Item
       }, // ItemListElement
      {
	 "@type": "ListItem",
          "position": "2",
          "item": {
            "@type": "LegalService",
            "name": "Abogado Moreno Salas - Barberá del Vallés",
            "image": "https://abogadomorenosalas.es/wp-content/uploads/2019/03/todd-quackenbush-700-copy.png",
            "url": "https://abogadomorenosalas.es/",
            "telephone": "608 89 55 03",
            "address": {
               "@type": "PostalAddress",
               "streetAddress": "Carrer de Bosch, 83",
               "addressLocality": "Barberá del Vallés",
               "postalCode": "08006",
               "addressCountry": "ES"
            }, // Address
            "geo": {
               "@type": "GeoCoordinates",
               "latitude": 41.3999835,
               "longitude": 2.148707800000011
            }  // Geo
          } // item
       } // ListItem
   ] // ItemListElement
} // script
</script>

Cómo Insertar el Código del Rich Snippet en WordPress con Generatepress o sin plugins

Como ya he comentado en alguna ocasión, me gusta utilizar el tema de WordPress, Generatepress. En la versión premium tenemos «Elements» que, entre otras cosas nos permiten insertar «hooks». Lo que hice fue crear un nuevo hook pegando todo el código fuente anterior, aunque también podemos insertar código HTML personalizado en cada una de las entradas en las que queremos insertar el texto enriquecido.

Crear hook en WordPress con Generatepress para insertar el código fuente del rich snippet
Crear un hook en WordPress con Generatepress para insertar el código fuente del snippet

Insertar los Rich Snippets con Schema PRO

Schema Pro es un plugin de WordPress de pago para insertar los rich snippets automáticamente, en vez de ir editando cada artículo de manera individual. Es una manera eficiente de implantarlos si tenemos un sistema estándar de implantarlos.

Schema PRO tiene predefinidos los esquemas de rich snippet que más se utilizan:

  • Artículos
  • Recetas de cocina
  • Libros
  • Cursos
  • Productos
  • Reseñas
  • Eventos
  • Negocios locales
  • Servicios
  • Aplicaciones software
  • Vídeos

Así que la primera pantalla que nos aparece cuando los queremos dar de alta es el tipo de rich snippet que queremos crear:

Tipos de esquemas de Rich Snippets predefinidos en el plugin Schema PRO

Si nuestra página WEB contiene artículos para diferentes esquemas, podemos decidir si el esquema que estamos creando lo vamos a utilizar en todos los artículos de nuestro blog, en una categoría concreta o, incluso, en una entrada específica. Para ello, escribiremos el nombre de la categoría, entrada, etc. para que la podamos elegir en el siguiente formulario:

Schema PRO - Rich snippets para la categoria Linux

Para finalizar, configuraremos los campos que queremos que aparezcan en el esquema. Para este caso, he elegido el de tipo artículo:

Schema PRO - Rich snippet tipo articulo

Lo que más me gusta es que podemos elegir campos personalizados, como la valoración que me da el plugin kkstar ratings o desactivar alguno de ellos para que no aparezca en la estructura del esquema.

Insertar el Esquema de Preguntas Frecuentes (FAQ)

Existen muchos tipos de esquema y el ideal para las preguntas frecuentes es el llamado Rich Snippet FAQ.

En el enlace anterior, podéis ver que el código fuente de este tipo de esquema es muy sencillo:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "Pregunta",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Respuesta a la pregunta"
    }
  }]
  }
</script>

También puedes añadir más de una pregunta en el mismo código JSON:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "Pregunta",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Respuesta a la pregunta"
    }
  }, {
  "@type": "Question",
  "name": "\u25b6\ufe0f Segunda pregunta con un emoji al principio",
  "acceptedAnswer": {
    "@type": "Answer",
    "text": "<em>Respuesta a la segunda pregunta en cursiva</em>" 
    }
  }]
  }
</script>

Personalmente, prefiero meter cada código JSON encima del H1, H2, etc. Me organizo mejor, pero podéis meter todo el código junto si queréis.

Actualmente, Google permite insertar Emojis, enlaces, h1…h6 y negritas en los rich snippets de las preguntas frecuentes. Si los insertamos, mejoraremos el CTR de nuestra página.

Rich Snippet de preguntas frecuentes (FAQ) con emojis

En WordPress, puedes utilizar un plugin como FAQ Schema Markup o, simplemente, crear un bloque HTML personalizado al final del post (yo prefiero esta opción por ser más personalizable).

Por lo que he visto esta técnica no funciona en la HOME. Hay que aplicarla en las páginas intenas del blog.

ADVERTENCIA: Si en el texto tienes caracteres «extraños» como unas comillas, por ejemplo, en el código JSON tendrás que insertar una contrabarra delante, para que se interprete bien. De lo contrario, cuando compruebes el código en la herramienta de datos estructurados de Google, te aparecerán errores del estilo «no has cerrado la llave», por ejemplo.

Insertar codigo HTML del Rich Snippet de FAQ en WordPress
Insertar el código HTML del texto enriquecido (Rich Snippet) para preguntas frecuentes

Tienes que saber que no todas las preguntas frecuentes que configures van a salir en los resultados de búsqueda de Google en la que salga tu página, ya que dependerá de la pregunta que realice el usuario.

Respecto al código del Emoji, lo he obtenido de Emojiterra y, como podéis comprobar, se ha de insertar una contrabarra antes del código del dibujo.

Codigo del Emoji en formato JSON-LD para los RichSnippets de preguntas frecuentes

Limpieza de la Caché

Si utilizáis algún plugin de caché, como LiteSpeed Cache (recomendado) o WP Super Cache, se ha de limpiar la caché primero antes de comprobar el correcto funcionamiento del esquema.

Una vez que ya hemos terminado, vamos a la herramienta de datos estructurados de Google y comprobamos si es correcta la estructura del rich snippet.

Herramienta de datos estructurados de Google

El error que me da es porque no he insertado el precio.

Por cierto, si haces SEO local, es conveniente que también geolocalices las imágenes.

¿Te ha gustado? ¡Compártelo!

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

2 comentarios en “Insertar los Rich Snippets en WordPress”

  1. Hola Oswaldo, el mundo de la informática es gigantesco. Tienes muchas ramas a elegir:Administración de sistema operativo Linux o Windows, programador en Java, PHP, C, perl, python, etc. administrador de bases de datos Oracle, MySQL, MongoDb,etc. también te puedes orientar al diseño gráfico con Photoshop o programas 3D como 3D Studio, puedes ser SEO, en fin, creo que ya me entiendes por donde voy.

    Si quieres dedicarte profesionalmente para trabajar en una empresa de informática, mi recomendación es que te saques certificaciones como la de RedHat o LPIC para administración de Linux o de Oracle para bases de datos. Si tienes una carrera de informática, más fácil lo tendrás todavía.

    Si quieres trabajar por tu cuenta como SEO, por ejemplo, el camino será mucho más duro pero deberías empezar por hacer algunos cursos antes de empezar tus proyectos como el de Sabandijers (te lo recomiendo) o Romuald Fons (Acamadi), muy bueno pero muy caro. Lo que tienes que tener claro primero es a qué rama de la informática te quieres orientar.

    Puedes echarle un vistazo a nuestra sección de libros y cursos de informática.

    Un saludo,

    Responder

Deja un comentario

Tal vez también te gustaría leer...

Guía de SEO para mejorar el poscinamiento WEB

SEO son las siglas de Search Engine Optimization u optimización de los motores de búsqueda. Básicamente se refiere al posicionamiento WEB de una palabra clave. Es decir, que si alguien buscan una palabra específica en Google, tu página WEB salga la primera. A continuación, presento una serie de enlaces a artículos de puerto53 que hablan

Leer más »

Qué es y cómo se configura Facebook Píxel

Facebook Píxel es una excelente herramienta de analítica WEB que nos va a ser muy útil para crear campañas de anuncios publicitarios en Facebook muy bien segmentadas, ya que podemos obtener datos tan relevantes como la edad, sexo o ubicación, entre otros muchas datos, de todas aquellas personas que visitan nuestra página WEB y están

Leer más »

Detectar el contenido duplicado

Muchos SEOs se dedican, únicamente, a mejorar el posicionamiento de las URLs de una WEB, que es un trabajo que requiere una dedicación exclusiva si administras muchos sitios. Al no poder dedicar el tiempo que desearían en escribir el contenido de los artículos, muchos de ellos optan por subcontratarlo en foros y otras plataformas especializadas

Leer más »

Crear un Espinner con las Hojas de Cálculo de Google

Si no sabes lo que es un Espinner consiste en crear contenido diferente con un único texto a través de variables. Mejor lo explico con un ejemplo: Pongamos por caso que tenemos el siguiente texto con variables: Rebajas HP DeskJet 3639 Impresora multifunción (tinta… 42,90 EUR COMPRAR EN AMAZON Rebajas HP DeskJet 2630 Impresora multifunción

Leer más »