UI y SEO - IXDA PDF

MADRID • BARCELONA • LOGROÑO
Usabilidad
y diseño
para SEO
MADRID – BARCELONA – LOGROÑO

¿Por qué este
tema?
OBJETIVOS EN COMÚN CON

CAMINOS CONTRARIOS
SEO:
Search
Engine
Optimization
POR QUÉ
Queremos
activos
rentables
Distintos departamentos encargados de operar los
activos digitales de cada compañía, cliente o proyecto
queremos que sea rentable.
UX/UI quiere que una web sea usable, fácil de entender,

funcional, que lleve a la conversión del usuario.
SEO Quiere una web posicionada, con tráfico orgánico de

alta calidad
POR QUÉ
Pero los Corre sin límites Tenis para trotar
queremos
____ ___ __
___ __ ___ _ _
_ __ ___ ___
____ __ ___
____ __ __ _
mediante
Comprar
Precios y tallas de los tenis
para trotar
____ ___ __ ___ __ ___ _ _
_ __ ___ ___ ____ __ ___
caminos
Comprar ____ __ __ _
distintos
POR QUÉ
Cool (very cool actually) design by: Tubik. https://uimovement.com/ui/7347/health-blog/

POR QUÉ
“Heart Health”. Primer resultado SERP. 03 2019. https://www.heartfoundation.org.au/your-heart/keep-your-heart-healthy

Herramientas
diferentes
resultados
diferentes
ESO ES LO QUE PASA
Convergencia
UX/UI + SEO
en 2019
CÓMO ESTE AÑO

TRABAJAMOS JUNTOS
JavaScript
JavaScript
hasta en la
sopa
Implementamos cada día más webs con Javascript
por distintos motivos técnicos que son
indiscutiblemente positivos. JavaScript llegó para
quedarse.
JavaScript
1. Rendering
Crawl Render izi got it!
HTML
¿Quién piensa en los robots?
En 2019 los departamentos de UX/UI deben pensar muy bien en

qué elementos merecen la pena existir en JavaScript y qué
elementos deben estar en HTML plano. O incluso pensar en
implementaciones con técnicas de renderizado híbridas (método
recomendado por Google).
EL
https://www.elephate.com/blog/ultimate-guide-javascript-seo/ Crawl RENDER got it?!
JS
JavaScript
1. Rendering
Mobile-friendly test, tu mejor amigo
Si quieres ver cómo Google visualiza tu web, puedes utilizar la

herramienta de mobile-friendly test de Google. Esta puede
ayudarte a previsualizar cómo Google renderiza actualmente tu
web y qué información visualiza de la misma, es una manera
efectiva de encontrar problemas de renderizado y de determinar
cómo mejorar nuestro código JS.
https://search.google.com/test/mobile-friendly
Para solucionar problemas este manual de Dynamic rendering

estará muy bien:
https://developers.google.com/search/docs/guides/dynamic-ren
dering
JavaScript
2. Performance
No abuses del JavaScript
Si insertas un archivo JavaScript, ¿qué tanto lo usas? Un error

común en el desarrollo de una web es utilizar archivos JS de gran
tamaño, pero poco uso dentro de la web.
JavaScript
3. Interacción
Determina qué elementos merecen serlo
No se trata de eliminar animaciones, elementos o interacciones

mediante JavaScript. Sabemos que son geniales, incluso
necesarias. Es solo que necesitamos evaluar qué merece ser
interactivo mediante JS.
Ejemplo:
¿De verdad queremos que el contenido del Footer, el cual se
repite en toda la web, sea interactivo? ¿Aporta esto al diseño de la
web y su rendimiento?
PIENSA
¿Preferirías una web

interactiva y compleja o
una web simple y rápida si
lo único que quieres es
realizar la compra del
SOAT?
SCHEMA
sweet sweet
SCHEMA
PENSEMOS EN INFORMACIÓN
ESTRUCTURADA
SCHEMA:
Datos estructurados de
entidades, acciones y
relaciones en activos
digitales
SCHEMA
Búsqueda
basada en
intenciones
- Know
- Do La dirección que Google toma, cada vez con mayor fuerza,
- Website es la de entregar resultados de búsqueda basándose en las
intenciones del usuario y no tanto sobre una keyword
- Visit-in-person exacta.
Guidelines:
https://static.googleusercontent.com/media/www.google.c
o.uk/en/uk/insidesearch/howsearchworks/assets/searchq
ualityevaluatorguidelines.pdf
INTENCIÓN
Know Do Website Visit

Búsquedas de conocimiento Apuntan a completar acciones Son la búsqueda de un Búsqueda de lugares físicos en
simple, apuntan a respuestas específicas en un dispositivo. contenido específico en una donde el usuario desea llegar.
específicas como hechos, Obedece a verbos como página web. El usuario desea Esto puede incluir información
diagramas, gráficos, descargar, comprar, obtener, encontrar información sobre horarios, contacto y
traducciones, etc. La respuesta etc. específica en búsquedas más dirección.
debe ser correcta y completa. “número de teléfono DIAN” extensas.
“Población de Medellín” “exito.com portátiles en
“facebook.com” “Dirección Monterrey”
promoción”
SCHEMA
SCHEMA
Ayuda a entender el contenido
todo indica que para este 2019 el escenario cambia radicalmente,

especialmente desde las actualizaciones de lineamientos de
calidad de Google y el creciente soporte del buscador en
interpretar y adoptar datos estructurados (SCHEMA), y no es para
menos, con sólo exponer la cantidad de datos estructurados
soportados por Google en marzo de 2018 y comparar esta
información con los datos estructurados soportados en marzo de
2019 nos encontramos con una diferencia de 11 datos
estructurados nuevos, ¡casi uno nuevo cada mes!
QUÉ TAL SÍ...
¿Y si diseñamos con SCHEMA

en mente y usamos la
información para que Google
asocie nuestro diseño al
search intent?
CONCEPTO
Si nos piden crear una página

interna podemos utilizar el
objetivo del contenido para
determinar qué información
es más efectiva.
SCHEMA
Redbus.co
SCHEMA
Redbus.co
SCHEMA
Redbus.co
SCHEMA
Pinbus.com
SCHEMA
Pinbus.com
SCHEMA
Pinbus.com
SCHEMA
SCHEMA HELP!
GUIDELINES
Siempre Contenido
actualizada original
La información SCHEMA debería El contenido del SCHEMA no
estar actualizada debería ser copiado de otros
constantemente. websites.
Contenido Siempre
visible relevante
Si insertas información SCHEMA, No abuses de SCHEMA, marca
esta tiene que ser visible en el únicamente el contenido
contenido de la web. verdaderamente importante.
SCHEMA
Usa los
campos
SCHEMA como
sugerencia de
relevancia
SCHEMA
Exito.com
SCHEMA
Udemy
SCHEMA
Alpina
Gracias
Daniel González | [email protected]

TW: @xzorex Insta: @coffeenautic

UI y SEO - IXDA PDF

Cargado por

Copyright:

Formatos disponibles

UI y SEO - IXDA PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

UI y SEO - IXDA PDF

Cargado por

Copyright:

Formatos disponibles

MADRID • BARCELONA • LOGROÑO

MADRID – BARCELONA – LOGROÑO

OBJETIVOS EN COMÚN CON

UX/UI quiere que una web sea usable, fácil de entender,

SEO Quiere una web posicionada, con tráfico orgánico de

Pero los Corre sin límites Tenis para trotar

Cool (very cool actually) design by: Tubik. https://uimovement.com/ui/7347/health-blog/

“Heart Health”. Primer resultado SERP. 03 2019. https://www.heartfoundation.org.au/your-heart/keep-your-heart-healthy

CÓMO ESTE AÑO

En 2019 los departamentos de UX/UI deben pensar muy bien en

Si quieres ver cómo Google visualiza tu web, puedes utilizar la

Para solucionar problemas este manual de Dynamic rendering

Si insertas un archivo JavaScript, ¿qué tanto lo usas? Un error

No se trata de eliminar animaciones, elementos o interacciones

¿Preferirías una web

Know Do Website Visit

todo indica que para este 2019 el escenario cambia radicalmente,

¿Y si diseñamos con SCHEMA

Si nos piden crear una página

Daniel González | [email protected]

También podría gustarte