Diseño Web orientado a SEO – Cómo hacerlo paso a paso en 2025

¡Hey qué pasa lector! Dean de nuevo por aquí de forma fugaz. Hoy traigo uno de los contenidos más bestias que se publicarán en este blog, en mucho tiempo: diseño web orientado a SEO, de 0 a 100 y mostrando el ejemplo de un cliente real.

Considera este post como una especie de «curso», por la profundidad del mismo y el valor que trata de aportar a Internet.

Para formarte en la disciplina del diseño web SEO de alto nivel (y alto ticket, porque se cobra una pasta por este tipo de trabajos 💸) he traído al que considero el mejor diseñador web de España (y he trabajado con muchos), el señor David Lozano, de Héroes del Diseño.

David no es un diseñador normal.

Un diseñador normal te cobra 1.000 – 2.000 euros por una web y se va feliz.

 David cobra tickets de 17.000 euros y hasta de 25.000 (y este último presupuesto cerrado, yo mismo lo vi porque estaba conmigo cuando lo cerró)… por hacer diseño web y… algo más (SEO y copywriting).

Si quieres aprender su fórmula, imprime este post o simplemente léelo con calma y ponlo en favoritos.

Te dejo con él.

Os voy a confesar dos cosas:

La primera, es que me hace una ilusión tremenda escribir esto para toda la comunidad SEO de habla hispana. ¿El motivo? En su día (hace muchos años ya) me formé con Dean y hoy, estoy escribiendo un artículo para su web. Todo un honor.

La segunda, es que «no soy SEO«.

 En realidad, soy diseñador web y utilizo el SEO como herramienta de venta para conseguir proyectos de alto ticket .

Quieras o no, a base de horas y proyectos reales, acabas aprendiendo SEO.

Incluso cuando los jefazos de Google afirman “Nunca confíes en un especialista SEO que te promete las primeras posiciones” se nos escapa una sonrisa.

Los que llevamos años en esto confiamos en ese “poder especial”, llamado intuición (y datos), que nos indica si un proyecto llegará a buen puerto o no (es decir, si el cliente recuperará la pasta que ha invertido).

Y luego llegó la IA. Y con ella la muerte del SEO y del diseño web.

Me entra la risa.

Pero como todo en esta vida, los extremos nunca reflejan la realidad. Hoy, hablaremos de diseño web orientado a SEO.

En este artículo vamos a hablar de cómo crear un diseño web optimizado para SEO de verdad.

Te mostraré qué factores marcan la diferencia entre una web normal y una que le haga ojitos a Google.

Todo ello, a través de un caso real con un único objetivo:  lograr el deseado podio en las SERPs, obtener tráfico y (sobre todo) vender .

¿Preparado?

¿Qué significa hacer un diseño web orientado a SEO?

El diseño web SEO es el equilibrio perfecto entre tres partes vitales:

1. Una experiencia de usuario (UX) impecable.
2. Un diseño web que acompañe y refuerce el mensaje y la marca (UI).
3. Un código HTML y prácticas on page, que faciliten la vida a Google (SEO).

Esta “simple lista” alberga una cantidad ingente de aspectos estratégicos, técnicos y de diseño que muchos clientes no entienden.

Donde ellos ven “una simple página web” yo veo una poderosa arma de ventas compuesta de centenares de piezas, que bien engrasadas, pueden llegar a cambiar el mundo.

Vale, quizá suena demasiado épico, pero mis más de 20 años haciendo webs me lo han confirmado. De hecho, esta es la lista que le muestro a mis clientes cuando empiezo un proyecto nuevo:

Pero vamos con la pregunta del millón: ¿Cómo empezamos un diseño web orientado y optimizado a SEO?

La respuesta rápida: entendiendo el negocio del cliente y alineándolo con la intención de búsqueda.

Las palabras clave importan, pero la intención de búsqueda manda

Si eres lector habitual de Dean, esto lo sabes sobradamente. Los años dorados donde poner palabras clave bastaba para posicionarse en Google pasaron a la historia.

Hoy, la intención de búsqueda manda. Y para entenderla, debes cerrar el portátil y hablar (mucho) con el cliente.

Si no sabes qué preguntarle, te recomiendo empezar por el libro “SPIN Selling” de Neil Rackham que te dará una metodología basada en preguntas clave que deben ser respondidas por el cliente:

(S) Situación

Estas preguntas ayudan a entender el contexto actual del cliente. Buscan información básica sobre su situación, procesos, estructura y recursos. Por ejemplo «¿Cómo consigues leads actualmente?».

(P) Problemas

Estas preguntas se centran en identificar los problemas, dificultades o insatisfacciones que el cliente está experimentando. Lo habitual es la falta de ventas, clientes o conversión.

(I) Implicación

Aquí se profundiza en las consecuencias de los problemas detectados. Debemos «hurgar en la herida» para amplificar la percepción del impacto negativo que tienen esos problemas si no se resuelven. Por ejemplo: «¿Qué pasa si mañana recibís una penalización de Google y perdéis el 50% del tráfico?».

(N) Necesidad de una solución

Estas preguntas ayudan al cliente a imaginar cómo sería la situación si el problema se resolviera. En lugar de que tú digas los beneficios, el cliente los verbaliza (de este modo «se vende él a sí mismo»).

Si logras esto, la venta está hecha. Por ejemplo: «¿Podrías gestionar un aumento de 5 nuevos clientes por semana?»

No puedes salir de la reunión sin saber cuál es realmente el público objetivo de tu cliente (1), qué problema resuelve su producto o servicio (2) y qué intención de búsqueda está asociada (3).

Además, esta información te desvelará otros aspectos clave que afectan, y mucho, a la conversión:

• En qué fase de “awareness” está el cliente.
• Qué tipo de lenguaje utiliza.
• Cuáles son sus miedos y motivaciones.

Si nunca te planteaste esto antes de abrir DinoRANK e ir a la pestaña de “Keyword Research” no te preocupes: sigue leyendo y toma notas.

Diseño conceptual de la arquitectura web

Últimamente están muy de moda las páginas web de diseño mono página o “one page”.

A los diseñadores web nos encantan, ya que facilitan mucho la vida y nos dan una gran rentabilidad. Pero a nivel SEO, la falta de profundidad pasa factura y dificulta mucho el posicionamiento.

Con las palabras clave objetivo en mano, diseñamos un mapa del sitio (Sitemap) lógico que responda a las diferentes intenciones de búsqueda y contenga la información necesaria del producto o servicio, ya que cada URL debe responder siempre a una única intención de búsqueda.

Para ello, yo utilizo dos herramientas.

• Miro, que permite diseñar el camino del usuario (userflow) y otros conceptos.
• Relume, que genera mapas del sitio bonitos y elegantes.

Una vez confirmado el esquema con el cliente, llega un momento crucial en cualquier proyecto y donde el presupuesto marca una gran diferencia:

La redacción del contenido.

SEO técnico vs. SEO útil: la diferencia que te pone arriba en 2025

Recuerda: escribes para personas, no para robots (hacer muy bien lo primero a largo plazo sirve también para lo segundo).

Y en 2025 las personas estamos muy distraídas, estresadas y sin capacidad de atención.

Para contrarrestar esto, toda página web debe cargar rápido y presentar textos altamente persuasivos. Que llamen la atención.

Recuerda: el primer paso es captar la atención del usuario. Y para ello, existe el  copywriting  y debes aplicarlo en absolutamente todo:

• Metatítulo, aka «title»
• Metadescripción, aka «description»
• Título principal, aka «H1»
• Texto de la web, aka «p»

Aplicar copywriting a todos los textos hace que el usuario quede enganchado, lea, navegue y haga lo que queremos que haga: contactar, dejarnos su email, rellenar un formulario…

Por eso una web que tiene objetivos de SEO no puede costar 500€ ni 1000€.

Estamos construyendo una máquina de ventas, no un simple folleto.

Esto es algo que hace que pueda cobrar un ticket mucho más alto:  yo no solo te vendo una web, te construyo una web optimizada para SEO, con copy incluido y el SEO optimizado para las palabras clave transaccionales .

Caso real de diseño web SEO: Top 1 en Google en menos de 30 días

Pero basta de teoría y vamos al barro.

La mejor forma de poder enseñar cómo lo hago es hablarte de un caso real, aplicado a un cliente.

Un buen amigo del mundo del SEM me recomienda para un proyecto del sector inmobiliario.

Lo primero que hago es seguir religiosamente un checklist sencillo a nivel de diagnóstico:

1. Ojear su página web a nivel estético.
2. Leer sus textos.
3. Analizar qué llamadas a la acción tiene.
4. Ver qué términos SEO intenta posicionar.

Atención a esto:

La inmensa mayoría de proyectos web tienen un problema en común: su comunicación no está alineada con lo que realmente hacen ni con el público objetivo que desean tener, incluso habiendo pasado por grandes agencias de Marketing y abonado miles de euros.

¿Cómo puede ser?

Porque se saltaron el paso:  hablar a fondo con el cliente  (un punto donde hay que profundizar, antes de darle a la tecla).

Conociendo al cliente: contexto, nicho y objetivo

«DCORE» es una empresa de reformas en Madrid, o eso decía su página web. Una keyword altamente competida.

A nivel de mensaje, su principal atractivo era el cumplimiento estricto de plazos y el poder ofrecer proyectos llave en mano que incluyeran diseño y ejecución de obra.

Pero después de hablar con ellos, nos dimos cuenta de algo clave y que lo cambiaría todo: su mensaje no resonaba en las cabezas de su verdadero público objetivo.

Un problema enorme por varios motivos:

• Atacaban una intención de búsqueda muy competida y genérica.
• Las fotos de la web no estaban alineadas con el mensaje.
• Los textos eran genéricos, vacíos y poco elaborados (algo que ocurre en la mayoría de webs).

Después de hablar con ellos y entender a la perfección quién era su público objetivo, localizamos la intención de búsqueda adecuada para ellos: “reformas de lujo en Madrid”.

Empieza la fiesta.

Análisis del proyecto con DinoRANK: evolución y posición actual

Antes de tocar nada, es clave meter el proyecto en DinoRANK y auditarlo. De esta manera, sabemos qué está bien de la web actual (para mantenerlo) y qué debe mejorar.

Además, nos dará una foto del “antes” que nos servirá para compararlo con el “después”.

Esto, además de ser un básico para justificar nuestro trabajo de cara al cliente, nos permite documentar y elaborar casos de éxito que utilizaremos para atraer más y mejores clientes.

La famosa “bola de nieve”.

Por eso insisto mucho en elegir bien a tus clientes: no todos tienen lo que hay que tener para convertirse en casos de éxito. Por eso, debes auditarlos bien antes de comprometerte.

Lo que hicimos diferente (y por qué funcionó)

En mi agencia SANTA VENTA utilizamos un método simple (que no fácil) que hasta la fecha nos ha dado grandes resultados:  investigar de forma enfermiza al cliente .

“Entramos hasta en la cocina”.

Esto es lo que les digo en la primera reunión a los clientes.

Soy pesado en esto, pero el SEO moderno funciona así. Sin una buena investigación, no pueden salir buenos textos que estén alineados con la intención de búsqueda y el público objetivo.

El paso a paso es siempre el mismo:

1. Reunión por videollamada grabada siguiendo el método SPIN.
2. El cliente contesta un cuestionario extenso e instrucciones precisas (capa 1)
3. Una vez recibidas las respuestas, analizamos y volvemos a preguntar (capa 2)
4. Preparamos la estructura web y la estrategia de venta.
5. Redactamos los textos.
6. Diseñamos el lead magnet.
7. Diseñamos la web (fíjate que es el paso final y no el primero)

Además, tener unos textos potentes y bien trabajados tiene grandes ventajas:

• Aumenta el CTR en las SERPs
• Mejora el tiempo de retención en página y la navegación interna.
• Mejora el ratio de conversión en los CTAs.
• Mejora el coste por lead (CPL) en publicidad pagada (SEM).
• Reduce el tiempo de cualificación de los leads.
• Te diferencia enormemente de la competencia (en serio, es sorprendente la poca gente que se preocupa de sus textos).
• Te permite dejar de competir por precio al mostrar mejor el valor.
• Humaniza tu marca y tu historia.

Todo esto que te comento arriba es lo que hacemos diferente y por eso nuestros proyectos nunca bajan de los 10.000€, incluso para landings de venta. El trabajo que hay que hacer es exactamente el mismo. Es el punto de partida.

Como ves «no es solo diseñar una web rápida con Elementor y a correr». Yo no sé trabajar así.

Otras acciones de SEO elemental que llevamos a cabo con DinoRANK

Con los nuevos textos en mano, utilizamos el módulo de tracking de posiciones para monitorizar las palabras clave actuales que tiene el cliente (genéricas y muy competidas) y las que queremos posicionar (más concretas, menos competidas).

Esto nos permite hacer un seguimiento diario de la evolución de las keywords.

También usamos la gráfica de visibilidad para verificar qué palabras clave secundarias está utilizando la competencia para nuestra nueva intención de búsqueda.

De esta manera, podemos tratar de estimar (aunque sea de forma muy general) cuánto tiempo vamos a necesitar para alcanzar un top 3.

Simple, económico y efectivo.

Y lo más importante: muy visual, cosa que el cliente te agradece en el momento de recibir el informe SEO.

Diseño web rápido y flexible: la tecnología que utilizas marca la diferencia

Me considero más un diseñador web que un SEO y, por tanto, tenía que dedicar una sección a los constructores web.

Para que tengas contexto,  mi evolución a lo largo de los últimos años a nivel de herramientas y de precios por proyecto ha sido el siguiente :

1. Comprar y adaptar plantillas de Themeforest (400€)
2. Diseñar a medida con Elementor (1200€)
3. El combo GeneratePress + Elementor (2500€)
4. Buscando velocidad: GeneratePress Pro + Bloques de Gutemberg (3.000€)
5. Flexibilidad y mayor control con Oxygen Builder (5.000€)
6. Potencia, velocidad y flexibilidad con Bricks Builder (10.000€ en adelante…)

Seguro conocerás la frase “el hábito no hace al monje” y es que conozco diseñadores cobrando grandes cifras por proyectos web utilizando Elementor. Y está bien, nada en contra…

Pero utilizar herramientas potentes como  Bricks Builder  te permite varias cosas:

• Ser más eficiente en cada proyecto.
• Poder montar cualquier tipo de proyecto (una landing, una academia, una tienda online…)
• Tener integración completa con plugins como ACF.
• Diferenciarte tecnológicamente cuando presentas una propuesta a un cliente.
• Obligatoriedad de aprender a trabajar de manera más ordenada.
• Ofrecer más velocidad de carga y seguridad al necesitar menos plugins.
• Fácil integración de datos estructurados (Schema.org).
• Tener una mayor flexibilidad HTML para lograr un SEO perfecto.
• Te permite cobrar más y tener mejores casos de éxito.

Dicho esto, veamos el proyecto por dentro.

Velocidad, control y estructura desde el constructor

Bricks funciona como un constructor web, y no como un maquetador. Esto es importante, ya que una vez instalado, no inunda la web de código basura o “bloat code” como sí hace Elementor.

A medida que diseñamos, se genera código limpio HTML, CSS y JavaScript.

La estructura básica del encabezado (header) y pie de página (footer) se configura como plantilla. En esta sección también configuramos las plantillas del blog, archivos de autor, etc.

Esto permite tener muy bien organizada la información y evitar inconsistencias en el diseño.

Cuando priorizar el SEO por encima del diseño puede ser un error

Cuando se prioriza el SEO por encima de todo, el diseño lo paga. Y eso lo vimos analizando la competencia de nuestro cliente. Imagina que estás en Google y abres los 3 primeros resultados.

Los títulos principales (H1) son los siguientes:

Web 1: “Reforma integral de lujo»

Web 2: “Reforma de lujo en Madrid»

Web 3: “Reformas integrales de lujo en Madrid en 2024”

A nivel SEO puede ser correcto, pero para el usuario es una mala experiencia por un simple motivo: no hay conexión emocional.

Se trata al visitante de la web como si fuera un robot que no tiene sentimientos, ni problemas, ni motivaciones.

Cuando utilizas un constructor web flexible, te puedes permitir mantener el lujo de diseñar para el cliente y pensando en Google al mismo tiempo.

Así lo hicimos nosotros:

Bonito, directo y siguiendo la estructura semántica de un buen SEO.

Bricks y Rank Math: una pareja ganadora (configuración básica)

Para lograr un diseño web optimizado para SEO, la elección del plugin SEO es algo importante.

Si optas por cualquiera de los dos grandes, Yoast SEO o Rank Math SEO nunca te vas a equivocar. Pero personalmente, me gusta más Rank Math por su sistema modular.

Sea cual sea el proyecto con el que estés, el primer paso siempre es activar el mapa del sitio (sitemap.xml) para poder ver, fácilmente, qué URLs están visibles para Google.

Infinidad de proyectos web tienen indexadas páginas que no deberían estarlo.

Algunos ejemplos habituales:

• El aviso legal, la privacidad y las cookies
• La página de gracias por contactar.
• Las plantillas nativas del constructor o del tema.
• Páginas con thin content donde se entrega un lead magnet o similar.
• Páginas de “login”
• Archivos de autor cuando no son necesarias

Indexar en Google todas estas páginas perjudica nuestro presupuesto de rastreo (crawl budget) y ofrece una mala experiencia al usuario cuando busca nuestra marca en Google.

Lo que buscamos con un diseño orientado a SEO es que nuestra marca (o la de nuestro cliente) luzca así, dentro de las SERPS:

El Title, bien visible con la marca y la palabra clave, y debajo los enlaces destacados de las secciones que nos interesa mostrar a nuestro potencial cliente.

A la derecha, cómo no, el local pack «petado» de reseñas positivas, que aumentará el porcentaje de conversión, en combinación con el copy de la propia web.

Otro elemento potente de Rank Math es la inserción de datos estructurados (Schema.org) y la integración con el módulo de SEO local.

En nuestro caso, el cliente tiene una ficha en Google Business Profile y hemos configurado el plugin de SEO para que refuerce también esa parte:

El texto de calidad posiciona: cómo aprender a vender más (copy)

Antes he mencionado la importancia de investigar y de obtener información de calidad de nuestro cliente. Pero te estarás preguntando… ¿Cómo lograr textos de calidad optimizados para SEO?

Para responder a esa pregunta, debemos dominar los básicos del copywriting y la persuasión. Para ello, lo fácil sería decirte que te leas los libros de Isra Bravo, pero sería insuficiente.

Personalmente, te recomiendo leer estos tres y respetando el orden:

1. Cómo hacer amigos e influir sobre las personas – Dale Carnegie (ver en Amazon)
2. El vendedor desafiante – Matthew Dixon y Brent Adamson (ver en Amazon)
3. Cashvertising – Drew Eric Whitman (ver en Amazon)

El primero, te enseña las bases de la psicología humana y cómo pensar y actuar de manera persuasiva en todos los ámbitos de tu vida.

El segundo, rompe esquemas de lo que es (y no es) la venta. Si eres de los que piensa que “el cliente siempre tienen la razón” este libro de volará la cabeza.

Y por último, uno de los mejores libros de copywriting y más prácticos que existen: Cashvertising. Un imprescindible para tener siempre a mano en tu mesa de trabajo.

Más investigar y menos inventar: cómo escribir lo que el usuario quiere

Durante el proceso de investigación debemos tocar tres palos:

• La empresa (Historia, motivaciones y objetivos)
• El producto o servicio (beneficios, diferencias con su competencia…)
• El cliente o comprador (miedos, ilusiones, deseos…)

Debo ser honesto con vosotros: no es un proceso fácil. Una vez nos llega toda la información en bruto, hay que destilarla.

En este paso,  el uso de la IA es realmente útil . La utilizamos para realizar preguntas concretas y obtener una información muy valiosa que luego aplicamos en todos los textos de la web.

Lo más importante es detectar lo que el usuario quiere evitar a toda costa (dolor), qué desea obtener (beneficio) y qué le impide hacerlo actualmente (objeciones o creencias limitantes).

Toda esta información la introducimos en Coda (o Notion) y empezamos a trabajarlo párrafo a párrafo, siempre buscando un objetivo: que el usuario quede enganchado en el texto.

Títulos para humanos y optimizados para SEO

Algo que me preguntan mucho:

“¿Cómo sacar buenos titulares?” o “¿Cómo puedo saber que tengo un titular ganador?”

Además de incluir la palabra clave principal y sinónimos, podemos utilizar estas pequeñas preguntas que nos darán pistas de si vamos en la buena dirección. Aprovecho y adjunto un par de ejemplos prácticos:

¿El titular es genérico o concreto?

• “Reformas integrales en Madrid”
• “Reformamos tu piso de lujo en Madrid desde 70.000€. Sin sorpresas.”

Si nos fijamos, el primer título es “muy SEO” pero poco útil a nivel de usuario.

En cambio, el segundo introduce elementos más concretos y con conexión emocional.

“Tu piso de lujo” y “70.000€” filtra el tipo de público. Además, utilizamos una objeción detectada en la auditoría: “Sin sorpresas” ya que se menciona mucho por parte de los clientes.

¿El titular podría ser utilizado por nuestra competencia?

Siguiendo el ejemplo anterior, si nuestro competidor no hace reformas en el sector del lujo, no podrá utilizar este título.

Y si lo hace, pero sus precios mínimos parten de 50.000€ tampoco lo podrá usar. Esto nos indica que es un buen titular y que puede ser utilizado.

¿El titular invita a seguir leyendo?

Esto no es obligatorio, pero puede funcionar bien sobre todo cuando se utilizan preguntas abiertas y que abren un “círculo de duda” en la mente del potencial cliente. Veamos un ejemplo:

“¿Y si disfrutar de tu próximo piso en Madrid centro estuviera a tu alcance?”

Muchas empresas utilizan el recurso de la pregunta, y la gran mayoría lo hacen mal.

Si la respuesta a la pregunta puede ser “Sí” o “No”, está mal formulado. Por ejemplo, si optamos por “¿Te gustaría vivir en un piso de lujo en Madrid?” tu mente puede pensar “Pues no, no me gustaría”. En ese momento pierdes el lector.

En cambio, si respondemos mentalmente al ejemplo: “Ostras, ¿está a mi alcance? A ver, cuéntame más…”

¿El titular responde a la necesidad real del cliente?

Lo bueno de tener una investigación hecha, es que nunca te enfrentas al síndrome de la página en blanco.

Los propios clientes nos dicen qué quieren, qué valoran y de qué quieren huir. Y esto lo podemos utilizar a nuestro favor. Vamos con el ejemplo:

• Titular antiguo: “Financia tu reforma desde 20.000€”
• Titular nuevo: “Financia tu reforma sin comprometer tu liquidez. Desde 20.000€”

El matiz “sin comprometer tu liquidez” es clave. Lo cambia todo.

¿Los motivos?

El público objetivo de esta empresa tiene poder adquisitivo, pero financian a menudo por un motivo muy sencillo: utilizan su dinero líquido para otras inversiones. Los detalles importan.

Bien. Ya tenemos un título optimizado para SEO (también nos fijamos en que esas palabras clave tengan búsquedas) y para humanos.

Y lo mejor es que a Google le va a encantar, lo que se traducirá en mejores posiciones en las SERPs.

Cómo romper el patrón visual, dar ritmo y para mantener la atención

Esto no es estrictamente de SEO on page, pero tiene relación con el tiempo de permanencia en página, afecta al rebote y a la navegación interna. Google premia aquellas webs que retienen al usuario y navegan, síntoma de que la información es buena y está bien organizada.

Pero hoy, todos estamos muy distraídos. Nos aburrimos rápido.

¿Cómo resolvemos eso?

Rompiendo patrones mediante recursos de copy visual, imágenes, logos, vídeos que faciliten la lectura de la web. Para mostrároslo, voy a utilizar algunos ejemplos reales.

Imágenes de gran tamaño:

Listas:

Testimonios:

Bloques de texto de anchura limitada:

Bajo el capó: optimizando el código de la web para SEO técnico

Uno de los mayores puntos de dolor de los diseñadores web a la hora de afrontar un proyecto SEO es una mala infraestructura web:

•  Constructores lentos 
•  Imágenes gigantescas sin comprimir 
•  Proveedores de hosting lentos 
•  Versiones de PHP obsoletas 
• Y un largo etc.

Si os soy sincero, en el 90% de los casos, utilizo la bola de demolición y me cargo la web del cliente para levantarla de nuevo.

A menudo se tarda menos en hacer algo desde cero que arreglando lo que ya existe.

“Ya, David, pero yo soy consultor SEO, no programador.”

Lo entiendo, pero tanto los consultores SEO como los diseñadores web debemos conocer los cimientos de los proyectos web y las claves para detectar qué está fallando y cómo lo podemos arreglar. Con el tiempo, crearemos nuestra propia metodología que nos hará cada vez más eficientes.

Además, casi siempre los problemas son los mismos.

Vamos por partes:

Hosting rápido y estable: cuando lo barato sale caro

Existen cientos de proveedores de hosting, pero pocos priorizan de verdad el cliente por encima del beneficio económico.

A lo largo de mis 20 años he tratado con decenas de empresas diferentes. Por nombrar algunas: Sered, OVH, Dynahosting, Raiola Networks, Webempresa, Cdmon, Hostinger, Namecheap …

Ninguna es perfecta. Algunas tienen buenos precios, pero velocidades de carga horribles y paneles de control capados. Otras tienen problemas de seguridad e incluso tecnologías obsoletas a nivel de infraestructura.

He visto casos donde una web nueva (y bien protegida) era hackeada con ataques DDoS más de dos veces por culpa de las pobres medidas de seguridad del alojamiento web.

Actualmente, mi opción y la de mis clientes es LucusHost.

Una empresa española que utiliza servidores con las últimas tecnologías como LiteSpeed, ubicados en el datacenter DATA4 en Madrid. Precios correctos, soporte increíblemente rápido y rendimiento a tope.

¿Cómo afecta al SEO un hosting de baja calidad?

• Posibilidad de hackeo con miles de URLs tóxicas.
• Velocidad de carga insuficiente (nos lo chivará Page Speed y Search Console).
• Certificados de seguridad obsoletos (web segura).
• Tiempos de respuesta en resolver tickets si hay problemas técnicos.
• Caídas del servidor que provocan errores 500 en Google.
• Distancia entre nuestros clientes y la ubicación de los servidores.

Datos estructurados y marcaje Schema: el gran olvidado

Una web optimizada para SEO debe tener un buen marcado schema.

Para explicarlo fácilmente, los “rich snippets” o fragmentos enriquecidos son líneas de código que aportan información relevante a Google pero que el usuario no visualiza en el frontend de la web. Hay muchos tipos y puedes consultarlos todos en la web schema.org.

¿Dónde y cuándo se utilizan los rich snippets?

Siguiendo el ejemplo de DCORE, ellos tienen los siguientes marcajes schema insertados en la web:

1. Caja de autor
2. Preguntas frecuentes
3. Negocio local

El autor está insertado manualmente, dentro de la plantilla del blog, con un bloque de código, al igual que las preguntas frecuentes. El código lo puede generar ChatGPT o una herramienta gratuita como esta. Solo debes rellenar los campos correspondientes y obtendrás el código.

El segundo, utilizando el propio plugin Rank Math activando el módulo de negocio local. Puedes comprobar que los has insertado correctamente utilizando el richsnippets checker de Google.

Robots.txt y sitemap: revisa siempre su configuración

Actualmente, tanto Yoast SEO como Rank Marth SEO generan un archivo robots.txt optimizado para SEO, pero nunca está de más comprobar la información que contiene.

Recuerda que este archivo se puede editar directamente desde los plugins o en la propia raíz FTP de la web, donde están los archivos.

El Sitemap también se genera automáticamente mediante los plugins, pero hay que comprobarlo.

El 95% de los clientes que me llegan tienen indexadas páginas que no deberían estarlo. Una vez las marcamos como “noindex” para evitar su indexación en Google, utilizamos Search Sonsole para notificar la ubicación del mapa del sitio.

Con esto, le indicamos a Google qué URLs tiene el proyecto y facilitamos el rastreo.

Cómo mejoramos Core Web Vitals sin plugins extra

Mi parte favorita.

El rendimiento de una web (WPO) es clave y más en la era de los smartphones. Hay que tener en cuenta que muchas personas consultan las páginas web con conexiones 3G – 4G y no siempre son tan estables como nos gustaría. Por ello, tener una web liviana ya no es opcional.

El enfoque tradicional para lograr un “100” en Page Speed es utilizar un plugin de caché potente y comprimir las imágenes. Eso está bien, pero podemos ir un paso más allá utilizando un enfoque más completo.

El hosting afecta la velocidad

Cuando un usuario busca algo en Google y pulsa un resultado, el servidor debe mandar la información al navegador web del usuario. Lo rápido que sea esta conexión será el punto de partida. Cuanto más rápido, mejor, y para ello, hay que contratar un buen hosting que utilice la tecnología LiteSpeed.

Usa Google Page Speed o GTMetrix para medir la velocidad de esta primera fase de carga.

El constructor web o plantilla

Si optas por una plantilla comercial de Themeforest o similar (la peor opción) vas a tener que invertir unas cuantas horas en borrar contenido. Estas páginas incluyen muchas imágenes, vídeos y páginas que no utilizarás y que aumentan el peso final de la web. Además, muchas incluyen una gran cantidad de plugins para realizar tareas sencillas.

Mi recomendación es utilizar constructores modernos y programados con tecnologías punteras como Breakdance o Bricks Builder. En su defecto, el popular Elementor bien configurado también es una opción decente.

Optimización de imágenes: tamaño y formato.

Las imágenes tienen 3 factores que influyen en su peso y dos de ellos están bajo tu control.

1. El color de los píxeles de la imagen (ahí no puedes hacer nada)
2. El formato (JPG, PNG, WebP …)
3. La resolución en píxeles

Cuando descargamos una foto de stock, casi siempre estará en formato JPG y a una resolución superior a 4000px de ancho.

Y si tenemos en cuenta que la mayoría de personas raramente utilizan monitores con resoluciones horizontales superiores a 1920px (Full HD) debemos reducir su tamaño. Publicar imágenes a tanta resolución nos penalizará.

PRO TIP: En casos de tiendas online, muchas imágenes incorporan la función de Zoom y ahí sí es habitual ver imágenes de 2500 pixeles o más. Para estos casos, utilizar formatos WebP y una CDN externa para almacenar las imágenes será clave.

En cuanto al formato, mi recomendación es utilizar siempre WebP.

Es un formato de nueva generación, recomendado por Google y soportado por más del 95% de los dispositivos actuales. Además, se puede utilizar en elementos con transparencia como logotipos e iconos.

Para comprimir y redimensionar las imágenes, puedes hacerlo con herramientas gratuitas online (Sqoosh) o con plugins.

¡Ya no tienes excusa para que tu web no cargue rápido!

Compresión HTML, CSS y GZIP

Comprimir el código significa eliminar espacios en blanco y hacer que las largas cadenas de código HTML y de las hojas de estilo CSS ocupen menos espacio y, por lo tanto, Google pueda leer la web más rápidamente y el usuario disfrute del contenido en pantalla cuanto antes.

Esto se puede hacer fácilmente con plugins gratuitos como LiteSpeed, Optimizer o el poderoso y complejo WP Rocket.

Es importante saber “qué tocar”, ya que no por activarlo todo obtendremos mejores resultados. Además de correr el peligro de romper efectos visuales o impedir que ciertos elementos carguen correctamente.

PROTIP: Muchos alojamientos web tienen guías completas en su blog donde muestran el paso a paso para configurar un plugin de caché. Ellos eligen por ti el plugin adecuado para sus servidores. Ante la duda, envíales un ticket y pregúntales.

Errores más comunes al diseñar webs optimizadas para SEO y cómo evitarlos

Si este artículo te parece largo, esta quizá sea la parte más importante que deberías leer.

Evitando esto, tendrás más probabilidades de tener una web optimizada para SEO que hará que el robot de Google sienta que escanear tu web sea lo más similar a visitar un spa.

Vale, quizá exagero un poco, pero ya me entiendes.

1. Ignorar la intención de búsqueda del usuario

El SEO moderno es intención de búsqueda, no palabras clave. Una vez está hecho el keyword research y tengas localizadas las palabras clave que son importantes para tu proyecto, haz lo siguiente:

1. Abre una pestaña en modo incógnito y ve a Google
2. Introduce la palabra clave y analiza los 3 primeros resultados.
3. Fíjate en el tipo de resultado (artículo de blog, Local Pack, AI Overviews…)
4. Entiende qué busca el usuario y crea el contenido en consecuencia, para cada sección de la web.

Cuando ya tienes claro que tu web tiene las URLs necesarias para cubrir todas las intenciones de búsqueda que te interesan, puedes utilizar DinoRANK para revisar que no tengas canibalizaciones.

Si no tienes bien dominado este apartado, te recomiendo revisar el artículo de DinoRANK donde se habla a fondo de esta cuestión.

2. No tener una buena jerarquía de contenidos

Esto es un básico del SEO on page, pero es muy habitual ver páginas con múltiples H1 y una estructura totalmente desorganizada. Si se tiene un buen control del diseño, se puede lograr una jerarquización de contenidos perfecta sin afectar a la estética de la web.

Para poder controlar fácilmente a golpe de clic esta cuestión, te recomiendo la extensión de Chrome “SEO META en 1 CLICK”.

3. Imágenes no optimizadas para SEO

Explicar bien en formato texto el contenido de las imágenes refuerza el SEO, siendo además una buena práctica en términos de usabilidad. Las personas con discapacidad visual utilizan lectores que describen las imágenes, y es nuestro deber hacerlas accesibles. Además de optimizar la resolución y el formato, haz esto:

1. Renombra correctamente la imagen. Es mejor “cocina-de-lujo-en-madrid.webp” que “DCS4958.jpg”
2. Procura que no pesen demasiado. Como hemos comentado antes, esto es relevante. Se que a Dean le encanta usar Tinypng para esto
3. Rellena el campo ALT con las palabras clave que más te interesen y que tengan sentido para la imagen que estás utilizando. Por ejemplo “Cocina de estilo moderno reformada en Madrid”.

4. Esconder información importante

En los últimos años, el diseño web está adoptando un enfoque más minimalista, pero los extremos nunca son buenos.

Por ejemplo, una tendencia habitual es que la versión web de escritorio tenga el menú oculto en formato hamburguesa. Esto genera una portada o above the fold muy limpia y elegante, pero esconde elementos importantes e imprescindibles como el menú principal.

Bajo mi punto de vista un error:

Otro ejemplo habitual es el uso de sliders o carruseles de testimonios. Si son importantes y quieres que el usuario los lea, ignora estos recursos y mantén visible la información.

5. Repetir keywords sin aportar valor real

Esto es SEO del año 2010, cuando para posicionar una web bastaba con llenar el texto y los atributos alt de las imágenes con las palabras clave. No lo hagas. La intención de búsqueda manda y como hemos dicho anteriormente, una buena investigación te dará toda la información que necesitas.

Con ello, conseguirás buenos titulares, lead magnets con sentido y llamadas a la acción que funcionan.

6. No medir lo que haces (ni con Analytics ni con DinoRANK)

Lo que no se mide, no se mejora.

Imagina la siguiente situación:

Aplicas como buen alumno todo lo dicho en este post y publicas una web espectacular, optimizada al máximo para Google y logras un 100-100-100-100 en Page Speed. Además, consigues una jerarquía de contenido digna del propio Neil Patel y colocas una palabra clave transaccional en el Top 3.

Se lo enseñas al cliente y te dice… “¿Pero esto ya lo teníamos así antes, no?”

Tu cara, un poema.

Tu mente, furiosa.

La solución es simple: documenta y traquea los cambios más importantes de la web antes de rediseñar. Por ejemplo, yo sigo el siguiente protocolo paso a paso. Siempre. Sin excepción.

1. Captura de pantalla de resultados de Page Speed (web antigua)
2. Capturar la ficha de Google Business Profile (datos, presentación, reseñas…)
3. Captura de estructura semántica de contenidos (web antigua)
4. Captura de cómo aparece en las SERPs la empresa en búsqueda de marca.
5. Revisar que esté instalado Analytics y Search Console.
6. Introducir las keywords destacadas en el tracker de DinoRANK.
7. Exportar informes del histórico de ventas o leads de formularios.

Con esto, nos garantizamos que una vez publicada la nueva web y transcurrido un tiempo (2 – 3 meses habitualmente) podamos preparar un informe donde el cliente vea de manera visual y científica el antes y el después de la web. Además, como especialistas es nuestro trabajo describir las imágenes.

Si quieres ir más allá, utiliza Tag Manager y genera eventos en todos los botones importantes de la web como llamadas a la acción.

También puedes usar Microsoft Clarity para monitorizar el comportamiento del usuario dentro de la propia web y en base a eso iterar elementos clave del diseño.

PROTIP: Cuando describas la imagen (yo recomiendo hacerlo en video), incluye siempre el beneficio. Por ejemplo, en vez de “Antes la web cargaba en 4 segundos y ahora lo hace en 1” dile esto: “Antes la web cargaba en 4 segundos y perdíamos más del 50% de usuarios. Ahora, la web carga en 1 segundo, lo que nos ha permitido doblar los usuarios y aumentar un 35% las ventas”.

Habla siempre del beneficio y ofrece datos concretos. SIEMPRE.

6. Ignorar la captación de enlaces de calidad y la autoridad

¿Te suena el EEAT?

Desde el año 2018, con el conocido Medic Update, Google penalizó webs de sectores YMYL (salud, finanzas, legal…) que no demostraban suficiente autoridad (EEAT), generando grandes caídas de tráfico e ingresos.

La autoridad de marca es una factor cada vez más determinante, y más desde que ChatGPT está entre nosotros. ¿Cómo mejoramos la autoridad de nuestra página web? Mediante un conjunto de buenas prácticas de optimización SEO. Estas son algunas de ellas:

1. Fichas de autor en el blog bien trabajadas (biografía, redes sociales…)
2. Concordancia de datos entre la web y la ficha de Google Business Profile.
3. Aparecer en directorios importantes como Yelp Business.
4. Conseguir enlaces entrantes de sitios web de referencia de tu sector.
5. Enlazar a fuentes externas oficiales o científicas ( sector salud o legal)
6. Un correcto marcado schema de datos estructurados.
7. Dar de alta tu web en Bing Search Console y Bing places.

Ahora ya sabes cómo mejorar la autoridad de tu marca. Algunas de estas acciones como la adquisición de enlaces van más allá de simples ajustes técnicos. Tendrás que mandar emails, reservar presupuesto, mover hilos y ofrecer piezas de valor en otros portales para que quieran enlazarte.

La perseverancia dará sus frutos, ejemplo real:

Todo lo que te he explicado a lo largo de este kilométrico post lo he aplicado yo mismo para el cliente de reformas de lujo que te mostraba arriba.

Este es el resultado:

Top 1 en Google para su palabra clave principal, tras un buen trabajo de diseño web enfocado en SEO y copywriting.

Espero que mi experiencia personal, aquí documentada, te haya servido 🙂

Si has llegado hasta aquí eres un/a valiente.

¿Vas a poner en práctica esta guía cuando des un servicio de diseño web orientado a SEO?

Pon la guía en favoritos para volver a ella cuando lo necesites y, sobre todo, si quieres aprender más conmigo apúntate a Héroes del Diseño, la membresía de diseño web orientada a SEO que lanzaré en pocos meses con Dean.

👉 Si te apuntas a la lista de espera de entrada te regalaré un vídeo donde resumo toda mi experiencia como diseñador web. 

¡Pronto más, que diría Dean! 😃

---

PD final de Dean: si quieres aprender aún más con él te dejo esta entrevista que le hicimos en Youtube hace unos meses, que además gustó un montón.