Go back

Web rings

Introduction

A “ Web ring ” can be defined as a collection, a list of websites, generally sharing the same theme. Each site in the list must reserve a space to redirect the user to the previous site in the list, the next site and the web ring index.

Diagram showing the structure of a webring. Each site is linked to another in circular form.

In addition to the fun of going from page to page, from one universe to another without knowing what's coming next, web rings also aim to improve referencing. This is probably less the case today, but there was a time when search algorithms didn't exist and the only way to be seen was to be part of a website containing a list of websites dealing with your subject.

These webrings often take the form of small rectangles placed in the footer or navigation area:

Web ring example. Web ring example. Web ring example.

But in some cases, the site can even dedicate an entire section to webrings (yes, you can belong to several web rings at the same time).

A website page showing a list of webrings.
Source

Technical considerations

Anatomy of a webring

How to create a webring? You need at least three elements:

  1. An index page describing the theme of the webring, the conditions for joining and possibly a list of included sites.
  2. Some sites to be included in the webring (a set of of members).
  3. Two endpoints: one pointing to the previous site of the webring and the other to the next site.

As you might expect, the third point is the most complicated: generating an endpoint for the next site and for the previous site. You also have to bear in mind that the size of the web ring is variable. Therefore, it's unreasonable to ask members to hard-code the appropriate endpoints for each change; they have to be managed automatically. Several tools exist for setting up a web ring, but for the sake of simplicity I think it's possible to manage this manually. I suggest you explore two approaches.

Retrieving data via an HTTP request

With this approach, you will need to host a JSON file on a central site containing the list of sites: 

{
    "sites": [
        "https://site1.com",
        "https://site2.com",
        "https://site3.com"
    ]
}
ICON
Warning

Don't forget to define the appropriate CORS headers on your central server to allow resource sharing between multiple origins.

Once this has been done, you then need to make a request to this JSON file and update the links in the HTML. I won't go into detail about this step, which may vary depending on the tool you're using (pure HTML, front-end framework, static site generator, etc.)

Using serverless functions

While exploring GitHub I also saw that it was possible to create a webring using serverless functions (see repository ). I haven't had the time to test this solution but here's a broad outline of the logic:

  1. Creation of a central Netlify project containing a JSON file listing the various sites (in the /data/sites.json directory in the repository mentioned).
  2. The lambda function will create three endpoints: /next, /previous, and /random.
  3. Webring member sites will be able to use these endpoints to redirect users to the appropriate site.

Collection

You'll find a fairly comprehensive directory here if you want to discover some webrings: https://brisray.com/web/webring-list.htm