Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SEO para Desarrolladores Web (Guía)

SEO para Desarrolladores Web (Guía)

Consejos y experimentos en base a mi experiencia haciendo SEO en varios proyectos, presentado en la Comunidad SEO Galicia.

Esteve Castells
PRO

February 16, 2018
Tweet

More Decks by Esteve Castells

Other Decks in Programming

Transcript

  1. SEO para desarrolladores Esteve Castells

  2. ¡Gracias!

  3. 3 Hi! Soy Esteve Castells Puedes encontrarme @estevecastells en Twitter

    o en bit.ly/Seopatia en mi newsletter bisemanal
  4. 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
  5. “ El SEO está muerto - Alguien que no sabe

    nada 5
  6. 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)
  7. 1. Rastreo Ser accesibles

  8. 2. Indexación Ser suficientemente interesantes

  9. 3. Posicionamiento Ser los mejores

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

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

  12. 12 Frameworks con renderización client-side Algunos frameworks que se renderizan

    en cliente: ▫ Vue ▫ Angular ▫ React ▫ Ember ▫ Backbone
  13. 13 Frameworks con renderización client-side Fuente: https://www.elephate.com/blog/javascript-seo-experiment/

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

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

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

  17. 17 Pero doctor… Tiene solución?

  18. 18 Usando pre-render

  19. 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. 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/
  21. Ojo! Google va evolucionando... 21

  22. 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. 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. 24 GET vs. POST en formularios Se introduce el error

    Se soluciona el error
  25. 25 Soluciones 1. Usar POST en lugar de GET 2.

    Si no se puede, bloquear la subcarpeta del formulario por robots.txt
  26. 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
  27. 27

  28. 28

  29. -36% Tiempo de carga +27% Incremento en conversión +10,5% Aumento

    en pedidos (sobre el total) 29
  30. 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/
  31. 31

  32. 32 Sitemaps XML HTML

  33. 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/
  34. Errores habituales: poner URL’s que no tocan 34

  35. 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.
  36. “ Llevamos 200 artículos y solo 10 visitas al día

    - El CEO 36
  37. 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. 38 Redirecciones Redirecciones permanentes: 302 301 Aunque a día de

    hoy, nadie se muere por un 302
  39. 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
  40. 40

  41. 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
  42. 42

  43. 43

  44. 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. 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. 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. 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. 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!
  49. 49 Google no te va a ayudar

  50. 50 Google no te va a ayudar

  51. 51 Errores de usabilidad

  52. 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. 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. 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. 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/
  56. 56 Herramientas

  57. 57 Herramientas

  58. 58 Créditos Es de bien nacido ser agradecido: ▫ Plantilla

    de la presentación by SlidesCarnival ▫ Imágenes by Unsplash
  59. 59 Gracias! Preguntas? Puedes encontrarme en: ▫ Twitter: @estevecastells ▫

    LinkedIn: Esteve Castells