hashtags

From IndieWeb
(Redirected from hashtag)

This article is a stub. You can help the IndieWeb wiki by expanding it with relevant information.


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

How to

Markup

Mark up hashtags inside an h-entry with p-category.

Also use rel=tag 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.

IndieWeb Examples

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

Tantek Çelik uses and supports hashtags in his note posts:

Writing notes:

  • prefer capitalizing words in multi-word hashtags (published in posts since 2019-350) to help screenreaders discern word boundaries and better pronounce such hashtags
    • e.g. #getUp #optOutside #dawn #wakeUpTheSun
    • only capitalize second and latter words in a hashtag, leaving the capitalization of the first (or only) word in a hashtag to indicate whether the hashtag is a common noun (lowercase) or proper noun (capitalized).
    • https://tantek.com/2019/350/t1/get-up-do-more first post I can find where I deliberately capitalized only the second and latter words of multiword hashtags. The immediately prior post has all-lowercase multiword hashtags. Prior examples of capitalized hashtags appear to be of capitalized / Title Cased proper nouns, likely only due to preserving case from original text, rather than explicitly capitalizing for/in a hashtag in particular.

Implementation notes:

  • initial (non-linked) regex used: /(^|\s)#([\w\:\.\/\-]){1,139}/

See additional bits about my use of tags in general:

Jamie Tanna

  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

gRegor Morrill uses hashtags with p-category microformats on articles since 2019-11-01. They are not currently linked to a tag aggregation page for similar posts.

Note in the markup the # is outside the p-category: #<span class="p-category">nablopomo</span>

Sometime in late 2022 I started displaying hashtags similarly on notes. A recent example:

Anthony Ciccarello

 Anthony Ciccarello uses 11ty to manage tags. He has a /posts/tags/ page listing all tags used based on their frequency but can sort those tags alphabetically on the client side. A few tags are manually identified as "featured" tags to highlight interesting collections of content.

  • Uses p-category microformats
  • Some tags include spaces, resulting in tag page URLs with an unsightly %20
  • Tags are used as if case sensitive but not implemented correctly, losing the differentiation of #SuperBowl sports posts from #SuperbOwl owl posts
  • Tag pages complicate multi-language posts as they share the same tags and time resulting in multiple copies of the same post like on the Oaxaca page
  • Any in-content hashtags are manually linked and need to be repeated in the tag metadata

Add yourself!

Add yourself here… (see this for more details)

FAQ

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.

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.:

Twitter

Twitter - notes (with embedded media), e.g.

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

Previously

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.[1]
  • 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:

Brainstorming

person tag in plain text

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.

  • /#[_a-zA-Z0-9]{1,139}/ is a regex that will match common hashtags per the #Limitations documented above, while liberally allowing numbers-only and numbers-starting hashtags, limited to hashtags that will fit on Twitter.
  • /#\w{1,139}/ is shorter.
  • /(^|\s)#([\w\:\.\/\-]){1,139}/ is what Tantek Çelik is using in Falcon.

more characters

Tantek Çelik 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#tags_with_spaces 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

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:

Notable IndieWeb related hashtags

See Also

Retrieved from "https://indieweb.org/wiki/index.php?title=hashtags&oldid=111060"