Contenido dinámico con capacidad de búsqueda con rastreo AJAX

 

 

 

  • ¡Registro!
  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX

  • Índice
    1. El problema con AJAX
    2. Dos URL para el mismo contenido
    3. Fragmentos de HTML
      1. Marcadores
      2. Sirviendo fragmentos
    4. Vinculándolo todo con un mapa del sitio
    5. Herramientas para webmasters de Google
    6. Crear URL bonitas con HTML5
    7. Encubierto
    8. Hash Bang es un poco feo, pero funciona
      1. Otros recursos
      2. Otras lecturas

    Google necesita una forma de permitirle ofrecer contenido AJAX a los navegadores y al mismo tiempo ofrecer HTML simple a los rastreadores. En otras palabras, necesitas el mismo contenido en múltiples formatos. Obtenga más información en este artículo.

     

    A la Búsqueda de Google le gustan los sitios web sencillos y fáciles de rastrear. Te gustan los sitios web dinámicos que muestran tu trabajo y que realmente destacan. Pero los motores de búsqueda no pueden ejecutar JavaScript. Esa genial rutina AJAX que carga tu contenido está dañando tu SEO.

    Los robots de Google analizan HTML con facilidad; pueden separar documentos de Word, PDF e incluso imágenes de los rincones más alejados de su sitio web. Pero en lo que a ellos respecta, el contenido AJAX es invisible.

    El problema con AJAX

    AJAX ha revolucionado la Web, pero también ha ocultado su contenido. Si tiene una cuenta de Twitter, intente ver la fuente de su página de perfil. No hay tweets allí, ¡solo código! Casi todo lo que hay en una página de Twitter se construye dinámicamente a través de JavaScript y los rastreadores no pueden ver nada de eso. Por eso Google desarrolló el rastreo AJAX.

     

    Como Google no puede obtener contenido dinámico de HTML, deberá proporcionarlo de otra manera. Pero hay dos grandes problemas: Google no ejecuta su JavaScript y no confía en usted.

    Google indexa toda la Web, pero no ejecuta JavaScript. Los sitios web modernos son pequeñas aplicaciones que se ejecutan en el navegador, pero ejecutar esas aplicaciones mientras se indexan es demasiado lento para Google y todos los demás.

    El problema de la confianza es más complicado. Todo sitio web quiere aparecer primero en los resultados de búsqueda; su sitio web compite con el de todos los demás por la primera posición. Google no puede simplemente brindarle una API para devolver su contenido porque algunos sitios web usan trucos sucios como el encubrimiento para intentar obtener una clasificación más alta. Los motores de búsqueda no pueden confiar en que usted hará lo correcto.

    Google necesita una forma de permitirle ofrecer contenido AJAX a los navegadores y al mismo tiempo ofrecer HTML simple a los rastreadores. En otras palabras, necesitas el mismo contenido en múltiples formatos.

    Dos URL para el mismo contenido

    Comencemos con un ejemplo simple. Soy parte de un proyecto de código abierto llamado Spiffy UI. Es un marco de Google Web Toolkit (GWT) para REST y desarrollo rápido. Queríamos mostrar nuestro marco, así que creamos SpiffyUI.org usando GWT.

    GWT es un marco dinámico que coloca todo nuestro contenido en JavaScript. Nuestro index.htmlarchivo se ve así:

    body script type="text/javascript" language="javascript" src="org.spiffyui.spsample.index.nocache.js"/script/body

    Todo se agrega a la página con JavaScript y controlamos nuestro contenido con etiquetas hash (explicaré por qué un poco más adelante). Cada vez que pasa a otra página de nuestra aplicación, obtiene una nueva etiqueta hash. Haga clic en el enlace "CSS" y terminará aquí:

    https://www.spiffyui.org#css

    La URL en la barra de direcciones tendrá este aspecto en la mayoría de los navegadores:

    https://www.spiffyui.org/?css

    Lo hemos arreglado con HTML5. Te mostraré cómo más adelante en este artículo.

    Este hash simple funciona bien para nuestra aplicación y hace que se pueda marcar como favorito, pero no se puede rastrear. Google no sabe qué significa una etiqueta hash ni cómo obtener su contenido, pero proporciona un método alternativo para que un sitio web devuelva contenido. Entonces, le hacemos saber a Google que nuestro hash es en realidad código JavaScript en lugar de solo un ancla en la página agregando un signo de exclamación (un "bang"), como este:

    https://www.spiffyui.org#!css

    Este hash bang es la salsa secreta de todo el esquema de rastreo de AJAX. Cuando Google ve estos dos caracteres juntos, sabe que JavaScript oculta más contenido. Nos da la oportunidad de devolver el contenido completo realizando una segunda solicitud a una URL especial:

     

    https://www.spiffyui.org?_escaped_fragment_=css

    La nueva URL ha reemplazado #!por . Es importante utilizar un parámetro de URL en lugar de una etiqueta hash, porque los parámetros se envían al servidor, mientras que las etiquetas hash solo están disponibles para el navegador.?_escapedfragment=

    Esa nueva URL nos permite devolver el mismo contenido en formato HTML cuando el rastreador de Google lo solicita. ¿Confundido? Veamos cómo funciona, paso a paso.

    Fragmentos de HTML

    Toda la página se representa en JavaScript. Necesitábamos convertir ese contenido en HTML para que Google pudiera acceder a él. El primer paso fue separar SpiffyUI.org en fragmentos de HTML.

    Google todavía piensa en un sitio web como un conjunto de páginas, por lo que necesitábamos ofrecer nuestro contenido de esa manera. Esto fue bastante fácil con nuestra aplicación, porque tenemos un conjunto de páginas y cada una es una sección lógica separada. El primer paso fue hacer que las páginas se pudieran marcar como favoritas.

    Marcadores

    La mayoría de las veces, JavaScript simplemente cambia algo dentro de la página: cuando haces clic en ese botón o abres ese panel, la URL de la página no cambia. Eso está bien para páginas simples, pero cuando ofrece contenido a través de JavaScript, desea brindar a los usuarios URL únicas para que puedan marcar ciertas áreas de su aplicación.

    Las aplicaciones JavaScript pueden cambiar la URL de la página actual, por lo que normalmente admiten marcadores mediante la adición de etiquetas hash. Las etiquetas hash funcionan mejor que cualquier otro mecanismo de URL porque no se envían al servidor; son la única parte de la URL que se puede cambiar sin tener que actualizar la página.

    La etiqueta hash es esencialmente un valor que tiene sentido en el contexto de su aplicación. Elija una etiqueta que sea lógica para el área de su aplicación que representa y agréguela al hash de esta manera:

    https://www.spiffyui.org#css

    Cuando un usuario accede nuevamente a esta URL, usamos JavaScript para leer la etiqueta hash y enviar al usuario a la página que contiene el CSS.

    Puedes elegir lo que quieras para tu etiqueta hash, pero intenta que sea legible, porque los usuarios la verán. Le damos a nuestras etiquetas hashes csscomo resty security.

    Debido a que puedes nombrar la etiqueta hash como quieras, agregarle un toque extra a Google es fácil. Simplemente deslízalo entre el hash y la etiqueta, así:

    https://www.spiffyui.org#!css

    Puede administrar todas sus etiquetas hash manualmente, pero la mayoría de los marcos de historial de JavaScript lo harán por usted. Todos los complementos que admiten HTML4 utilizan etiquetas hash y muchos de ellos tienen opciones para marcar las URL como favoritas. Usamos History.js de Ben Lupton . Es fácil de usar, es de código abierto y tiene un excelente soporte para la integración del historial HTML5. Hablaremos más sobre eso en breve. Horoscopos y tarot de amor

    Sirviendo fragmentos

    La etiqueta hash hace que una aplicación se pueda marcar como favorita y el bang la hace rastreable. Ahora Google puede solicitar URL de fragmentos de escape especiales como esta:

    Cuando el rastreador accede a nuestra fea URL, debemos devolver HTML simple. No podemos manejar eso en JavaScript porque el rastreador no ejecuta JavaScript en el rastreador. Entonces, todo tiene que venir del servidor.

     

    Puede implementar su servidor en PHP, Ruby o cualquier otro lenguaje, siempre que entregue HTML. SpiffyUI.org es una aplicación Java, por lo que entregamos nuestro contenido con un servlet Java .

    El fragmento escapado nos dice qué servir y el servlet nos da un lugar desde donde servirlo. Ahora necesitamos el contenido real.

    Lograr que el contenido se publique es complicado. La mayoría de las aplicaciones mezclan el contenido con el código; pero no queremos analizar el texto legible fuera de JavaScript. Afortunadamente, Spiffy UI tiene un mecanismo de plantillas HTML. Las plantillas están integradas en JavaScript pero también incluidas en el servidor. Cuando el fragmento escapado busca el ID css, sólo tenemos que servir CSSPanel.html.

    La plantilla sin ningún estilo parece muy sencilla, pero Google sólo necesita el contenido. Los usuarios ven nuestra página con todos los estilos y características dinámicas:

    Google obtiene sólo la versión sin estilo:

    Puede ver todo el código fuente de nuestro SiteMapServlet.javaservlet. Este servlet es principalmente una tabla de búsqueda que toma una identificación y muestra el contenido asociado desde algún lugar de nuestro servidor. Se llama así SiteMapServlet.javaporque esta clase también maneja la generación de nuestro mapa del sitio.

    Vinculándolo todo con un mapa del sitio

    Nuestro mapa del sitio le dice al rastreador qué está disponible en nuestra aplicación. Cada sitio web debe tener un mapa del sitio; El rastreo AJAX no funciona sin uno.

    Los mapas del sitio son documentos XML simples que enumeran las URL de una aplicación. También pueden incluir datos sobre la prioridad y frecuencia de actualización de las páginas de la aplicación. Las entradas normales para mapas de sitios tienen este aspecto:

    url lochttps://www.spiffyui.org//loc lastmod2011-07-26/lastmod changefreqdaily/changefreq priority1.0/priority/url

    Nuestras entradas rastreables por AJAX se ven así:

    url lochttps://www.spiffyui.org/#!css/loc lastmod2011-07-26/lastmod changefreqdaily/changefreq priority0.8/priority/url

    El hash bang le dice a Google que se trata de un fragmento escapado y que el resto funciona como cualquier otra página. Puede mezclar y combinar URL AJAX y URL normales, y puede utilizar solo un mapa del sitio para todo.

    Podrías escribir el mapa de tu sitio a mano, pero existen herramientas que te ahorrarán mucho tiempo. La clave es formatear bien el mapa del sitio y enviarlo a las Herramientas para webmasters de Google.

    Herramientas para webmasters de Google

    Las Herramientas para webmasters de Google le brindan la oportunidad de informarle a Google sobre su sitio web. Inicie sesión con su ID de Google o cree una nueva cuenta y luego verifique su sitio web.

    Una vez que haya verificado, puede enviar el mapa de su sitio y luego Google comenzará a indexar sus URL.

    Y luego esperas. Esta parte es enloquecedora. SpiffyUI.org tardó aproximadamente dos semanas en aparecer correctamente en la Búsqueda de Google. Publiqué en los foros de ayuda media docena de veces, pensando que no funcionaba.

     

    No existe una manera fácil de asegurarse de que todo esté funcionando, pero existen algunas herramientas que lo ayudarán a ver lo que está sucediendo. El mejor es Explorar como Googlebot , que le muestra exactamente lo que ve Google cuando rastrea su sitio web. Puede acceder a él en su panel de Herramientas para webmasters de Google en "Diagnóstico".

    Ingrese una URL hash bang de su sitio web y haga clic en "Obtener". Google le dirá si la búsqueda se realizó correctamente y, si es así, le mostrará el contenido que ve.

    Si Explorar como Googlebot funciona como se esperaba, entonces estás devolviendo las URL de escape correctamente. Pero deberías comprobar algunas cosas más:

    • Valide el mapa de su sitio .
    • Pruebe manualmente las URL en el mapa de su sitio. Asegúrate de probar las versiones hash-bang y escape.
    • Verifique el resultado de Google para su sitio web buscando site:www.yoursite.com.

    Crear URL bonitas con HTML5

    Twitter deja el hash bang visible en sus URL, así:

    https://twitter.com/#!/ZackGrossbart

    Esto funciona bien para el rastreo de AJAX, pero nuevamente, es un poco feo. Puedes hacer que tus URL sean más bonitas integrando el historial HTML5.

    Spiffy UI utiliza la integración del historial HTML5 para convertir una URL hash-bang como esta...

    https://www.spiffyui.org#!css

    … en una bonita URL como esta:

    https://www.spiffyui.org?css

    El historial de HTML5 permite cambiar este parámetro de URL, porque la etiqueta hash es la única parte de la URL que puede cambiar en HTML4. Si cambia algo más, se recarga toda la página. El historial de HTML5 cambia la URL completa sin actualizar la página y podemos hacer que la URL tenga el aspecto que queramos.

    Esta URL más agradable funciona en nuestra aplicación, pero aún incluimos la versión hash-bang en el mapa de nuestro sitio. Y cuando los navegadores acceden a la URL hash-bang, la cambiamos por una más agradable con un poco de JavaScript.

    Encubierto

    Antes mencioné el encubrimiento. Es la práctica de intentar mejorar la clasificación de un sitio web en los resultados de búsqueda mostrando un conjunto de páginas a Google y otro a los navegadores habituales. A Google no le gusta el encubrimiento y puede eliminar los sitios web ofensivos de su índice de búsqueda .

    Las aplicaciones de rastreo AJAX siempre muestran resultados diferentes a Google que a los navegadores normales, pero no son encubrimiento si los fragmentos HTML contienen el mismo contenido que el usuario vería en el navegador. El verdadero misterio es cómo Google puede saber si un sitio web está encubierto o no; Los rastreadores no pueden comparar contenido mediante programación porque no ejecutan JavaScript. Todo es parte del poder Googley de Google.

    Independientemente de cómo se detecte, el encubrimiento es una mala idea. Es posible que no te atrapen, pero si lo haces, serás eliminado del índice de búsqueda.

    Hash Bang es un poco feo, pero funciona

    Soy ingeniero y mi primera respuesta a este plan es "¡Qué asco!". Simplemente se siente mal; Estamos deformando el propósito de las URL y confiando en hilos mágicos. Pero entiendo de dónde viene Google; el problema es extremadamente difícil. Los motores de búsqueda necesitan obtener información útil de fuentes inherentemente no confiables: nosotros.

    Hash bangs no debería reemplazar todas las URL de la Web. Algunos sitios web han tenido serios problemas con las URL hash-bang porque dependen de JavaScript para ofrecer contenido. Las páginas simples no necesitan hash bangs, pero las páginas AJAX sí. Las URL se ven un poco feas, pero puedes solucionarlo con HTML5.

    Otros recursos

    Hemos cubierto mucho en este artículo. Admitir el rastreo de AJAX significa que necesita cambiar el código de su cliente y el código de su servidor. Aquí hay algunos enlaces para obtener más información:

    • " Hacer que las aplicaciones AJAX sean rastreables ", Google Code
    • mapas del sitio.org
    • Herramientas para webmasters de Google
    • Código fuente de UI elegante , con un ejemplo completo de rastreo AJAX.

    Gracias a Kristen Riley por su ayuda con algunas de las imágenes de este artículo.

    Otras lecturas

    • Aprender JavaScript: conceptos básicos y pautas
    • Por qué AJAX no es suficiente
    • Representación del lado del servidor con React, Node y Express
    • Una guía para principiantes sobre clientes API JSON basados ​​en jQuery

    (al, señor)Explora más en

    • Codificación
    • SEO
    • AJAX
    • javascript
    • Técnicas





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Contenido dinámico con capacidad de búsqueda con rastreo AJAX

    Contenido dinámico con capacidad de búsqueda con rastreo AJAX

    ¡Registro! Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX Índice El probl

    programar

    es

    https://aprendeprogramando.es/static/images/programar-contenido-dinamico-con-capacidad-de-busqueda-con-rastreo-ajax-779-0.jpg

    2024-05-20

     

    Contenido dinámico con capacidad de búsqueda con rastreo AJAX
    Contenido dinámico con capacidad de búsqueda con rastreo AJAX

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20