SEO para Desarrolladores Web (Guía)

Slide 1

Slide 1 text

SEO para desarrolladores Esteve Castells

Slide 2

Slide 2 text

¡Gracias!

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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)

Slide 7

Slide 7 text

1. Rastreo Ser accesibles

Slide 8

Slide 8 text

2. Indexación Ser suficientemente interesantes

Slide 9

Slide 9 text

3. Posicionamiento Ser los mejores

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

17 Pero doctor… Tiene solución?

Slide 18

Slide 18 text

18 Usando pre-render

Slide 19

Slide 19 text

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/

Slide 20

Slide 20 text

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/

Slide 21

Slide 21 text

Ojo! Google va evolucionando... 21

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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!

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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/

Slide 31

Slide 31 text

Slide 32

Slide 32 text

32 Sitemaps XML HTML

Slide 33

Slide 33 text

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/

Slide 34

Slide 34 text

Errores habituales: poner URL’s que no tocan 34

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

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 en el Fuente: https://audisto.com/insights/guides/1/#logarithmic-pagination-546e8feb665d53de2aa9e61e7b9c669b

Slide 45

Slide 45 text

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.

Slide 46

Slide 46 text

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/

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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!

Slide 49

Slide 49 text

49 Google no te va a ayudar

Slide 50

Slide 50 text

50 Google no te va a ayudar

Slide 51

Slide 51 text

51 Errores de usabilidad

Slide 52

Slide 52 text

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;b0)j=i[0].innerHTML;k=document.getElementsByTagName("h1");l="";for(i=0;ih 1: "+k[i].innerHTML+"";g=document.createElement("div");g.innerHTML="

Title: "+j+"

Keywords: "+c+"

Description: "+d+"

"+l+"

";document.body.insertBefore(g,document.body.firstChild);})())

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Encabezados

Slide 55

Slide 55 text

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/

Slide 56

Slide 56 text

56 Herramientas

Slide 57

Slide 57 text

57 Herramientas

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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