Lo que Googlebot ve al rastrear Discourse

Desarrollador
1

Resumen: es semi-humanamente posible replicar el rastreo de Googlebot en Discourse. Aquí te explico cómo empezar…

Conviértete en Googlebot

  1. Abre una ventana de incógnito (siempre empieza de cero)
  2. Abre DevTools
  3. Abre Network Conditions en DevTools
  4. Desmarca ‘Usar valores predeterminados del navegador’
  5. En el menú desplegable, elige Googlebot Smartphone
  6. Luego ve a https://meta.discourse.org (se ve muy diferente; no pasa nada porque eres Googlebot y a los bots no les importa)
  7. Ve a Ver > Desarrollador > Ver código fuente
  8. Cópialo y pégalo en algún archivo .html

¡Buen trabajo! Has creado el archivo que los humanos referencian para ver lo que Googlebot ha rastreado y almacenado en caché.

El trabajo de Googlebot ha terminado. Ahora es el momento de renderizar el archivo en caché en un navegador.

Conviértete en Chrome

  1. Abre la terminal y ejecuta npx http-server
  2. Navega hasta el archivo
  3. Abre Chrome DevTools
  4. En el panel Elementos, haz clic derecho en <html>... y selecciona Copiar outerHTML.
  5. Ese es el contenido que se indexará, no se almacenará en caché, se indexará.

En resumen, Googlebot recupera el HTML y Chrome lo renderiza. El HTML renderizado es oro. Asegúrate de que tu valioso contenido y enlaces aparezcan allí.

2 Me gusta
2

¿Cuál es el propósito de los pasos en “Conviértete en uno con Chrome”?

¿No podrías realizar el paso “Copiar outerHTML” en lugar del paso 7 de la primera lista?

3

Creo que también puedes obtenerlo con curl:

curl -s https://meta.discourse.org/ > page.html

(Contendrá las clases \"crawler\".)

Luego abre el archivo page.html en un navegador.

O para inspeccionar el código en un editor:

curl -s https://meta.discourse.org/ | vim -
2 Me gusta
4

El HTML en caché se renderiza en Chrome (sin cabeza). Cuando se renderiza, se puede introducir contenido y enlaces adicionales a través de JavaScript, en el DOM. Google tendrá en cuenta la información que renderiza para la indexación.

Así es como Googlebot obtiene contenido de aplicaciones con mucho JavaScript. Ve a Google y busca algo que sepas que renderiza contenido solo con JavaScript > haz clic en el icono de los 3 puntos > haz clic en el botón Caché > haz clic en Ver código fuente > cópialo y renderízalo en Chrome para ver qué contenido aparece en el DOM.

Nota: Actualiza cualquier ruta relativa (recursos CSS y JS) a rutas absolutas antes de renderizarla en Chrome ^^

5

¡Usar curl lo hace más fácil, genial!

Asegúrate de incluir la cadena de agente de usuario de Googlebot, por ejemplo, Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html). El servidor puede enviar a Googlebot un HTML diferente.

6

Creo que es la misma salida, pero no está de más añadir el user agent. No estoy seguro de Chrome, pero en Firefox puedes hacer clic derecho en la solicitud en la pestaña de red y elegir “copiar como curl” para obtener un conjunto completo de encabezados que imitarán una solicitud del navegador.