Vuelvo una semana más con una nueva implementación habitual en el ámbito más técnico del Marketing Digital, tal y como ya hice en este primer post hablando sobre cómo detectar contenido duplicado en nuestro sitio web.
El contenido sobre el que escribo a continuación va a ser algo más conciso que el de otras veces, aunque no por ello menos útil. De hecho, he querido que sea así para no perder el foco de lo que realmente importa en este caso: el desarrollo de un script que nos ayude a inspeccionar el código HTML de nuestras páginas web.
Es algo que fácilmente se puede realizar a través del Inspector del navegador, sin embargo, pensemos por un momento por qué puede ser necesario llevar a cabo implementaciones como la que muestro en seguida. Se me ocurren muchas funcionalidades y ventajas, pero creo que la principal podría ser algo como …
Desarrollar scripts avanzados que detecten o analicen elementos del DOM según nuestros criterios personales sin tener que depender para todo de herramientas de terceros que muchas veces no se amoldan al 100% a lo que necesitamos.
Evidentemente este tipo de plataformas son y seguirán siendo primordiales en nuestras estrategias y acciones. Debemos incorporarlas dentro de nuestro flujo de trabajo habitual, ya que de otra forma sería imposible crear un MVP al uso. Al fin y al cabo, todo nuestro presupuesto y tiempo tendríamos que dedicarlo a este tipo de desarrollos tan personalizados. Pero como es lógico y a pesar de que integran centenares de posibilidades, nunca terminan de adaptarse completamente a las necesidades de nuestro negocio. Por ello este tipo de scripts son tan útiles.
Por ejemplo, podríamos llegar a programar de manera más o menos sencillas cosas como …
- Apoyo a la optimización de los Core Web Vitals a través de detecciones automatizadas.
- Contabilizar elementos del DOM TREE por si hubieran más de los
- Detectar longitudes de cadenas que superen las recomendadas. e.g. titles, meta-descriptions, etc.
- oportunos para ayudarnos a reducir estructuras pesadas de código.
- Visualizar structured data, rich cards, …
Dicho de otra forma, se podría desarrollar rápidamente cualquier implementación que se nos ocurra y que tenga que ver con el código HTML de nuestro site: etiquetas, librerías, texto, imágenes, etc.
# Paquetes para cargar y parsear el código HTML de la página
library(httr) library(XML)
# Script para recoger cualquier elemento DOM
url <- "https://blog.google/" request <- GET(url) txt <- htmlParse(request, asText = TRUE) h2 <- xpathSApply(txt, '//*[@id="jump-content"]/article/section[1]/section/div/div/a/h2', xmlValue) print(paste("El subtítulo H2 '",h2,"' tiene una longitud de ", nchar(PageTitle)," caracteres"))
Aunque las posibilidades para ampliar este código son infinitas, tantas como ideas y necesidades tengamos, además de tener los correspondientes conocimientos básicos de programación (este post puede ayudar a dar los primeros pasos) es primordial entender cómo extraer elementos concretos del código HTML. Para ello existe la sintaxis xPath.
El lenguaje XML Path nos permite navegar y extraer elementos y/o atributos de un documento XML. Éste es un lenguaje de etiquetado extensible (eXtensible Markup Language) desarrollado por la World Wide Web Consortium W3C que en la actualidad se utiliza como estándar de codificación de nuestro código HTML. La sintaxis xPath permite realizar búsquedas detalladas, de tal forma que nos podamos centrar en uno o varios elementos específicos. Algunos ejemplos de sintaxis habituales son ...
PATH EXPRESSIONS | DESCRIPCIÓN |
|---|---|
| //h1 | //h2 | Devuelve todos los elementos H1 y H2 |
| @data-* | Recoge todos los elementos que tengan algún atributo que empiece por "data-" |
| //title[@lang='es'] | Cualquier etiqueta title cuyo atributo lang contenga "es" |
| /section/div[1] | El primer div dentro de cada uno de los section existentes |
| /section/div[last()-1] | El penúltimo div dentro de cada uno de los section existentes |
La sintaxis en implementaciones básicas es sencilla, el problema surge cuando la necesidad requiere de desarrollos mucho más avanzados. No debemos preocuparnos, por suerte "todo está inventado".
Es tan sencillo como abrir el Inspector de nuestro browser y dentro de la pestaña Elements buscar el elemento deseado. Clic derecho sobre él y seleccionar Copy XPath o Copy Full XPath dependiendo de cuál sea nuestro objetivo. ¡Brujería!
Copiando el xPath del subtítulo H2 seleccionado para usarlo en el script de R
Todo lo anterior se puede además combinar más o menos de manera sencilla con crawlers o rastreadores que simulen los que utilizan normalmente los motores de búsqueda como Google, Bing, Yandex, Baidu, etc. Pero esto requiere de un análisis a parte más exhaustivo y por eso lo trataré en posteriores posts dentro de la categoría Desarrollo de este blog. ¡Hasta la semana que viene!