IxDF Developer Docs

Appearance

What is Hyperlinking? ​

Reader: technical and non-technical staff

This doc contains mixed content for both devs and non-devs.

A hyperlink is an element in an HTML document that links to either another portion of the document or to another document altogether. On the IxDF site, hyperlinks are usually colored blue and are underlined.

How does a hyperlink look?

Example: https://cln.sh/DKGnur

1. Manual Hyperlinks ​

The editorial team creates links to other articles inside and outside of the IxDF platform.

2. Automated Hyperlinks (Hyperlink Algorithm) ​

We’ve developed an algorithm that generates links automatically based on existing tags.

We have tags related to every important topic, such as UX Design, Interaction Design, etc. You can find an overview of all the different topics here:

https://www.interaction-design.org/literature/topics

If the term UX Design appears in any of the articles, there is no need to manually add a link that leads to a topic definition page because the system will scan the text and replace the term with the appropriate hyperlink.

Automated Hyperlinking ​

General Limitations ​

  • We generate a maximum of 25 links per article.
  • Each tag (including its aliases) is only linked once.

Step by Step Description of the Algorithm ​

In this example, the maximum number of links per tag is 3.

  • Tags are fetched and ordered by popularity. We also fetch aliases for each tag. The resulting list may look like this: Tag1>Alias1>Alias2>Tag2>Alias3>Tag3>Tag4>Alias4....
  • Now we eliminate tags without a match in the content. The list is reduced to: Alias1>Alias2>Tag2>Tag3>Alias4.
  • We go through the tags and aliases from the list one by one. At first we try to make a maximum of 3 replacements using Alias1. Let’s assume we succeed to insert one link using Alias1. Let’s also assume both Alias1 and Alias2 belong to Tag1. That means Alias2 can be used to insert links a maximum of 2 times.
  • Following the same logic, Tag2 and Tag3 can be used to create links 3 times each. Tag2 is used to insert one link, and Tag3 is used to insert two links.
  • Alias4 (assuming it belongs to Tag3 which was used to insert two links) is linked once.
  • Once we hit the link per article limit, no further links will be inserted.

Identify Words in the Content ​

To be rendered as a link the detected word:

  • must match the tag name, the match is case-insensitive
  • must be preceded by a whitespace
  • can be followed by whitespace or punctuation (.?!,:;)
  • cannot be wrapped in a <a> or <h1-9> tag (so we don’t replace inside links or headlines)

In case a tag alias is matched, the link will lead to the parent tag.

The visible text in the link always retains its original casing: if you write 21St CenTury DesiGn in the article content, the link is rendered as 21St CenTury DesiGn.

On Article Save ​

The easiest way to test automated hyperlinking is to save an article with a phrase that matches a tag name; the result will be visible immediately.

Scheduled Tasks ​

On our live system we have scheduled automated tasks to update our articles and book chapters.

We don’t need to take any manual actions when tags or aliases are created, renamed or removed. The automatically generated links will NOT be immediately visible though.

  • The publication:article:hyperlink task is currently scheduled to run once a day at 0:23 UTC.
  • The publication:book-chapter:hyperlink task is currently scheduled to run once a day at 0:35 UTC.

Practical Example ​

Let’s consider an example of 21st century design tag.

21st century design

Explanation ​

In this example, the maximum number of links per tag is 1.

  • 21st century design is linked once
  • modern design is not linked, even though it is present twice (the parent tag is already linked)
  • removing all occurrences of 21st century design leads to modern design being linked once

Dive Deeper ​

The latest code related to this algorithm can be found on GitHub.

The hyperlinkTags method has the following signature:

php
function hyperlinkTags(string $content, int $maxHyperlinks = 25, int $maxRepetition = 1) {...}

Why Is It Good for SEO? ​

Our site uses an efficient system where all our pages are connected through related terms. This system strengthens the site’s search engine rankings by quickly and continuously building internal links between pages.

Hyperlinks help lead users deeper into the site.

When we offer clear explanations of topics on our site, it means readers don’t have to go searching elsewhere to understand what we’re discussing, even if it’s quite technical.

This approach helps readers grasp our content more easily, encouraging them to spend more time on the site. Search engines like Google also value user engagement. Ultimately, this strategy contributes to our goal of building the best possible UX-related resource and achieving our broader vision.