hashtags

 hashtags  are the use of the hash "#" symbol followed immediately by a word/phrase/abbreviation to explicitly denote a topic inline in a post. Popularized on Twitter, they're now everpresent on Instagram and other silos where they link to aggregations of posts inside those silos with those tags.

This page is specifically about hashtags the specific concept, how to implement, examples on sites. For related pages, see:
 * Category:hashtags — for notable IndieWeb related hashtags documented on the wiki
 * tags — for the general concept of tags and tagging content
 * tag page — for the page displayed when you click on a hashtag
 * tags page — a page showing all the tags used by a particular person / profile

Markup
Mark up hashtags inside an  with.

Also use  on hashtag links that apply to an entire page.

Discovery
How do we discover indieweb posts tagged with a particular tag? It’s a problem well suited to centralised hubs.

Aaron Parecki
Aaron Parecki uses p3k on aaronparecki.com to auto-link hashtags on his posts to his own tag aggregation page since 2013-03-08.

Barnaby Walters
Barnaby Walters uses Taproot on waterpigs.co.uk to auto-link to a /tags page containing a list of links to content which is tagged with that tag (as per hypermedia API design, example) since 2012-09-22. This probably needs some js/iframe goodness to pull that content in --Waterpigs.co.uk 05:57, 19 April 2013 (PDT)

Tantek
undefined has published automatically marked up hashtags since 2016-01-26, and autolinked hashtags since 2023-080 (backdated implementation for all posts in 2023 and later).
 * http://tantek.com/2016/002/t2/change-clothing-inspired-tomorrowland
 * note markup in source:  generated by Falcon’s   function.
 * https://tantek.com/2023/081/t1/mozfest-making-fediverse-socialweb first post after implementing auto-linked hashtags

Implementation notes:
 * initial (non-linked) regex used:

Jamie Tanna
uses hashtags in his posts to tags on the post itself, so it can be used to categorise his content more easily. This has the added benefit of owning Twitter-specific interactions if using a certain hashtag. Since 2020-01-13, see a recent example with auto-linked hashtags

Jamie has written about this more at https://www.jvt.me/posts/2021/12/08/owning-hashtags/

gRegor Morrill
uses hashtags with  microformats on articles since 2019-11-01. They are not currently linked to a tag aggregation page for similar posts.
 * https://gregorlove.com/2019/11/oh-its-november/

Note in the markup the # is outside the p-category:

Sometime in late 2022 I started displaying hashtags similarly on notes. A recent example:
 * https://gregorlove.com/2023/02/covid-transmission-is-still-high/

Autolinking hashtags
Where should hashtags in posts be auto-linked to?

Link them to a page on your site which aggregates posts tagged with that tag. It’s fine for this to just redirect to, for example, a google search of your site for that tag, but by always linking to a URL you control you can improve it/self-host it later.

Blog Aggregators
There are some blog aggregators that show posts from other sites with a particular hashtag.


 * Dev.to, e.g.
 * https://dev.to/t/indieweb
 * https://dev.to/t/webmentions,

Silo Examples
Silos that support (hash)tag aggregation on their own content.

Flickr
Flickr - photos (and videos, but they don't play on tag aggregation pages, so effectively they're just images as well - poster-images from videos), e.g.:
 * https://flickr.com/photos/tags/indieweb
 * https://flickr.com/photos/tags/cortexiphan

Twitter
Twitter - notes (with embedded media), e.g.
 * https://twitter.com/hashtag/indieweb
 * https://twitter.com/hashtag/cortexiphan

Tumblr
Tumblr - Tumblr has an amazing display of heterogeneous post types in a single tag aggregation grid., e.g. Tubmlr's /tagged/ path shows a tag grid of the following post types: photo, including animated GIFs, video, note, quote, post with embedded media (photo or video), at least partially displayed by default
 * http://www.tumblr.com/tagged/indieweb
 * http://www.tumblr.com/tagged/cortexiphan

Previously

 * Delicious was well known for tagged links

Limitations
It appears that most platforms/silos limit hashtags to:
 * _a-zA-Z0-9 characters
 * Twitter, max length 139 (since Tweet length is 140)
 * Twitter max promoted trend (hashtag) is 20.
 * most sites disallow hashtags that are just numbers (exception: Instagram allows them)
 * some sites disallow hashtags that start with numbers (exception: Twitter near the end of 2009 started supporting hashtags that start with numbers per the increased frequency of use, e.g. #2009resolution.)

See also:
 * https://moz.com/blog/how-hashtags-work-on-twitter-instagram-google-plus-pinterest-facebook-tumblr-and-flickr

person tag in plain text

 * See: person-tag plain text authoring

Regex
Check out Twitter's regex: https://github.com/twitter/twitter-text/blob/master/js/twitter-text.js#L135-L141

The following are a coarse approximations which will miss numerous international (non-English) hashtags.
 * is a regex that will match common hashtags per the documented above, while liberally allowing numbers-only and numbers-starting hashtags, limited to hashtags that will fit on Twitter.
 * is shorter.
 * is what undefined is using in Falcon.

more characters
undefined I have use-cases for more characters than the "usual" / Twitter’s regex. E.g. (from https://github.com/w3c/csswg-drafts/labels?page=1&sort=name-asc)
 * ' ': "Needs Thought" (will use "__" for ' ' per Falcon as noted below)
 * '-': "css-ui"
 * '/': "unknown/future spec"

hashtags for tags with spaces
Examples: So having a way for hashtags to link to categories with spaces is desirable
 * Many WordPress blogs have categories with spaces in them.
 * Feed Validator doc of category element has  example
 * undefined: some thoughts here for now: Falcon
 * Leaning towards "__" (double underscore = space)

Accessibility
Consider capitalizing the first letter of each word in your hashtags because screen readers will announce each word separately.

"Did you know that when you capitalize the first letter of each word in your hashtag, it's easier for everyone to read? Screen readers will announce each word separately. Compare #MakeItEasyToRead to #makeiteasytoread #SocialMedia #accessibility"

@redcrew September 23, 2019 (archived)

"This is your random reminder that capitalizing each word in a hashtag means screen-readers can parse the words correctly for sight-impaired Tweeps. #AccessibilityIsPrettyCool"

@HollyGoDarkly March 8, 2019 (archived)


 * Idea: have your CMS (semi?) automatically help you auto-capitalize the words in hashtags to help with accessibility/readability

IndieWeb-centric hashtags
Some hashtags commonly used by the IndieWeb community:
 * #IndieWeb (naturally)
 * #IndieWebCamp
 * #ownyourdata
 * #NewwwYear
 * #LetsFixThis

Notable IndieWeb related hashtags

 * #DeleteFacebook