(meta) Redirects

Important things have been moved.

astroredirectsgetStaticPathsdefine:vars

Table of Contents

Managing your Redirects

Creating a catch-all rule in Astro

Front-matter

HTML

Minimal version

Nuance

Better approach

Bad Rep

This approach uses client-side redirects by using a

<meta http-equiv="refresh" content="0;url=new-url" />

tag in the document head

The content portion of the meta-tag is made up of two parts. The first part (a number) specifies the amount of seconds the browser should wait before applying the redirect. The second part specifies the new url to push the user to.

Managing your Redirects

I have placed my redirect data into the following JSON file:

/*  /public/data/redirects.json  */
{
  "entries": [
    {
      "from": "poke",
      "to": "/pokemon/list"
    },
    {
      "from": "test-redirect",
      "to": "/blog/redirects#managing-your-redirects",
      "seconds": 5
    },
    ...
  ]
}

It’s a list of objects with properties from, to, and seconds.

seconds is used to allow some time for the client-redirect to occur, and we will see a count-down implementation later on.

The meta tag allows for specifying a value in seconds that the browser will wait before actually applying the redirect.

Try it out! /test-redirect You should return to this section after 5 seconds.

Creating a catch-all rule in Astro

I have created astro page […redirs].astro in /src/pages

I placed my redirects.json file in the /public/data folder.

And the contents of my page are:

/*  /src/pages/[...redirs].astro  */
---
import redirects from './../../public/data/redirects.json';

export async function getStaticPaths() {
    let ary = [];
    redirects.entries.forEach((entry) => {
        ary.push({
            params: { redirs: entry.from },
            props: { to: entry.to, seconds: entry.seconds }
        });
    });
    return ary;
}

let seconds = Astro.props.seconds || 0;
let to = Astro.props.to;
let content = `${seconds};url=${to}`;

---
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="refresh" content={content} />
  <style>
   * {font-family:arial;} 
   .msg {margin:20px auto;max-width:400px;border-radius:10px;background:#cdf;padding:20px;text-align:center;}
  </style>
 </head>
 <body>
  <div class="msg">
   Redirecting in <span id="time-left">{seconds}</span>...
   <br/><br/>&gt; <small>{to}</small>
  </div>
  <script type="text/javascript" define:vars={{seconds}}>
   function update() {
    seconds -= 1;
    document.getElementById('time-left').innerText = seconds;
   }
   setInterval(update, 1000);
  </script>
 </body>
</html>

Front-matter

The front-matter section imports the JSON data, and is used in the getStaticPaths() function to generate a page per redirect entry.

The static paths contain the following props:

to - the page we are forwarding the user to.
seconds - the time the browser will wait before applying the redirect.

HTML

The html section contains:

head
- the meta refresh tag
- some styling
body
- a message for the user, including where they are being redirected
- a counter displaying the seconds remaining for the redirect
- the javascript that creates the countdown effect

Minimal version

Here is a minimal no whistles version for 0 second redirects:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="refresh" content={content} />
 </head>
</html>

Nuance

During development in Astro, the catch-all rule will take over any 404s.
The expected behavior will work on a built site.

Better approach

Use server-side redirects when you can.

Use server-side 301 Redirects for permanent moves
Use server-side 302 Redirects for temporary moves

Bad Rep

Here is some more information I collected while researching

https://www.contentkingapp.com/academy/redirects/faq/html-meta-redirect/
- Search engines are slow to pick up on them than they would on 301 redirects, because they need to parse the HTML to find the HTML redirect.
- There’s no guarantee the redirect is picked up correctly, therefore it’s unsure if you’ll see the same amount of authority being passed on as you’d see with a 301 redirect.
- HTML redirects make for a slower user experience than for instance a 301 redirect.
https://help.ahrefs.com/en/articles/2433739-what-is-meta-refresh-redirect-and-why-is-it-considered-a-critical-issue
- it can disorientate and confuse users. For example, if redirect happens too quickly (within 2-3 seconds), users of some browsers cannot click “Back” button; or if user experiences refresh he/she didn’t initiate, one may get concerned about your website’s security;
- meta refresh redirects are quite often used by spammers to fool search engines, so if you use this option quite often, search engines may consider your site being spam and remove it from their index;

Reactions:

Back to Post List