Web Tradicional 

Actualmente

• Exploradores Modernos
• JavaScript evolucionado

SPA

Single Page Application

SPA

• Experiencia similar a aplicación
• Interficie mucho más interactiva y reactiva
• Multiplataforma

SPA

• Evolución de la web tradicional
• El punto de inicio es un solo HTML
• Uso de AJAX para actualizar la UI

Beneficios

• No recarga de la página
• Javascript basado en renderizar
• Interacción y experiencia de usuario mejorado

Principios

• Decisiones tomadas en servidor pasan al cliente
• Diseñar la app pensando en su uso offline
• Renderizar con JavaScript
• Focus en rendimiento

Frameworks

Contras

• El cliente tiene que optimizar keywords, tags, descriptions...
• El servidor tiene que realizar dos trabajos:
  • Transferir datos mediante API al cliente
  • Renderizar todo el flujo de la página para los crawlers.

Contras

• Controlar el volver atrás nativo
• Controlar el historial del navegador

PWA

Progressive Web App

PWA

Es una SPA que puede trabajar offline.

Una PWA es...

Fiable

• Cargar instantaneamente
• Nunca mostrar el dinosaurio

Rápida

• Responder al instante a las interacciones de los usuarios
• Evitando scroll y animaciones toscas

Cautivadora

• Sensación de estar usando una app nativa
• Experiencia inmersiva

More info

SEO

Search Engine Optimization

¿Cómo funciona Google?

Link Juice

SEO onPage

Title

• El título debe ser único.
• No sobrepasar de 70 caracteres. 
• Posicionar una palabra clave por página. 
• Palabra clave importante tiene que estar lo más a la izquierda posible. 
• Los títulos cortos funcionan mejor.

Meta Description

• El description debe ser único.
• No sobrepasar de 170 caracteres. Tiene que aparecer sinónimos de la palabra clave.

Meta Keywords

• No son utilizada por la mayoría de buscadores, pero es importante añadirlas para otros buscadores. Entre 5 y 8 keywords sería suficiente.
  

Meta Robots

• Indica a los bots que puede hacer con esa página. Index o noindex, follow o nofollow. Los usos más comunes son index,follow y noindex.
  

Link rel alternate

• Indicar a los bots que nuestro contenido se puede encontrar en otro idioma  en otra url diferente.

Canonical

• Es como un 301, se usa para evitar contenido duplicado (listados con filtros, parámetros en la url…)
  

Cabeceras

• h1: debe aparecer la palabra clave, y lo mismo que el title y el description, debe ser único. Debe estar antes del contenido.
  
• Los h2, h3, h4.. son subtítulos. Una página puede contener varios h2, h3.. El único requisito es que estén ordenados. Son ideales para añadir sinónimos de la palabra clave.

Enlaces

• Follow
  <a href=“URL/palabra_clave” title=“palabra clave”>Palabra clave</a>

• NoFollow
  <a href=“URL/palabra_clave” title=“palabra clave” rel=“nofollow”>Palabra clave</a>

Contenido

• Dentro del contenido tiene que aparecer la palabra clave y sus sinónimos. En alts, titles, h1, enlaces, strongs, cursivas…Siempre sin llegar al extremo.

• El contenido interesante tiene que cargarse antes que los menús y cierta estructura de la página.

MicroData

MicroData

Rendimiento

LongTail