Saltar al contenido
Speaksite Manual de uso PDF

Capítulo 6 de 11

SEO, idiomas y estilo

Que Google te encuentre, hablar varios idiomas y fijar los colores y las letras.

En esta página
  1. El título y la descripción que ve Google de cada página
  2. La nota de tu página y qué mejorar
  3. Los enlaces entre tus páginas
  4. Los datos estructurados para Google (y para las IA)
  5. Los valores de SEO por defecto de toda tu web
  6. El mapa del sitio
  7. Recomendaciones de la IA para el aspecto de tu web
  8. Los colores de tu web
  9. Las letras de tu web
  10. Los idiomas de tu web
  11. Añadir un idioma nuevo, paso a paso
  12. Traducir una página
  13. Medir visitas con Google Tag Manager
  14. Tus campañas de Google Ads
  15. Las visitas de tu web
  16. Elegir qué parte de tu tienda estás diseñando
  17. Las pantallas de tu tienda que puedes diseñar

Esta parte del panel es donde consigues que tu web se encuentre en Google (y en los buscadores que usan inteligencia artificial), que se pueda leer en varios idiomas, y donde decides de un solo golpe qué colores y letras usa toda tu web.

Casi todas las pantallas de esta área viven dentro del modo Avanzado. Verás un interruptor "Fácil / Avanzado" arriba del editor: si no lo tienes en Avanzado, no vas a encontrar la mayoría de lo que se explica aquí — es la causa número uno de "no lo encuentro". Las dos excepciones son el diseño de tu tienda (pantallas 16 y 17 de esta guía), a las que también se llega en modo Fácil desde el menú de la tienda.

Una nota sobre "GEO" o el posicionamiento en buscadores con inteligencia artificial: no hay un botón que diga "GEO" en el panel. Lo que hoy existe con ese objetivo son dos herramientas que ya tienes en el icono de SEO: la puntuación y el análisis de cada página, y los "datos estructurados" (más abajo, pantalla 4). Cuanto mejor puntúen tus páginas y más datos estructurados tengan, más fácil se lo pones a ChatGPT, Gemini o al propio Google a la hora de entender tu negocio y citarte cuando alguien pregunta por algo relacionado. Es una de las banderas del producto: no solo se trata de aparecer en una lista de enlaces azules, sino de que una IA pueda leer tu web, entenderla y recomendarte.

El título y la descripción que ve Google de cada página

Para qué sirve. Cada página de tu web tiene un título y una descripción que son lo primero que lee alguien en los resultados de Google (o en una respuesta de una IA). Aquí es donde los escribes.

Cómo llegar. Entra en el editor de tu proyecto, activa el modo Avanzado arriba, y pulsa el icono de la lupa (SEO) en la barra de la izquierda. Se abre la pestaña Metadatos.

Qué hay en pantalla. El título y la descripción tienen un contador de caracteres al lado (por ejemplo "49/60"): ese número no es decorativo, es la longitud que Google suele mostrar entera; pasarte hace que te lo corte con puntos suspensivos. También hay un botón Regenerar SEO con IA que te propone título y descripción solo, un campo de "Palabras clave", y una zona avanzada con el tipo de "Twitter Card", la imagen que se ve al compartir el enlace (Imagen OG) y la URL canónica.

La pestaña Metadatos de una página, con el título y la descripción ya rellenados y el contador en verde.
Figura 6.1. La pestaña Metadatos de una página, con el título y la descripción ya rellenados y el contador en verde.
Mientras escribes la descripción, el contador se queda en naranja o rojo hasta que llegas a una longitud recomendada — no es un error, es un aviso de que aún es corta.
Figura 6.2. Mientras escribes la descripción, el contador se queda en naranja o rojo hasta que llegas a una longitud recomendada — no es un error, es un aviso de que aún es corta.

Un ejemplo, paso a paso. Quieres que tu página de Contacto salga mejor en Google. Entras en Avanzado → icono SEO → pestaña Metadatos con la página de Contacto seleccionada. En Título escribes algo como "Contacto | [Nombre de tu negocio]" y en Descripción, dos frases con lo que la gente necesita saber para llamarte o escribirte (horario, ciudad, qué resuelves). Miras el contador: si está en rojo, acórtalo. Guarda. Ya está — no hace falta publicar para verlo reflejado en el análisis de la siguiente pantalla.

Cuidado con… El botón "Regenerar SEO con IA" sobrescribe lo que tengas escrito en esa página. Si ya lo habías afinado a mano, guarda una copia del texto en otro sitio antes de pulsarlo.

La nota de tu página y qué mejorar

Para qué sirve. Te pone una nota del 0 al 100 a cada página y te dice, punto por punto, qué le falta para subirla. Es el sitio al que vuelves después de tocar el título o la descripción para comprobar si has mejorado algo.

Cómo llegar. Con el panel de SEO abierto (modo Avanzado), pulsa la pestaña Análisis.

Qué hay en pantalla. Un círculo grande con la puntuación SEO (por ejemplo, 56). Debajo, la legibilidad de tu texto con una fórmula pensada para español (Fernández-Huerta) — cuanto más alta, más fácil se lee. Y una lista desplegable "Estructura SEO" con puntos de colores: verde es que está bien, rojo que falta, y cada línea se puede abrir para ver el detalle. El campo "Palabra clave principal" es el que más cambia el resultado: si lo dejas vacío, el análisis solo mira lo básico (título, descripción, encabezados); si escribes la palabra por la que quieres que te encuentren, el análisis añade comprobaciones específicas sobre esa palabra.

La pestaña Análisis con la puntuación SEO, la legibilidad y la lista de comprobaciones de estructura.
Figura 6.3. La pestaña Análisis con la puntuación SEO, la legibilidad y la lista de comprobaciones de estructura.
En cuanto escribes tu palabra clave principal (
Figura 6.4. En cuanto escribes tu palabra clave principal ("pan de masa madre" en este ejemplo), el análisis añade comprobaciones nuevas centradas en esa palabra.

Un ejemplo, paso a paso. Sigues en la página de Inicio y quieres subir la nota. Abres Análisis, escribes en "Palabra clave principal" lo que de verdad busca tu cliente (por ejemplo "pan de masa madre en Madrid"). Miras la lista de Estructura SEO: si "Meta descripción" está en rojo, vuelves a la pestaña Metadatos, la completas y regresas a mirar si el punto se ha puesto verde.

Cuidado con… La puntuación no es un examen que apruebas una vez y ya está: cambia cada vez que tocas el contenido de la página. No te obsesiones con llegar a 100; una nota alta en legibilidad y sin puntos en rojo en la estructura ya es una página bien trabajada.

Los enlaces entre tus páginas

Para qué sirve. Te enseña qué páginas de tu web enlazan entre sí y, sobre todo, cuáles se han quedado sin ningún enlace que lleve hasta ellas — esas páginas "huérfanas" a las que solo se llega escribiendo la dirección a mano, y que a Google le cuesta mucho más encontrar.

Cómo llegar. Panel de SEO (Avanzado) → pestaña Enlaces.

Qué hay en pantalla. Dos vistas con pestañas propias: Página actual (los enlaces solo de la página que tienes abierta) y Vista global (todo el sitio de un vistazo). En la vista global verás tres números — páginas, enlaces y un promedio — y, lo más útil, la lista de Páginas huérfanas con un aviso en amarillo.

La pestaña Enlaces mirando solo la página actual: aquí no había datos porque esa página no tenía enlaces salientes propios.
Figura 6.5. La pestaña Enlaces mirando solo la página actual: aquí no había datos porque esa página no tenía enlaces salientes propios.
La vista global: 7 páginas, solo 2 enlaces entre ellas, y 6 páginas marcadas como huérfanas porque nada del contenido enlaza hacia ellas.
Figura 6.6. La vista global: 7 páginas, solo 2 enlaces entre ellas, y 6 páginas marcadas como huérfanas porque nada del contenido enlaza hacia ellas.

Un ejemplo, paso a paso. Ves en la Vista global que "Nuestros panes" aparece como huérfana. Vas a tu página de Inicio (o al menú), añades una frase con un enlace de texto hacia "Nuestros panes" ("descubre nuestra selección de panes artesanos"), guardas, y vuelves a la pestaña Enlaces para comprobar que ha desaparecido de la lista de huérfanas.

Cuidado con… Esta pantalla no crea enlaces por ti, solo te avisa de que faltan; tienes que añadirlos a mano desde el contenido de la página (un botón, un menú, un enlace de texto).

Los datos estructurados para Google (y para las IA)

Para qué sirve. Es la herramienta más directamente ligada a que los buscadores con inteligencia artificial entiendan tu negocio, no solo tu texto: aquí le dices de forma explícita a Google (y a herramientas como ChatGPT o Gemini cuando rastrean tu web) qué es tu página — un negocio local con horario y dirección, una ficha de producto con su precio, una lista de preguntas frecuentes — en un formato que las máquinas leen sin ambigüedad. Es lo más parecido que tiene hoy el panel a un "SEO para IA".

Cómo llegar. Panel de SEO (Avanzado) → pestaña Schema.

Qué hay en pantalla. Si la página no tiene nada configurado, verás "No se encontraron datos estructurados en esta página". El botón Agregar Schema abre un desplegable con los tipos disponibles: FAQPage (preguntas frecuentes), Organization, LocalBusiness (negocio con dirección y horario), BreadcrumbList, Product, Service, Article, WebSite. Puedes rellenarlo a mano (pestaña "Manual (JSON)") o dejar que la IA lo genere describiéndole la página.

La pestaña Schema de una página sin datos estructurados todavía.
Figura 6.7. La pestaña Schema de una página sin datos estructurados todavía.
El desplegable con los tipos de ficha disponibles — para un negocio como una panadería, LocalBusiness es normalmente el más útil.
Figura 6.8. El desplegable con los tipos de ficha disponibles — para un negocio como una panadería, LocalBusiness es normalmente el más útil.

Un ejemplo, paso a paso. Tu negocio tiene dirección física y horario, y quieres que aparezca bien en Google Maps y que una IA sepa dónde estás y cuándo abres. En la pestaña Schema pulsas "Agregar Schema", eliges LocalBusiness en el desplegable, escribes en "Instrucciones adicionales" algo como "panadería en Calle del Horno 12, Madrid, abierta de 7:00 a 20:30" y pulsas Generar con IA. Revisa el resultado antes de guardar: la IA propone los campos, pero los datos (dirección, teléfono) tienen que ser exactos.

Cuidado con… Un dato estructurado mal puesto (una dirección o un horario que no coincide con la realidad) puede confundir más que ayudar — Google y las IA se lo toman como un dato fiable, así que revísalo con la misma atención que el texto de la propia página.

Los valores de SEO por defecto de toda tu web

Para qué sirve. En vez de repetir lo mismo en cada página, aquí defines lo que se aplica automáticamente a todas las que no tengan su propio valor: el sufijo que se añade al final de cada título, el nombre del sitio que aparece al compartir un enlace, y el tipo de tarjeta que se ve en Twitter/X.

Cómo llegar. Panel de SEO (Avanzado) → pestaña Valores (la última, puede quedar oculta a la derecha si la ventana es estrecha — desplázate con las flechas de las pestañas).

Qué hay en pantalla. Un aviso morado te recuerda que "estos valores se aplican a todas las páginas si no se sobrescriben a nivel de página" — es decir, lo que pongas aquí es el respaldo, no lo que manda si una página concreta ya tiene su propio título. Los campos son: Sufijo del título, Tipo Open Graph, Nombre del sitio (OG) y Twitter Card por defecto.

La pestaña Valores con el sufijo de título vacío.
Figura 6.9. La pestaña Valores con el sufijo de título vacío.
Con el sufijo escrito (
Figura 6.10. Con el sufijo escrito ("| Panadería La Espiga"), se añadirá automáticamente al final del título de cualquier página que no tenga su propio título completo.

Un ejemplo, paso a paso. Quieres que todas tus páginas terminen con el nombre de tu negocio en el título, sin tener que escribirlo cien veces. En Sufijo del título escribes "| Panadería La Espiga" y guardas. A partir de ahí, cualquier página nueva que no lleve su propio sufijo lo heredará de aquí.

Cuidado con… Si una página ya tiene un título completo escrito a mano en la pestaña Metadatos (pantalla 1), el sufijo de aquí no se le añade encima — los valores por defecto solo rellenan huecos, no se suman a lo que ya existe.

El mapa del sitio

Para qué sirve. El mapa del sitio (o "sitemap") es un listado técnico de todas tus páginas que le entregas a Google para que las rastree más rápido y no se le olvide ninguna. Aquí lo generas y lo revisas sin tener que tocar nada a mano.

Cómo llegar. Panel de SEO (Avanzado) → pestaña Sitemap.

Qué hay en pantalla. Tres botones arriba: Guardar, Regenerar y Ver XML. Debajo, tres pestañas: Entradas (lo que se ha generado automáticamente), URLs personalizadas (para añadir direcciones que quieras incluir a mano, por ejemplo si tienes contenido fuera del propio editor) y Excluidas (páginas que no quieres que aparezcan en el mapa, como un borrador).

La pestaña Sitemap. En el momento de esta captura mostraba el aviso
Figura 6.11. La pestaña Sitemap. En el momento de esta captura mostraba el aviso "Error al cargar el sitemap" — lo explicamos en Cuidado con…, más abajo.
La sub-pestaña de URLs personalizadas, todavía sin ninguna añadida.
Figura 6.12. La sub-pestaña de URLs personalizadas, todavía sin ninguna añadida.

Un ejemplo, paso a paso. Has añadido páginas nuevas a tu web y quieres asegurarte de que Google se entera. Abres la pestaña Sitemap y pulsas Regenerar: esto reconstruye la lista de entradas con las páginas actuales de tu sitio. Con Ver XML puedes comprobar el resultado tal cual lo vería Google.

Cuidado con… Al abrir esta pestaña puede aparecerte el aviso en rojo "Error al cargar el sitemap" nada más entrar. Es un fallo conocido que estamos revisando; el resto de la pantalla — Guardar, Regenerar, Ver XML — sigue funcionando con normalidad, solo falla la lista de "Entradas" al cargar sola.

Recomendaciones de la IA para el aspecto de tu web

Para qué sirve. Es el punto de partida de la guía de estilos: le describes tu negocio a la inteligencia artificial y ella te propone colores y letras que encajan, en vez de tener que elegirlos tú desde cero.

Cómo llegar. En el editor, modo Avanzado, pulsa el icono de la paleta (Estilos) en la barra de la izquierda. Se abre en la pestaña IA.

Qué hay en pantalla. Arriba, un resumen de tus Estilos Actuales: los cinco colores y las dos fuentes (títulos y texto) que usa hoy tu web. El botón Aplicar guía de estilos a esta página vuelca esos estilos sobre la página que tienes abierta — con una casilla aparte "Aplicar también a otros idiomas" si tu web tiene más de uno. Más abajo, el cuadro Describe tu negocio o sitio web, unos chips de "Inspiraciones rápidas" (Cafetería artesanal, Startup tecnológica…) que rellenan el cuadro por ti, y el botón Generar con IA.

La pestaña IA de Estilos, con los estilos actuales del proyecto y el cuadro de descripción vacío.
Figura 6.13. La pestaña IA de Estilos, con los estilos actuales del proyecto y el cuadro de descripción vacío.
Con una inspiración rápida aplicada, el cuadro queda relleno y el botón Generar con IA queda listo para pulsar — en esta captura no lo hemos pulsado porque generar estilos con IA consume créditos de tu cuenta.
Figura 6.14. Con una inspiración rápida aplicada, el cuadro queda relleno y el botón Generar con IA queda listo para pulsar — en esta captura no lo hemos pulsado porque generar estilos con IA consume créditos de tu cuenta.

Un ejemplo, paso a paso. Quieres un aspecto que transmita "panadería de barrio, cálida y artesanal". Escribes en el cuadro algo como "Panadería de barrio con ambiente cálido y artesanal, colores tierra y tipografía con carácter" y pulsas Generar con IA. La IA te propone una paleta y unas fuentes; si te convencen, las aplicas desde las pestañas Colores y Tipografía (pantallas 8 y 9) o con el botón "Aplicar guía de estilos a esta página".

Cuidado con… Generar con IA gasta créditos de tu plan cada vez que lo pulsas — piensa bien la descripción antes de lanzarlo en vez de ir probando por prueba y error.

Los colores de tu web

Para qué sirve. Cambia de una sola vez los colores de toda tu web: el color principal de los botones, el secundario, y las variantes clara y oscura que se usan en fondos y textos.

Cómo llegar. Panel de Estilos (Avanzado) → pestaña Colores.

Qué hay en pantalla. Un recuadro para Extraer colores de imagen: subes tu logo (o cualquier imagen de tu marca) y la plataforma saca de ahí una paleta lista para aplicar. Debajo, los campos Primario, Secundario, Claro y Oscuro, cada uno con su cuadradito de color y su valor en hexadecimal (el código de seis letras y números, como #B5651D).

La pestaña Colores con la paleta actual del proyecto: naranja tierra como color primario, verde como secundario.
Figura 6.15. La pestaña Colores con la paleta actual del proyecto: naranja tierra como color primario, verde como secundario.
Al pulsar sobre un cuadradito de color se abre el selector visual, con el valor hexadecimal editable a mano si ya conoces el código exacto de tu marca.
Figura 6.16. Al pulsar sobre un cuadradito de color se abre el selector visual, con el valor hexadecimal editable a mano si ya conoces el código exacto de tu marca.

Un ejemplo, paso a paso. Tienes tu logo en un archivo y quieres que los colores de tu web combinen con él. En la pestaña Colores, arrastras el logo al recuadro "Extraer colores de imagen". La plataforma te propone una paleta a partir de la imagen: revisa que el resultado tenga contraste suficiente (si tu logo es muy claro o muy plano de color, la paleta extraída puede salir igual de plana, como ves en la segunda captura) y ajusta a mano el color que no te convenza pulsando su cuadradito.

Cuidado con… Aquí se mezcla con una de las tres trampas conocidas de esta área: hay un archivo interno que decide, en último lugar, qué colores se ven de verdad en tu web publicada. Si cambias un color aquí y no ves el cambio reflejado en algún sitio muy concreto de tu web, no es cosa tuya — lo explicamos con detalle al final de esta sección, en el aviso general de "Cuidado con la guía de estilos".

Las letras de tu web

Para qué sirve. Igual que los colores, pero con la tipografía: qué letra usan los títulos, cuál el texto normal, de qué tamaño parte todo, y te permite subir tu propia fuente si tu marca tiene una.

Cómo llegar. Panel de Estilos (Avanzado) → pestaña Tipografía.

Qué hay en pantalla. Dos desplegables, Fuente para Títulos y Fuente para Texto, con las fuentes de Google disponibles (marcadas como "System" o "Google" según si son del sistema o hay que descargarlas). Un selector Tamaño Base — el tamaño de partida del texto normal, del que escalan proporcionalmente el resto de tamaños de tu web. Debajo, una Vista previa en vivo con un título y un párrafo de ejemplo. Y, más abajo, Fuentes Personalizadas, donde puedes subir tu propio archivo de letra (formato .woff2 o .ttf) si tu marca tiene una tipografía propia que no está en el catálogo de Google.

La pestaña Tipografía con Georgia para los títulos e Inter para el texto.
Figura 6.18. La pestaña Tipografía con Georgia para los títulos e Inter para el texto.
El catálogo de fuentes de Google desplegado, con buscador — así cambias la letra de los títulos o del texto sin salir de esta pantalla.
Figura 6.19. El catálogo de fuentes de Google desplegado, con buscador — así cambias la letra de los títulos o del texto sin salir de esta pantalla.
La misma pestaña de Tipografía con el tamaño base en su valor por defecto (16px) y la vista previa del título y el párrafo de ejemplo debajo.
Figura 6.20. La misma pestaña de Tipografía con el tamaño base en su valor por defecto (16px) y la vista previa del título y el párrafo de ejemplo debajo.
Después de arrastrar un archivo de fuente propio (aquí,
Figura 6.21. Después de arrastrar un archivo de fuente propio (aquí, "espiga-rotulos.woff2"), el panel propone automáticamente un nombre para la fuente y te pide el grosor (peso) antes de subirla del todo con el botón Subir Fuente.

Un ejemplo, paso a paso. Tu marca tiene un rótulo con una tipografía especial y quieres usarla en los títulos de tu web. Bajas hasta "Fuentes Personalizadas" y arrastras el archivo .woff2 al recuadro. El panel te propone un nombre a partir del nombre del archivo (puedes cambiarlo) y te pide el peso — normalmente "400 - Regular" si no sabes cuál es. Pulsas Subir Fuente. Cuando termina, esa fuente aparece ya disponible para elegirla en el desplegable "Fuente para Títulos".

Cuidado con… Esta es la pantalla donde más se nota la trampa más seria de las tres: si más tarde pulsas "Aplicar guía de estilos a esta página" desde la pestaña IA (pantalla 7), o regeneras la guía de estilos, tu fuente propia puede desaparecer de la lista sin previo aviso — y, si eso pasa, no hay botón para deshacerlo: ni siquiera restaurando una copia de tus ajustes anteriores vuelve a aparecer la fuente. La única forma de recuperarla es subir el archivo otra vez desde cero, aquí mismo. Si tienes una fuente de marca subida, evita aplicar recomendaciones de la IA o regenerar la guía sin pensarlo dos veces.

Los idiomas de tu web

Para qué sirve. Activa y gobierna las distintas versiones de idioma de tu web: cuántos idiomas tienes, cuál es el principal, y cómo se reflejan en la dirección (URL) de cada página.

Cómo llegar. En el editor, modo Avanzado, pulsa el icono de idiomas (una "A" con acento) en la barra de la izquierda.

Qué hay en pantalla. Un interruptor Multi-idioma arriba: si está apagado, tu web solo existe en un idioma y el resto de esta pantalla queda vacía. Con él encendido, verás la Estrategia de URLs — cómo se distinguen los idiomas en la dirección de tu web, con tres formas a elegir (lo explicamos en el ejemplo) — y la lista de Idiomas activos, cada uno con cuántas páginas tiene ya traducidas y cuál es el "Principal" (el idioma de partida, marcado con una estrella). Abajo, Acciones de IA: traducir páginas, añadir el selector de idioma visible en la web, y volver a detectar las etiquetas técnicas que ayudan a Google a distinguir cada versión.

El panel de Idiomas con Multi-idioma activado: Español como principal con 7 páginas, English añadido pero todavía con 0 páginas traducidas.
Figura 6.22. El panel de Idiomas con Multi-idioma activado: Español como principal con 7 páginas, English añadido pero todavía con 0 páginas traducidas.
Las tres formas de repartir los idiomas en la dirección de tu web: por prefijo (/es/pagina, /en/page), por carpeta, o por parámetro (?lang=es) en la misma dirección.
Figura 6.23. Las tres formas de repartir los idiomas en la dirección de tu web: por prefijo (/es/pagina, /en/page), por carpeta, o por parámetro (?lang=es) en la misma dirección.

Un ejemplo, paso a paso. Quieres saber por qué tu web en inglés está vacía aunque el idioma ya aparece en la lista. Entras en el icono de Idiomas: ves "English — 0 página(s)" con una barra de progreso en 0/7. Eso significa que el idioma está dado de alta pero ninguna página se ha traducido todavía — el siguiente paso es ir a "Traducir páginas con IA" (pantalla 12) para que empiecen a aparecer.

Cuidado con… Cambiar la Estrategia de URLs después de tener páginas publicadas cambia las direcciones de todas ellas de golpe. Si ya has compartido enlaces o los tienes indexados en Google, piénsalo antes de tocarlo — no es algo que se deshace con un clic.

Añadir un idioma nuevo, paso a paso

Para qué sirve. Es el asistente que te guía para dar de alta un idioma nuevo en tu web sin tener que configurar nada suelto por tu cuenta.

Cómo llegar. Panel de Idiomas (Avanzado) → pulsa el interruptor Multi-idioma (si lo estás activando por primera vez) o el botón de añadir idioma si ya tienes al menos uno.

Qué hay en pantalla. Un asistente de tres pasos, con puntos arriba a la derecha que marcan en cuál estás.

Paso 1 de 3 — en qué idioma está tu web hoy. Puedes elegirlo a mano de la lista o dejar que la IA lo detecte con el botón Detectar con IA.
Figura 6.24. Paso 1 de 3 — en qué idioma está tu web hoy. Puedes elegirlo a mano de la lista o dejar que la IA lo detecte con el botón Detectar con IA.
Paso 2 de 3 — confirmar qué páginas se van a marcar con ese idioma de partida (aquí, 0 páginas porque el proyecto de ejemplo todavía no tenía ninguna creada en ese momento).
Figura 6.25. Paso 2 de 3 — confirmar qué páginas se van a marcar con ese idioma de partida (aquí, 0 páginas porque el proyecto de ejemplo todavía no tenía ninguna creada en ese momento).
Paso 3 de 3 — eliges a qué idioma quieres traducir tu web (aquí, inglés ya marcado) y terminas con el botón Finalizar.
Figura 6.26. Paso 3 de 3 — eliges a qué idioma quieres traducir tu web (aquí, inglés ya marcado) y terminas con el botón Finalizar.

Un ejemplo, paso a paso. Quieres añadir francés a tu web. Pulsas para añadir un idioma nuevo: en el Paso 1 confirmas que tu web está hoy en español (o dejas que la IA lo detecte); en el Paso 2 confirmas que tus páginas actuales se etiquetan como español; en el Paso 3 eliges Français de la lista y pulsas Finalizar. A partir de ahí, francés aparece en la lista de idiomas (pantalla 10) con 0 páginas, listo para que empieces a traducir.

Cuidado con… Puedes saltarte el asistente con "Configurar después" si no tienes claro el idioma de destino todavía — no hace falta terminarlo del tirón.

Traducir una página

Para qué sirve. Traduce automáticamente el contenido de una página concreta al idioma que elijas, sin que tengas que copiar y pegar texto.

Cómo llegar. En la lista de Páginas, abre el menú de una página (los tres puntos o el icono de traducción junto a ella) y pulsa Traducir; también puedes lanzarlo desde el panel de Idiomas.

Qué hay en pantalla. Una ventana Traducir con IA que confirma qué página vas a traducir y te deja elegir el idioma de destino entre los que tengas configurados. Debajo, un resumen de lo que va a hacer la IA: extraer los textos de la página, traducirlos, crear los archivos de traducción necesarios y generar la página ya traducida.

La ventana Traducir con IA, lista para traducir la página
Figura 6.27. La ventana Traducir con IA, lista para traducir la página "Contacto" al inglés.

Un ejemplo, paso a paso. Tienes la página "Contacto" en español y quieres su versión en inglés. Desde la lista de Páginas, abres el menú de "Contacto", pulsas Traducir, eliges English como idioma de destino y pulsas Traducir con IA. Cuando termina, la página traducida aparece en la lista con su propia dirección (por ejemplo, /en/contacto si tu web usa la estrategia de prefijo).

Cuidado con… La traducción automática es un buen punto de partida, no el texto final: revísala tú mismo antes de publicar, sobre todo nombres propios, precios y frases hechas que una traducción literal puede dejar raras.

Medir visitas con Google Tag Manager

Para qué sirve. Google Tag Manager es la herramienta de Google para gestionar todas las "etiquetas" de medición de tu web (anuncios, estadísticas, píxeles de redes sociales) desde un solo sitio. Aquí conectas tu cuenta para que el panel pueda gestionarlas por ti.

Cómo llegar. En el editor, modo Avanzado, pulsa el icono de la etiqueta (GTM) en la barra de la izquierda.

Qué hay en pantalla. Mientras no lo has configurado, verás GTM no configurado y un botón para Configurar Credenciales. Una vez dentro, hay varias pestañas: Estado, Credenciales, Recursos, IA y Configuración.

El panel de GTM sin configurar todavía — el punto de partida antes de tener ninguna cuenta conectada.
Figura 6.28. El panel de GTM sin configurar todavía — el punto de partida antes de tener ninguna cuenta conectada.
La pestaña Credenciales: aquí pegas los datos que copias de tu propia cuenta de Google Tag Manager (archivo de cuenta de servicio, ID de cuenta, ID de contenedor y, si lo usas, tu ID de medición de GA4).
Figura 6.29. La pestaña Credenciales: aquí pegas los datos que copias de tu propia cuenta de Google Tag Manager (archivo de cuenta de servicio, ID de cuenta, ID de contenedor y, si lo usas, tu ID de medición de GA4).

Un ejemplo, paso a paso. Ya tienes una cuenta de Google Tag Manager creada y quieres conectarla. Pulsas "Configurar Credenciales", vas a la pestaña Credenciales, y vas rellenando lo que Google Tag Manager te da en su propio panel: el archivo de cuenta de servicio, el "Account ID" y el "Container ID" (los encuentras en GTM, en Admin → Account Settings, como indica el propio texto de ayuda debajo de cada campo). Guardas.

Cuidado con… Necesitas tener ya una cuenta de Google Tag Manager creada fuera de Speaksite — esta pantalla conecta una cuenta existente, no crea una nueva por ti.

Tus campañas de Google Ads

Para qué sirve. Conecta tu cuenta de Google Ads para poder ver el rendimiento de tus campañas de anuncios sin salir del panel.

Cómo llegar. En el editor, modo Avanzado, pulsa el icono de tendencia (Google Ads) en la barra de la izquierda.

Qué hay en pantalla. Un campo para tu Customer ID de tu cuenta (el identificador que encuentras en Google Ads, en Configuración → ID de cliente) y un aviso importante en amarillo: tu cuenta tiene que estar vinculada a la cuenta MCC (la cuenta "maestra" de Speaksite) para que la conexión funcione por la vía automática.

Sin ningún Customer ID escrito, el botón queda como
Figura 6.30. Sin ningún Customer ID escrito, el botón queda como "Ingresa tu Customer ID" y no se puede pulsar.
En cuanto escribes un Customer ID, el botón cambia a
Figura 6.31. En cuanto escribes un Customer ID, el botón cambia a "Conectar Google Ads" y queda activo.

Un ejemplo, paso a paso. Quieres ver tus campañas de Google Ads desde aquí. Copias tu Customer ID desde tu cuenta de Google Ads (tiene el formato 123-456-7890), lo pegas en el campo, y pulsas Conectar Google Ads. Si tu cuenta todavía no está vinculada a la cuenta MCC de Speaksite, tendrás que pedir esa vinculación antes de que la conexión termine de funcionar.

Cuidado con… El requisito de la cuenta MCC no es opcional ni algo que puedas saltarte desde aquí: sin la vinculación, escribir el Customer ID no basta para ver datos reales.

Las visitas de tu web

Para qué sirve. Activa y centraliza la analítica de tu web: cuánta gente la visita, de dónde viene, qué hace. Desde aquí enciendes Google Analytics, Microsoft Clarity, y consultas los mismos datos de Google Tag Manager de la pantalla 13.

Cómo llegar. En el editor, modo Avanzado, pulsa el icono de barras (Analítica) en la barra de la izquierda.

Qué hay en pantalla. Tres bloques desplegables: Google Analytics (GA4), Google Tag Manager y Microsoft Clarity, cada uno con su propio interruptor de encendido, y un bloque de Eventos. Tal cual la abres, los tres servicios están apagados.

El panel de Analítica recién abierto: los tres servicios de medición apagados y a la espera de que actives el que necesites.
Figura 6.32. El panel de Analítica recién abierto: los tres servicios de medición apagados y a la espera de que actives el que necesites.
Al activar Google Analytics y escribir un identificador con el formato equivocado (
Figura 6.33. Al activar Google Analytics y escribir un identificador con el formato equivocado ("12345" en vez de "G-XXXXXXXXXX"), aparece el aviso en rojo y el botón Guardar cambios se queda desactivado hasta que lo corriges.

Un ejemplo, paso a paso. Quieres empezar a medir las visitas con Google Analytics. Activas el interruptor de "Activar Google Analytics", y en "Measurement ID" escribes el identificador que te da Google Analytics — siempre empieza por "G-" seguido de letras y números, por ejemplo G-ABC1234XYZ. Si lo escribes mal (sin la "G-" delante, como en la segunda captura), el panel te avisa al momento y no te deja guardar hasta que lo arregles. Con el formato correcto, pulsas Guardar cambios.

Cuidado con… No confundas el "Measurement ID" de GA4 (empieza por G-) con el ID de Google Tag Manager (empieza por GTM-): son cosas distintas y cada campo pide el suyo.

Elegir qué parte de tu tienda estás diseñando

Para qué sirve. Cambia el aspecto visual de las distintas pantallas de tu tienda (la lista de una categoría, la ficha de un producto, el carrito, el pago) sin tocar código, para toda la tienda de una vez.

Cómo llegar. Esta pantalla, a diferencia de casi todas las demás de esta guía, no exige el modo Avanzado: se llega igual desde el menú de tu tienda pulsando Diseño, tanto en modo Fácil como en Avanzado.

Qué hay en pantalla. Un selector arriba, "Vista: [nombre]", para cambiar entre las distintas pantallas de la tienda que quieres diseñar (categoría, listado, producto, carrito, pago…). A la derecha, la vista previa en vivo de esa pantalla con datos reales de tu tienda. Debajo del selector, dos pestañas: Bloques (qué partes tiene esa pantalla y en qué orden) y Aspecto (colores, espaciados y cómo se ven las tarjetas). Hay también una zona de "Carrito de prueba" para probar cómo se comporta sin afectar a pedidos reales — el propio texto del panel lo avisa.

Diseñando la superficie de Categoría de la tienda, con la pestaña Bloques abierta y la vista previa de
Figura 6.34. Diseñando la superficie de Categoría de la tienda, con la pestaña Bloques abierta y la vista previa de "Panes" a la derecha.
La pestaña Aspecto de la misma pantalla: aquí ajustas cuántas columnas de productos se ven en móvil, tablet y escritorio, y la densidad de la rejilla.
Figura 6.35. La pestaña Aspecto de la misma pantalla: aquí ajustas cuántas columnas de productos se ven en móvil, tablet y escritorio, y la densidad de la rejilla.
La misma herramienta, ahora editando la ficha de un producto en vez de una categoría — cambia el
Figura 6.36. La misma herramienta, ahora editando la ficha de un producto en vez de una categoría — cambia el "Vista:" de arriba y el resto del panel se adapta a esa pantalla.

Un ejemplo, paso a paso. Quieres que en el móvil se vean 2 productos por fila en vez de 1 en las páginas de categoría. Vas a Diseño → seleccionas la vista "Categoría" → pestaña Aspecto → subes el número en "Columnas de la rejilla" → "Móvil". La vista previa a la derecha se actualiza al momento para que compruebes cómo queda antes de publicar.

Cuidado con… En el momento de esta revisión, la cabecera de la vista previa (el nombre de tu negocio y el menú de arriba) se veía sin su caja de fondo ni estilo, como texto suelto — es un fallo visual conocido de esta pantalla concreta; no afecta a cómo se ve tu tienda publicada de verdad, solo a esta vista previa del editor.

Las pantallas de tu tienda que puedes diseñar

Para qué sirve. Es el listado completo de todas las "superficies" (pantallas) de tu tienda que puedes personalizar con la herramienta de la pantalla anterior — un mapa para no perderte entre categoría, listado, producto, carrito y pago.

Cómo llegar. Tampoco exige modo Avanzado. Abre Páginas en un proyecto con la tienda activada: bajo la lista normal de páginas aparece un bloque aparte titulado TIENDA, con Categoría, Listado, Producto, Carrito y Checkout.

Qué hay en pantalla. Cada elemento del bloque Tienda te lleva directamente a la herramienta de diseño de esa superficie (pantalla 16) cuando lo pulsas.

La lista de Páginas con el bloque TIENDA debajo, mostrando las cinco superficies de la tienda que se pueden diseñar.
Figura 6.37. La lista de Páginas con el bloque TIENDA debajo, mostrando las cinco superficies de la tienda que se pueden diseñar.

Un ejemplo, paso a paso. No te acuerdas de dónde estaba la herramienta para cambiar el aspecto del carrito. Abres el icono de Páginas, bajas hasta el bloque TIENDA, y pulsas Carrito: te lleva directo a la pantalla de diseño de esa superficie, ya en la vista correcta.

Cuidado con… Este bloque solo aparece si tu proyecto tiene la tienda activada. Si no lo ves, es que tu proyecto todavía no tiene la tienda encendida, no que la función haya desaparecido.