Saltar al contenido

¿Para qué sirve el shebang / hashbang (#!) En Facebook y las nuevas URL de Twitter?

Solución:

Esta técnica ahora está en desuso.

Esta solía hacerlo dígale a Google cómo indexar la página.

https://developers.google.com/webmasters/ajax-crawling/

Esta técnica ha sido reemplazada principalmente por la capacidad de utilizar la API de historial de JavaScript que se introdujo junto con HTML5. Para una URL como www.example.com/ajax.html#!key=value, Google comprobará la URL www.example.com/ajax.html?_escaped_fragment_=key=value para obtener una versión del contenido que no sea AJAX.

El octothorpe / number-sign / hashmark tiene un significado especial en una URL, normalmente identifica el nombre de una sección de un documento. El término exacto es que el texto que sigue al hash es el ancla parte de una URL. Si usa Wikipedia, verá que la mayoría de las páginas tienen una tabla de contenido y puede saltar a secciones dentro del documento con un ancla, como:

https://en.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test

https://en.wikipedia.org/wiki/Alan_Turing identifica la página y Early_computers_and_the_Turing_test es el ancla. La razón por la que Facebook y otras aplicaciones impulsadas por Javascript (como mi propia Wood & Stones) usan anclas es que quieren hacer que las páginas se puedan marcar (como sugiere un comentario en esa respuesta) o apoyar el botón Atrás sin recargar toda la página desde el servidor.

Para admitir los marcadores y el botón Atrás, debe cambiar la URL. Sin embargo, si cambia la parte de la página (con algo como window.location = 'http://raganwald.com';) a una URL diferente o sin especificar un ancla, el navegador cargará la página completa desde la URL. Pruebe esto en la consola de JavaScript de Firebug o Safari. Carga http://minimal-github.gilesb.com/raganwald. Ahora en la consola de Javascript, escriba:

window.location = 'http://minimal-github.gilesb.com/raganwald';

Verá que la página se actualiza desde el servidor. Ahora escriba:

window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';

¡Ajá! ¡Sin actualización de página! Escribe:

window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';

Todavía no hay actualización. Utilice el botón Atrás para ver que estas URL están en el historial del navegador. El navegador se da cuenta de que estamos en la misma página pero simplemente cambiando el ancla, por lo que no se vuelve a cargar. Gracias a este comportamiento, podemos tener una sola aplicación de Javascript que le parezca al navegador estar en una ‘página’ pero que tenga muchas secciones marcables que respeten el botón de retroceso. La aplicación debe cambiar el ancla cuando un usuario ingresa a diferentes ‘estados’, e igualmente si un usuario usa el botón de retroceso o un marcador o un enlace para cargar la aplicación con un ancla incluido, la aplicación debe restaurar el estado apropiado.

Así que ahí lo tienes: los anclajes proporcionan a los programadores de Javascript un mecanismo para crear aplicaciones que se puedan marcar, indexar y que se puedan usar con botones de retroceso. Esta técnica tiene un nombre: es una interfaz de una sola página.

ps Hay un cuarto beneficio de esta técnica: cargar el contenido de la página a través de AJAX y luego inyectarlo en el DOM actual puede ser mucho más rápido que cargar una nueva página. Además del aumento de velocidad, se pueden realizar más trucos como cargar ciertas partes en segundo plano bajo el control del programador.

pps Dado todo eso, el ‘bang’ o signo de exclamación es un indicio más para el rastreador web de Google de que se puede cargar exactamente la misma página desde el servidor en una URL ligeramente diferente. Consulte Ajax Crawling. Otra técnica es hacer que cada enlace apunte a una URL accesible al servidor y luego usar un Javascript discreto para convertirlo en un SPI con un ancla.

Aquí está el enlace clave nuevamente: El manifiesto de interfaz de una sola página

En primer lugar: soy el autor del Manifiesto de interfaz de una sola página citado por raganwald

Como ha explicado muy bien raganwald, el aspecto más importante del enfoque de interfaz de página única (SPI) utilizado en FaceBook y Twitter es el uso de hash # en URL

El personaje ! se agrega solo para los propósitos de Google, esta notación es un “estándar” de Google para rastrear sitios web con uso intensivo de AJAX (en el extremo, sitios web de interfaz de página única). Cuando el rastreador de Google encuentra una URL con #! sabe que existe una URL convencional alternativa que proporciona el mismo “estado” de página, pero en este caso en tiempo de carga.

A pesar de #! La combinación es muy interesante para SEO, solo es compatible con Google (hasta donde yo sé), con algunos trucos de JavaScript puedes construir sitios web SPI compatibles con SEO para cualquier rastreador web (Yahoo, Bing …).

El Manifiesto SPI y las demostraciones no utilizan el formato de Google de ! en hash, esta notación podría agregarse fácilmente y el rastreo de SPI podría ser aún más fácil (ACTUALIZAR: se usa la notación ¡ahora! y sigue siendo compatible con otros motores de búsqueda).

Eche un vistazo a este tutorial, es un ejemplo de un sitio simple de ItsNat SPI, pero puede elegir algunas ideas para otros marcos, este ejemplo es compatible con SEO para cualquier rastreador web.

El problema difícil es generar cualquier (o seleccionado) “estado de página AJAX” como HTML simple para SEO, en ItsNat es muy fácil y automático, el mismo sitio está al mismo tiempo SPI o página basada para SEO (o cuando JavaScript está deshabilitado para accesibilidad). Con otros marcos web, siempre puede seguir el enfoque de doble sitio, un sitio está basado en SPI y otra página basada en SEO, por ejemplo, Twitter utiliza esta técnica de “doble sitio”.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *