What are tags?

Tags, for those who haven't yet been exposed to all of the Web 2.0 craze, are actually well-known in the realm of the "infogeeks" as "faceted classification". Tags are simple words or phrases that you attach to an item which describe particular facets of it. For example, I might be tagged as "human, male, guy, sailor, product manager, san franciscan, shaved head, tall, joke-cracking, six apartisan, stressed-out, geek". All of those tags together give a better picture of who I am.

In Movable Type 3.3, you have the ability to tag entries in the same way. Hence you might write an entry about this entry and tag it: "movable type 3.3, movable type, new release, beta, feature, tagging, entry tags". In doing so, you have provided extra metadata that can be used later by yourself or others to find this entry or other entries like it.

Movable Type 3.3's tags support automatic synonyms, which means the system knows that "Movable Type" is equivalent to "movabletype". Entries which share a particular tag are automatically associated with one another by the system. This makes it trivial to find related content either through the Movable Type interface or from your published blog.

Tags are input as a comma-separated list, allowing for tags with spaces, although you can specify a preference for space-delimited on your author profile. The entry's "Tags" field is enhanced with auto-completion to make use of previously used tags simple.

How are they different from keywords

• The tags field provides an enhanced input mechanism that the keywords field does not
• The keywords field is free-form whereas the tags field requires comma-delimited data
• The keywords field is searched in the normal public search. Tags are not.
• A special mode of the public search functionality, the "tag search", allows you to find entries with a particular tag.
• Keywords are output as a string by the MTEntryKeywords template tag. Entry tags are displayed by with a much more sophisticated and powerful set of tags.
• Keywords are settable via Quickpost and the Atom API. Tags input is not currently supported but is, like keywords, supported in the XML-RPC API.

How are they different from categories?

Tags are similar to categories in that they help you group, organize and find related entries. However, they do so in very different ways and discussion of those ways as well as how categories and tags can be used in concert fill up entire text books. The important things to note are the following:

• Model: Categories tend to be top-down organization like a table of contents whereas tags are bottom up like a book's index (Thanks to Elise for that one)
• Specificity: Categories are best when they are very broad and specificity is gained by dividing them into subcategories. Tags are best when they are very specific and specificity with tags is gained through combination (forming "tag intersections").
• Planning: Categories are best when planned in advance, relatively small in number and tend to be consistent over time. Tags are created on the fly and are based solely on the details of the item at hand.
• Archiving vs searching: In Movable Type, categories are archived into a limited set of distinct pages containing all of the entries in each category. Entries with a particular tag are also displayed together on a page but the pages are displayed dynamically due to the number of tags that will quickly exists for most blogs.

The choice of which you use (or both or neither) is completely up to you and is based solely on the content you produce and your ability or desire to create and enforce good top-down information architecture on your blog.

Adding and deleting entry tags

While creating or editing any entry, you can add tags to it. Assuming that you're showing all fields on your entry screen, scroll down past the entry body and extended entry to the bottom of the page. You should see the "Tags" field there, directly above the post status and text formatting controls.

If you do not see it, save the entry you are working on. After the page refreshes, click the link at the bottom of the page which says "Customize the display of this page". Select either a Custom entry interface with the /Tags/ field checked or the Advanced choice which will give you all available entry fields. Click Save and your entry interface will now show the Tags field and any other fields you specified.

Introduction to the tag field

When you add your first tags, the Tags field is just like the keywords field. Simply type your tags in as a comma-separated list. This form of input allows you to easily create tags containing multiple words and is compatible with localizations in any character set.

Although tags can contain just about anything other than commas, you should try to avoid using anything other than alphanumeric characters and basic punctuation (period, dash, apostrophe, etc) unless absolutely necessary. Once you have finished entering your tags, you can hit Save and continue.

Once you input your tags, the system creates a definitive normalized version of each one for the purposes of searching. This normalized version stored internally by the system allows for a variety of tag synonyms (e.g. "Movable Type", movabletype, movable type, movable_type or MovableType). Of course, tags are always displayed as you input them and it is only the search function that is affected by this normalized synonym.

For the curious, tags are normalized by removing the following characters:

@ ! ` \ < > * & # / ~ ? ' " . , = ( ) $ { } [ ] ; : <space> + -

Then, all remaining characters are lower-cased to create the end result. The only exception is that a leading ampersand (@) on any tag is preserved, as this is how private tags are designated. Private tags are never displayed on the published blog but can be used in searches both from the public search interface and within the admin interface.

Tab auto-completion

NOTE: This feature was introduced in Beta-2

To make entering tags easier, the tags field is enhanced with an auto-completion functionality. To trigger the auto-complete, type the first letter of a tag you previously used in another entry (but one which isn't in use on the current one). A dropdown will appear containing one or more tags that start with that letter. If there is only one you can simply hit the tab key to trigger auto-completion or continue typing.

If the letter you typed matched multiple tags, you will see a multiple select dropdown appear. Use your keyboard's up and down arrows to navigate through the selections. Once you have the right word highlighted, press the Tab key to complete the tag.

Of course, you don't have to just type a single letter. As you type, Movable Type will dynamically filter the list of matching tags until, at last, you type something that doesn't match and the dropdown will disappear. You can hit the Tab key at anytime in that process to trigger auto-completion.

If you make a mistake in typing at any point, you can hit the backspace key like normal. If, by doing so, you re-match a tag, the dropdown selection re-appears.

Managing entry tags for the blog and system

Movable Type's entry tags feature gives your site visitors another easy way to find interesting content within your blog and the entry tag input mechanism makes it simple to add tags to all of your entries. Given that, it's natural to imagine that the number of tags that you use will expand exponentially over time. Because of this, it's important to be able to view and manage these tags effortlessly.

You can do so on both the blog- and system-level and each section has basically the same features. Either in the system overview or anywhere in the blog management screen, look for the tags button on the left sidebar.

This button is your gateway to the entry tag listing screen (shown below). The tag listing screens show a paginated list of all tags used either on a particular blog or across all of them. On the right side of the listing is a count of entries with that tag assigned linked to a listing of those entries.

Deleting tags

To delete a tag, simply select the row or rows you wish to delete and click on the "Delete" button. You will be presented with a confirmation alert before the tags are deleted.

Renaming tags

To rename a tag, you click on the tag name itself. In the screenshot below, you'll see the yellow hover effect indicating that the text is editable.

Once you click on the tag, the tag name becomes an editable field. You can edit the tag and click on the Rename button to finish the operation or you can click on the Cancel button to abort.

Merging tags

As time goes on, you may want to rename a tag to the same name as another tag, merging their collections of entries. To do this, simply click on the tag, as above, and rename it to the same name as the second tag. You will be given a confirmation warning because once you merge two tags, they cannot be unmerged.

Displaying entry tags

To display entry tags, Movable Type 3.3 provides the following tags:

• MTTags
• MTTagName
• MTTagID
• MTTagCount
• MTTagRank
• MTTagSearchLink
• MTEntryTags
• MTEntryIfTagged

Displaying tags for an entry

Within an entry context (i.e. inside of an MTEntries block or on a individual entry archive), you can display the tags defined for a particular entry by using MTEntryTags container tag. Each entry tag is printed using the MTTagName template tag. You can provide a text string to tie them all together using the glue attribute.

<MTEntries>
    The entry "<$MTEntryTitle$>" is tagged:
        <MTEntryTags glue=", "><$MTTagName$></MTEntryTags>
</MTEntries>

MTTagName also supports two optional attributes: quote and normalize. quote returns any tag names containing spaces enclosed in double quotes. normalize returns the normalized synonym in use by the system for the particular tag (e.g. for "Movable Type" it would return "movabletype")

Testing for entry tags on an entry

Before attempting to print out the entry tag list, you're probably going to want to know whether or not an entry has tags in the first place. For this, you can use the MTEntryIfTagged conditional tag. As with all conditional template tags, you can use the MTElse block to print something out if the condition is false.

<MTEntries>
    The entry "<$MTEntryTitle$>"
        <MTEntryIfTagged>
            is tagged: <MTEntryTags glue=", "><$MTTagName$></MTEntryTags>
        <MTElse>
            has no entry tags.
        </MTElse>
        </MTEntryIfTagged>
</MTEntries>

Creating a link to a tag search

As mentioned in the chapter on tagging entries, Movable Type associates entries that are similarly tagged. It also provides a method, using the external search functionality, to find those associated entries. To link to a tag search for a particular tag, you use the MTTagSearchLink template tag. We'll enhance a portion of the code above with the tag search link:

<MTEntryTags glue=", ">
    <a href="<$MTTagSearchLink$>"><$MTTagName$></a></MTEntryTags>

Beautifying the tag search link URLs

Since the tag search is done using Movable Type's external search, the URLs are not what one might call pretty. Your typical MTTagSearchLink looks like this:

http://example.com/mt/mt-search.cgi?tag=politics&blog_id=1

If you're using Apache for your webserver, you can make them much nicer looking by using a Apache's built in URL rewriting engine.

http://example.com/tag/politics

Provided your server allows .htaccess overriding (note: most do), you can add the following code to the top of the .htaccess file in your blog's Site Root directory. You may need to create this file if it doesn't exist:

RewriteEngine on
RewriteRule tag/(.+) /mt/mt-search.cgi?tag=$1&blog_id=30

Then, you can link to tags inside of an MTTags or MTEntryTags loop using the following template code:

<a href="/tag/<$MTTagName encode_url="1"$>"><$MTTagName$></a>

Of course, if you're using a Movable Type Index template to create your .htaccess file, you can replace the hard-coded blog ID with <$MTBlogID$> and then simply use that same template code on all of your blogs.

Suppressing the display of certain tags

Of course, tags are not just for your site visitors. Because you can browse tags and the entries that contain them from inside the Movable Type administrative interface, you'll most likely end up using them for your own organizational benefit. At some point, you may use tags that you don't want published on your public blog. For this reason, Movable Type allows you to set any tag as private by adding an @ sign to the front of it. For example:

@competition

Private tags are never displayed on the public blog and are also completely ignored in a tag search.

Displaying an entry differently based on the presence/absence of a tag

When displaying your entries, you may want some to look different or contain extra information based on the presence or absence of a tag. To do this, you can using the MTEntryIfTagged template tag and its tag attribute:

<MTEntries>
    [...MTEntry data...]
    <MTEntryIfTagged tag="important">
        <p><img src="/movabletype/docs/3.2/images/gold_star.gif"
            alt="This is important!" /></p>
    </MTEntryIfTagged>
</MTEntries>

As with all conditionals and the MTEntryIfTagged example above, you can use an MTElse container tag to print out something in case the inverse is true.

Listing all of the tags used on your blog

You may wish to print out all of the tags used on your blog. There are a several ways to do this using the MTTags template tag, which is used to iterate through the tags. As opposed to the MTEntryTag* family, this only requires a blog context which is suitable for your sidebar or any blog template.

<ul>
    <MTTags>
    <li>
        <a href="<$MTTagSearchLink$>"><$MTTagName$></a>
    </li>
    </MTTags>
</ul>

The code above would print out a bulleted list of all tags used on your blog, linked to a tag search for each. In addition the the glue attribute (identical in usage that of MTEntryTags above) MTTags also supports an optional tags attribute which allows you to specify a comma-separated list of desired tags, potentially useful in generating a focused subset of your tags.

Please see the important performance-related note at the bottom of this entry regarding where these list are best placed for optimum performance.

Adding an entry count to a tag list

Movable Type provides you with the MTTagCount template tag which published a count of the entries associated with the tag in context.

<ul>
    <MTTags>
    <li>
        <a href="<$MTTagSearchLink$>"><$MTTagName$> (<$MTTagCount$>)</a>
    </li>
    </MTTags>
</ul>

Like the MTTagSearchLink and MTTagName tags, this tag can be used in an MTEntryTags context as well.

Displaying a "Tag Cloud"

One interesting visual representation of relative tag usage is a is a "tag cloud" similar to that of Flickr's "Popular tags" page where more frequently used tags are displayed in larger text. You can do this in Movable Type using the MTTagRank template tag which returns a number from 1 to 6 representing the tag's usage from most to least frequent (pneumonic: #1 tag).

Here's one example formatted appropriately for Movable Type's sidebar:

<div class="module-tagcloud module">
    <h2 class="module-header">Tag cloud</h2>
    <div class="module-content">
        <ul class="module-list">
            <MTTags>
                <li class="module-list-item taglevel<$MTTagRank$>">
                    <a href="<$MTTagSearchLink$>"><$MTTagName$></a>
                </li>
            </MTTags>
        </ul>
    </div>
</div>

For the code above, you might add the following CSS to your blog's stylesheet template:

.module-tagcloud .module-content {text-align: center; } .module-tagcloud .module-content .module-list { list-style: none; } .module-tagcloud .module-content .module-list .module-list-item { display: inline; } .module-tagcloud .module-content .module-list li.taglevel1 { font-size: 19px; } .module-tagcloud .module-content .module-list li.taglevel2 { font-size: 17px; } .module-tagcloud .module-content .module-list li.taglevel3 { font-size: 15px; } .module-tagcloud .module-content .module-list li.taglevel4 { font-size: 13px; } .module-tagcloud .module-content .module-list li.taglevel5 { font-size: 11px; } .module-tagcloud .module-content .module-list li.taglevel6 { font-size: 9px; }

The 1-6 rankings are also suitable for use with HTML headers ( where N is a number between 1 and 6), if you wanted to use those instead for more semantic relevance. You can change the span of the returned values with the max attribute. For example, if you wanted the ranking on a scale of 1-10, you would specify <$MTTagRank max="10"$>.

Displaying only entries with/without a particular tag

Like with categories, you can instruct Movable Type to only print out only entries in an MTEntries loop having (or not having) a particular tag or set of tags. This is done using the tag attribute:

<MTEntries tag="TAGNAME">
    [...]
</MTEntries>

Like the category attribute, you can use Boolean logic (i.e. AND, OR, NOT and parenthetical grouping) to add specificity. See the documentation for the MTEntries tag for more details. There are a couple of interesting uses for this that immediately come to mind.

Keeping an entry at the top of the main index

<!-- The "banner" entry -->
<MTEntries tag="Important" lastn="1">
    [...]
</MTEntries>

<!-- All other recent entries -->    
<MTEntries>
    [...]
</MTEntries>

Highlighting notable entries on your sidebar

<div class="module-archives module">
    <h2 class="module-header">Notable entries</h2>
    <div class="module-content">
        <ul class="module-list">
            <MTEntries lastn="5" tag="notable">
                <li class="module-list-item">
                    <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
                </li>
            </MTEntries>
        </ul>
    </div>
</div>

"Straight to archives" entries

Using the NOT operator in the tag attribute, you can suppress the publishing of particular entries, for example, on the main index while still having them published in the archives:

<MTEntries tag="NOT noindex">
    [...]
</MTEntries>

Including tag clouds on archive pages

As with any large repetitive lists that Movable Type must generate, we recommend against creating 'tag clouds' from within any of your archive templates (category/date-based/individual) since the compilation of the list of tags, tag ranks and counts for each archive file published increases publishing times. This is true whether you are using static publishing (in which you wait for the page to be built) or dynamic publishing (in which your many visitors all wait).

However, including tag clouds in index templates (for example, the sidebar of your main index and a special "tag cloud" index page) doesn't meaningfully impact publishing times since only one file is being built for each index template.

In fact, if you desired to put a tag cloud onto your archive pages, you can create the tag cloud using an index template and then include the template's output file via PHP or server-side includes (SSI) from within each archive template. In this way, Movable Type only does the work of creating the list once and you and your visitors will experience much better performance.

Summary

Whether your tagging entries for easier topical surfing or your using tags to give you more entry selection power on your published blog, I think you'll agree that there's a LOT to love about tags in Movable Type 3.3 and I hope that this has been enough information to get your mind racing with ways that you might want to use them on your own blogs.

If you come up with some novel and useful ones that we haven't covered here, We'd love to hear about it. In the meantime, get tagging!