Cómo evitar editores visuales en WordPress y construir tus propias páginas optimizadas para SEO

Cuando nos enfrentamos a un proyecto de desarrollo web, todo profesional intenta aplicar las buenas prácticas del SEO para construir sus páginas. Ahora bien, como el tiempo siempre apremia y el presupuesto suele ir ajustado, muchos optan por editores visuales o temas multi propósito.

Utilizar temas multi propósito debería ser un tabú para todo aquel con un poco de conocimiento sobre posicionamiento. Los elementos y funcionalidades están diseñados para cubrir tantísimas casuísticas que, a través de múltiples plugins y mucho código innecesario, no solo perjudicamos al SEO sino que facilitamos innumerables vulnerabilidades.

En el caso de los editores visuales, el tema no es tan grave en cuanto a la optimización de la web. Aún así debemos ser conscientes de que utilizan estructuras de código muy complejas y con una estructura semántica no muy adecuada. Los theme builders crean multitud de elementos anidados entre sí y con múltiples propiedades. Por lo tanto, si quieres cambiar tu web con un tema o diseño que no funcione con el editor visual, todo el contenido estará envuelto entre miles de líneas de código que tendrás que limpiar.

Entonces, ¿Cómo desarrollamos una página en WordPress sin editores visuales / temas multipropósito, cumpliendo las buenas prácticas del SEO y sin dedicarle excesivo tiempo? Esto lo conseguimos gracias a la estructuración de páginas de WordPress y la generación de plantillas propias con HTML, PHP y CSS. De esta manera, tendremos el control de toda la estructura web, la capacidad de optimizar el código y, lo mejor, no necesitaremos ningún plugin. ¡Vamos a por ello!

Cómo se estructura WordPress a la hora de jerarquizar sus plantillas

La estructuración o jerarquía de páginas en WordPress es muy sencilla e intuitiva. Cada tipo de página tiene su nombre y en base a este podemos construir el diseño de la plantilla para dicha página:

  • ERROR 404: 404.php
  • RESULTADO DE BÚSQUEDA: search.php
  • ARCHIVOS: archive.php
    • TAXONOMÍA: taxonomy.php
    • CATEGORÍA: category.php
    • ETIQUETA: tag.php
    • AUTOR: author.php
    • FECHA: date.php
  • BLOG: index.php
  • POST: single.php
  • PÁGINA: page.php
  • HOME: home.php

Si en tu caso cuentas con un Custom Post Type ya generado y quieres crear la plantilla para tus posts personalizados, lo único que tienes que hacer es añadirle el nombre del slug de tu Custom Post Type al archivo, por ejemplo, «single-ejemplo.php». Esta también será la estructura para cuando queramos maquetar la plantilla de una página concreta. Por ejemplo, si quiero maquetar la página de «Contacto», crearemos el archivo «page-contacto.php».

Como ejemplo para este artículo vamos a escoger la página de «post». Para poder generar la plantilla para los posts de nuestro blog, lo primero será crear un un archivo nuevo dentro de nuestro child theme o tema hijo que se situará en el FTP > wp-content > themes > «nombre de tu child theme». El documento o archivo se tendrá que llamar «single.php» para que WordPress lo identifique como la plantilla de tus posts.

Empezamos a construir nuestra plantilla para la página de posts (single.php)

Una vez hemos creado el archivo single.php en nuestro child theme, como este no contiene nada en su interior, cada vez que queramos ver un post aparecerá una página en blanco. Lo que toca ahora es crear la estructura de la página para luego añadir los campos que queremos que nos muestre y, finalmente, darle el diseño que queramos. Para estos tres pasos utilizaremos HTML para la estructura, PHP para mostrar el contenido y CSS para diseñar la página.

En casos más complejos, en los que se busca cierta funcionalidad, como la de un slider o una lightbox, se necesitaría utilizar JAVASCRIPT. Para este ejemplo no será necesario, pero en el caso de querer meter una galería de imágenes de producto por ejemplo, tendrás que utilizar JAVASCRIPT en tu plantilla.

Construimos la estructura de la página de posts (single.php) en HTML optimizada para SEO

Lo primero que tenemos que tener en cuenta son los elementos básicos que va a tener esta página de posts. En mi caso, el esqueleto sobre el que voy a construir va a ser muy sencillo para que sirva como ejemplo:

  • Título principal.
  • Imagen destacada.
  • Contenido.
  • Posts relacionados.

Esta estructura la vamos a trasladar a lenguaje HTML, dejando entre corchetes los apartados donde irá insertado el contenido. También vamos a generar desde el principio las clases a las que nos vamos a referir posteriormente en el CSS para darle diseño y maquetación a la página.

<div>
 <div id = "primary" class = "content-area">
  <main id = "main" class = "site-main" role = "main">

   <section class= "top-section">
    <div class= "titulo-post">
     <h1>[TÍTULO PRINCIPAL]</h1>
    </div>
    <div class= "imagen-post">[IMAGEN DESTACADA]</div>
   </section>

   <section class= "contenido">
    <div class= "caja-contenido">
     <p>[CONTENIDO]</p>
    </div>
   </section>

   <section class= "posts-relacionados">
    <div class="caja-posts">[POSTS RELACIONADOS]</div>
   </section>

  </main>
 </div>
</div>

Copiamos y pegamos este código en el archivo previamente creado, en el single.php. Si guardamos únicamente esta estructura y vamos a visualizar uno de los posts, veremos que solo nos muestra una página en blanco con los textos que hemos añadido entre corchetes. Por lo tanto, ahora nos toca añadir el contenido usando PHP, pero ya podemos decir que estamos aplicando las buenas prácticas del SEO para construir nuestras páginas.

Añadimos el código PHP para solicitarle a WordPress el contenido de la plantilla de post (single.php)

Si queremos que WordPress muestre el contenido que hemos añadido a nuestros posts en la plantilla y también el header y el footer propios de la página, tenemos que solicitarlo a través de código PHP.

El código PHP correspondiente en este caso es el siguiente:

  • HEADER…………………………………….<?php get_header();?>
  • TÍTULO PRINCIPAL……………………..<?php the_title();?>
  • IMAGEN DESTACADA…………………..<?php the_post_thumbnail_url();?>
  • CONTENIDO……………………………….<?php the_content();?>
  • FOOTER……………………………………..<?php get_footer();?>

En el caso de los POSTS RELACIONADOS el código es más complejo, ya que estamos creando un bucle de solicitudes para que muestre los posts relacionados al post que estamos mostrando. Aquí te dejo un ejemplo de cómo se generaría este código, que, como puedes ver, está construido en base a PHP, para el bucle y las solicitudes, y HTML, para la estructura de los posts: imagen, título, extracto y botón de «Leer más».

<?php $orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
 if ($categories) {
 $category_ids = array();
 foreach($categories as $individual_category)
 $category_ids[] = $individual_category->term_id;
                    
 $args=array(
  'category__in' => $category_ids,
  'post__not_in' => array($post->ID),
  'publish_status' => 'published',
  'posts_per_page'=> 3, //Aquí metemos la cantidad de posts relacionados que queremos que se muestren
  'ignore_sticky_posts'=>1
 ); 

$my_query = new wp_Query( $args );
while ( $my_query->have_posts() ) {
$my_query->the_post();?>
                        
<div class="columna-posts">
 <div class="imagen-post-relacionado">
  <a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>">.  
  <?php the_post_thumbnail(); ?></a>
 </div>
 <div class="titulo-y-extracto">
  <h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?  >"><?php the_title(); ?></a></h3>
  <?php $article_data = substr(get_the_content(), 0, 300); echo $article_data; ?>
 </div>
 <div class= "leer-mas">
  <a href="<?php the_permalink()?>">Leer Más</a>
 </div>
</div>
                    
<?}
$post = $orig_post;
wp_reset_query(); 
?>

Una vez lo tenemos todo creado, simplemente tenemos que sustituir los títulos de los corchetes por los códigos aquí escritos. En el caso del HEADER y el FOOTER, sacaremos el código PHP correspondiente del HTML, ya que serán los que den comienzo y final al código de la página.

Construir Plantilla SEO Single PHP HTML

Así mismo, ya podemos decir que hemos aplicado las buenas prácticas del SEO para construir nuestras páginas. Ahora simplemente quedaría darle forma o diseño a través de las clases definidas en la estructura del el HTML en el archivo «styles.css».

Maquetamos la plantilla de posts (single.php) aplicando CSS en el archivo styles.css

Para cada apartado de nuestra plantilla tenemos que asignar estilos que marquen los espacios, tipografías, tamaños, etc. del contenido que hemos añadido a través de las clases del HTML. Para definir los class de nuestra estructura iremos al FTP> wp-content > themes > «nombre de tu child theme» > styles.css. En este caso, no puedo ponerte un ejemplo, ya que el diseño queda a gusto de cada uno. Pero, para quien necesite un tutorial o resolver dudas acerca de cómo añadir el css a tu plantilla puedes hacer clic aquí.

Resultado de Google PageSpeed Insights tras aplicar la plantilla single.php a los posts del blog

Una vez tengamos el single.php construido, vamos a ir a Google PageSpeed Insights. Aquí añadiremos uno de los enlaces de cualquiera de nuestros posts de WordPress y daremos al botón «Analizar». Verás igual que yo, que, únicamente creando la plantilla a través de tu propio código, los resultados son muy positivos.

  • Google PageSpeed Insights Ordenador SEO Single PHP
  • Google PageSpeed Insights Movil Single PHP

Estos resultados se pueden mejorar aún más, sobre todo de cara al formato móvil (te dejo aquí un posts por si quieres seguir trabajando la optimización de tu WordPress), pero ya partimos con una base muy sólida que nos va a dar ventaja.

Además de esa buena base también contamos con unas grandes ventajas que nos van a ayudar gestionar de forma más óptima nuestro tiempo. Tenemos una estructura de código limpia, sin exceso de estructuras de código complejas y con una semántica adecuada. Por lo que, si cambiamos de theme, la estructura, la funcionalidad y el diseño no se desconfiguran.

Asímismo, las plantillas son aplicables a más páginas y, simplemente, una vez creadas, con copiar y pegar los archivos en la carpeta de tu childtheme ya tienes las páginas maquetadas. Y, lo más importante, no tenemos dependencia de los editores visuales ni otros plugins que ralentizan la carga y crean problemas de funcionalidad y seguridad que no podemos controlar.

Cómo ponerle la guinda al pastel añadiendo los resultados enriquecidos de Schema.org directos en
las plantillas PHP

Si queremos dejar la plantilla de los posts preparada para que Google considere estos posts como posibles candidatos para sus resultados enriquecidos, podemos añadir Schema.org directamente en la plantilla.

Antes de que sigas adelante, te aviso de que, si tienes Yoast activo en tu WordPress, este ya viene con Schema por defecto. Por lo que, si queremos que Google coja el Schema que nosotros vayamos a incluir en la plantilla, deberemos desactivar esta función de Yoast añadiendo el siguiente código en el «fuctions.php» del childtheme.

/*Deshabilitar Schema de Yoast*/
add_filter( 'wpseo_json_ld_output', '__return_false' );

Para no tener que crear el código desde cero, yo he utilizado la herramienta de Merkle. Aquí simplemente elegiremos el tipo de contenido sobre el que queremos trabajar los datos estructurados: Article > BlogPosting. Una vez nos genere la estructura, únicamente tendremos que copiar el código vacío en el single.php tras el «<?php get_footer();?>».

En mi caso he añadido dos líneas más: «mainEntityOfPage» (el dominio/entidad principal de la página) y «dateModified» (la fecha de última modificación del post). Estos dos datos no vienen en el código que acabamos de copiar y pegar, pero son recomendables de cara a Google. Por lo tanto el código en mi caso sería el siguiente (tú solo tienes que sustituir las casillas propias de mi web para aplicar las que correspondan a tu caso):

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage": "https://www.itxasojocano.com/",
    "headline": "<?php the_title(); ?>",
    "image": "<?php the_post_thumbnail_url(); ?>",  
    "author": {
        "@type": "Person",
        "name": "Itxaso Jocano"
    },  
    "publisher": {
        "@type": "Organization",
        "name": "Itxaso Jocano",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.itxasojocano.com/wp-content/uploads/2021/05/Logotipo-Itxaso-Jocano.png"
        }
  },
  "datePublished": "<?php echo get_the_date( 'c'); ?>",
  "dateModified": "<?php echo get_the_modified_date( 'c' ); ?>"
}
</script>

Una vez añadido el código lo comprobaremos a través de la herramienta de prueba de de datos estructurados de Google. Añadimos el enlace de cualquiera de nuestros posts y verificamos que la información concuerda correctamente y de que Google no nos esté dando ningún error o advertencia.

Google Schema Single PHP

De esta manera, ya tenemos una plantilla perfectamente creada y optimizada para posicionar correctamente en buscadores. Asimismo, podremos seguir trabajando el SEO de las demás páginas aplicando exactamente el mismo proceso, dándonos como resultado una página web potenciable, tanto por la parte de marketing y posicionamiento como por la de negocio.

Posts relacionados