Guía práctica · Desarrollo web

Qué debe tener una portada web para conseguir contactos

La portada no vende: reparte decisiones. Qué va en la primera pantalla, qué prueba, qué llamada a la acción y lo que Google sí dice sobre la página principal.

Equipo editorial de PotencIAPublicado el
Una diseñadora señala con el dedo la parte baja de la pantalla de un monitor mientras el dueño de un negocio, apoyado en la mesa, mira el diseño de la portada; sobre la mesa hay una hoja impresa con el boceto de la página.

Una portada no consigue contactos porque convenza: los consigue porque reparte bien. Casi nadie contrata desde la página de inicio. Lo que ahí se decide es otra cosa, y es anterior: si el visitante sigue o se va, y si al seguir aterriza en la página que resuelve justo su caso.

Por eso las portadas que funcionan no son las más bonitas ni las más largas. Son las que responden cuatro preguntas antes de que nadie desplace la pantalla y ofrecen una única salida evidente hacia el siguiente paso.

Aquí verás qué va en esa primera pantalla, qué prueba hace falta, qué dice de verdad la documentación de Google sobre la página principal —hay dos cosas concretas y una es un mito que puedes soltar—, cómo está montada la nuestra bloque a bloque y qué medimos para saber si reparte bien.

Lo que decide la portada y lo que no

La portada recibe un tráfico distinto al del resto de la web. A una página de servicio se llega buscando ese servicio. A la portada se llega por el nombre del negocio, por el boca a boca, por una tarjeta, por un enlace compartido en WhatsApp o por una búsqueda tan vaga que el buscador no sabe a qué página concreta mandarte.

Ese visitante no llega con una pregunta afilada. Llega con una duda de encuadre: ¿esta gente hace lo que necesito y merece que le dedique dos minutos?

De ahí salen las tres funciones reales de una portada:

  • Orientar. Decir qué haces, para quién y dónde, en lenguaje del cliente y no del sector.
  • Dar confianza. Enseñar quién está detrás y qué has hecho antes, con material comprobable.
  • Repartir. Enviar a cada persona a la página que responde a su caso, con enlaces cuyo texto se entienda antes de pulsarlos.

Lo que la portada no tiene que hacer es explicarlo todo. Cada vez que una portada intenta ser también la página de servicio, la de precios y la de empresa, empeora en las tres cosas y deja de repartir.

Las cuatro preguntas de la primera pantalla

Lo que se ve sin desplazar tiene que contestar cuatro preguntas. No son un eslogan, son datos:

  1. Qué haces. El servicio, con el nombre que usaría un cliente al describirlo por teléfono.
  2. Para quién. El tipo de negocio o persona. «Para pymes y autónomos» descarta y eso es bueno.
  3. Dónde o cómo. Zona de trabajo, modalidad o alcance. Es la mitad de las llamadas que se ahorran.
  4. Qué hago ahora. Una acción, escrita en un botón que se ve sin buscarlo.

Un titular que podría estar en la web de cualquier competidor —«soluciones a medida para impulsar tu negocio»— no responde a ninguna de las cuatro. La prueba es sencilla: si tapas el logotipo y el texto sigue valiendo para otro sector, la primera pantalla está vacía.

En nuestro caso el encabezado de la portada existe con una instrucción escrita en el propio código, para que nadie la relaje con el tiempo: tiene que dejar claro en cinco segundos que hacemos web, SEO y software propio, y que las tres cosas están conectadas. Es una restricción de producto, no de diseño.

Quién está detrás, en la portada y no escondido

Aquí hay una coincidencia útil entre lo que pide un visitante y lo que Google dice mirar. La guía de contenido útil, fiable y centrado en las personas propone evaluar cualquier sitio con las preguntas «¿Quién, cómo y por qué?», y entre las preguntas sobre autoridad incluye esta: «Si alguien buscara más información sobre el sitio que publica el contenido, ¿concluiría que es de confianza o una autoridad reconocida del tema que trata?».

Traducido a una portada de negocio, «buscar más información sobre el sitio» significa mirar si aparece un nombre real, una ubicación o zona, un teléfono que alguien coge y algún rastro de las personas que trabajan ahí. Eso no ocupa media pantalla: ocupa una línea en el encabezado, un bloque de proyectos y un pie completo.

Una portada anónima —sin dirección, sin teléfono, con un formulario como único canal— no falla por SEO. Falla porque el visitante que estaba dispuesto a llamar no encuentra a quién.

Una sola salida, y que se entienda antes de pulsarla

La llamada a la acción es donde más portadas se estropean, casi siempre por exceso: cuatro botones en la primera pantalla compitiendo entre ellos.

La regla que aplicamos es una acción principal repetida y, como mucho, una secundaria de menor peso visual. En nuestra portada la principal es la misma en el encabezado y al final —«Hablemos de tu proyecto», hacia la página de contacto— y la secundaria lleva a conocer el producto. Nada más.

El texto del botón importa tanto como su posición. La guía de inicio SEO de Google lo dice del texto de enlace en general: «Con el texto de enlace adecuado, los usuarios y los buscadores pueden comprender fácilmente lo que contienen las páginas enlazadas antes de visitarlas». «Enviar», «Más información» y «Ver más» no cumplen eso; «Pide presupuesto», «Ver precios y plazos» o «Cuéntanos tu caso», sí.

Y hay un mínimo técnico que casi nadie comprueba en móvil. Las Pautas de Accesibilidad para el Contenido Web 2.2, recomendación del W3C del 12 de diciembre de 2024, incorporan el criterio 2.5.8, de nivel AA y nuevo en esta versión, que exige que el área pulsable de un control mida al menos 24 por 24 píxeles CSS, con excepciones tasadas —entre ellas, que haya separación suficiente alrededor o que exista otro control equivalente en la misma página—. Un botón que en el móvil se queda en 20 píxeles de alto no es un problema estético: es un contacto que no se produce. Si además incrustas un formulario en la portada, el criterio 3.3.2, de nivel A, pide algo tan básico como que haya etiquetas o instrucciones cuando se solicita información al usuario; el debate sobre cuántos campos poner es otro y lo trataremos aparte.

Lo que interrumpe antes de que empiece nada

La misma guía de inicio de Google avisa sobre lo que se atraviesa: «procura no mostrar anuncios ni páginas intersticiales que entorpezcan la experiencia de los usuarios. Las páginas intersticiales son páginas que aparecen antes o después de acceder al contenido al que se quiere ir».

En una web de pyme eso casi nunca son anuncios: son la ventana de descuento a los tres segundos, el chat que se abre solo y se come el titular en móvil, y el vídeo de fondo que retrasa lo único que hacía falta leer. El aviso de cookies es distinto, porque es una obligación legal y tiene sus propias reglas; lo tratamos en qué debe incluir una web corporativa.

La prueba tiene que estar en la portada

«Llevamos quince años» no es prueba. Prueba es algo que el visitante puede verificar sin fiarse de ti: trabajos publicados con enlace, reseñas atribuibles, sectores concretos, cifras propias que puedas sostener.

Nuestra portada dedica un bloque entero a los proyectos publicados y enlaza a las webs reales, no a capturas. Ese bloque hace un trabajo doble: convence al que duda y, de paso, cumple la parte de «¿quién?» sin necesidad de una página institucional larga.

Lo que no ponemos, y merece decirse en un artículo sobre conseguir contactos: ningún porcentaje de conversión de clientes. No publicamos cifras de resultados ajenos que quien lee no pueda comprobar, y una portada tampoco debería hacerlo.

Dos cosas que Google sí dice sobre la página principal

La primera es técnica y solo afecta a esta página. Según la documentación de nombres de sitio en la Búsqueda, la generación del nombre que aparece sobre cada resultado «tiene en cuenta tanto el contenido de la página principal de un sitio como las referencias a esa página que aparecen en la Web», y para indicar tu preferencia hay que añadir datos estructurados WebSite «a tu página principal». El sistema mira también og:site_name, el título y los encabezados de la portada, pero los datos estructurados pesan más si quieres fijar una preferencia. Solo se admite un nombre por dominio o subdominio.

Aquí hacemos autocrítica: hoy nuestra portada publica datos estructurados de Organization con el correo y el teléfono de contacto, pero no de WebSite. Es exactamente el tipo de detalle que se queda pendiente y que solo se ve cuando lo escribes.

La segunda es un mito que puedes dejar de arrastrar. En el apartado de mitos de la guía de inicio, sobre número y orden de los encabezados: «Para los lectores de pantalla es muy útil que los encabezados estén en orden semántico, pero desde la perspectiva de la Búsqueda de Google, no importa si los estás usando de forma incorrecta». Y añade que «tampoco existe la cantidad ideal de encabezados que una página determinada debería tener».

Eso lo aclara: la jerarquía de titulares de una portada se arregla por accesibilidad y por lectura, no por posicionamiento.

Lo que encontramos hoy en nuestras propias portadas

Revisamos el 9 de septiembre de 2026 el HTML servido en las páginas de inicio de las cuatro webs que tenemos publicadas como proyectos. Son datos comprobables por cualquiera:

  • Aerotermia Proyectos e Instalaciones. Titular principal que explica el servicio en una frase, teléfono pulsable, enlace de WhatsApp y un formulario en la propia portada.
  • THIASA. Titular «Reformas Integrales en Madrid», que responde a qué y dónde en cuatro palabras, teléfono, WhatsApp y formulario en portada.
  • Madres Protectoras Madrid. Es una asociación, así que su «contacto» no es una venta: no lleva formulario ni WhatsApp en la portada, y los teléfonos que muestra son el 016 y el 112. Buen recordatorio de que la acción principal depende del objetivo, no de la plantilla.
  • Auténtica Pizza. Teléfono y WhatsApp bien visibles, sin formulario porque el contacto es una llamada, pero su titular principal está marcado como encabezado de segundo nivel: la portada no tiene ningún h1. Por lo que acabamos de citar, eso no la penaliza en la Búsqueda; para un lector de pantalla sí es una jerarquía peor, y es una corrección que nos apuntamos.

La portada nuestra, bloque a bloque

Siete bloques en este orden, y cada uno responde a una pregunta distinta:

  1. Encabezado con la acción principal. Presente desde el primer píxel.
  2. Primera pantalla. Qué hacemos, para quién y cómo se conectan las tres líneas de trabajo.
  3. Recorrido. Cómo encaja web, visibilidad y gestión de los contactos que llegan.
  4. El producto propio. Porque es lo que nos distingue y quien viene por él no debería tener que buscarlo.
  5. Las dos líneas de servicio. SEO y desarrollo web, cada una con su enlace a su página. Aquí es donde la portada reparte de verdad.
  6. Proyectos. La prueba, enlazada.
  7. Cierre con una pregunta y dos salidas. «¿Por dónde empezamos?», con contacto como acción principal.

Fuera del flujo hay un detalle pensado para móvil: una barra fija con la acción principal que aparece cuando el visitante ha desplazado unos 420 píxeles, es decir, cuando ya ha pasado la primera pantalla y el botón inicial ha quedado arriba. No aparece antes, para no tapar justo lo que tenía que leerse.

La velocidad es el otro condicionante, y merece su propio artículo: los umbrales oficiales de las métricas web esenciales son 2,5 segundos de LCP, 200 milisegundos de INP y 0,1 de CLS, medidos en el percentil 75 de las cargas. Aquí basta con la consecuencia práctica: la primera pantalla no puede depender de una imagen enorme ni de un vídeo para decir a qué te dedicas.

Cómo saber si reparte bien

Sin medición, una portada se discute por gustos. Estas son las cuatro señales que miramos, y ninguna necesita una herramienta cara:

  • Qué proporción de visitas de la portada llega a una página de servicio. Es la medida directa de si reparte.
  • Los clics en el teléfono y en WhatsApp, no solo los envíos de formulario. En negocios locales suelen ser la mayoría del contacto real y son los que más veces se quedan sin registrar.
  • Los envíos de formulario, con el origen anotado.
  • Las impresiones y los clics de la propia portada en Search Console. Si tiene muchas impresiones y pocos clics, el problema está en el título y la descripción antes que en la página; ese diagnóstico está en impresiones sin clics.

En nuestra web esos eventos están declarados en el código como eventos de analítica —envío de formulario, clic en WhatsApp, clic en la acción principal— y solo se envían si la persona ha aceptado la analítica.

Una advertencia de honestidad: durante las primeras semanas de una web nueva, estos números son demasiado pequeños para concluir nada. Sirven para detectar lo que está roto, no para optimizar decimales.

Lista de comprobación

  • Las cuatro preguntas —qué, para quién, dónde, qué hago ahora— se responden sin desplazar la pantalla.
  • El titular deja de ser válido si lo pones en la web de un competidor.
  • Hay una sola acción principal, repetida arriba y abajo, y como mucho una secundaria.
  • El texto de los botones y enlaces dice adónde llevan.
  • El área pulsable de esos controles cumple el mínimo de 24 por 24 píxeles CSS en móvil.
  • Nombre, zona, teléfono y correo están visibles sin ir a la página de contacto.
  • Hay prueba enlazada y comprobable, no adjetivos.
  • Nada se interpone antes de leer: ni ventana emergente inmediata ni chat que se abre solo.
  • La portada enlaza a cada página de servicio con texto descriptivo.
  • La jerarquía de encabezados es correcta, empezando por un único titular principal.
  • Los datos estructurados de la portada incluyen WebSite si quieres fijar el nombre del sitio.
  • Los clics a teléfono y WhatsApp están medidos, no solo los formularios.

Si la portada cumple todo esto y aun así no llegan contactos, el problema ya no está en la portada: está en el tráfico que recibe o en la oferta. Y eso se diagnostica en otro sitio.

Para decidir qué páginas hay debajo, está cuántas páginas necesita un negocio; si aún no sabes si necesitas una portada así o una sola página de campaña, la comparación está en landing page o web corporativa. El alcance con el que construimos una web, con la base técnica y la estructura ya incluidas, está publicado en nuestros tipos de web y sus precios. Y si lo que falta es que esa portada la encuentre alguien, ese es un trabajo de posicionamiento distinto del de construirla.

Fuentes consultadas

  • Google Search Central, Guía de inicio SEO, actualizada el 18 de diciembre de 2025 y consultada el 9 de septiembre de 2026. Apartados «Comprueba que el texto de los enlaces sea adecuado», «Evita anuncios que distraigan» y el mito «Número y orden de los encabezados».
  • Google Search Central, Crear contenido útil, fiable y centrado en las personas, actualizada el 18 de diciembre de 2025 y consultada el 9 de septiembre de 2026. Apartados «¿Quién, cómo y por qué?» y «Preguntas sobre la autoridad del contenido».
  • Google Search Central, Nombres de sitio en los resultados de la Búsqueda, actualizada el 20 de febrero de 2026 y consultada el 9 de septiembre de 2026.
  • W3C, Web Content Accessibility Guidelines (WCAG) 2.2, recomendación del 12 de diciembre de 2024. Criterios 2.5.8 «Target Size (Minimum)», nivel AA, y 3.3.2 «Labels or Instructions», nivel A. Traducción propia de los textos citados.
  • Google, Métricas web esenciales, actualizada el 31 de octubre de 2024. Umbrales de LCP, INP y CLS en el percentil 75.
  • PotencIA Soluciones, código de la portada, del aviso de analítica y de los datos estructurados del sitio, revisado el 9 de septiembre de 2026.
  • Páginas de inicio de aerotermiaproyectoseinstalaciones.es, thiasa.es, madresprotectorasmadrid.es y autenticapizzamesondelboalo.es, consultadas el 9 de septiembre de 2026.