Índice de contenido
¿Quieres analizar/copiar/validar/saber más sobre los datos estructurados de cualquier URL?
✨ SCHEMA CHECKER ✨
Te comparto un pequeño bookmarklet para Chrome con el que hacer todo eso con sólo un clic. Mira cómo luce:
Te cuento qué hace y cómo va.
Primero de todo porque es fácil que te lo estés preguntando:
¿Qué es un bookmarklet?
Pues son pequeños código JavaScript que te guardas en marcadores en el navegador, como haces con muchas webs, y que en lugar de cargar una página pues ejecuta algo.
Bien pues veamos qué hace Schema Checker. Basta con que estés en cualquier URL y hagas clic para que te abra una nueva pestaña con los datos estructurados encontrados. Los verás listados por separado y con una tabla de contenidos para ir más rápido al que quieras.
Una vez te centres en el marcado concreto que quieras, puedes hacer varias cosas.
Te adjunto un pantallazo de ejemplo del New York times para que veas los diferentes botones.
Copiar en el portapapeles
Ésta se entiende rápido, te copia ese Schema concreto en el portapapeles para que lo copies donde quieras.
Útil si quieres tomar el marcado de alguna página que te guste como plantilla para tu propio marcado, por ejemplo.
Validar Schema
Con el código copiado en el portapapeles, puedes confirmar que está marcado correctamente.
Podrás hacerlo con el test de Schema o con el de resultados enriquecidos de Google, según te interese.
Únicamente recuerda elegir testear desde ‘Código’ y pegarlo.
Documentación
Por último, podrás acceder a la documentación oficial de cualquiera de los Schemas detectados desde su respectivo botón.
Así podrás ver ejemplos y los diferentes atributos aceptados, así como el formato con que ponerlos.
Como en algunos casos mientras trasteaba con el bookmarklet encontré casos donde había tantos datos estructurados que se hacía farragoso tanto subir y bajar…
He puesto un botón para ir arriba del todo en un momento, que combinado con la tabla de contenidos ayuda a ir rápido.
Si quieres usarla copia el código entero que verás en el siguiente enlace y guárdalo en marcadores:
javascript:(function() {
function extractSchema() {
const scripts = document.querySelectorAll('script[type="application/ld+json"]');
const schemaData = new Map();
const titles = [];
scripts.forEach(script => {
try {
const json = JSON.parse(script.textContent);
if (json['@graph']) {
json['@graph'].forEach(item => {
if (item['@type']) {
let types = item['@type'];
if (!Array.isArray(types)) {
types = [types];
}
types.forEach(type => {
if (!schemaData.has(type)) {
schemaData.set(type, []);
titles.push(type);
}
schemaData.get(type).push(item);
});
}
});
} else if (json['@type']) {
const type = json['@type'];
if (!schemaData.has(type)) {
schemaData.set(type, []);
titles.push(type);
}
schemaData.get(type).push(json);
}
} catch (e) {
console.error('Error parsing JSON-LD:', e);
}
});
if (schemaData.size > 0) {
const newWindow = window.open();
const doc = newWindow.document;
doc.write('<html><head><title>Schema JSON-LD</title><style>');
doc.write('.button { padding: 10px 20px; font-size: 16px; margin-right: 10px; margin-bottom: 10px; background-color: black; color: white; border: none; cursor: pointer; }');
doc.write('.dropdown { display: inline-block; position: relative; }');
doc.write('.dropdown-toggle { cursor: pointer; }');
doc.write('.dropdown-content { display: none; position: absolute; background-color: white; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }');
doc.write('.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }');
doc.write('.dropdown-content a:hover { background-color: #ddd; }');
doc.write('.dropdown:hover .dropdown-content { display: block; }');
doc.write('.floating-button { position: fixed; bottom: 70px; right: 20px; background-color: red; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer; }');
doc.write('.developer-info { position: fixed; bottom: 30px; right: 20px; font-size: 16px; color: black; }');
doc.write('.developer-info a { font-weight: bold; color: black; text-decoration: underline; }');
doc.write('.developer-info a:hover { text-decoration: none; }');
doc.write('</style></head><body>');
doc.write('<h1 style="font-size: 36px; font-weight: bold;">Schema Checker</h1>');
doc.write('<h2 id="schemas-detected">Schemas detectados</h2>');
doc.write('<div style="width: 550px; background-color: black; border-radius: 10px; color: white; padding: 10px;">');
doc.write('<ul style="font-size: 18px;">');
titles.forEach((title, index) => {
const anchorId = 'schema' + index;
const formattedTitle = title.charAt(0).toUpperCase() + title.slice(1);
doc.write('<li><a style="color: white;" href="#' + anchorId + '">' + formattedTitle + '</a></li>');
});
doc.write('</ul>');
doc.write('</div>');
schemaData.forEach((items, type) => {
const anchorId = 'schema' + titles.indexOf(type);
const title = type.charAt(0).toUpperCase() + type.slice(1);
doc.write('<div id="' + anchorId + '">');
doc.write('<h3>' + title + '</h3>');
items.forEach(item => {
doc.write('<pre>' + JSON.stringify(item, null, 2) + '</pre>');
});
doc.write('<div class="buttons" style="margin-top: 30px;">');
doc.write('<button class="button" onclick="copyToClipboard(this)">Copiar en el portapapeles</button>');
doc.write('<div class="dropdown">');
doc.write('<button class="button dropdown-toggle">Validar Schema</button>');
doc.write('<div class="dropdown-content">');
doc.write('<a href="https://validator.schema.org/" target="_blank">Schema.org</a>');
doc.write('<a href="https://search.google.com/test/rich-results" target="_blank">Google Rich Results</a>');
doc.write('</div>');
doc.write('</div>');
doc.write('<button class="button" onclick="openDocumentation(\'' + title + '\')">Documentación</button>');
doc.write('</div>');
doc.write('</div>');
});
doc.write('<script>');
doc.write('function copyToClipboard(button) {');
doc.write('const schemaContent = button.parentNode.previousElementSibling.innerText;');
doc.write('navigator.clipboard.writeText(schemaContent).then(function() {');
doc.write('alert("El Schema se ha copiado correctamente en el portapapeles.");');
doc.write('}, function(err) {');
doc.write('alert("Error al copiar el schema: " + err);');
doc.write('});');
doc.write('}');
doc.write('function openDocumentation(title) {');
doc.write('window.open("https://schema.org/" + title, "_blank");');
doc.write('}');
doc.write('function scrollToTop() {');
doc.write('document.getElementById("schemas-detected").scrollIntoView();');
doc.write('}');
doc.write('</script>');
doc.write('<button class="floating-button" onclick="scrollToTop()">Volver arriba</button>');
doc.write('<p class="developer-info">Desarrollado por <a href="https://x.com/carlos_darko" target="_blank"><strong>Carlos Ortega</strong></a></p>');
doc.write('</body></html>');
doc.close();
} else {
alert('No Schema JSON-LD found.');
}
}
extractSchema();
})();
Y poco más.
Es la primera herramienta de este estilo que me he animado a hacer así que si funciona intentaré hacer más con las que facilitar el día a día de cualquier SEO.
Se agradece cualquier difusión si te parece útil y me encantaría leer si te ayuda 😁
Consultor SEO desde 2014, a lo largo de mi carrera he liderado el SEO de grandes webs tanto a nivel agencia como inhouse y actualmente freelance.
Divulgador y ponente, también colaboro desde hace años como profesor en varios máster SEO, así como en masterclasses y cursos para diferentes plataformas.