Como usar XPath para SEO
¿Qué és XPath?
Según la Wikipedia entendemos por XPath (XML Path Language) es un lenguaje que permite construir expresiones que recorren y procesan un documento XML. La idea es parecida a las expresiones regulares para seleccionar partes de un texto sin atributos (plain text). XPath permite buscar y seleccionar teniendo en cuenta la estructura jerárquica del XML.
Te voy a compartir algunas consultas XPath para ayudarte a extraer elementos de una página web para ayudarte con tus análisis SEO.
Ejemplos de sintaxis:
| Sintaxis | Resultado |
|---|---|
| //h1 | Devuelve todos los H1s |
| //title | Devuelve el title |
| //meta[@name='description']/@content | Devuelve la meta description |
| //@href | Devuelve todos los links |
Ahora ya sabes que consultas debes escribir para obtener algunos de los principales elementos de una URL, ha llegado el momento de explicarte que herramientas utilizar para poder sacarle el máximo provecho.
XPath con Google Spreadsheets (Hojas de cálculo de Google)
Para extraer los datos en una hoja de cálculo desde Google, deberemos utilizar la siguiente fórmula:
= IMPORTXML (URL; consulta XPath)
*clic para hacer más grande
¿Cómo obtener los XPath desde Google Chrome?
Las consultas que has visto al principio del artículo, son muy simples y están muy bien para extraer datos estándar, pero muchas veces nos interesará extraer datos un poco más complejos, como por ejemplo fecha, autor, todo el texto del artículo etc. ...
Para facilitarnos esta tarea y no ir como pollo sin cabeza destripando la estructura del documento html podemos hacer uso de Google Chrome, con solo seleccionar el texto que deseamos obtener nos devolverá el XPath.
- En Chrome, resalta el elemento del XPath le gustaría copiar:
- Clic derecho en el elemento resaltado> Inspeccionar.
- Esto abre DevTools de Chrome.
- Clic derecho en el elemento dentro de DevTools> Copiar> Copiar XPath.
- Esto es que te devolverá:
/html/body/main/section[1]/div/div/div/div/span
Esta es la expresión XPath que necesitas para extraer el texto que has señalado.
*clic para hacer más grande
Sintaxis básica XPath
Ahora que has visto como copiar una expresión de XPath te voy a explicar su sintaxis para que puedas entender que estás haciendo en todo momento.
*clic para hacer más grande
Tu objetivo es obtener el segundo elemento de la lista, es decir "dos"
La sintaxis del XPath simplemente consiste en recorrer los elementos HTML uno a uno hasta llegar al elemento que necesitamos.
| Sintaxis | Resultado |
|---|---|
| / | Selecciona todos los nodos del documento. |
| // | Selecciona todos los nodos del documento. |
| @ | Selecciona todos los atributos, por ejemplo @href (todos los links). |
| @atributo, "texto" | Selecciona el contenido de un atributo con un texto. = //p[@id="textoNegro"] |
| [1] | Selecciona el primer elemento de una lista de múltiples elementos |
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Ejemplo XPath</title>
</head>
<body>
<h1>Esto es mi h1</h1>
<p>Esto es un primer parrafo</p>
<p id="textoNegro">Esto es un segundo parrafo con un id</p>
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
</ul>
</body>
</html>
Para ver si realmente estamos seleccionando el elemento que queremos en el inspector de Chrome (clic derecho->inspeccionar) le damos a control + F para que nos salga la barra de búsqueda y verás como a medida que vas escribiendo tu expresión XPath el texto se va seleccionando.
*clic para hacer más grande
Tal como ves en el video, simplemente tenemos que poner:
/[nombre tag en html]/[segundo elemento]/....
/html/body/ul/li[2]
Pues esto es todo, espero que con esta mini guía sobre XPath para SEO te den ganas de seguir trasteando, investigando y crear tus propias herramientas SEO.
Si quieres compartir alguna sintaxis interesante para SEO o simplemente compartir tu herramienta no dudes en dejarlo en los comentarios.
