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

February 16, 2018
Tweet

More Decks by Esteve Castells

Other Decks in Programming

Transcript

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

    o en bit.ly/Seopatia en mi newsletter bisemanal
  2. 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
  3. 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)
  4. 12 Frameworks con renderización client-side Algunos frameworks que se renderizan

    en cliente: ▫ Vue ▫ Angular ▫ React ▫ Ember ▫ Backbone
  5. 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/
  6. 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/
  7. 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
  8. 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!
  9. 25 Soluciones 1. Usar POST en lugar de GET 2.

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

  12. 28

  13. 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/
  14. 31

  15. 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/
  16. 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.
  17. 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
  18. 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
  19. 40

  20. 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
  21. 42

  22. 43

  23. 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
  24. 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.
  25. 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/
  26. 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
  27. 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!
  28. 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);})())
  29. 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
  30. 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/
  31. 58 Créditos Es de bien nacido ser agradecido: ▫ Plantilla

    de la presentación by SlidesCarnival ▫ Imágenes by Unsplash