CARTA Y DECISIÓN EN MÓVIL
Ristorante
Se adopta el criterio de carta protagonista y acceso persistente a reservar desde móvil. El boceto combina ambas acciones en una barra inferior: «Ver carta» y «Reservar mesa».
Ver plantilla de Framer ↗QUÉ ESTÁS VIENDO
Un boceto navegable.
Una propuesta concreta.
Esta entrega es un prototipo independiente en HTML, CSS y JavaScript, publicado como vista previa privada. No es un proyecto nativo creado dentro del editor de Framer. La dirección visual se apoya en la revisión del Marketplace y las demos públicas de sus plantillas.
Se conserva el logotipo actual, se emplean fotografías publicadas en la web del restaurante y se muestran ocho platos de su carta. Las fotos de cocina se identifican de manera general: no se ha supuesto que una fotografía represente un plato concreto del listado.
Los enlaces de reserva y domicilio abren las mismas páginas externas que usa ApriBocca. No se envía ningún formulario ni se crea una reserva desde el boceto. La contratación, disponibilidad y confirmación se resuelven en el proveedor externo. El catering enlaza a la página vigente.
El prototipo está excluido de indexación y no sustituye a la web actual. Deben validarse el uso comercial de las imágenes, los textos, precios, condiciones y horarios con el restaurante antes del lanzamiento. Las capturas de Framer se incluyen únicamente como referencias identificadas.
01 / HALLAZGOS EN APRIBOCCA.COM
La cocina ya está.
Hagamos que se vea.
| Observación verificada | Propuesta |
|---|---|
| El H1 de la portada es «Bienvenido». | Explicar desde la primera pantalla la cocina italiana y el barrio. El boceto propone «Italia a un bocado. En Poblenou» y un contexto visible de restaurante italiano. |
| No se detectó metadescripción en el HTML renderizado de la portada. | Añadir una descripción útil, específica y coherente con el contenido. No tratarla como garantía de posición ni de snippet elegido por Google. |
| En móvil de 390 px, el documento renderizado tiene un ancho de 768 px. | Reconstruir la composición adaptable y comprobar los anchos intermedios. Carta, dirección y reserva deben poder usarse sin desplazamiento horizontal. |
| Las categorías de la portada enlazan a la carta con nombres accesibles genéricos «Button». | Enlaces descriptivos, foco visible y categorías de carta que se entiendan también con lector de pantalla. |
| La carta ya está en HTML e incluye platos, precios y condiciones de terraza; no es solo una imagen o PDF. | Conservar esta ventaja. Mejorar su jerarquía, categorías y lectura móvil; no sustituirla por un PDF o una interfaz que oculte el contenido a los buscadores. |
| La carta española contiene rótulos repetidos «Our Menu». | Unificar el idioma de navegación y encabezados. Revisar nombres, ortografía, alérgenos y traducciones con el restaurante. |
| Existen canonical hacia www y hreflang para ES, CA, EN-GB y x-default. Se detecta un bloque estructurado de tipo WebSite. | Conservar y validar los idiomas y URLs finales; añadir una entidad Restaurant coherente, sin dar por hecho que canonical o hreflang faltan. |
| La reserva actual ya abre Comensale. | Mantener el proveedor existente y simplificar el acceso. Medir clics en reservar; medir reservas confirmadas solo si el proveedor permite integrarlas. |
Fuentes: portada de ApriBocca, carta oficial y reserva en Comensale. Revisión del 28/10/2026, incluyendo HTML renderizado y vistas de escritorio y móvil.
Visibilidad orgánica: una referencia inicial
1palabra clave detectada
13visitas orgánicas mensuales estimadas
Consulta de Ahrefs para España sobre el dominio y sus subdominios, realizada el 28/10/2026. Son estimaciones de su base de datos, no visitas medidas de Analytics ni una auditoría de Google Maps. No permiten deducir por sí solas cuántos clientes capta el restaurante. La palabra detectada aparece entre las tres primeras posiciones para esa consulta, lo que tampoco prueba buena cobertura de búsquedas genéricas.
02 / REFERENCIAS Y DIRECCIÓN VISUAL
Italiano, cercano.
Con hambre de barrio.
Se han revisado las categorías de Web Design y Restaurants, y las demos de dos plantillas seleccionadas. No se presenta esta selección como una revisión exhaustiva del catálogo.
PRODUCTO Y CONTRASTE
Sofra
Se toma como referencia la fotografía gastronómica protagonista, la escala de los titulares y el contraste. ApriBocca recibe una composición propia con su logotipo y sus recursos.
Ver plantilla de Framer ↗No se han comprado ni copiado los componentes de estas plantillas. Si se usa una como base del proyecto nativo de Framer, habrá que obtener la licencia correspondiente y revisar sus condiciones.
Tomate · #AA3025
Crema · #F6F0E3
Tinta · #292920
Oliva · #65694B
El recorrido
Primera impresión y ubicación → cocina → selección de carta → historia → reserva, domicilio o catering → dirección y horarios → dudas frecuentes.
Cada bloque ayuda a elegir o a organizar la visita. Se han evitado valoraciones, premios, testimonios y promesas sobre técnicas de elaboración que no se hayan comprobado.
La expresión
DM Serif Display para titulares y DM Sans para lectura, servidas localmente. Rojo y crema como base, oliva para diferenciar los tres modos de disfrutar el restaurante.
La fotografía de portada procede de la web actual. Se conserva el logo y se proponen color, composición y tono; no se presenta el estudio como un cambio de marca aprobado.
03 / SEO LOCAL Y CONTENIDO
Que encuentren ApriBocca.
Y entiendan por qué venir.
Intenciones iniciales para investigar: «restaurante italiano Poblenou», «pasta Poblenou», «pizza Poblenou» y búsquedas de marca, carta y reserva. Son hipótesis de trabajo; no se han atribuido volúmenes o dificultades sin datos.
Title propuesto: ApriBocca | Restaurante italiano en Poblenou, Barcelona Descripción propuesta: Pasta, pizza y cocina italiana en Poblenou. Descubre ApriBocca, consulta la carta y reserva tu mesa en Plaça de Sant Bernat Calbó, Barcelona.
| Prioridad | Trabajo | Comprobación final |
|---|---|---|
| P0 · Móvil y claridad | Corregir el ancho de página, facilitar carta/reserva y rehacer los textos de portada. | Sin desbordamiento en 390, 768, 1.024 y 1.440 px; enlaces y categorías utilizables por teclado. |
| P0 · URLs y reserva | Conservar /carta, /catering, /ca y /en-gb, además de inventariar el resto de rutas y anclas. Mantener los enlaces vigentes de Comensale. | Si cambia una ruta, redirección permanente individual; no redirigir toda la carta a la portada. No perder los idiomas ni el acceso a reservar. |
| P1 · Carta y estructura | Title, H1, descripciones y categorías claras. Carta legible en HTML con precios, notas y alérgenos validados. | Contenido coherente con la carta vigente. Diferenciar categoría, plato y condición comercial. |
| P1 · Entidad local | Configurar Restaurant con nombre, URL, teléfono, dirección, cocina, enlace a carta y horarios confirmados. | Coincidencia con el contenido visible y Google Business Profile. Sin puntuaciones, reseñas o precios inventados. |
| P1 · Idiomas y rastreo | Verificar canonical, hreflang recíprocos, sitemap y códigos HTTP sobre el dominio final. | Traducción completa a catalán e inglés, no solo navegación. Prototipo excluido; web final indexable. |
| P1 · Rendimiento | WebP, tamaños adecuados, prioridad a la imagen principal y carga diferida del resto. Revisar scripts de terceros. | Medir Core Web Vitals de campo. Objetivos p75: LCP ≤2,5 s; INP ≤200 ms; CLS ≤0,1. No son resultados ya medidos. |
| P2 · Ficha de Google | Revisar categoría, ubicación, horario especial, enlaces de carta y reserva y fotografías actuales. | Datos consistentes y medición de acciones. No confundir SEO orgánico con posición en Maps. |
Estructura para el sitio definitivo
/: presentación y decisión. /carta: carta completa, con categorías y precios. /catering: servicio y consulta. Mantener versiones /ca y /en-gb y sus equivalentes actuales, después de inventariar rutas.
La ubicación y preguntas pueden permanecer en portada si resuelven bien la intención. No crear páginas repetidas para cada calle, barrio o variante de palabra clave.
Datos estructurados: modelo para validar
{
"@context": "https://schema.org",
"@type": "Restaurant",
"@id": "https://www.apribocca.com/#restaurant",
"name": "ApriBocca",
"url": "https://www.apribocca.com/",
"telephone": "+34933823397",
"servesCuisine": "Italian",
"hasMenu": "https://www.apribocca.com/carta",
"address": {
"@type": "PostalAddress",
"streetAddress": "Plaça de Sant Bernat Calbó, 6",
"addressLocality": "Barcelona",
"postalCode": "08005",
"addressCountry": "ES"
}
}El modelo debe completarse con horarios y recursos confirmados. No se inyecta en el dominio de este boceto como si fuera el sitio oficial. El marcado ayuda a describir la entidad, pero no garantiza resultados enriquecidos ni posiciones.
Base técnica: Google: empresa local y Restaurant, políticas de datos estructurados, sitios multilingües, canonical en Framer y Core Web Vitals.
04 / PASARLO A FRAMER
Un montaje sencillo.
Sin rehacer las reservas.
Componentes y contenidos
Header y menú móvil; botón con variantes; portada; bloque de cocina; tarjeta de categoría; carta filtrable; historia; canales de servicio; ubicación y horarios; FAQ; footer.
Para una carta completa y actualizable, colección CMS con categoría, nombre, descripción, precio, disponibilidad y alérgenos revisados. Para una carta pequeña también sirven componentes editables. Los filtros complementan el contenido, que debe estar disponible en HTML.
Usar Stacks y Grid, ancho máximo de 1.220 px y puntos de revisión en móvil, tableta y escritorio. La versión definitiva debe replicar el buen funcionamiento, no solo una captura.
Integraciones y medición
Botones de reserva → enlace vigente de Comensale. Domicilio → página del proveedor. Catering → conservar página y canal confirmado. No introducir formularios propios si el recorrido actual ya resuelve la gestión.
Medir clics en carta, reservar, llamar y cómo llegar. Para hablar de conversión a reserva confirmada se necesita una integración verificable del proveedor; un clic en el botón no es una reserva.
Comparar periodos equivalentes antes y después, considerando estacionalidad. Revisar Search Console, acciones de la ficha local y datos del sistema de reservas.
Validación y límites
Se comprueban escritorio y móvil, imágenes, filtros de carta, anclas, menú, FAQ y destinos de enlaces externos. No se han realizado pedidos ni reservas, ni se ha auditado la disponibilidad interna de Comensale.
Entregado: boceto privado navegable, selección de carta real, reserva enlazada al sistema existente y propuesta SEO basada en hallazgos comprobados. Pendiente de producción: proyecto nativo de Framer, carta completa y traducciones validadas, configuración del dominio, analítica y migración.