Tutorial GeneratePress

En esta clase te enseñamos a diseñar una web para SEO explicando un tutorial de GeneratePress ¡Míratela completa para ahorrar tiempo en optimización!

En la clase anterior ya te contamos que el diseño de la web es muy importante tanto para el posicionamiento web como para la experiencia del usuario. Es por eso que hemos escogido un tema que sabemos está MEGA-optimizado y te va a hacer la vida mucho más fácil: GeneratePress. Quédate hasta el final de la clase para saber cómo conseguir un diseño web optimizado para hacer SEO de la forma más rápida que hemos encontrado.

¿Cuál es el mejor tema de WordPress para hacer SEO?

Siempre me ha resultado complicadísimo explicar los temas de WordPress a los alumnos y alumnas. El motivo es que hay tantísimas posibilidades que me es casi imposible estandarizar una clase para este tema. Este año os quiero enseñar a diseñar una web para SEO con GeneratePress, ya que es el tema que utilizo tanto para mi web como para la de mis clientes y, además tiene modelo Freemium.

La versión básica de GeneratePress es limitada, pero os puede servir perfectamente para diseñar un proyecto SEO. Lo que de verdad me gusta de esta plantilla es su profundidad. Cuando hablo de profundidad me refiero a que hay programas o complementos que parecen sencillos, pero que te permiten un grado de flexibilidad brutal. Y esto es lo que le pasa a GeneratePress.

¿Es GeneratePress el mejor tema de WordPress para hacer SEO?

La verdad es que no lo sé ya que para comprobarlo debería hacer varias pruebas complicadas con distintos temas y me llevaría meses llegar a conclusiones acertadas ¿Por qué os lo recomiendo entonces? Por varias razones:

  • Lo he probado en mi web y me ayudó a subir una barbaridad mis posiciones en palabras clave sin necesidad de añadir más contenido
  • Es compatible con el sistema de maquetación nativo de WordPress: Gutenberg
  • Me permite conseguir buenos datos de PageSpeed Insights rápidamente y sin tener que tocar código
  • El modo premium me ahorra muchísimo tiempo
  • Tiene una versión gratis que pueden utilizar mis alumnos y alumnas si no quieren pagar
¿Cuál es el mejor tema de WordPress?
No hablo por hablar, hablo porque pruebo cosas
¿Cuál es el mejor tema de WordPress?
A tope con el Pagespeed y de la manera más fácil

El modo free nos va a permitir disponer de una web optimizada para SEO, aunque bastante sencilla. Si nuestro proyecto crece podremos además conseguir el premium, que es bastante económico y tiene algunas opciones interesantes que os explicaré más tarde. Si queréis conocer otros temas gratis podéis revisar nuestra clase de temas de WordPress, la de diseñar un blog con un tema gratis o el curso completo de WordPress 6.0.

Seleccionar e instalar tema

¡Vamos al lío! lo primero será ir a Apariencia > Temas y buscar GeneratePress

Seleccionar e instalar tema en WordPress
Elegir tema de WordPress es tope complicado porque hay muchísimos

Os recomendamos además borrar el resto de temas que no vayáis a utilizar.

Seleccionar e instalar tema en WordPress
Lo podéis probar de gratis

Personalizar GeneratePress Free

Una vez instalado y activado nuestro tema, ya podemos acceder a personalizarlo. Como no tenemos contenido, se va a ver super soso pero no pasa nada, procedamos a personalizar el tema poco a poco para darle nuestro toque.

Personalizar GeneratePress Free
El diseño inicial es soso como el solo

¡Pero ojo! Que antes de personalizar cualquier tema de WordPress necesitamos tener preparados algunos materiales de branding para poder completar la parte de personalización de temas:

  • Logotipo en .png con fondo transparente. Para poder generarlo podéis utilizar Photoshop o Canva.
  • El icono del sitio, a poder ser en formato cuadrado y en .png con fondo transparente. Os pide 512 × 512 píxeles (al menos).
  • Vuestros colores corporativos.
  • La tipografía que vais a utilizar.
  • Enlaces a vuestras redes sociales.
  • La arquitectura SEO de vuestra web.
  • Los contenidos para vuestra primera entrada (imágenes y textos al menos).

En Apariencia > GeneratePress tenéis las opciones de personalización que os permite modificar el tema gratis: Identidad del sitio, opciones de color, sistema de tipografía y opciones de diseño.

Personalizar GeneratePress Free
Opciones básicas pero funcionales

La mayor parte de estas opciones son accesibles desde el apartado Personalizar.

Personalizar GeneratePress Free
Tipo, colores y algo de diseño. Vale para empezar

Por ejemplo, en Identidad del sitio encontraréis las opciones para cambiar el logotipo y el logotipo retina.

Personalizar GeneratePress Free
Un poco lo de siempre con WordPress

Editar la barra lateral y el pie de página

En el apartado de Apariencia > Widgets encontraréis bloques que podréis arrastrar y soltar debajo del pie de página y del sidebar del blog —la barra lateral—. Os vienen muchos por defecto pero nosotros os recomendamos poner el buscar, las categorías, las redes sociales… Pero también podéis aprovechar la barra lateral para poner publicidad, enlaces afiliados o cualquier otra cosa que se os ocurra.

Editar la barra lateral en WordPress
Aquí añades Widgets o, como los llama mi madre «wiskis»

Crear páginas y entradas

Para completar esta sección podéis ir a Páginas o Entradas / Añadir nueva y desde ahí entraréis en el editor visual Gutenberg. Este editor lo podéis utilizar para crear el diseño de vuestra entrada.

Crear páginas y entradas en WordPress
El WordPress normal de toda la vida

En la siguiente clase haremos un tutorial de este editor visual, que para nosotras es el mejor, además de ser el nativo de WordPress, gratis y dar muy buenos datos de rendimiento.

Crear páginas y entradas en WordPress
Opciones nativas para no añadir cosas que no necesitamos

Crear categorías y etiquetas

Las categorías las podemos añadir desde las propias entradas o bien desde la sección Categorías del panel de control.

Crear categorías en WordPress
Aquí se añaden las categorías

Dentro de cada entrada podemos asignar una o varias categorías. Al asignar categorías lo que estamos haciendo es ordenar nuestro blog. Las categorías son páginas dinámicas que cargan las entradas que hemos asignado en cada caso.

Crear categorías en WordPress
Aquí se asignan las categorías
Crear categorías en WordPress

¿Y qué pasa entonces con las etiquetas? Exactamente lo mismo que con las categorías, sirven para ordenar nuestro blog. En muchas ocasiones no necesitamos utilizar categorías ni etiquetas. Nos hemos encontrado con multitud de alumnos que crean etiquetas como si fueran hashtags. ¿Cuál es el problema? Cada vez que creamos una etiqueta o categoría estamos en realidad creando una nueva URL, si dichas URLs no tienen contenido o tenemos demasiadas, estamos aumentando el número de URL sin contenido y, por tanto, añadimos URLs que no son útiles para nuestros usuarios. Esto no es bueno para el SEO y en muchas ocasiones no necesitamos ni categorías ni etiquetas.

Os recomendamos que antes de añadir categorías y etiquetas creéis vuestra arquitectura web para tenerlas claras desde el principio y no andar como pollo sin cabeza.

Configurar el menú de navegación

Una vez tengáis vuestras categorías creadas seguramente os interese añadirlas al menú. Para hacerlo, podéis ir a Apariencia > Menús. Desde esta sección podréis añadir directamente las categorías y moverlas donde queráis.

Configurar el menú de navegación en WordPress
Configurar un mení
Configurar el menú de navegación en WordPress
Ordenar un menú
Configurar el menú de navegación en WordPress
Así se muestran los menús

Diseñar para SEO con GeneratePress Premium

Como habéis podido observar no me he metido demasiado en el diseño de GeneratePress básico porque tiene muchas opciones y, en realidad, podría configurarlas de forma automática si tengo el premium. De hecho, lo recomiendo 1º porque lo uso y 2º porque me ahorra muchííííísimo tiempo. Y en la siguiente sección te voy a explicar cómo lo hago.

Comprar e instalar GeneratePress Premium

Lo primero es hacernos con GeneratePress Premium. Si utilizáis nuestro enlace y lo compráis desde ahí estaréis ayudando a que creemos más contenidos como este que estáis viendo. En el momento de escribir estas líneas el precio es de 60 dólares al año o 249 en un solo pago. Esto te deja crear hasta 500 páginas, te da un año de soporte y además tienes 30 días para cambiar de idea si no te gusta.

Comprar e instalar GeneratePress Premium
Esto es lo que vale. Sinceramente, no me parece tanto para el tiempo que te ahorras

Una vez te hagas con el plugin puedes ir a Account > Downloads y descargar el plugin. Aquí una captura de nuestra licencia, para que veáis que hemos comprado el plugin previamente y lo hemos utilizado, por eso lo recomendamos. 😀

Comprar e instalar GeneratePress Premium
Para que veáis que me compro las cosas antes de recomendarlas

Luego vais a vuestra instalación de WordPress > Plugins y le dais a Añadir nuevo. Tendréis la opción de buscar en el repositorio pero lo que queremos es Subir plugin. Luego le daremos a Instalar ahora.

Comprar e instalar GeneratePress Premium
Subir el tema premium como si de un plugin se tratara

Y luego activaremos el plugin.

Comprar e instalar GeneratePress Premium
Así se activa

Este plugin expande las capacidades free de GeneratePress y nos da muchísimas opciones, que podréis ver en Apariencia > GeneratePress.

Comprar e instalar GeneratePress Premium
Ahora tienes mas módulos para jugar

¡Pero ojo! Muchas funcionalidades y opciones significa también mucho tiempo para configurarlas, y os he comentado anteriormente que queremos tener un diseño web SEO de la forma más rápida posible. Y para eso tenemos las páginas prediseñadas.

Instalar y adaptar páginas prediseñadas

Resulta que GeneratePress (como muchos otros temas Premium) tiene un montón de páginas prediseñadas que puedes cargar en un solo click para no tener que diseñarlas tu a mano.

Instalar y adaptar páginas prediseñadas
Esto es lo mejor porque así no tienes que diseñar tu

Nosotras hemos probado unas cuantas y siempre nos han dado muy buenos resultados en PageSpeed sin necesidad de hacer configuraciones extra. Para cargarlas, simplemente tenéis que activar la Biblioteca del Sitio.

Instalar y adaptar páginas prediseñadas
Así activas la biblioteca de plantillas

Desde esta sección puedes seleccionar la categoría que quieras pero ¡Importante! No selecciones ningún constructor de páginas ya que queremos utilizar Gutenberg.

Instalar y adaptar páginas prediseñadas
Mejor sin builder

Cuando selecciones uno que te guste le puedes dar a Empezar.

Instalar y adaptar páginas prediseñadas
Así se importa una plantilla

Es interesante importar tanto las opciones del tema como el contenido demo.

Instalar y adaptar páginas prediseñadas
Importa el contenido y sólo tendrás que sustituirlo

¡Ojo! Eso nos añadirá URL e imágenes por lo que tendremos que tener especial cuidado con la indexación. Estos pasos los realizamos siempre o bien en una instalación local, o en plataforma de pruebas o añadiendo un plugin de mantenimiento para no enviar nada a Google de momento. Seguir con el tutorial para saber cómo sustituir el contenido demo y evitar errores de indexación.

Una vez la importación esté completada podemos ver el sitio y comprobaremos como tenemos una web bien diseñada y muy optimizada que no hemos tenido que crear nosotras.

Instalar y adaptar páginas prediseñadas
Importación completada
Instalar y adaptar páginas prediseñadas
Aquí se ve como queda

Solo tendremos que entrar a cada una de las URL e ir reemplazando el contenido demo por el nuestro.

Instalar y adaptar páginas prediseñadas
Luego sustituyes todo el contenido y ya lo tienes

¡Recuerda! El sistema ha añadido páginas, entradas, categorías, medios, etc por lo que es importante que cuando termines de adaptar el diseño revises todas las secciones de la web para comprobar que has sustituido todo el contenido que no querías.

Instalar y adaptar páginas prediseñadas
Aquí las páginas que te carga esta plantilla prediseñada

Un truco del almendruco puede ser revisar tu sitemap para comprobar las URL pero ¡No te olvides de las imágenes que aparecen en la Biblioteca de medios!

Instalar y adaptar páginas prediseñadas
Ojo con eliminar todo lo que no queráis

Personalizar GeneratePress Premium

Al activar GeneratePress Premium vas a expandir las capacidades de personalización del tema.

Personalizar GeneratePress Premium
Más opciones con el premium

Por ejemplo, tendrás muchas más opciones para mostrar tus menús, cambiar el aspecto del blog o del pié de página.

Personalizar GeneratePress Premium
Tiene bastantes movidas guapas

Elementos

Otra de las opciones que nos parece flipante y que contribuye a esa profundidad de la que hemos hablado anteriormente es el apartado de Elementos.

Elementos en WordPress
Esto ya es para flipar, las opciones son infinitas

Si bien es cierto que esto ya es más complicado de configurar también es verdad que las posibilidades de modificar tu tema son absolutamente infinitas.

Documentación y foro de soporte

¿Y qué pasa si te lías y no sabes hacer algo? Pues que tienes un foro de soporte que responde a casi cualquier pregunta que te puedas imaginar. Normalmente lo que hago yo es buscar “whatsapp button in generatepress” y en seguida sale el foro de soporte en resultados con la respuesta.

Elementos en WordPress
Esto lo he usado mogollón y está genial

Normalmente los resultados están en inglés pero puedes traducir la página con Chrome si no sabes este idioma.

¿Cómo saber si mi diseño está optimizado para SEO?

Para finalizar con las configuraciones tendríamos que mirar PageSpeed Insights. Si dispones de un buen hosting y has seguido los pasos anteriores verás que partes de un buen rendimiento, accesibilidad, prácticas recomendadas y SEO.

Diseño Web optimizado para SEO
Ale, ya lo tienes bien de base y solo te queda hacer algunos retoques

No obstante, para conseguir aún mejores puntuaciones hay que instalar algunos plugins más que comentamos en la clase de velocidad web.

Trabaja en el sector del Marketing Digital desde 2007 y cuenta con estudios reglados de marketing digital, educación, diseño gráfico-web y branding. Actualmente se dedica a gestionar proyectos, dar clases y estudiar un Doctorado en Tecnologías de la Información.

Espacio para dudas y comentarios

Nuestra Newsletter mola