2. Soy Esteve Castells
International SEO Specialist @
Softonic
Puedes encontrarme en
@estevecastells
https://estevecastells.com/
Newsletter: http://bit.ly/Seopatia
Hola!
3. Hola!
Soy Nacho Mascort
SEO Manager @ Grupo Planeta
Puedes encontrarme en:
@NachoMascort
https://seohacks.es
Puedes mirar mis scripts en:
https://github.com/NachoSEO
4. ¿Qué vamos a ver?
1. ¿Qué es el scraping y para qué sirve?
2. Mitos sobre el scraping
3. Principales usos
a. En nuestro sitio web
b. En sitios web externos
4. Entendiendo el DOM
5. Métodos de extracción
6. Herramientas de Scraping
7. Scraping con Python
8. Tips
9. Casos prácticos
10. Bonus
by @estevecastells & @NachoMascort
6. 1.1 ¿Qué es el scraping?
El scraping o web scraping, es una técnica con la
que mediante software, se extrae información o
contenido de un sitio web.
Existen desde ‘scrapers’ sencillos que parsean el
HTML de un sitio web, a navegadores que
renderizan JS y realizan tareas de navegación y
extracción complejas.
7. 1.2 ¿Para qué sirve?
Los usos del scraping son infinitos, solo los limitan tu
creatividad y la legalidad de tus acciones.
Los usos más básicos pueden ser comprobar
cambios en tu propia web o en la de un
competidor, hasta crear sitios webs dinámicos en
base a múltiples fuentes de datos.
13. 3.1 Principales usos en nuestros sitios
web
Control del valor de ciertas etiquetas HTML
- ¿Están todos los elementos tal y como hemos
definido en nuestra documentación?
- Comprobaciones de deploys
- ¿Estamos mandando señales contradictorias?
- HTTP Headers
- Sitemaps vs metas
- Duplicidad de etiquetas
- Localización incorrecta de etiquetas
- Desaparición de etiquetas
14. 3.2 Principales usos en sitios web
externos
● Automatizar procesos: lo que haría un
humano y te puedes ahorrar
○ Cambios visuales
■ ¿Están añadiendo funcionalidades
nuevas?
○ Cambios en el HTML (metas, etc)
■ ¿Están añadiendo nuevo marcaje
Schema o cambiando su estrategia de
indexación?
○ Cambios de contenido
■ ¿Actualizan/curan su contenido?
● Monitorizar cambios de rankings en Google
20. 4.1 Document Object Model
¿Componentes de una web?
Nuestro navegador hace una petición get hacia
el servidor y este nos devuelve varios archivos
para que el navegador lo pueda renderizar.
Estos archivos suelen ser:
➜ HTML
➜ CSS
➜ JS
➜ Imágenes
➜ ...
21. 4.2 Código fuente vs DOM
Son dos cosas distintas.
Puedes consultar cualquier HTML de un site
escribiendo en la barra del navegador:
view-source: https://www.dominio.tld/ruta
*Con CSS y JS no hace falta porque el
navegador no los renderiza
** Ctrl / Cmd + u
24. 4.2 Código fuente vs DOM
En el código fuente (source code) no se ha
ejecutado ningún JS.
Depende del comportamiento del JS puedes
obtener datos “falsos”.
25. 4.2 Código fuente vs DOM
Si el código fuente no sirve, ¿qué hacemos?
Podemos “ver” el DOM en la pestaña
“Elements” en las herramientas de
desarrolladores de Chrome (y cualquier otro
navegador).
30. 4.3 ¿Google que ve?
Experimento de hace algo más de un año:
La idea es modificar la etiqueta meta robots
(mediante JS) de una URL para desindexar la página
y ver si Google hace caso al valor que se encuentra
en el código fuente o en el DOM.
URL con la que experimentar:
https://seohacks.es/dashboard/
31. 4.3 ¿Google que ve (experimento)?
Se añade el siguiente código:
<script>
jQuery('meta[name="robots"]').remove();
var meta = document.createElement('meta');
meta.name = 'robots';
meta.content = 'noindex, follow';
jQuery('head').append(meta);
</script>
32. 4.3 ¿Google que ve (experimento)?
Lo que hace es:
1. Eliminar la etiqueta meta robots actual
33. 4.3 ¿Google que ve (experimento)?
Lo que hace es:
1. Eliminar la etiqueta meta robots actual
2. Crea una variable llamada “meta” que
almacena la creación de un elemento tipo
“meta” (valga la redundancia)
34. 4.3 ¿Google que ve (experimento)?
Lo que hace es:
1. Eliminar la etiqueta meta robots actual
2. Crea una variable llamada “meta” que
almacena la creación de un elemento tipo
“meta” (valga la redundancia)
3. Le añade los atributos “name” con valor
“robots” y “content” con valor “noindex, follow”
35. 4.3 ¿Google que ve (experimento)?
Lo que hace es:
1. Eliminar la etiqueta meta robots actual
2. Crea una variable llamada “meta” que
almacena la creación de un elemento tipo
“meta” (valga la redundancia)
3. Le añade los atributos “name” con valor
“robots” y “content” con valor “noindex, follow”
4. Añade al head la variable meta que contiene la
etiqueta con los valores que provocan una
desindexación
40. 5. Métodos de extracción
Podemos extraer la información de cada documento
usando diferentes modelos bastante similares entre
sí.
41. 5. Métodos de extracción
Podemos extraer la información de cada documento
usando diferentes modelos bastante similares entre
sí.
Estos son:
➜ Xpath
➜ Selectores de CSS
➜ Otros como regex o selectores de herramientas
específicas
42. 5.1 Xpath
Emplea “expresiones de ruta” (path expressions)
para poder definir un nodo o varios dentro de un
documento
Podemos obtenerlos:
➜ Escribiendolos nosotros
➜ A través de las herramientas para
desarrolladores dentro de un navegador
43. 5.1.1 Síntaxis de Xpath
El standard de escritura es el siguiente:
//etiqueta[@atributo=’valor’]
44. 5.1.1 Síntaxis de Xpath
El standard de escritura es el siguiente:
//etiqueta[@atributo=’valor’]
Para esta etiqueta:
<input id=”seoplus” type=”submit” value=”Log In”/>
45. 5.1.1 Síntaxis de Xpath
//etiqueta[@atributo=’valor’]
Para esta etiqueta:
<input id=”seoplus” type=”submit” value=”Log In”/>
➜ Etiqueta: input
46. 5.1.1 Síntaxis de Xpath
//etiqueta[@atributo=’valor’]
Para esta etiqueta:
<input id=”seoplus” type=”submit” value=”Log In”/>
➜ Etiqueta: input
➜ Atributos:
○ Id
○ Type
○ Value
47. 5.1.1 Síntaxis de Xpath
//etiqueta[@atributo=’valor’]
Para esta etiqueta:
<input id=”seoplus” type=”submit” value=”Log In”/>
➜ Etiqueta: input
➜ Atributos:
○ Id = seoplus
○ Type = Submit
○ Value = Log In
51. 5.2 CSS Selectors
Tal y como indica su nombre son los mismos
selectores que usamos para escribir CSS.
Podemos obtenerlos:
➜ Escribiendolos nosotros con la misma sintaxis
que modificando los estilos de un site
➜ A través de las herramientas para
desarrolladores dentro de un navegador
*tip: para seleccionar etiqueta podemos usar la sintaxis de xpath y
eliminar el @ del atributo
53. 5.3 Xpath vs CSS
Xpath CSS
Direct Child //div/a div > a
Child o Subchild //div//a div a
ID //div[@id=”ejemplo”] #ejemplo
Clase //div[@clase=”ejemplo”] .ejemplo
Atributos //input[@name='username']
input[name='user
name']
https://saucelabs.com/resources/articles/selenium-tips-css-selectors
54. 5.4 Otros
Podemos acceder a ciertos nodos del DOM
mediante otros métodos como:
➜ Regex
➜ Selectores específicos de librerías de python
➜ Herramientas adhoc
56. Algunas de las decenas de
herramientas que existen
Plugins
Herramientas varias
Scraper
Jason The Miner
Si no te convencen, aquí tienes más de 30 herramientas:
https://www.octoparse.com/blog/top-30-free-web-scraping-software/
57. Desde herramientas básicas o plugins que nos
sirven para hacer scrapings básicos, en algunos
casos para sacar datos más rápidamente sin
necesidad de sacar Python o JS a relucir a
herramientas un poco más ‘avanzadas’, aunque
todas tienen una curva de aprendizaje muy baja.
➜ Scraper
➜ Screaming Frog
➜ Google Sheets
➜ Grepsr
6.1 Herramientas de scraping
58. Scraper es una plugin de Google Chrome que
puedes usar para hacer pequeños scrapings de
elementos en un HTML mínimamente bien
estructurado.
También nos sirve para sacar el XPath cuando a
veces Google Chrome Dev Tools no lo saca bien
para utilizarlo en otras herramientas. Como punto a
favor, trabaja como Google Chrome Dev Tools sobre
DOM
6.1.1 Scraper
59. 1. Doble clic
encima del
elemento que
queremos
sacar
2. Clicar en
‘Scrape
similar’
3. ¡Voilà!
6.1.1 Scraper
60. Si los elementos
están bien
estructurados,
podremos sacar
todo
extremadamente
fácilmente, sin
necesidad de
usar programas
terceros o
programación
6.1.1 Scraper
66. Screaming Frog es una de las herramientas SEO por
excelencia, que también nos puede servir para hacer
scraping básico (e incluso avanzado).
Al ser un crawler puedes usar Text only (HTML puro)
o JS rendering, si tu web usa client- side rendering.
Su modo de extracción es simple pero con él puedes
conseguir gran parte de lo que necesitarás hacer,
para lo otro puedes usar Python o otras
herramientas.
6.1.2 Screaming Frog
68. 6.1.2 Screaming Frog
Tenemos varios modos.
- CSS path (CSS selector)
- XPath (el que usaremos
principalmente)
- Regex
69. 6.1.2 Screaming Frog
Tenemos hasta 10 selectores,
que generalmente será
suficiente. Sino, nos tocará
usar Excel con la función
BUSCARV para juntar dos o
más scrapings
70. 6.1.2 Screaming Frog
Deberemos luego decidir si
queremos extraer el
contenido dentro del HTML,
solo texto o el elemento
HTML entero
71. 6.1.2 Screaming Frog
Una vez
tenemos todos
los extractores
puestos, tan
solo debemos
ejecutarlo, ya
sea en modo
crawler o modo
lista con un
sitemap.
72. 6.1.2 Screaming Frog
Una vez tengamos configurado todo perfecto (a veces
tendremos que estar probando varias veces el XPath
correcto), ya podremos dejarlo crawleando y exportar los
datos obtenidos.
73. 6.1.2 Screaming Frog
Algunos de los usos más habituales son, tanto en
webs originales como competidores.
➜ Monitorizar cambios/datos perdidos en un deploy
➜ Monitorizar cambios semanales en el contenido
de la web
➜ Comprobar aumento o decrecimiento de cantidad
o ratios de contenido/thin content
El límite del scraping con Screaming Frog.
Puedes hacer el 99% de las cosas que quieres (sacar
elementos on-page, etc) con JS-rendering fácil!
74. 6.1.2 Screaming Frog
Cutre tip: Un uso ‘cutre’ para sacar todas las
URLs de un sitemap index es importando todo el
listado y limpiando con Excel luego. Por si no
sabes (aún) usar Python.
1. Nos vamos a Download
Sitemap index
2. Ponemos la URL del sitemap
index
75. 6.1.2 Screaming Frog
3. Esperamos a que descargue
todo
4. Seleccionamos todo y hacemos
copypaste en Excel
76. 6.1.2 Screaming Frog
Luego hacemos reemplazar con “Found “ y
tendremos todas las URLs limpias de un sitemap
index.
De esta manera podemos luego limpiar y sacar
por patrones de URL las que nos interesen. Ej:
una categoría, una tipología, que contengan X
palabra en la URL, etc.
De esa forma podremos segmentar incluso más
nuestro scraping ya sea de nuestra web o de la
web de un competidor.
77. 6.1.3 Cloud version: FandangoSEO
Si necesitas correr crawls intensivos de millones de
páginas con segmentación por pagetype, con
FandangoSEO puedes poner XPaths interesantes con
extracción de contenido, count y exists.
78. 6.1.4 Google Sheets
Con Google Sheets también podemos importar la
mayoría de elementos de una página web, desde HTML
hasta JSON con un pequeño script externo..
Pro’s:
➜ Importa HTML, CSV, TSV, XML, JSON y RSS.
➜ Hosteado en la nube
➜ Gratis y para toda la família
➜ Fácil de usar con funciones conocidas
Con’s:
➜ Se queda pillado fácilmente y suele tardar en
procesar miles de filas
79. 6.1.4 Google Sheets
➜ Importando feeds fácilmente para crear tu
propio Feedly o agregador de noticias
80. 6.1.5 Grepsr
Grepsr es una herramienta que se basa en una extensión
que facilita hacer la extracción de manera visual, además
ofrece exportar datos en formato csv o API (json)
81. Primero de todo instalaremos la extensión en Chrome y
la ejecutaremos, cargando la página deseada a scrapear.
6.1.5 Grepsr
82. Luego, haremos clic en ‘Select’ y seleccionaremos el
elemento exacto que queremos, haciendo hover con el
mouse podremos refinar.
6.1.5 Grepsr
83. Una vez
seleccionado, nos
quedará marcado
con el elemento y si
está bien
estructurado el
HTML, nos será muy
fácil sin tener que
sacar XPath o CSS
selectors.
6.1.5 Grepsr
84. Una vez seleccionadas todos nuestros campos, vamos a
proceder a guardarlos haciendo clic en Next, podemos
dar nombre a cada campo y extrarlo en forma de texto o
extraer la propia classe CSS.
6.1.5 Grepsr
85. Finalmente, podremos añadir paginación para cada uno
de nuestros campos, si así lo requieren, tanto en HTML
con un next link, así como si tiene load more o infinite
scroll (ajax)
6.1.5 Grepsr
86. 6.1.5 Grepsr
Para seleccionar la paginación, seguiremos el mismo
proceso que con los elementos a scrapear.
(Parte opcional, no todo requiere de paginación)
87. 6.1.5 Grepsr
Finalmente, también podremos configurar un login si es
necesario, así como campos adiccionales que tengan
cercanía al campo extraído (imágenes, metas, etc).
88. 6.1.5 Grepsr
Finalmente, ya tendremos los datos tanto en formato
JSON como CSV. Eso sí, necesitaremos una cuenta
(gratis) en Grepsr para poder exportarlos!
91. 7 ¿Porque Python?
➜ Es un lenguaje muy sencillo de entender
➜ Fácil aproximación para los que empiezan con
la programación
➜ Mucho crecimiento y gran comunidad detrás
➜ Usos core para análisis de datos masivos y con
librerías muy potentes detrás (no solo de
scraping)
➜ ¡Podemos trabajar en el navegador!
○ https://colab.research.google.com
92. 7.1 Tipos de datos
Para empezar a scrapear debemos conocer como
mínimo estos conceptos para programar en python:
➜ Variables
➜ Listas
➜ Integers, Floats, Strings, Boolean Values…
➜ Ciclos for
➜ Condicionales
➜ Librerías
93. 7.2 Librerías para Scrapear
Existen varias pero me centraré en dos:
➜ Requests + BeautifulSoup: Para scrapear datos
del código fuente de un site. Útil para sites con
datos estáticos
➜ Selenium: Herramienta para automatizar que
nos puede ayudar a scrapear sites con
contenido dinámico cuyos valores están en el
DOM pero no en el código fuente.
*Colab no soporta selenium, tendremos que
trabajar con Jupyter (o cualquier IDE)
94.
95. Con 5 líneas de código (o
menos) podéis ver el HTML
parseado
102. Hay muchos sitios web que sirven sus páginas en
base al User-agent. Algunas veces te interesará ser
un dispositivo desktop, otro un móvil. A veces un
Windows, otro un Mac.
A veces un Googlebot, otras veces un bingbot.
¡Adapta cada scraping a lo que necesites para
obtener los resultados deseados!
8.1 User-agent
103. Para scrapear un sitio web como Google con
mecanismos avanzados de seguridad, será
necesario el uso de proxies, entre otras medidas.
Los proxies, hacen de intermediario entre una
petición que realiza un ordenador X a un servidor Z.
De esta forma, dejamos poco rastro a la hora de ser
identificados.
Depende del sitio web y número de peticiones se
recomienda usar una cantidad u otra. Por lo general,
más de una petición por segundo desde la misma IP
no es recomendable.
8.2 Proxies
104. Generalmente el uso de proxies es más
recomendable que un VPN, ya que el VPN hace lo
mismo pero bajo una única IP.
Siempre es recomendable usar un VPN con otra geo
para cualquier tipo de rastreo en webs de terceros,
para evitar posible problemas o identificaciones.
Además, si te capan por IP (ej: Cloudflare) nunca
más podrás acceder a la web desde esa IP (si es
estática).
Servicio VPN recomendado: ExpressVPN
8.3 VPN’s
105. La concurrency consiste en limitar el número de
peticiones que puede hacer una red por segundo.
Nos interesa limitar las peticiones que hacemos
siempre, para evitar saturar el servidor, ya sea el
nuestro o el de un competidor.
Si saturamos el servidor, deberemos volver a
realizar las peticiones o en según que caso, volver a
empezar todo el proceso de crawling
Números orientativos:
➜ Webs pequeñas: 5 req/seg - 5 hilos
➜ Webs grandes: 20 req/seg - 20 hilos
8.4 Concurrency
106. Es habitual que después de un scraping de datos,
nos encontramos con datos que no encajan.
Normalmente, tendremos que trabajar los datos
para limpiarlos.
Algunas de las correcciones más habituales:
➜ Duplicados
➜ Corrección/unificación de formatos
➜ Espacios
➜ Caracteres extraños
➜ Currencias
8.5 Data cleaning
108. 9. Casos prácticos
A continuación veremos 2 casos prácticos:
1. Utilizando el scraping para automatizar la
curación de contenidos para listados
2. Scrapeando para generar un feed de producto
para nuestras webs
110. 9.1 Utilizando el scraping para
automatizar la curación de
contenidos para listados
Se puede decir con firmeza, que el mejor buscador
en la actualidad es Google.
¿Y si usamos los resultados de Google para generar
nuestros propios listados, basado en el ranking que
da él a webs que posicionan por lo que nosotros
queremos posicionar?
111. 9.1.1 Jason The Miner
Para hacer esto, usaremos Jason The Miner, una
librería de scraping que ha hecho Marc Mignonsin,
Principal Software Engineer en Softonic
(@mawrkus) en Github y (@crossrecursion) en
Twitter
112. 9.1.1 Jason The Miner
Jason The Miner es una librería basada en Node.js
versátil y modular que puede adaptarse a cualquier
web y necesidad
114. 9.1.2 Concepto
Lanzamos una query como
‘mejores lavadoras’.
Entraremos en top 20-30
resultados, analizaremos HTML
y extraemos la ID de los links
de Amazon.
Luego haremos un conteo y
estaremos validando
automáticamente en base a
decenas de webs cuál es la
mejor lavadora.
115. 9.1.2 Concepto
Entonces, tendremos un listado
de IDs con su URL, que
podremos scrapear
directamente de Google Play o
usando su API, y rellenar semi-
automáticamente nuestro CMS
(WordPress, o lo que
tengamos).
Esto nos permite automatizar
la research/curación de
contenido y focalizarnos en
aportar realmente valor en lo
que escribimos.
116. 9.1.3 Acción
Primero de todo vamos a generar la base para crear
la URL, con nuestro user-agent, así como el lenguaje
que nos interesa.
117. 9.1.3 Acción
Luego vamos a generar una concurrencia máxima
para que Google no nos banee la IP o nos salten
captchas.
118. 9.1.3 Acción
Finalmente, vamos a definir exactamente el flow del
crawler. Si necesita entrar en enlaces/webs, y qué
tiene que extraer de ellos.
120. 9.1.3 Acción
Y podemos incluso configurar que se suba
automáticamente al CMS una vez se han acabado
de ejecutar los procesos.
121. 9.1.3 Acción
¿Qué hace Jason The Miner?
1. Load (HTTP, file, json, ...)
2. Parse (HTML w/ CSS by default)
3. Transform
Pero esto se nos queda corto,
necesitamos hacerlo en bulk para
decenas o centenares de casos, no
podemos hacerlo uno a uno.
122. 9.1.3 Acción
Añadimos funcionalidad para que
funcione en bulk
1. Bulk (importado de un CSV)
2. Load (HTTP, file, json, ...)
3. Parse (HTML w/ CSS by default)
4. Transform
Creando una variable que sería la
query que insertamos en Google.
123. 9.1.4 CMS
Una vez tenemos todos los datos insertados en
nuestro CMS, tendremos que ejecutar otro proceso
de scraping básico o con una API como la de
Amazon para sacar todos los datos de cada
producto (logo, nombre, imagenes, descripción,
etc).
Una vez lo tengamos todo, los listados ya estarán
ordenados y podemos añadir el contenido editorial
que queramos, con muy poco trabajo manual a
hacer.
124. 9.1.5 Ideas
Ejemplos en los que se podría aplicar:
➜ Productos de Amazon
➜ Listados de restaurantes que están en
TripAdvisor
➜ Listados de hoteles
➜ Listados de películas en Netflix
➜ Mejores juegos de PS4
➜ Mejores apps de android
➜ Mejores apps de Chromecast
➜ Mejores libros
139. 9.2.0 ¿Hay paginaciones?
Para cada paginación tendremos que iterar el
mismo código una y otra vez.
Hay que averiguar cómo se forman las URLs
paginadas para poder acceder a ellas:
>>>https://www.casadellibro.com/libros/novela-negra/126000000/p + pagina
142. 9.2.1 Es hora de finalizar
Ahora que ya tenemos el script para scrapear todos
los libros de la primera página vamos a generar el
script final para que afecte a todas las
paginaciones.
143. 9.2.2 Hagamos el script
Importamos todas las librerías que vamos a usar
144. 9.2.2 Hagamos el script
Creamos las listas en las que alojar cada uno de
los datos.
145. 9.2.2 Hagamos el script
Tendremos una lista que contiene los números del
1 al 120 para las paginaciones
146. 9.2.2 Hagamos el script
Creamos variables para evitar que el server nos
banee por exceso de peticiones
157. Se puede utilizar Google Sheets para importar datos de APIs
fácilmente.
API’s como Dandelion API que sirven para hacer análisis de
semántica de textos, pueden ser muy útiles para el día a día de
nuestro SEO.
➜ Extracción de entidades
➜ Similaridad semántica
➜ Extracción de keywords
➜ Análisis de sentimentos
10.2 Dandelion API
165. Python & Otros
➜ Chapter 11 – Web Scraping
https://automatetheboringstuff.com/chapter11/
➜ https://twitter.com/i/moments/949019183181856769
➜ Scraping ‘People Also Ask’ boxes for SEO and content
research
https://builtvisible.com/scraping-people-also-ask-boxes-for-seo-
and-content-research/
➜ https://stackoverflow.com/questions/3964681/find-all-files-in-a-
directory-with-extension-txt-in-python
➜ 6 Actionable Web Scraping Hacks for White Hat Marketers
https://ahrefs.com/blog/web-scraping-for-marketers/
➜ https://saucelabs.com/resources/articles/selenium-tips-css-
selectors
RECURSOS ADICIONALES
166. RECURSOS ADICIONALES
Node.js (Thanks @mawrkus)
➜ Web Scraping With Node.js:
https://www.smashingmagazine.com/2015/04/web-scraping-with-
nodejs/
➜ X-ray, The next web scraper. See through the noise:
https://github.com/lapwinglabs/x-ray
➜ Simple, lightweight & expressive web scraping with Node.js:
https://github.com/eeshi/node-scrapy
➜ Node.js Scraping Libraries: http://blog.webkid.io/nodejs-scraping-
libraries/
➜ https://www.scrapesentry.com/scraping-wiki/web-scraping-legal-or-
illegal/
➜ http://blog.icreon.us/web-scraping-and-you-a-legal-primer-for-one-of-
its-most-useful-tools/
➜ Web scraping o rastreo de webs y legalidad:
https://www.youtube.com/watch?v=EJzugD0l0Bw
167. ¿QUIERES TRABAJAR CON ESTEVE EN SOFTONIC?
➜ Mail: esteve.castells@softonic.com
➜ LinkedIn: Esteve Castells
➜ Twitter: @estevecastells
168. CREDITS
➜ Presentation template by SlidesCarnival
➜ Photographs by Death to the Stock Photo
(license)
➜ Marc Mignonsin for creating Jason The Miner
