Tags in Mismiy

Here’s how tagging could work in Mismiy.

See the previous post for a typology of tagging.

How tags are added

Tags are supplied as part of the post metadata, as a list of strings.

title: March Comes in Like a Lion
author: Damian Cugley
tags:
    - anime
    - manga
    - shogi
    - Umino Chika

The terms can be multiple words, and can use upper and lower case. When filtering, capitalization and spaces will be ignored, so anime and Anime will match.

Navigating with tags

Now we need a way for the reader to see a list of posts (or pages) that have been tagged with a given tag. Since this is a static site, there are two main options:

1. Create an index page for each tag. These can have URL paths like tagged/anime.html and tagged/shogi.html. We can also use tagged/manga+shogi.html to allow for combinations of tags.

2. Have an index page that contains JavaScript to enable the user to search for tags and navigate to matching pages. This would be powered by a single JSON file listing all the tags and which pages they are associated with.

The first option is in some ways the simplest. It entails creating a large number of index pages (one per combination of tags with at least one page), but that is unlikely to be a problem. You have to be content with a user interface that mostly consists of following links between index pages.

The second option entails some fancy JavaScript programming, and also requires it to download the entire index so that it can present subsets of it to the user. With a large vocabulary the ability to let the user select tags by typing instead of scrolling through a long list will be attractive.

For now we will consider the first case.

Tagged index pages

If we have N distinct tags, that would seem to imply at least N index pages. If we want index pages for combinations of tags, there are 2^N combinations. That’s way too many pages. Luckily we don’t need a page for every possible combination, only those that will have a nonempty list of pages.

In a future update we could further reduce the number of pages by the following:

• Omitting index pages with a single post, replacing links to such an index with a link to the post. The link will need to be labelled in a way that does not cause confusion.
• Combining index pages that have the same set of posts. This happens when two tags are always used together—for example, if every post tagged Atom was also tagged RSS.

The first of these would helps if you have a lot of tags that are only used once, which is arguably not a very useful use of tags (but is usual on Tumblr). The second would help if you tag like a professional photographer is taught to do, giving multiple synonyms and variations on a given term for the sake of search optimization.

Leaving searching for tags by typing in search terms, the navigation using tags comes in three and a half forms:

• Pages & posts that are tagged link to the index pages for those tags.
• Tag pages link to narrowings: additional tags that reduce the number of matching pages. For example, a tag index for anime might have 111 pages, and link to the index page for anime + romance with 32.
• Tag pages link to widenings: tags that when removed from the combination increase the number of pages. For example, an index page for anime+romance with 32 pages might link to romance with 47.
• The index page, pages regardless of tags, can link to the single-tag pages, but this could be seen as a special case of narrowing (from 0 tags to 1).

The upshot of this is the reader can explore combinations of tags without ever finding a combination with no matching pages.

Formatting

The tag index pages are generated with a template named tagged.html, and are given paths prefixed with tagged/, to keep them tidied away from the other pages.

The narrowing and widening lists all use a TagInfo object that has label, href, and count fields.

The label for narrowing shows the tag being added. The label for widening shows the new combination of tags. This seems to be less confusing than the more symmetrical option of having it show just the tag being deleted from the combination.