Cada vez se le da más importancia a la correcta creación del código Schema en nuestra web. Pero todos los plugins de WordPress flaquean por un lado u otro. Al final de este artículo descubrirás un método para tener control absoluto sobre el marcado Schema y así beneficiarte de las ventajas SEO que ello conlleva.
Pero antes empecemos asentando las bases.
Índice de Contenido
Introducción rápida a los datos Schema
Schema no es más que un trozo de código que facilita información relevante a los bots que revisan nuestra web. Sí, como los bots de Google que dan información para decidir qué posición obtenemos. Estos datos suelen estar en formato JSON-LD, ya que es el que Google recomienda.
Schema y Google
En la documentación de Google se incluyen una serie de etiquetados Schema que, si se implementan en una web y Google los considera relevantes, pueden hacer que aparezcamos con elementos diferenciadores en los resultados de búsqueda. O lo que es lo mismo, nuestra web aparecería con resultados enriquecidos (Rich Snippets). Estos elementos nos permiten destacar frente a la competencia, obteniendo así mayores posibilidades de que hagan clic en nuestra web.
¿Hay Schema más allá de lo que Google recomienda?
¡Muchísimo! En la documentación de Google solo se incluye un pequeño porcentaje de todos los elementos posibles. Para ver el listado completo podemos acceder a la web de schema.org.
¿El etiquetado Schema es un factor de posicionamiento?
Teóricamente no es un factor que influya directamente en el posicionamiento, y así lo han afirmado algunas figuras influyentes del SEO. Pero ya sabemos que en este mundo no podemos estar 100% seguros de nada. Lo que sí se ha podido comprobar es que cada vez existen más personas sospechando que Schema podría llegar a ser un factor que influya directamente en el posicionamiento.
Schema en WordPress
WordPress cuenta con un gran número de Plugins que nos permiten crear Schema sin dificultad alguna. Pero con todos encontraremos limitaciones de una forma u otra. Algunas de estas limitaciones son:
- No nos dejan personalizar el contenido del código Schema ya que se genera automáticamente
- No podemos añadir elementos nuevos en el código
- Solo tendremos unas pocas opciones de etiquetado
- La carga del plugin ralentiza nuestra web empeorando así las Web Vitals
¿Mi WordPress tiene Schema?
Si no tienes conocimiento sobre si tu web cuenta con este etiquetado o no, te recomiendo usar la herramienta para testear Schema que te muestro abajo del todo del artículo.
Plugins para colocar Schema en WordPress
Si no estamos interesados en aprender WordPress lo suficiente como para tener un control real sobre Schema siempre podremos acudir a un plugin para que genere automáticamente este etiquetado. Algunos de estos plugins son:
- Yoast
- Rankmath
- All In One Schema Rich Snippets
- Schema & Structured Data for WP & AMP
- WP Review Pro
- WP Product Review
- Schema App Structured Data
Si no tenemos tiempo para aprender todo esto pero también queremos beneficiarnos de los beneficios de tener tal control sobre Schema, también podremos contratar un diseñador web especializado en personalización de código para WordPress.
Eliminar Schema de Yoast
Para desactivar totalmente el etiquetado Schema generado por Yoast podemos añadir el siguiente código en nuestro functions.php:
add_filter( 'wpseo_json_ld_output', '__return_false' );Si lo que buscamos es eliminar una sola parte del etiquetado podremos hacerlo mediante:
add_filter( 'wpseo_schema_needs_person', '__return_false' );En el ejemplo anterior se elimina la etiqueta “person”, pero se puede sustituir por la que creamos más conveniente.
Extra tip para Schema en Yoast
Si queremos que el etiquetado generado por Yoast se vea de una forma clara en los elementos de nuestro buscador, podremos hacerlo añadiendo:
add_filter( 'yoast_seo_development_mode', '__return_true' );Esto hará que cuando analicemos la estructura dentro del código HTML aparezca de un modo legible.
Quitar Schema de RankMath
RankMath dispone de una funcionalidad para activar o desactivar nuestro marcado Schema de un modo mucho más sencillo: Una vez que estamos en el panel de control de WordPress, en la sección de páginas o posts, veremos el listado de todas las publicaciones. Desde ahí podremos hacer clic en el selector de la izquierda para marcar aquellas publicaciones en las que queremos activar/desactivar Schema. Tras esto deberemos abrir el desplegable y seleccionar “Set Schema: None” y hacemos clic en aplicar. Así de fácil.
Aunque estos 2 plugins sean los más populares para gestionar el SEO de nuestro WordPress es posible que estés usando uno diferente. Si este es el caso, te recomiendo contactar con soporte para plugins de pago o con el equipo de soporte de WordPress en español si es un plugin gratuito del repositorio. El equipo de soporte estará encantado de responderte en lo que pueda. De este modo podrás descubrir el modo para anular el código Schema generado automáticamente en tu web.
Cómo tener control absoluto sobre el código Schema en WordPress
Una vez que sabemos cómo eliminar el código Schema automático, podremos escribir nuestro etiquetado desde cero. Y aunque nos lleve algo más de tiempo tendremos un control total sobre el marcado de nuestra web. Además también existen métodos para semi-automatizar nuestro código Schema, más adelante te lo explico.
Añadir Schema sin plugins en WordPress
En un principio puede parecer confusa la estructura de este tipo de marcado, pero créeme, es mucho más sencillo de lo que parece. Así que vamos al lío, los siguientes puntos los dedico a explicar cómo tener un marcado Schema bien organizado y de una forma relativamente sencilla.
Crear archivo donde organizar todo nuestro Schema
Antes de nada tendríamos que crear un archivo donde podamos tener todo nuestro Schema organizado. Para esto nada mejor que guardarlo en la carpeta de nuestro tema hijo, así tendremos acceso desde nuestro panel de control sin tener que recurrir a FTP o Gestores de archivos cada vez que queramos añadir/modificar algo.
- Para añadir el archivo podremos hacerlo a través de FTP, en la carpeta \wp-content\themes\nuestro_tema_hijo y llamarlo webheroe_schema.php.
- Una vez creado añadimos las llaves de apertura PHP al principio del archivo “<?php”. Esto es importante, ya que si no lo colocamos correctamente podemos bloquear la web una vez guardado y enlazado el archivo.
- Para enlazar el archivo para que siempre esté activo lo podremos llamar desde nuestro funcions.php, añadiendo el siguiente código:
require_once(dirname(__FILE__) . '/includes/webheroe_schema.php');Ahora debemos ser conscientes que todo cambio realizado en este archivo afectaría directamente a la web. Básicamente lo podríamos considerar como una extensión de nuestro functions.php, aunque con una mejora en la organización.
Colocar Schema en una sola página de WordPress
Es importante que sepamos cómo crear código que solo afecte a una página. Os presento el código y luego os lo explico todo de una forma breve para que lo entendáis rápidamente:
<?php
function webheroe_schema(){
if(is_page(12)){
?>
//Aquí va el código Schema
<?php
}
}
add_action("wp_footer", "webheroe_schema");
- En la línea 2 tenemos el nombre de la función “webheroe_schema”.
- En la línea 11 estamos debemos fijarnos en lo que hay entre comillas:
- wp_footer: indica que queremos que el código se ejecute cuando se pinte el footer
- webheroe_schema: Es la llamada a la función con ese nombre.
Por lo que estaríamos diciendo: ejecuta webheroe_schema en el footer
- En la línea 3 nos encontramos con un condicional “if(is_page(12))”. Esto significa que todo lo que haya entre las llaves siguiente solo debe de ejecutarse si es la página con ID 12.
- En la línea 6, entre esas dos llaves, es donde se colocaría nuestro código Schema. Más adelante os explico
Habéis visto que no es tan complicado. Pero muchos os preguntaréis cómo obtener el ID de nuestra página. Pues es muy pero que muy sencillo. Os muestro un par de métodos:
- Si accedemos a nuestro panel de control, en la sección páginas/entradas. Y damos a editar en la página concreta, veremos que en la URL hay un trozo de código que se muestra algo como así: “post=12”. Eso sencillamente nos dice que el ID de nuestra página es el 12. Fácil ¿eh?
- Otro método sería desde el front end, analizando los elementos HTML de nuestra página, en la etiqueta body veremos un código algo como así:
- postid-12 cuando es una entrada
- page-id-12 cuando es una página
Sabiendo lo anterior ahora podremos crear diferentes condicionales en la misma función que afecten a páginas distintas. Por ejemplo:
<?php
function webheroe_schema(){
if(is_page(12)){
?>
//Aquí va el código Schema que afecta a la página con ID 12
<?php
}
if(is_page(21)){
?>
//Aquí va el código Schema que afecta a la página con ID 21
<?php
}
if(is_page(32)){
?>
//Aquí va el código Schema que afecta a la página con ID 32
<?php
}
}
add_action("wp_footer", "webheroe_schema");
Cómo colocar el código Schema en WordPress de forma manual
Ahora sí que toca hablar de Schema. Para familiarizarnos con él no hay mejor forma que ponernos a escribirlo manualmente. Para hacer esto podremos analizar el código que se muestra en la documentación de schema.org o en la misma de Google, os he colocado los enlaces al principio de este artículo. Eso sí, debemos colocarlo dentro de la función correspondiente y entre 2 etiquetas de script. Algo que así:
<?php
function webheroe_schema(){
if(is_page(12)){
?>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"address": {
"@type": "PostalAddress",
"addressLocality": "Malaga",
"addressRegion": "Spain",
"postalCode": "29013"
},
"colleague": [
"http://www.xyz.edu/students/alicejones.html",
"http://www.xyz.edu/students/bobsmith.html"
],
"email": "mailto:contacto@webheroe.com",
"image": "https://webheroe.com/wp-content/uploads/2022/06/alvaro-torres-desarrollador-web.jpg",
"jobTitle": "Web Developer",
"name": "Alvaro Torres",
"telephone": "+34680618939",
"url": "http://www.webheroe.com"
}
</script>
<?php
}
}
add_action("wp_footer", "webheroe_schema");
Si escribimos nuestro código manualmente es de lo más normal que estemos creando errores sin darnos cuenta. Para esto existen unas herramientas de testeo.
Encontrar errores de etiquetado Schema
Para esto contamos con 2 herramientas facilitadas por Google y por la misma organización encargada del código Schema. Ambas nos dan la opción de analizar una página ya publicada o un extracto de código. Esta última nos da la posibilidad de poder testear código antes incluso de haber publicado la página:
- Google: Análisis desde los ojos de Google.
- Schema test: Es muy posible que obtengamos más información a través de esta herramienta.
Es recomendable echar un ojo cada cierto tiempo para verificar que el código sigue estando correctamente, ya que es posible que lo que hoy se da como correcto cambie en el futuro.
Semi-automatizando nuestro Schema en WordPress
Si queremos mantener una estructura de etiquetado Schema en todas nuestras páginas o entradas, o mantener la misma estructura en grupos de páginas, no debería ser muy complicado. Tan solo tendríamos que reconocer qué páginas estarían afectadas por qué estructura Schema. Por ejemplo, si ciertos grupos de páginas van a tener la misma estructura Schema y solo cambiarían los valores, podríamos crear un esqueleto estático y unos valores que cambian dependiendo de cada página. Te lo explico en el siguiente punto.
Utilizar campos personalizados para Schema en posts o páginas
Voy a seguir usando como ejemplo el etiquetado Schema “Person”. En esta ocasión tendremos los valores dinámicos dentro de variables en PHP para todos las entradas:
<?php
function webheroe_schema_entradas(){
if(is_single()){
$id = get_the_ID();
$meta = get_post_meta($id);
$localidad = $meta['localidad'][0];
$postal= $meta['postal'][0];
$colega1 = $meta['colega1'][0];
$colega2 = $meta['colega2'][0];
$mail = $meta['mail'][0];
$imagen = $meta['imagen'][0];
$trabajo = $meta['trabajo'][0];
$nombre = $meta['nombre'][0];
$tfno = $meta['tfno'][0];
$web = $meta['web'][0];
?>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"address": {
"@type": "PostalAddress",
"addressLocality": "<?php echo $localidad; ?>",
"addressRegion": "Spain",
"postalCode": "<?php echo $postal; ?>"
},
"colleague": [
"<?php echo $colega1; ?>",
"<?php echo $colega2; ?>"
],
"email": "<?php echo $mail; ?>",
"image": "<?php echo $imagen; ?>",
"jobTitle": "<?php echo $trabajo; ?>",
"name": "<?php echo $nombre; ?>",
"telephone": "<?php echo $tfno; ?>",
"url": "<?php echo $web; ?>"
}
</script>
<?php
}
}
add_action("wp_footer", "webheroe_schema_entradas");
Explicación del código
- En la línea 3 colocamos el condicional para que este código solo se ejecute cuando sea una entra (is_single())
- En la línea 4 estamos obteniendo el ID de la entrada
- En la línea 5 obtenemos todos los metadatos almacenados con el ID de este artículo
- Y entre la línea 6 y la 15 estamos colocando los metadatos que nos interesan en variables con un nombre que podamos entender
- Entre la línea 17 y 38 estamos pintando el etiquetado Schema, solo que hay ciertas partes en las que mostramos contenido variable. Este contenido se refleja: «llave de apertura PHP + echo + variable + llave de cierre PHP». Por ejemplo, en la línea 23 nos encontramos pintando el contenido variable de localidad
Cómo crear los campos personalizados
Los campos personalizados son una serie de inputs que podemos activar y rellenar desde la zona de edición de páginas o entradas. Para poder activarlas es tan sencillo como:
- Dirigirnos a la esquina superior derecha y hacer click en los 3 puntos verticales
- Clicar en paneles
- Abajo, en adicional, deberíamos activar la pestaña “Campos personalizados”
Una vez hayamos hecho esto veremos que han aparecido unos campos nuevos.
Ahora debemos escoger para qué etiquetado usar este código y pensar bien qué campos son los que van a ser dinámicos para obtenerlos por medio de get_post_meta().
Función para crear Schema de preguntas frecuentes en WordPress
Este código está creado para que se genere un etiquetado Schema FAQ de forma automática. Tan solo tendremos que colocar en Gutenberg una clase llamada «que» para un encabezado que hará de pregunta y la clase «ans» para un párrafo que hará de respuesta:
function webheroe_faq_schema(){
if(is_single()){
$id = get_the_ID();
$content = get_post_field('post_content', $id);
$first_output =
'<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [';
$pos = 0;
$counter = 0;
$faq_content = '';
while(($pos = strpos($content, "class="'que'", $pos)) !== false){
if($counter !== 0){
$faq_content .= ',';
}
$substr = substr($content, $pos);
$substr = str_replace(array("class='que'">', '<strong>', '</strong>', '<span>', '</span>'), '', $substr);
//pregunta
$que = strstr($substr, '</', true);
$pos_ans = strpos($content, 'class="ans"', $pos);
$substr_ans = substr($content, $pos_ans);
$substr_ans = str_replace(array('class="ans">', '<address>', '</address>', '<strong>', '</strong>', '<span>', '</span>'), '', $substr_ans);
//respuesta
$ans = strstr($substr_ans, '</p>', true);
$anchor_pos = 0;
while(($anchor_pos = strpos($ans, '<a', $anchor_pos)) !== false){
$substr_anchor = substr($ans, $anchor_pos);
$anchor = strstr($substr_anchor, '>', true);
$ans = str_replace($anchor, '', $ans);
$anchor_pos = $anchor_pos + 20;
}
$ans = str_replace(array('</a>', '>'), '', $ans);
$faq_content .=
'{
"@type": "Question",
"name": "' . $que . '",
"acceptedAnswer": {
"@type": "Answer",
"text": "' . $ans . '"
}
}
';
$pos = $pos + 50;
$counter++;
}
if($faq_content !== ''){
echo $first_output . $faq_content . ']}</script>';
}
}
}
add_action("wp_footer", "webheroe_faq_schema");