Crea páginas optimizadas para el SEO.

Learn DXPR BuilderBuild pagesVolg een tutorial

Aquí creas una página de servicio como mejor la leen los motores de búsqueda: el título de página como su único Encabezado 1, encabezados en orden debajo, texto alternativo en la imagen y un botón que dice a dónde va. Úsala como lista de revisión para cada página que publiques. Los títulos de página, las descripciones y las URL viven fuera del constructor; la última sección muestra dónde.

El vídeo crea la página «Solicita un permiso de aparcamiento para residentes» de un ayuntamiento.

Antes de empezar

  • Tu rol tiene el permiso Editar con DXPR Builder.
  • La biblioteca de medios guarda una foto que encaja con el servicio.
  • La página está abierta en el constructor. Para una nueva, ve a Contenido > Añadir contenido > Página de destino (/node/add/landing_page), escribe un Título claro como «Solicita un permiso de aparcamiento para residentes» y haz clic en Guardar. El tema imprime este título como Encabezado 1 de la página.

Paso 1: empieza el contenido en el Encabezado 2

Usa los encabezados en orden para que la página se lea como un esquema. El tema imprime el título de página como Encabezado 1 de la página, así que el contenido del constructor empieza en Encabezado 2 para secciones principales, con Encabezado 3 para subsecciones. Usa los Encabezados 4 a 6 con moderación.

  1. Haz clic en Añadir elementos en la página vacía y elige Sección en la pestaña Diseño.
  2. Haz clic en + en la sección y elige Texto en la pestaña Contenido.
  3. Escribe «Solicita en cinco minutos» y elige Encabezado 2 en el desplegable de encabezados.
  4. En una línea nueva, añade el resumen como texto normal: «Las personas residentes de las zonas A a D pueden solicitarlo en línea. Los permisos se emiten en cinco días laborables». Haz clic en Guardar.

Deja el Encabezado 1 para el título de página. Para que un encabezado del constructor sea el Encabezado 1 de la página en su lugar, esconde primero el título del tema en esta página. En DXPR CMS, abre el formulario de edición de la página, abre Ajustes de tema DXPR, marca Título de página en Ocultar regiones DXPR y haz clic en Guardar. DXPR Theme ya esconde el título en la portada. Nunca elijas un nivel de encabezado por su tamaño: cambia el tamaño con Tamaño de fuente en el panel Estilo del elemento en su lugar.

Paso 2: una sección para los detalles

  1. Pasa el cursor sobre la sección y haz clic en Añadir sección debajo.
  2. Haz clic en + en la sección nueva y elige Fila; llega con dos columnas iguales. Haz clic en el icono de cuadrícula (Diseño de columnas) en la barra de control de la fila, elige el ajuste 2/3 + 1/3 y haz clic en Guardar.

Los elementos nuevos caen arriba de una columna. Así que los tres pasos siguientes llenan la columna ancha de abajo arriba: el botón, la subsección y luego el encabezado de sección.

Paso 3: escribe texto de enlace descriptivo

El texto de enlace dice a los motores de búsqueda de qué trata el destino. Evita «haz clic aquí» y «lee más».

  1. Haz clic en + en la columna ancha y elige Botón.
  2. Pon Título en «Empieza tu solicitud de permiso de aparcamiento», Enlace en /parking/apply y Tipo en Primario, y haz clic en Guardar.

Paso 4: una subsección de Encabezado 3

  1. Haz clic en + en la columna ancha de nuevo y elige Texto; cae encima del botón.
  2. Escribe «Lo que necesitas» y elige Encabezado 3.
  3. Escribe los documentos, uno por línea: «Justificante de domicilio», «Permiso de circulación del vehículo». Haz clic en Guardar.

Paso 5: un encabezado de sección de Encabezado 2

  1. Haz clic en + en la columna ancha una vez más y elige Texto.
  2. Escribe «Quién puede solicitarlo» y elige Encabezado 2.
  3. Añade la regla de quién puede solicitarlo en una línea, y haz clic en Guardar.

Paso 6: añade texto alternativo a la imagen

Cada imagen necesita un atributo alt que describa su contenido.

  1. Haz clic en + en la columna estrecha y elige Imagen.
  2. Haz clic en Seleccionar imagen, busca en la biblioteca de medios con Aplicar filtros, marca la foto y haz clic en Insertar selección.
  3. Abre el panel SEO y rellena el atributo Alt: «Portátiles, teléfonos y tazas de té sobre un escritorio de madera compartido». Haz clic en Guardar.

Escribe el texto alternativo para quien no puede ver la imagen. Déjalo vacío solo para imágenes de pura decoración. Usa el atributo Title solo cuando un tooltip aporta algo; no sustituye al texto alternativo.

Paso 7: guarda y muestra la vista previa

  1. Haz clic en Guardar en la barra de herramientas del constructor.
  2. Abre el menú de vista (el icono de ojo), elige Vista previa y comprueba que los encabezados se leen en orden.

Ve más allá

No sale en el vídeo:

  • Tamaño de imagen: cambia las imágenes al ancho al que se muestran antes de subirlas; 1200 píxeles cubren una columna completa. Deja Ancho de imagen en 100 %, deja Alto de imagen vacío y mantén cada archivo por debajo de 300 KB, porque la velocidad afecta al posicionamiento.
  • Enlaces para ignorar: para una página de inicio de sesión o similar, añade un elemento Enlace, abre su panel SEO y activa Indica a los motores de búsqueda que no lo sigan.
  • Enlaces de texto: dentro de un elemento Texto, selecciona las palabras y usa el botón de enlace de la barra de herramientas. Mantén significativas las palabras enlazadas: «el mapa de zonas de permiso», no «aquí».
  • Anclas: abre Más > Ajustes en una sección, pon ID de HTML en un nombre corto en minúsculas como who-can-apply, y enlázalo con #who-can-apply.

Mantén semántico el HTML

Los elementos Texto, Botón, Enlace e Imagen producen etiquetas estándar <h1> a <h6>, <p>, <ul>, <a> e <img>. Usa esos elementos para contenido. Guarda el elemento HTML para código de incrustado que ningún otro elemento puede producir.

Metadatos y URL

Los títulos de página, las metadescripciones y las URL viven en Drupal, fuera del constructor:

  • Metatag: módulo que fija etiquetas de título, descripciones y etiquetas Open Graph en Configuración > Búsqueda y metadatos > Metatag (/admin/config/search/metatag), o por página en el formulario de edición del nodo.
  • Pathauto: módulo que crea URL limpias desde títulos de página en Configuración > Búsqueda y metadatos > Alias de URL > Patrones (/admin/config/search/path/patterns).

Lo que ves

La vista previa muestra el título de página como Encabezado 1 de la página, luego «Solicita en cinco minutos» como Encabezado 2 con su resumen debajo. En la columna ancha «Quién puede solicitarlo» va primero, luego «Lo que necesitas» con sus dos documentos y el botón Empieza tu solicitud de permiso de aparcamiento. La foto queda en la columna estrecha, y su texto alternativo queda fuera de vista.

Si no ves la página como se muestra

  • Los encabezados se leen en orden equivocado. Los elementos nuevos caen arriba de su columna, así que el último que añades va primero. Arrastra cada elemento Texto a su sitio por el tirador de su barra de control.
  • Un encabezado se ve demasiado grande o pequeño. Tu tema fija un tamaño por nivel de encabezado. Conserva el nivel que encaja con el esquema y cambia Tamaño de fuente en el panel Estilo del elemento.
  • No encuentras el texto alternativo en la página. El texto alternativo es para lectores de pantalla y motores de búsqueda, así que la página nunca lo muestra. Abre los ajustes de la imagen y revisa el panel SEO en su lugar.
  • Los resultados de búsqueda muestran un título de página equivocado. El constructor no fija la etiqueta de título. Fíjala con el módulo Metatag, como se describe en Metadatos y URL.

¿Qué sigue?