Redireccionar página después de un tiempo.

Esta publicación fue actualizada el 13 de junio de 2023.

Actualización al final de la entrada ↓

Me solicitaron instalar el Plugin Mailpoet para la implementación de un boletín, eso no era problema.

Lo que me solicitaron después fue, que la página de confirmación de suscripción al boletín, se pudiera redireccionar automáticamente a la pagina principal del sitio, pasado algunos segundos.

Lo primero que se me vino a la cabeza fue:

<meta http-equiiv=refresh content="6; url=/http://misitio.com/">

Pero, recordé haber leído que la etiqueta “meta fresh” ya no se usa y que su uso no es beneficioso para nuestro SEO.

Luego de varias pruebas y con ayuda de Woody Snippets encontré la solución con el siguiente código:

<?php 
  header( "refresh:5;url=https://misitio.com" ); 
  echo 'Serás redireccionado en algunos segundos, si estás apurado has clic <a href="https://misitio.com">aquí</a>.';
?>

–

El sitio estaba maquetado con Elementor, así que he ido a Woody Snippets, he agregado el código, dejando seleccionada la opción “Donde hay un shortcode“.

Luego inserte el shortcode en la página que está definida a la hora de confirmar la suscripción de Mailpoet y listo. Ahora cada vez que alguien se da de alta en el boletín, llega a la página de confirmación y luego es redireccionado a la página principal de la web,

A penas lo implemente en este sitio dejaré el formulario de registro a nuestro boletín!

–

Actualización: Finalmente Google igual castiga la redirección con el código indicado más arriba. La solución ha sido poner una mensaje emergente con un enlace a la página principal. Puedes ver las instrucciones de más arriba para incorporar el código con Woody Snippets.

<style>
    /* Estilos para el rectángulo */
    #mensaje {
        position: fixed;
        top: 50%;
        left: 100%; /* Inicialmente, el mensaje está oculto fuera de la pantalla a la derecha */
        transform: translateX(-50%);
        background-color: black;
        color: white;
        padding: 20px;
        font-family: 'Cabin', sans-serif;
        opacity: 0; /* Inicialmente, el mensaje está oculto */
        animation: slideIn 1s forwards; /* Aplica la animación de aparición desde la derecha */
        display: flex; /* Muestra los elementos en línea */
        align-items: center; /* Centra verticalmente los elementos */
    }

    /* Estilos para la flecha */
    .flecha {
        margin-right: 20px; /* Espacio entre la flecha y el texto */
        font-size: 20px;
        cursor: pointer; /* Cambia el cursor al hacer hover */
    }

    /* Animación de aparición desde la derecha */
    @keyframes slideIn {
        0% {
            left: 100%;
            opacity: 0;
        }
        100% {
            left: 50%;
            opacity: 1;
        }
    }
</style>

<script type="text/javascript">
    // Función para mostrar el mensaje con el enlace
    function mostrarMensaje() {
        // Crea un elemento de enlace
        var enlace = document.createElement("a");
        enlace.href = "https://www.ejemplo.com"; // URL del enlace
        enlace.innerHTML = "Vamos a la página principal!"; // Texto del enlace

        // Crea un elemento de span para la flecha
        var flecha = document.createElement("span");
        flecha.classList.add("flecha");
        flecha.innerHTML = '<i class="fas fa-arrow-left"></i>'; // Icono de flecha Font Awesome
        flecha.addEventListener("click", function() {
            window.location.href = "https://www.ejemplo.com"; // Redirige al mismo enlace al hacer clic en la flecha
        });

        // Crea un elemento de div para contener la flecha y el mensaje
        var mensaje = document.createElement("div");
        mensaje.id = "mensaje";
        mensaje.appendChild(flecha);
        mensaje.appendChild(enlace);

        // Agrega el mensaje al cuerpo de la página
        document.body.appendChild(mensaje);
    }

    // Espera 3 segundos antes de llamar a la función para mostrar el mensaje
    setTimeout(mostrarMensaje, 3000);
</script>

Y para probarlo, subscribete a nuestro boletín y luego confirma tu suscripción.