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.

Avatar for Esteve Castells

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