SEO para desarrolladores

SEO para
desarrolladores
Esteve Castells

3
Hi!
Soy Esteve Castells
Puedes encontrarme @estevecastells
en Twitter o en bit.ly/Seopatia en mi
newsletter bisemanal

4
▫ 22 años. Argentona, Barcelona
▫ SEO en Softonic
▫ Consultor SEO
▫ Muchos proyectos propios
▫ Ex. SEO en Havas Media (Affinity
Petcare, General Óptica, Gas
Natural, Carglass, Solvia)
▫ Estudiante universitario
▫ Profesor
▫ Eterno aprendiz de la vida
Un poco más sobre mi

“
El SEO está muerto -
Alguien que no sabe
nada
5

6
Tecnología
(Rastreabilidad,
indexación,
arquitectura,
tiempo de carga)
Contenido
(Calidad, cantidad,
antigüedad,
relevancia, rapidez)
Popularidad
(Enlaces internos y
externos, presencia
en redes sociales,
marca)

2.
Indexación
Ser suficientemente interesantes

3.
Posicionamiento
Ser los mejores

10
JavaScript & Googlebot =/=❤
Fuente: Marcos Dice

11
Frameworks con
renderización
client-side
Un SEO cualquiera

12
Frameworks con
renderización
client-side
Algunos frameworks que se
renderizan en cliente:
▫ Vue
▫ Angular
▫ React
▫ Ember
▫ Backbone

13
Frameworks con renderización client-side
Fuente: https://www.elephate.com/blog/javascript-seo-experiment/

14

15

16

17
Pero doctor…
Tiene solución?

19
Pre-render no sirve para todos los
frameworks: React
Funciona para la mayoría de
frameworks:
▫ Angular, Backbone, Ember and
jQuery
▫ Eso hace que nos tengamos que
buscar la vida si queremos usar
React uno de los frameworks de
moda
Más info: https://builtvisible.com/react-js-seo/

20
Recomendaciones en
base a mi experiencia
▫ NO usar Angular JS (almenos por ahora)
▫ Si usamos Prerender, OJO, es fácil olvidarse de hacer algunos componentes
compatibles y la liamos.
▫ Si vamos a trabajar con Angular, mejor usar las últimas versiones que están
más optimizadas para el rastreo.
▫ Muchos SEOs no técnicos no entienden muchas de las implicaciones de
muchas de las cosas que piden, pero si lo piden normalmente ‘es por algo’.
▫ Usar Tag Manager para hacer cambios *suele* funcionar:
https://www.searchviu.com/en/blog/

Ojo!
Google va evolucionando...
21

22
Googlebot is love,
Googlebot is life
▫ Asegúrate de que no estás bloqueando el
robot en el servidor
▫ Asegúrate que otros bots no están
haciendo peticiones fake y te scrapean
▫ Puedes realizar una petición de reverse
DNS para saber si es el verdadero.
▫ Mirar los rangos de IP de Googlebot y
verificar que la IP es uno de ellos
Fuentes: https://estevecastells.com/verificar-googlebot-rastrea-web-google/
https://ipinfodb.com/robots-ip-address-ranges.php

23
Robots.txt
▫ Bloquea todo lo puedas que el robot no
debería ver: URL con contenido duplicado,
filtros de ecommerce, etc.
Tips:
▫ Siempre en el root del dominio o
subdominio
▫ Googlebot ignora el crawl-delay… Pero los
demás no! Aprovéchalo
▫ Un robots.txt para pre y otro para prod!

24
GET vs. POST en formularios
Se introduce el error
Se soluciona
el error

25
Soluciones
1. Usar POST en lugar de GET
2. Si no se puede, bloquear la
subcarpeta del formulario por
robots.txt

1.600.000.000$
“One Second Could Cost Amazon $1.6 Billion In Sales” - Fast Company
26
Fuente: https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales

-36%
Tiempo de carga
+27%
Incremento en conversión
+10,5%
Aumento en pedidos (sobre el total)
29

30
Velocidad de carga
▫ Tu web tiene que ser rápida siempre, pero
no solo para el bot, sino para el usuario.
▪ Beneficios para el robot: rastrea más
páginas y más rápido.
▪ Beneficios para el usuario: no se va
antes de cargar la página = mejor UX
= puede que compre/whatever.
Todo lo que necesitas saber:
https://www.smashingmagazine.com/2018/01/fro
nt-end-performance-checklist-2018-pdf-pages/

33
Sitemaps XML
Usos:
▫ Indexar contenido nuevo rápidamente
Tips:
▫ Cuando se sube un nuevo sitemap XML por primera vez, *a veces*
Googlebot crawlea todas las URLs que contiene. Asegúrate que están
todas bien para aprovechar al máximo ese boost.
▫ El bot los suele visitar una vez al día. Max 50.000 URLs y 10MB!
▫ Webs grandes o con mal enlazado interno = principales beneficiadas
▫ Se pueden generar dinámicamente o una sola vez ‘a lo cutre’.
Herramienta: https://www.xml-sitemaps.com/

Errores habituales: poner
URL’s que no tocan
34

35
Sitemaps HTML
Sirven para darle un poco de lógica a nuestro sitio
web y nos ayuda a que los robots tengan menos
dificultades de profundidad en el crawling (fake).
Un buen ejemplo de sitemaps HTML:
https://www.uncomo.com/sitemap
No es primordial, pero en algunos casos ayuda. (Sitios
web grandes)
Algunos ejemplos de sites que lo usan: Quora,
Facebook, Twitter, Softonic, etc.

“
Llevamos 200
artículos y solo 10
visitas al día - El CEO
36

37
Subcarpeta vs.
Subdominio
Es mejor usar el dominio principal para
instalar el blog*
blog.dominio.com
www.dominio.com/blog/
(*) Existen excepciones, pero pocas para un blog

38
Redirecciones
Redirecciones permanentes:
302
301
Aunque a día de hoy, nadie se muere por un 302

39
Etiqueta
rel=”nofollow”
Googlebot no sigue los enlaces nofollow: pon este atributo dónde no quieras que vaya.
Para no olvidarte una esta extensión: http://www.igorware.com/extensions/nofollow
Se puede usar hacía enlaces internos y externos. Úsalo con cabeza pero no te cortes
Alternativa: ofuscación de enlaces
https://www.mecagoenlos.com/Posicionamiento/ofuscando-enlaces-para-mejorar.ph
p

41
Enlazado interno
▫ Siempre tienen que tener sentido, no enlaces por
enlazar
▫ Recuerda que existen los nofollow y la ofuscación
▫ Enlaza contenidos relacionados/contextuales siempre
que puedas, esos son los buenos. ¡Piensa en un grafo!
▫ Crea módulos para que todo esté interrelacionado:
Softonic.com
▫ Sin enlaces rotos
▫ Monta silos, clustering de contenidos para dar
relevancia y topic expertise: Bueno para el bot y el
usuario

44
Paginaciones
▫ Ghostblock vs. Logarithmic
▫ Para webs que usen infinite scroll, tratamos siempre de darle la versión
ajax/JS al usuario y una versión renderizada al bot con items limitados
▫ Usamos rel=”prev” y rel=”next” con un <link> en el <head>
Fuente: https://audisto.com/insights/guides/1/#logarithmic-pagination-546e8feb665d53de2aa9e61e7b9c669b

45
Canonicals
▫ Muy a tenerlos en cuenta en
sitios con conflictos de
contenido duplicado,
ecommerce, etc.
▫ Canonicals ‘de protección’ para
URLs con parámetros, etc.
▫ Canonicals de para versiones
para site mobile
▫ No abusar de los canonicals, son
traicioneros.

46
Hreflang
▫ Idioma vs. país
▫ No la liemos! Es fácil hacerlo
▫ X-default tag para el idioma por defecto
▫ No nos olvidemos en mobile
▫ Don’t overcomplicate. Keep it simple!
Buen recurso: https://www.rebelytics.com/hreflang-canonical/

47
Microdatos
▫ Marcaje básico de página: puede ser
prescindible
▫ Importante para SEO local
▫ Schema específico por sector: recetas,
software…
▫ Mejor JSON que Schema (más fácil para ti y
para Google)
▫ No lo olvidemos poner en mobile
▫ Mejor hacer caso a Google y no a Schema.org
En Schema.org hay cosas que Google no
soporta/tiene implementadas aún
Documentación: https://developers.google.com/search/docs/guides/intro-structured-data

48
Site mobile
▫ Tienen sus peculiaridades: URLs
distintas = problemitas para el MFI.
▫ Hreflang de desktop a desktop y de
mobile a mobile
▫ Tiene que tener un alternate de desktop
a mobile y un canonical de mobile a
desktop
▫ Mantener dos versiones es una m****a
Go responsive!

Title y descriptions
52
javascript:void((function(){var
a,b,c,d,e,f,h,g,i,j,k,l;c=d="";a=document.getElementsByTagName("meta");for(b=0;b<a.length;b++){e=a[b].
name;f=a[b].content;if(e.match(/keywords/i))c=f;if(e.match(/description/i))d=f;}i=document.getElements
ByTagName("title");if(i &&
i.length>0)j=i[0].innerHTML;k=document.getElementsByTagName("h1");l="";for(i=0;i<k.length;i++)l+="<p>h
1: <b>"+k[i].innerHTML+"</b></p>";g=document.createElement("div");g.innerHTML="<div id='MD'
style='padding:0.5cm;background-color:white;z-index:99;position:fixed;top:0;width:95%;border:solid 1px
#000;'><div style='float:right;color:red;cursorointer'><a
onclick='document.getElementById(%5C"MD%5C").style.display=%5C"none%5C";'>close</a></div><p>Title:
<b>"+j+"</b></p><p>Keywords: <b>"+c+"</b></p><p>Description:
<b>"+d+"</b></p>"+l+"</div>";document.body.insertBefore(g,document.body.firstChild);})())

53
Encabezados
javascript:void((function(){var a,b,c,d,e,f;f=new
Array('pink','orange','yellow','aquamarine','lightskyblue','plum');for(a=1;a<=6;a++){b=document.getEle
mentsByTagName('h'+a);for(c=0;c<b.length;c++){d=b[c];e=d.style;e.backgroundColor=f[a-1];e.border='soli
d';e.padding='2px';e.color='black';d.innerHTML='H'+a+' - '+d.innerHTML;}}})())

54
▫ El más importante de la página es el H1
H1 debería ser único para cada página (no más de 1) a menos que uses
section
▫ Los sub-headings deberían ser H2’s, sub-sub-headings deberían ser h3
▫ Cada heading debería contener keywords de valor (importantes).
▫ Los headings ayudan a leer en diagonal, deberíamos poder medio
entender un artículo solo leyendo los headings (ayuda al usuario!)
▫ Be semantic - utiliza headings para separar, o utiliza listas en el inicio
del artículo <ol> or <ul>
Encabezados

55
Recursos
▫ support.google.com
▫ developers.google.com
▫ moz.com/blog/
▫ moz.com/beginners-guide-to-seo
▫ moz.com/blog/the-technical-seo-renaissance
▫ twitter.com/estevecastells/following
▫ twitter.com/christian_wilde/lists/seo
▫ webmasters.googleblog.com
▫ productforums.google.com/forum/#!forum/webmasters
▫ es.slideshare.net/jaimecuesta1/clinic-seo-de-moda
▫ searchviu.com/en/website-relaunch-seo-checklist/
▫ aleydasolis.com/en/search-engine-optimization/http-https-migration-chec
klist-google-docs/

58
Créditos
Es de bien nacido ser agradecido:
▫ Plantilla de la presentación by
SlidesCarnival
▫ Imágenes by Unsplash

59
Gracias!
Preguntas?
Puedes encontrarme en:
▫ Twitter: @estevecastells
▫ LinkedIn: Esteve Castells

SEO para desarrolladores

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à SEO para desarrolladores

Similaire à SEO para desarrolladores (20)

SEO para desarrolladores