Digamos que tengo dos páginas web page1 y page2 . Ahora, me gustaría tener una animación (usando la transición css) para transformar page1 en page2 o page2 en la page1 si el usuario page1 de la página 1 a la page2 o de page2 a la page1 respectivamente. Además, me gustaría que los buscadores pudieran encontrar ambas páginas.
Use en realidad solo una página page.html con hashes: page.html#page1 y page.html#page2 . Por ejemplo, al escuchar un evento de cambio de hashchange , la transición se puede realizar fácilmente.
Use los parámetros: page.html?content=page1 y page.html?content=page2 . Se puede evitar una recarga completa de la página mediante el método preventDefault o history.pushState .
Hasta donde yo sé, en la primera solución, los motores de búsqueda no mostrarán mis páginas como enlaces separados. Además, ambas soluciones tienen el siguiente problema principal: ¿Qué sucede si alguien escribe simplemente page.html en el campo de dirección del navegador o, peor aún, aparece page.html como un enlace en los resultados de búsqueda? Realmente me gustaría que page.html no exista en absoluto, pero eso parece imposible dadas las soluciones anteriores.
Entonces, la mejor solución que se me ocurrió hasta ahora es tener dos páginas page1.html y page2.html que tengan exactamente el mismo contenido (es decir, el contenido de ambas páginas combinado). Por ejemplo, en page1.html , el contenido de page2 tendría la propiedad display: none . Ahora, cuando un usuario navega de la página 1 a la page2 , uso page1 para configurar la nueva URL history.pushState Si bien creo que, en principio, esto debería funcionar, me preocupa tener dos páginas idénticas u ocultar grandes cantidades de una página mediante display: none , ya que se supone que ambas son malas para el SEO.
¡Cualquier respuesta que aborde al menos parte de mi problema es muy bienvenida! ¿Tal vez haya una manera de al menos evitar que los motores de búsqueda encuentren page.html en mi segunda solución? ¿O tal vez hay una solución que desconozco por completo?
Su forma history.pushState está bien. Una vez que un usuario visita la página a , precargue la página b con JavaScript y podrá aplicar sus transiciones CSS de esa manera. Podrías hacer algo como:
(async () => { const page2 = await fetch("/page2.html"); const text = page2.text(); // dummy event listener and selector document.querySelector('a[href="/page2.html"]').addEventListener("click", e => { e.preventDefault(); // apply CSS transitions by adding classes or whatever document.documentElement.innerHTML = text; history.pushState(null, null, "/page2.html"); }); })();De esta manera, no tiene que cambiar nada de su HTML o CSS y el SEO no se verá afectado. Esto también puede mejorar su UX al reducir los tiempos de carga a otras páginas, algo así como lo que hace React Router o NextJS.